Making a VR game with a-frame

Inspired by "Descent".

Built with A-Frame.

Demo video: https://x.com/adrienjoly/status/1280171363110707203 (early version)

How to test it

On a computer (with keyboard)

1. Open https://glitch.com/~pitch-gaudy-acai https://adrienjoly.com/a-frame-descent-vr/ in Google Chrome (or other browser that supports WebXR)
2. Click on "Show"
3. Use the following keys to control the ship:

        W      |     Y    |
      A S D    |   G H J  |     L
               |          |
   translation | rotation | stabilize
   
   SPACE BAR = shoot
   

Press Ctrl-Alt-I to open a-frame's inspector.

In Oculus Quest VR headset (with 2 controllers)

1. Open https://glitch.com/~pitch-gaudy-acai https://adrienjoly.com/a-frame-descent-vr/ in Oculus Browser or Firefox Reality
2. Click on the "VR" button, in the lower-right corner
3. Use your controllers' thumbsticks to control the ship, and the right trigger to shoot
4. Press an "Oculus" button to exit the experience

Is my VR headset supported?

I don't know. 😅 Try it and let me know by posting an issue there: https://github.com/adrienjoly/a-frame-descent-vr/issues

Progress on development

• Detect press on Oculus Quest's joystick => change ground color
• Detect movement on Oculus Quest's joystick => display in JS console
• Display JS console remotely in Brave browser, from Oculus Browser (source), it used to work once or twice. until I got a "DOMException: The specified session configuration is not supported" error.
• Display JS console remotely in Firefox, from Firefox Reality (about:debugging#/runtime/this-firefox)
• Move ship (camera) position (X and Z axes) based on joystick movement
• Use joystick of second controller to change direction (rotate the ship up/down and left/right)
• Fix: keep lateral rotation VS vertical rotation independent
• Move ship forwardaccording to direction, independently from head direction
• Stabilize the ship (parallel to ground) when L or the joystick is pressed
• Draw a simple cockpit around the camera, to make it look more like a ship => wip: how to import from google tilt brush ?
  • convert the .tilt file with something like tilt-brush-toolkit or TiltBrushConverter
  • or import from google poly, using a component like aframe-google-poly-component or aframe-gblock
  • or draw one with tinkerCAD, inspired by descent II => wip
• Draw a basic room
• Add an enemy ship
• Fire a laser when a button is pressed, like in aframe-super-shooter-kit
• Destroy enemy ship when hit by laser
• Bug: in VR, player's head is out of the cockpit. camera's height should not depend on player's height.
• Bug: in VR, controllers are not positioned anymore relative to viewpoint => hide them
• Draw a basic level: two rooms with a corridor, e.g.
  • omgitsraven/aframe-room-component: An A-Frame component for laying out simple rooms connected by doors.
  • I built something with A-Frame in 2 days (and you can too) - Mozilla Hacks - the Web developer blog
  • javascript - Move camera in aframe with physics engine - Stack Overflow
  • donmccurdy/aframe-physics-system: Physics system for A-Frame VR, built on CANNON.js. c-frame/aframe-physics-system: community-maintained fork of n5ro's aframe-physics-system (listed on https://aframe.wiki/en/#!pages/component-directory.md)
• Make ship collide on room walls (e.g. https://jgbarah.github.io/aframe-playground/physics-02/)
• Basic enemy movement: make their ship bounce on room walls
• Make enemy ship occasionally shoot a laser
• Lose a point when hit by laser

Maybe later:

• delegate keyboard controls to https://github.com/donmccurdy/aframe-extras/tree/master/src/controls