Designing a WebVR Game With A-Frame – Designer vs. Developer #18

Designing a WebVR Game With A-Frame – Designer vs. Developer #18


MUSTAFA KURTULDU: So, I
mean, that still blows my mind, the idea of like– I know designing in the browser
is the way we should really be doing things. ADA ROSE CANTON: What may
have taken me two or three months to write
before using Three.js, now may take me like a
week or two with A-Frame. [MUSIC PLAYING] MUSTAFA KURTULDU: Recently
you designed a game in a week based on anxiety. Could you explain a bit? Like, what was the process
of you iterating or sketching the idea of– how did you
come up with the process? ADA ROSE CANTON: OK, so
the game started out– it was like a week hackathon
based around the annual Games Done Quick event. And so the idea was you
build a game quickly during the event where people
complete games quickly. So I thought I’d give that a go. I have an idea of how I could
slot together an engine based out of few components. The topic itself
was basically me being like, what’s the most
interesting thing that’s happened to me recently
that I can talk about? I was just like, OK, well, I’ve
been having anxiety attacks recently. I’ll make a game about that. I started looking
at Twinery, which– it’s a game engine
for text-based games. So you click through text,
like you read passages. You can expand sections. And you read through
a story, much in like a choose-your-own
adventure format. MUSTAFA KURTULDU: Yeah. It’s like the island
adventure type games, yeah. ADA ROSE CANTON: And I thought,
yeah, that’s really cool. It’s a nice way to
explore the world. But I have a 3D
graphics background. I really enjoy doing
3D development. And I’m– kind of want to
give a 3D aspect to this game. So part of the
challenge was kind of crowbarring 3D graphics
into a narrative engine that’s designed for text-based games. So fortunately, Twinery
is all web based. So looking at a few engines– so I was looking at Babylon,
or Three, and A-Frame. So in the end, I
settled on A-Frame. Because the cool
thing about that is that, because it’s based
on HTML, it’s very easy for me to inject it straight
into the engine and into the big HTML file. So I started looking at
hacking around the Twinery page to shrink the passages down into
a little text box at the bottom and drop the engine behind it. And then I had a
thought to myself. I’ve got a week to
make an environment, do animations and interactions. So I used Achilogic’s 3d.io tool
to produce some architecture, like an apartment
building to explore. I picked that
because, again, it’s another tool that works online. So I don’t need to download
and install anything, because I’m building this
whole thing on my Chromebook. And the cool thing about that
is that they import directly into A-Frame, so I can
build it on the thing and include a line of
code in my Twinery game. And boom, I’ve got my
environment, my A-Frame scene. And then I spent a few days
hacking in interactions, so you can click on it with a
mouse or swipe with your thumb on a phone screen. And it works. So yeah, it pretty much– because of the power of A-Frame,
which is designed to work on desktop computers
and phones– it was responsively designed
pretty much out box. But yeah, I ended up
writing a medium post about all the little hacks I had
to do to get stuff integrated. But yeah, I got to the point
where I had the game itself, the engine completed, but
no narrative, and about two or three hours left. So I was just like, ah, cramming
in some story, type something up. So you can probably speed run
the game in about 45 seconds. It’s not super long. There’s about seven passages. But there are some
nice Easter eggs. And it was just a cool
thing to show that, yeah, given tools that are
based in the web– so Glitch for hosting, Twinery
for making the game engine, Achilogic’s 3d.io for
making the environment, and A-Frame as the game engine– I could just plug all
these bits together with a little bit of JavaScript
to grease the wheels a bit. And it worked. And it works really very well. And I’m a very happy with it. MUSTAFA KURTULDU: When you’re
designing the games that you’ve made, do you think about– like, when I’m coming
to design stuff, there’s a pen and paper sketch. And I have to think about
the environment space. I mean, 3D stuff goes
way over my head. I can only think in 2D. What is the process that
you usually go through? Is it kind of sketchy? Or is it you’re
just hacking to see how you can push the technology
to do what you want it to do? ADA ROSE CANTON: No,
it’s kind of sketchy. Except instead of
sketching pen and paper, or using models, or boxes– so because I do most my
3D development in A-Frame these days, I tend to drop
in some basic elements. And then I’ll open up
the A-Frame Inspector, which is like the
dev tools inspector, except it’s built into
the A-Frame library. So if you press Control or I,
it gives you a little 3D editor where you can add new elements,
change components around. So then I’d start moving
stuff around, placing it. And then I’d copy and paste
the HTML back into my editor. Or if I’m doing in it Glitch, I
might just type in a few lines, refresh it. Ah, it looks not quite like
I want, do it again, then try it to start on my phone
or on my [INAUDIBLE] VR, and see what it’s like, and
then keep rapid prototyping. Because I still
code like it’s 2003. And I’ll be make some
changes in a text file, and refresh the browser,
and see what changed. And it worked
really well for VR. Because one line of HTML gives
me a sphere with some material and describes it quite nicely. So I can very, very
rapidly build up a scene, download some objects
from Google Poly, and just put them in,
and place them around, tweak some lighting. To change the lighting
is just one line of code. So it’s kind of like sketching– MUSTAFA KURTULDU: But
designing with code or sketching with code. ADA ROSE CANTON: Yeah. I mean, I’ve been a web
developer since the early days of the web. And sketching with
HTML is how I’ve– like if I wanted
to demo a website, I would throw some
HTML together. And I’m doing the
exact same processes, but instead of getting a web
page, I get a 3D environment. MUSTAFA KURTULDU: You
make it sound so easy. ADA ROSE CANTON: It really is. Like, I’ve got 12-year-olds
coding full VR scenes in under an hour. MUSTAFA KURTULDU: Oh, wow. ADA ROSE CANTON: If you
want to get started with VR, but you find JavaScript
and web shell intimidating, but HTML seems
friendly and fluffy, A-Frame is a wonderful
place to start. [MUSIC PLAYING] SPEAKER: For like
each microsecond that you were waiting, you were
using a percentage of people away from the site,
which is really nice. But it’s a very blunt tool. Performance cannot just be
applied as this kind of one size fits all to
every single solution.


