4 min read

Jan 6th, 2018

I'm Learning VR Day 2: Animations and Gameplay

by Evan Mays

I'm going to make a virtual reality game in 21 days. My first day was about making basic shapes and putting them into place. Today I've animated the game to be playable.

When I started to learn VR, I expected it would take at least a week to get a basic version of the game running. However, it turns out A-Frame (read the definition here) makes life easy for animating.

The way animations work in A-Frame is I set the original position, in XYZ coordinates, then I set the end position. I can also choose if I want the object to move from point A to B in 5 milliseconds, 500 milliseconds, or as many milliseconds as I want.

Coding the Gameplay

I am not using the virtual reality headset since there is no way for the user to press any buttons while their headset is on. So, I'll have to get around to fixing that tomorrow since using a headset for VR is the whole point. Right now, the game is only playable in my web browser.

I started with the basics. "Press spacebar to start the game."

Then, people pop up from behind crates, and you have to shoot them before they disappear, which is every 5 seconds. Once they're gone, a new set of enemies show up from behind a different set of crates.

I set up a randomizer, so every 5 seconds each crate has a 30% chance of having an enemy pop up behind it.

I took the random idea a step further and made 1 in 20 of the people that pop up be your teammates. This way it's a challenge to avoid shooting your allies.

I then took the whole concept a step further and added drones that fly across the ceiling. Just like the people behind the crates, the drones are usually enemies, but sometimes they are allies.

I then took it a further step further and added a sound effect to the laser beam.

After getting this all working, I added a scoreboard. So, technically the game is done. But really, my baby is still ugly. And it doesn't get progressively harder like I originally envisioned, so I'll use my last 19 days to perfect it.

The green guys are the enemies, and the red guys are allies. Green means you should shoot them, red means stop.

This video has sound.

Challenge of the Day? Shooting Lasers

Here is the simple part.

When the player presses the spacebar, the crosshair appears in the middle of their screen. The player has to adjust their vision to make sure the enemy falls within that crosshair. The blast takes a second to charge up, but once it's charged, BOOM!

Here's the hard part.

How does the computer know what is in the center of those crosshairs? It's easy for us to distinguish, but not so easy for a machine to figure it out.

To make the laser delete the enemies that the player shot, I learned that I had to use ray casting.

What is Ray Casting?

It's the foundation of 3d games.

Ray casting lets the game know what is in front of the player. In my game, the player shoots lasers from their eyes. So I used ray casting to determine what the user's character is looking at when they blast the laser beam.

Ray casting makes a straight line. The line starts in the character's eyes. Then, the line extends in the direction the eyes are pointing. As the line stretches infinitely far away, the computer is looking to see if anything hits the line.

If that line hits something, then the character is looking directly at that object.

Pretend the image below is a picture taken from your eyes. With ray casting, the computer will calculate that you are looking at the boat in the middle.

Here's another image. This one is a side view.