Making my first WebVR game using A-Frame
I thought it was about time to try my hand at WebVR. I’ve played with regular old VR before, but for the fun short experiences I like to make, WebVR seemed like a better option because IT’S ON THE INTERNET. You can share it with a link and view it in a browser so you don’t have to jump through the hoops of downloading and installing apps to your computer or phone.
VRTogether, a 2 month long virtual hackathon was running and it seemed like the perfect time to get started, I hadn’t been to a hackathon in a few weeks so I was in the mood to build something new, that and I had recently joined the Samsung Internet developer advocacy team and I wanted to work more with the web.
A-Frame was my framework of choice. The docs are pretty good, it is feature-full and it has a visual inspector you can open up to debug and move things about. The visual inspector reminded me of Unity, a game engine I am comfortable using.
I started by going through the examples on A-Frames site. I skimmed through their code, I made sense of most of it. There are entities which can have parent-child relationships, but I couldn’t get my head around how the scripts work. I went through a few tutorials which helped figure it out, such as A-Frame-school.
I played about with each of the feature I learnt and thought about how I could combine them to make something fun that fits with the hackathon theme, “togetherness”, and would work well as a VR experience. I thought of simple game where you chase around animals until they run into each other.
That simple idea actually wasn’t simple enough so I took out the parts with animals and moving the player.
Soon I had an idea that I could actually make:
A game where you look at 2 rings to make them spin and have to time which rings to set off to get them to overlap.
You view it here: https://samsunginter.net/aframe-ducks/prototype.html
That version turned out pretty well. I combined some simple things I found from examples into my own project: a few different animations, a script that changes an object colour when hovered over and displaying text.
I did have to get some help from Ada Rose Edwards writing a function to check the collision of the two rings because I couldn’t figuring out the syntax.
Now that I had the basics down I could build from them. I wanted to flesh out the basic project I had. I wanted to make use of the 3D space VR provides, add in some cool simple graphics, more animations to make it more interesting and to make the gameplay needlessly harder.
I used a-ocean to create the water, and used an image to create the sky effect, as a patterned background made it easier to know where you are facing. The ducks are just boxes that have been scaled which orbit around the smaller cubes, which produces a nice movement patterns. The signs are made up from two boxes, and the score is kept and updated through a function I wrote.
The project and all the code for it is online, so feel free to try it out and build on top of it.