Today is day 1 of my challenge to learn virtual reality. I want to create a game, and I've never done any virtual reality before. The first step is figuring out how to make a virtual world. It started off as a cylinder, a block, and a sphere. I added walls, a ceiling, and a TV to develop it further. Eventually, I was satisfied with version 0.1 of my virtual world.
I never really knew where to start. So, I put together a list of tools for the job. It took about an hour of googling to make this list.
I've never heard of half the tools in this list. Luckily, A-frame has excellent guides on their website!
I sourced the idea from an array of movies and games I've watched/played before.
The game features you, the player, as a soldier performing target practice in a gun range. Your goal is to hit the enemies that pop up and avoid hitting your teammates. It's sort of like the game Fruit Ninja (Fruit are enemies, bombs are teammates). I got the idea from a game I used to play called Jak II.
Your weapon is a helmet that lets you shoot lasers in the direction you're looking. So, you turn your head to aim, press spacebar on your computer to fire, then make sure that you don't hit your teammates. If you know superheroes, you'll know which X-men has a super-power like the soldier in my game.
The code all starts with A-Frame. A-frame is the tool that converts my code into a 3d world. Truthfully, I had no idea if A-frame was the right tool. Then, I found a game built with A-frame. The game is called A-Blast, and it's not too far off from the kind of game I want to make.
Play A-Blast: https://aframe.io/a-blast/ (Press spacebar to shoot)
So, with A-Frame I began with the cylinder, the block, and the sphere. This is what that code looks like
<a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene>
The line that starts with a-plane is the floor. The line that begins with a-sky is well, the sky. And so on. The a-scene is my virtual world which includes different pieces such as the sky and the floor.
With just those seven lines of code, I've created a virtual world.
I sucked in all the knowledge I could from A-Frame's website along with some YouTube videos to edit the world. I started with walls and a more prominent floor.
Then came the Lamborghini, the women sitting on a stool, and the U.S. Space Shuttle which was sadly too big to fit in the little room I created.
The women and the Lamborghini are in this photo. They're both all white right now, but you can still make out the woman's face.
I put two of her in there so that you could see the depth in 3 dimensions.
The game is super ugly, I know. Just take a look at it in 21 days, and save your advice until then.
Quick tip for anyone making a VR game: Don't make the walls the same color. It's impossible to tell where one wall ends and the other begins due to lighting.
I added some new wall colors and laid out the scene for the game. You can even move around in it, thanks to WebVR (read about WebVR).
I'll put the virtual world below. Everything looks very rough, so I'll explain what it all means.
The orange boxes on the floor are crates. The purple sticks are enemies/allies that pop up from behind the crates. Those flying orange boxes are either enemy or ally drones that fly around. If you look left, You'll see a TV which keeps track of the score.
Click and drag to look in different places. Use the arrow keys to move around.