11 thoughts on “Designing a WebVR Game With A-Frame – Designer vs. Developer #18

  1. i am working on something very much like this, but A-Frame and Quest, the interactive fiction engine (also web based.)! I am calling it "Narrated Reality" and it operates on a phone, A-frame full screened, in a VR headset (Google Cardboard). Kind of point- and-click game format, with the 2D screen replaced with a 3D environment. To click, you gaze in a certain direction (the mouse functions in VR are replaced with a fusor, instead of a cursor). Looking at (clicking on) an object in the room triggers events. events are audio outputs, (sound files, or generated speech) to narrate a description of rooms, actions, objects, situations, & puzzles. The narration is designed to induce imagining & feelings. The graphics are rendered in the brain, "like a movie in your mind; a Virtual reality for the blind." (and the not blind, too). The more you look in a particular direction the more you investigate and interact with narrated objects.
    The rest is basically regular Interactive Fiction gaming.
    As an art form, it meets somewhere in the middle between the detail and nuances of words written out, with the ease of an audio-book, and the interactivity of a Game. All amalgamating an experience described as beyond cinematic.
    Technically, this may be a new form of literature, worthy of critic. The way things are described and the way information is distributed will be unique to the medium, Narrated Reality; "NR" for short.
    A new genre, if you will: "Video-less game." Though the goal is to describe the game-world as if to a blind person, images can be utilized, too, to help create a more immersive experience (for the sighted.)
    There is an art and a science to it.
    Sorry for the rant, just wanted to share. There is sooo much more to this. my website and dev blog: supersciencestudios.com. look for "Holonovels" which is what I call one of these completed games. Thanks!

  2. Really awesome, I've been working with AFrame and AR.js to make some pretty impressive AR scenes running in browsers. Do you have any advice for someone just getting into modeling? I've been thinking of learning 3dsMax but I'm hesitant because of the price tag. Also what do you think the future of glTF is going to be for models, animations and browsers in the future? Thanks again for this excellent content. I look forward to the future 😎

  3. Wow this interview format is amazing! It's my 2nd day with AFrame for a large project and this video gave me insight into what's available

  4. Great work. Do you know how to use a IP camera (wifi camera) with webVR javascript and HTML5 (A-Frame, Three.js) .?. I'm looking for code examples to use an external camera for smartphone.

Leave a Reply

Your email address will not be published. Required fields are marked *