miss & wrong beat assets and animations

src/components/beat.js

@@ -43,8 +43,12 @@ AFRAME.registerComponent('beat', {
     this.returnToPoolTimer = 800;
     this.rightCutPlanePoints = [];
     this.leftCutPlanePoints = [];
-    this.missElLeft = document.querySelector('#missLeft'); 
+
+    this.wrongElLeft = document.querySelector('#wrongLeft');
+    this.wrongElRight = document.querySelector('#wrongRight');
+    this.missElLeft = document.querySelector('#missLeft');
     this.missElRight = document.querySelector('#missRight');
+
     this.initBlock();
     this.initColliders();
     this.initFragments();
@@ -97,7 +101,7 @@ AFRAME.registerComponent('beat', {
     var i;
     var size;
     var hitColliderConfiguration =  {
-      position: {x: 0, y: data.size / 2, z: 0}, 
+      position: {x: 0, y: data.size / 2, z: 0},
       size: {width: data.size, height: data.size / 5.0, depth: data.size}
     };
 
@@ -112,7 +116,7 @@ AFRAME.registerComponent('beat', {
     hitColliderEl.object3D.position.copy(hitColliderConfiguration.position);
     hitColliderEl.object3D.visible = false;
     this.el.appendChild(hitColliderEl);
-    
+
     if (data.debug) {
       hitColliderEl.object3D.visible = true;
       hitColliderEl.setAttribute('material', 'color', 'purple');
@@ -185,16 +189,15 @@ AFRAME.registerComponent('beat', {
     });
   },
 
-  missBeat: function (hand) {
-    var missEl = hand === 'left' ? this.missElLeft : this.missElRight;
-    if (!missEl) { return; }
-    missEl.object3D.position.copy(this.el.object3D.position);
-    missEl.object3D.position.y += 0.5;
-    missEl.object3D.position.z -= 0.5;
-    missEl.object3D.visible = true;
-    setTimeout(function () {
-      missEl.object3D.visible = false;
-    }, 3000);
+  wrongCut: function (hand) {
+    var wrongEl = hand === 'left' ? this.wrongElLeft : this.wrongElRight;
+    if (!wrongEl) { return; }
+    wrongEl.object3D.position.copy(this.el.object3D.position);
+    wrongEl.object3D.position.y += 0.5;
+    wrongEl.object3D.position.z -= 0.5;
+    wrongEl.object3D.visible = true;
+    wrongEl.object3D.material.opacity = 1;
+    wrongEl.emit('beatwrong');
     this.destroyed = true;
   },
 
@@ -404,7 +407,7 @@ AFRAME.registerComponent('beat', {
         beatBoundingBox = this.beatBoundingBox.setFromObject(this.blockEl.getObject3D('mesh'));
         for (i = 0; i < saberEls.length; i++) {
           saberBoundingBox = saberEls[i].components['saber-controls'].boundingBox;
-          if (!boundingBox || !saberBoundingBox) { break; } 
+          if (!boundingBox || !saberBoundingBox) { break; }
           if (saberBoundingBox.intersectsBox(boundingBox)) {
             this.destroyBeat(saberEls[i]);
             this.el.sceneEl.emit('beathit', null, false);
@@ -412,8 +415,8 @@ AFRAME.registerComponent('beat', {
           }
           if (saberBoundingBox.intersectsBox(beatBoundingBox)) {
             this.destroyBeat(saberEls[i]);
-            this.missBeat(saberEls[i].getAttribute('saber-controls').hand);
-            this.el.sceneEl.emit('beatmissed', null, false);
+            this.wrongCut(saberEls[i].getAttribute('saber-controls').hand);
+            this.el.sceneEl.emit('beatwrong', null, false);
             break;
           }
         }

src/index.html

@@ -49,8 +49,12 @@
         <img id="playImg" src="assets/img/play.png">
         <img id="skyTexture" src="assets/img/stage/sky.jpg">
         <img id="sliceImg" src="assets/img/slice.png">
-        <img id="beamImg" src="assets/img/beam.png">
         <img id="smokeTexture" src="assets/img/stage/smoke.png">
+        <img id="beamImg" src="assets/img/beam.png">
+        <img id="wrongBlueImg" src="assets/img/wrongblue.png">
+        <img id="wrongRedImg" src="assets/img/wrongred.png">
+        <img id="missBlueImg" src="assets/img/missblue.png">
+        <img id="missRedImg" src="assets/img/missred.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="stageLaser" geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>
@@ -61,11 +65,15 @@
         <a-mixin id="arrow-blue-beat" beat="color: blue; type: arrow"></a-mixin>
         <a-mixin id="arrow-red-beat" beat="color: red; type: arrow"></a-mixin>
         <a-mixin id="dot-blue-beat" beat="color: blue; type: dot"></a-mixin>
+
+        <a-mixin id="bad-beat-anims"
+          geometry="primitive: plane"
+          material="shader: flat; transparent: true"
+          visible="false"
+          animation__posz="property: object3D.position.z; to: -15; startEvents: beatwrong; easing: easeOutQuint"
+          animation__alpha="property: material.opacity; from: 1; to: 0; startEvents: beatwrong; delay: 200; easing: easeOutQuint"
       </a-assets>
 
-      <!-- Missed beat visual indicators. -->
-      <a-entity id="missLeft" geometry="primitive: box; height: 0.2; width: 0.2; depth: 0.2" material="color: red" visible="false"></a-entity>
-      <a-entity id="missRight" geometry="primitive: box; height: 0.2; width: 0.2; depth: 0.2" material="color: red" visible="false"></a-entity>
 
       <a-entity id="beatContainer"></a-entity>
 
@@ -77,6 +85,12 @@
         {% include './templates/menu.html' %}
       </a-entity>
 
+      <!-- Wrong + miss beat visual indicators. -->
+      <a-entity id="wrongLeft" mixin='bad-beat' geometry="height: 0.2; width: 0.2" material="src: #wrongRedImg"></a-entity>
+      <a-entity id="wrongRight" mixin='bad-beat' geometry="height: 0.2; width: 0.2" material="src: #wrongBlueImg"></a-entity>
+      <a-entity id="missLeft" mixin='bad-beat' geometry="height: 0.15; width: 0.3" material="src: #missRedImg"></a-entity>
+      <a-entity id="missRight" mixin='bad-beat' geometry="height: 0.15; width: 0.3" material="src: #missBlueImg"></a-entity>
+
       <!-- Player. -->
       <a-mixin
         id="raycaster"

src/state/index.js

@@ -71,7 +71,7 @@ AFRAME.registerState({
       state.score.combo += 1;
     },
 
-    beatmissed: state => {
+    beatwrong: state => {
       state.score.combo = 0;
     },