step back message (fixes #93)

src/index.html

@@ -28,7 +28,7 @@
       effect-bloom="strength: 1"
       gpu-preloader
       loading-screen="backgroundColor: #000;"
-      overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #inGameMenu"
+      overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #inGameMenu, #stepback"
       pool__beat-arrow-blue="mixin: arrowBlueBeat; size: 5; container: #beatContainer"
       pool__beat-arrow-red="mixin: arrowRedBeat; size: 10; container: #beatContainer"
       pool__beat-dot-blue="mixin: dotBlueBeat; size: 10; container: #beatContainer"
@@ -79,6 +79,7 @@
         <img id="noiseTexture" src="assets/img/noise.png">
         <img id="neonImg" src="assets/img/neon.png">
         <img id="sparkImg" src="assets/img/spark.png">
+        <img id="stepbackImg" src="assets/img/stepback.png">
 
         <a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.7; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.18"></a-mixin>
         <a-mixin id="font" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
@@ -231,12 +232,15 @@
         {{ saber('right', 'left', '#78AAFF', 'cyan') }}
       </a-entity>
 
+      <a-entity id="stepback" geometry="primitive: plane; width: 0.5; height: 0.25;" position="0 1.6 -1.55" material="shader: flat; src: #stepbackImg; transparent: true; opacity: 0;"></a-entity>
+
       {% if not IS_PRODUCTION %}
         <a-entity id="mouseCursor" mixin="raycaster" cursor="rayOrigin: mouse"
                   bind__raycaster="enabled: !inVR" raycaster="showLine: false"></a-entity>
         <a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"
                   bind__cursor-mesh="active: menuActive"></a-entity>
       {% endif %}
+
     </a-scene>
     <a id="vrButton" href="#" title="Enter VR / Fullscreen"></a>
   </body>