Action Hero Academy Shooting Range

a js13k post-mortem

I am very lucky to work at Villanova University. The fact that I was able to create a WebVR demo on technology I don't own in two weeks is incredible and I've never felt more empowered.

I was attending the opening of the newest area of campus, The Commons, and I was directed to the new TechZone. I went in and was floored to see an Oculus Quest just sitting on a table. I played Beat Saber, of course, but over the techno music I heard the staff mention that they were hoping someone would use the technology to make something.

The next day, I stumbled upon the fact that js13k had been running for two weeks and had a WebVR category. How lucky is that?

The Ideas

I had a hard time with the 2019 theme: back. I had never worked in 3D before, let alone VR, so I knew needed to keep my idea trim. The first three things that popped into my head: "get back home", "backwards", and "get back here".

Get Back Home

I wanted to focus on my favorite way to move around in VR: climbing. Of all the ways they have experimented with moving around without making users sick I think the top three are climbing, teleporting, and kayaking.

I thought it would be fun to make a puzzle game where you have to pull yourself along to get back home. The constraint I imagined is that each block would only allow you to pull yourself in one direction, along a fixed axis. I thought this would be an interesting way to make navigation challenging and intuitive. I made a 2d prototype in p5.js to see how the math felt. It wasn't as wild as I thought.

Backwards

I needed a backup idea that was less ambitious. I thought it would be fun to mess with the camera because I hadn't seen anything like that in a VR game. I figured it would be easy to make a shooting range and then mess with the camera.

I wasn't thrilled about doing a game with guns in it, but I was motivated to experiment and I thought this was a very attainable idea.

Get Back Here!

I wanted to make a game that makes the player say "get back here!". I came up with the idea of a space station repair game where your tools keep floating away. This draws on the climbing movement as well, but the physics made this untenable. Also, I thought of this idea during the final week and switching sounded insane. Maybe expect a second, unofficial entry in a month or so. ;)

Making Things Move

It was time to tackle the gear and make sure I could actually do what I needed to be done. I decided to go with the climb home game so I wanted to be able to get into VR and be able to move the camera. I chose AFrame because I liked the HTML for making geometry. I figured once I had the basics down I could mess with the HTML to make levels and I thought that would go better than using Babylon or Three.js directly. Also, I was probably going to need text at some point. I stopped by the TechZone and borrowed the Quest.

Oculus Quest: Session 1 of 4

The first session I had with the Quest only lasted an hour but was encouraging. I found some good demos to help me get the basics of VR started. I already was running into an unexpected problem: button input. I expected there to be good controller events that I could hook into but there were dozens of similarly named events and I had a hard time getting any of them to work. I finally discovered that "mousedown" was good for the triggers on the Oculus Quest and I called it a night. I could point at blocks in VR and turn them orange with a button press. T-Minus 12 hours of hands-on dev time left.

Thus began the ballet of what would be the next two weeks: limited time with the Quest and figuring out what I could do with any of my very hand-based ideas on my own. I messed around with the dragging physics some more and read lots of forums about moving the camera while VR had control.

  1. The VR camera seemed to be a system level thing that was hard to overpower.
  2. Even if I could switch cameras I'd need to render all of the stereo camera goodness, copying who knows how much work and code from the libraries I was using.
  3. Forcing someone to move in a locked direction when they expect to go in a slightly different direction is Sick City.

Oculus Quest: Session 2 of 4

I was afraid I was going to run out of time. It was time to switch to the backup idea: backwards shooting range.

p{It was now the week of the deadline. I could get maybe three more sessions with the Oculus Quest, four hours each if no one else wanted it. After trying a few camera tricks I'd found online to no avail, I decided to use the time I had to get the controls down. I wanted to be able to shoot something. I had also come up with something to spice up the range a little: colored targets. To destroy targets, you had to shoot them with the same color gun. It took all four hours to build the basics of pick up, put down, point, shoot but it was a blast! I really love working in VR and this session told me that everythning was going to be alright. T-Minus 8 hours of hands-on dev time.

I was heading out the door for my second to last session with the VR kit and I was talking to my coworker about my problem. He said nothing but his very loud listening helped me realize: I don't have to overpower the camera, I can move the whole world! If I could add the hand controllers as a child of the world, I could move them too! One rotation attribute later and it was go time!

The Meat and the Marrow

cue the Bach

I had the beating heart of my game. Let's kick the tires.

Controlling the Controllers

The most technically challenging thing I encountered were the controllers. In AFrame, the controllers are automatically detected and their models imported. This is so nice that I was surprised how difficult it was to figure out how to actually use any input.

You can get the position easily with el.object3D which is how AFrame exposes the Three.js underbelly that you need to tap into actually do a lot of things. For each other kind of control you want, you need to set specific attributes to bind specific components:



                 

                                                       

The Finish Line

The Cutting Room Floor

Coming Soon