Making the WebVR Game at MozFest
The arrival of Virtual Reality revealed a whole new world of potential for interactions. We finally have a platform revolutionizing how the user sees and interact with content. With WebVR, we get a Web API that enables us to present Virtual Reality experiences directly through a browser, allowing us to design engaging experiences for all users on any device!
When Diego Gonzalez, from the devrel Samsung Internet UK team, reached out to me with the proposition to do something for the Mozilla Festival, I saw the occasion to dig up an old project of mine: make a WebVR game focusing on collaboration and responsive gameplay using those new possibilities the Web and Virtual Reality were offering. We brought in Fabien Benetou, a WebVR freelance from Belgium, with us and we went on this new adventure!
WebVR: a cross-device and multiplayer solution
One of the main advantages of WebVR, that has always amazed me, is its ability to work on any device. The good old “Write once, deploy anywhere” finally becoming true!
The idea of the game I had was rather simple: make a tower defense game where any device could play, each in its own unique way. I’ve always feel frustrated by VR apps designed for a special kind of headset, and that you couldn’t play them if you didn’t have it…
With WebVR Tower Defender, anyone can join a game and collaborate with others in a fun multi-player party. And we wanted to go further! In order to be able to win the game, you need to collaborate with other devices, as each device’s action doesn’t allow you to get at every type of enemy. This way players are encouraged to cooperate and work together to win the game!
Designing in VR, for VR
Playing with VR content is really fun. Discovering entire worlds that other people have built around us is amazing. You then wonder if this is enough, if this could be done differently, if only that would be changed it would much better, etc.
Then comes a point where you think “Ok, enough pondering, I need to try, I
need to make VR content!”. The problem is… making 3D object, even simple things like a spoon, is really hard. You have to move vertices, change the view point to make sure you are actually aligned, optimise the number of vertices to make sure it works on small devices like a phone…
VR can help there. What if instead of rotating your screen along the y axis you could… turn your head? What if instead of moving along the z axis you could… step forward? What if instead of using your mouse to pick then move an object you could literally grab it?
Well with VR you can. With this in mind few weeks ago we explored that specific method, using VR to make 3D assets we would use in our game. We gathered with Fabien Benetou and a few VR enthusiasts in Digityser Brussels for a VR Jam weekend. There were some artists, beginners and some more experienced in VR creations, at the event. We teamed up with Aimé Tribolet, who had experience in Tilt Brush, and designed together the 3D models of our game. He used Google Blocks, that he never tried before but got a good grip on it after a few tries.
At the end of the weekend, even though everything wasn’t finished, we managed to have enough assets to get going and have a visually pleasant game to work on!
Using A-Frame to handle game components
When it came to choosing the technology to use for developing the game, we had multiple choices. As of today, you can develop for WebVR using THREEJS, the most common library, BabylonJS, Microsoft’s open-souce library, ReactVR, the adaptation of the React framework for VR, and A-Frame, a framework developed by Mozilla over THREEJS.
The choice for us was rather obvious. The three of us had experience in using A-Frame, and its entity-component system enabled us to work easily by separating tasks by specific functionalities without too much conflict.
Also, one of our intent in this WebVR game is to enable users to remix our project and make it their own. A-Frame is perfect for this as you can easily pick a specific component and modify it to your own use. So it fitted exactly to what we wanted to do.
Mozilla Festival: showing open digital innovation
By participating in the Mozilla Festival, we wanted to show that the Web is the best place to innovate. By making our content open source and using A-Frame, we’ll enable people to easily remix it, change what they want and publish their own game. The project will be published through Glitch which is one of the easiest platform for remixing Web projects.
During our session, the participants will be able to play our game, and discover the different interactions possible. Participants will also be invited to customize the game, either by creating their own 3D models to integrate in the game (using different set of creation tools on desktop or in VR), or by developing their own game components (by remixing existing A-Frame components we’ll have developed).
Going further
We’ll be presenting this game at the Mozilla Festival on the 29th of October at 3.15pm so Join Us There!
But that’s just the first step! What we really wanted to show through this game is that WebVR isn’t just for boring 360° pictures/video. One of the main values of VR is empowering the user by enabling new interactions. By giving its experiences access to a wide range of devices, WebVR enables for a lot of different experiences, unique in their own, adapted to the device we use.
We hope that this project will give ideas to others to experiment, develop, create new empowering experiences, and we’ll continue supporting this game to make it more accessible and more fun in the future.
After the MozFest session we’ll write a follow-up article with the feedback from our session and access to the code for anyone to get a kick at it!
See you at MozFest or somewhere else!
Thomas, Fabien and Diego
