refactor gameover animations

2018-10-10 02:24:22 -07:00
parent 46b7b19b5a
commit f46f4e04b5
6 changed files with 77 additions and 98 deletions
--- a/src/components/beat-loader.js
+++ b/src/components/beat-loader.js
@@ -24,10 +24,8 @@ AFRAME.registerComponent('beat-loader', {
    this.bpm = undefined;
    this.first = null;
    this.lastTime = undefined;
-    this.speed = 1.0; // for slowing down on gameover

    this.el.addEventListener('cleargame', this.clearBeats.bind(this));
-    this.el.addEventListener('slowdown', this.slowDown.bind(this));
  },

  update: function (oldData) {
@@ -86,8 +84,6 @@ AFRAME.registerComponent('beat-loader', {
    var msPerBeat;
    var noteTime;

-    delta *= this.speed;
-
    if (!this.data.isPlaying || !this.data.challengeId || !this.beatData || !audioEl) { return; }

    notes = this.beatData._notes;
@@ -199,13 +195,8 @@ AFRAME.registerComponent('beat-loader', {
    this.audioSync = null;
    this.first = null;
    this.lastTime = 0;
-    this.speed = 1.0;
    for (let i = 0; i < this.beatContainer.children.length; i++) {
      this.beatContainer.children[i].components.beat.returnToPool(true);
    }
-  },
-
-  slowDown: function (ev) {
-    this.speed = ev.detail.progress;
  }
 });
--- a/src/components/beat.js
+++ b/src/components/beat.js
@@ -76,9 +76,8 @@ AFRAME.registerComponent('beat', {
    var blockEl = this.blockEl = document.createElement('a-entity');
    var signEl = this.signEl = document.createElement('a-entity');

-    this.el.object3D.visible = true;
-    blockEl.setAttribute('material', {opacity: 1});
-    signEl.setAttribute('material', {opacity: 1});
+    blockEl.setAttribute('mixin', 'beatBlock');
+    blockEl.setAttribute('mixin', 'beatSign');

    // Small offset to prevent z-fighting when the blocks are far away
    signEl.object3D.position.z += 0.02;
@@ -434,30 +433,20 @@ AFRAME.registerComponent('beat', {
          }
        }

-        this.el.object3D.position.z += this.data.speed * this.system.speed * (timeDelta / 1000);
+        this.el.object3D.position.z += this.data.speed * (timeDelta / 1000);
        this.backToPool = this.el.object3D.position.z >= 2;
-
-        if (this.system.speed < 1.0) {
-          if (this.system.speed <= 0){
-            this.el.object3D.visible = false;
-          }
-          else {
-            this.blockEl.setAttribute('material', {opacity: this.system.speed});
-            this.signEl.setAttribute('material', {opacity: this.system.speed});
-          }
-        }
      } else {
        // Update gravity velocity.
        this.gravityVelocity = getGravityVelocity(this.gravityVelocity, timeDelta);
        this.el.object3D.position.y += this.gravityVelocity * (timeDelta / 1000);

-        rightCutNormal.copy(this.rightCutPlane.normal).multiplyScalar((this.data.speed * this.system.speed  / 2) * (timeDelta / 500));
+        rightCutNormal.copy(this.rightCutPlane.normal).multiplyScalar((this.data.speed / 2) * (timeDelta / 500));
        rightCutNormal.y = 0;  // Y handled by gravity.
        this.partRightEl.object3D.position.add(rightCutNormal);
        this.partRightEl.object3D.setRotationFromAxisAngle(this.rotationAxis, rightRotation);
        rightRotation = rightRotation >= 2 * Math.PI ? 0 : rightRotation + rotationStep;

-        leftCutNormal.copy(this.leftCutPlane.normal).multiplyScalar((this.data.speed * this.system.speed / 2) * (timeDelta / 500));
+        leftCutNormal.copy(this.leftCutPlane.normal).multiplyScalar((this.data.speed / 2) * (timeDelta / 500));
        leftCutNormal.y = 0;  // Y handled by gravity.
        this.partLeftEl.object3D.position.add(leftCutNormal);
        this.partLeftEl.object3D.setRotationFromAxisAngle(this.rotationAxis, leftRotation);
@@ -503,12 +492,3 @@ function getGravityVelocity (velocity, timeDelta) {
  const GRAVITY = -9.8;
  return velocity + (GRAVITY * (timeDelta / 1000));
 }
-
-
-/**
-  * Beat system to coordinate the speed down of all beats on game over
-  */
-
-AFRAME.registerSystem('beat', {
-  speed: 1.0
-});
--- a/src/components/gameover.js
+++ b/src/components/gameover.js
@@ -5,38 +5,35 @@ AFRAME.registerComponent('gameover', {

  init: function () {
    this.beatContainer = document.getElementById('beatContainer');
+    this.gameOverEls = document.querySelectorAll('[animation__gameover]');
  },

  update: function (oldData) {
    var data = this.data;
-    if (!oldData.isGameOver && this.data.isGameOver){
-      console.log('starting slow down...');
-      this.el.sceneEl.setAttribute('stage-colors', 'red');
+    if (!oldData.isGameOver && this.data.isGameOver) {
+      this.triggerAnimations();
      this.countDown = 1;
-      this.lastTime = performance.now();
    }
-    if (oldData.isGameOver && !this.data.isGameOver){
-      this.resetStage();
+    if (oldData.isGameOver && !this.data.isGameOver) {
+      this.reset();
    }
  },

  tick: function (time, delta) {
    if (!this.data.isGameOver) { return; }
-    if (this.countDown >= 0){
-      this.el.sceneEl.emit('slowdown', {progress: this.countDown});
-      //this.beatContainer.object3D.position.z = -Math.pow(1 - this.countDown, 2) * 1.5;
+    if (this.countDown >= 0) {
+      this.beatContainer.object3D.position.z = -Math.pow(1 - this.countDown, 2) * 1.5;
      this.countDown -= delta / 1000;
-      this.el.sceneEl.systems.beat.speed = this.countDown;
-    }
-    else {
-      this.data.start = false;
-      setTimeout(()=>{ this.el.sceneEl.emit('pausegame'); }, 1000);
    }
  },
-  resetStage: function () {
-    this.data.start = false;
+
+  reset: function () {
    this.beatContainer.object3D.position.z = 0;
-    this.el.sceneEl.systems.beat.speed = 1.0;
-    this.el.sceneEl.setAttribute('stage-colors', 'blue');
+  },
+
+  triggerAnimations: function () {
+    for (let i = 0; i < this.gameOverEls.length; i++) {
+      this.gameOverEls[i].emit('gameover', null, false);
+    }
  }
 });
--- a/src/components/stage-colors.js
+++ b/src/components/stage-colors.js
@@ -1,7 +1,8 @@
 AFRAME.registerComponent('stage-colors', {
+  dependencies: ['background', 'fog'],
+
  schema: {
-    default: 'red',
-    oneOf: ['red', 'blue']
+    isGameOver: {default: false}
  },

  init: function () {
@@ -27,39 +28,25 @@ AFRAME.registerComponent('stage-colors', {
    this.smoke1 = document.getElementById('smoke1');
    this.smoke2 = document.getElementById('smoke2');
    this.auxColor = new THREE.Color();
-    this.el.addEventListener('slowdown', this.slowDown.bind(this));
  },

-  update: function () {
-    const red = this.data === 'red';
-    this.backglow.setAttribute('material', {color: red ? '#f10' : '#00acfc', opacity: 0.8});
-    this.sky.setAttribute('material', 'color', red ? '#f10' : '#00acfc');
-    this.el.setAttribute('background', 'color', red ? '#770100': '#15252d');
-    this.el.sceneEl.setAttribute('fog', 'color', red ? '#a00' : '#007cb9');
+  update: function (oldData) {
+    const red = this.data.isGameOver;
+
+    // Init or reset.
+    if (!('isGameOver' in oldData) || (oldData.isGameOver && !this.data.isGameOver)) {
+      this.backglow.getObject3D('mesh').material.color.set('#00acfc');
+      this.sky.getObject3D('mesh').material.color.set('#00acfc');
+      this.el.sceneEl.object3D.background.set('#15252d');
+      this.el.sceneEl.object3D.fog.color.set('#007cb9');
+    }
+
    this.el.sceneEl.systems.materials.neon.color = red ? this.neonRed : this.neonBlue;
    this.el.sceneEl.systems.materials.default.color = red ? this.defaultRed : this.defaultBlue;
-    this.mineMaterial.color = this.mineColor[this.data];
-    this.mineMaterial.emissive = this.mineEmission[this.data];
-    this.mineMaterial.envMap = this.mineEnvMap[this.data];
-    this.smoke1.setAttribute('material', 'opacity', 1);
-    this.smoke2.setAttribute('material', 'opacity', 1);
+
+    this.mineMaterial.color = this.mineColor[red ? 'red' : 'blue'];
+    this.mineMaterial.emissive = this.mineEmission[red ? 'red' : 'blue'];
+    this.mineMaterial.envMap = this.mineEnvMap[red ? 'red' : 'blue'];
+    this.mineMaterial.needsUpdate = true;
  },
-
-  slowDown: function (ev) {
-    var progress = Math.max(0, ev.detail.progress);
-
-    this.auxColor.setRGB(0.2 + progress * 0.46, 0, 0);
-    this.el.sceneEl.setAttribute('fog', 'color', '#' + this.auxColor.getHexString());
-
-    this.auxColor.setHSL(0.0014, 1, 0.23 * progress);
-    this.el.sceneEl.setAttribute('background', 'color', '#' + this.auxColor.getHexString());
-
-    this.auxColor.setRGB(0.1 + progress * 0.9, 0.066 * progress, 0);
-    this.sky.setAttribute('material', 'color', '#' + this.auxColor.getHexString());
-
-    this.backglow.setAttribute('material', 'opacity', 0.2 + progress * 0.5);
-    this.smoke1.setAttribute('material', 'opacity', progress);
-    this.smoke2.setAttribute('material', 'opacity', progress);
-  }
-
 });
--- a/src/index.html
+++ b/src/index.html
@@ -9,27 +9,30 @@
    <audio id="introSong" src="assets/sounds/introSong.ogg" loop></audio>

    <a-scene
+      mixin="gameoverAnimation"
      bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty; isPlaying: isPlaying"
      bind__gameover="isGameOver: isGameOver"
      bind__intro-song="isPlaying: menu.active && !menuSelectedChallenge.id"
      bind__song="challengeId: challenge.id; isPlaying: isPlaying && !challenge.isLoading"
      bind__song-preview-system="selectedChallengeId: menuSelectedChallenge.id"
+      bind__stage-colors="isGameOver: isGameOver"
      bind__overlay="enabled: !isPlaying"
+      animation__gameover="property: object3D.background; type: color; to: #750000; startEvents: gameover"
+      animation__gameoverfog="property: components.fog.el.object3D.fog.color; type: color; to: #330000; startEvents: gameover; dur: 500; easing: easeInQuad"
      console-shortcuts
      debug-controller
      effect-bloom="strength: 1"
      loading-screen="backgroundColor: #000;"
      overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #inGameMenu"
-      pool__beat-arrow-blue="mixin: beat arrow-blue-beat; size: 5; container: #beatContainer"
-      pool__beat-arrow-red="mixin: beat arrow-red-beat; size: 10; container: #beatContainer"
-      pool__beat-dot-blue="mixin: beat dot-blue-beat; size: 10; container: #beatContainer"
-      pool__beat-dot-red="mixin: beat dot-red-beat; size: 10; container: #beatContainer"
+      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"
+      pool__beat-dot-red="mixin: dotRedBeat; size: 10; container: #beatContainer"
      proxy-event__menuleft="event: menuchallengeunselect; to: .menuAnimation"
      proxy-event__menuright="event: menuchallengeselect; to: .menuAnimation"
      proxy-event__cleargame1="event: pausemenuexit; as: cleargame; to: a-scene"
      proxy-event__cleargame2="event: pausemenurestart; as: cleargame; to: a-scene"
      search
-      stage-colors="blue"
      fog="color: #a00; density: 0.035; type: exponential">
      <a-assets timeout="10000">
        <a-asset-item id="arrowObj" src="assets/models/arrow.obj"></a-asset-item>
@@ -68,10 +71,13 @@
        <a-mixin id="font" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
        <a-mixin id="textFont" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>

-        <a-mixin id="beat" beat></a-mixin>
-        <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="beat" visible="false"></a-mixin>
+        <a-mixin id="beatBlock" mixin="gameoverAnimation" animation__gameover="property: components.material.material.opacity; from: 1; to: 0; startEvents: gameover"></a-mixin>
+        <a-mixin id="beatSign" mixin="gameoverAnimation" animation__gameover="property: components.material.material.opacity; from: 1; to: 0; startEvents: gameover"></a-mixin>
+        <a-mixin id="arrowBlueBeat" mixin="beat" beat="color: blue; type: arrow"></a-mixin>
+        <a-mixin id="arrowRedBeat" mixin="beat" beat="color: red; type: arrow"></a-mixin>
+        <a-mixin id="dotBlueBeat" mixin="beat" beat="color: blue; type: dot"></a-mixin>
+        <a-mixin id="gameoverAnimation" animation__gameover="dur: 1000; easing: easeOutQuad"></a-mixin>

        <a-mixin id="badBeat"
          geometry="primitive: plane"
--- a/src/templates/stage.html
+++ b/src/templates/stage.html
@@ -1,6 +1,11 @@
 <a-mixin id="stageLaser" geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>

-<a-sky id="sky" geometry="segmentsHeight: 16; segmentsWidth: 32" material="fog: false; src: #skyTexture"></a-sky>
+<a-sky
+  id="sky"
+  mixin="gameoverAnimation"
+  animation__gameover="property: components.material.material.color; type: color; to: #301000; startEvents: gameover"
+  geometry="segmentsHeight: 16; segmentsWidth: 32"
+  material="fog: false; src: #skyTexture"></a-sky>

 <a-entity
  id="audioAnalyser"
@@ -8,7 +13,13 @@
  proxy-event="event: audioanalyser-beat; to: #logolight, #floor, #twister"></a-entity>

 <a-entity id="stage">
-  <a-entity id="backglow" obj-model="obj: #backglowObj" position="0 0 -50" scale="20 20 20" material="shader: flat; transparent: true; fog: false; color: #f00; src: #backglowTexture; opacity: 0.8"></a-entity>
+  <a-entity id="backglow"
+    mixin="gameoverAnimation"
+    animation__gameover="property: components.material.material.opacity; to: 0.2; startEvents: gameover"
+    obj-model="obj: #backglowObj"
+    material="shader: flat; transparent: true; fog: false; color: #f00; src: #backglowTexture; opacity: 0.8"
+    position="0 0 -50"
+    scale="20 20 20"></a-entity>

  <a-entity id="twister" twister position="0 0 -60" rotation="90 0 0" bind__twister="enabled: !menu.active"></a-entity>

@@ -49,9 +60,16 @@
  <a-entity class="stageLaser" mixin="stageLaser" position="10 2 -38"></a-entity>
  <a-entity class="stageLaser" mixin="stageLaser" position="14 -1.5 -36"></a-entity>

-  <a-entity id="smoke1" geometry="primitive: cylinder; radius: 10; height: 15; openEnded: true; segmentsHeight: 1; segmentsRadial: 9" additive material="repeat: 2 1; side: double; fog: true; src: #smokeTexture; shader: flat; transparent: true; color: #111" position="0 1.4 0" animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 200000; easing: linear; loop: true"></a-entity>
-
-  <a-entity id="smoke2" geometry="primitive: cylinder; radius: 20; height: 15; openEnded: true; segmentsHeight: 1; segmentsRadial: 9" additive material="repeat: 2 1; side: double; fog: true; src: #smokeTexture; shader: flat; transparent: true; color: #111" position="0 1.8 0" animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 243000; easing: linear; loop: true"></a-entity>
+  <a-mixin
+    id="smoke"
+    mixin="gameoverAnimation"
+    additive
+    animation__gameover="property: components.material.material.opacity; to: 0; startEvents: gameover"
+    animation__rotate="property: rotation; to: 0 360 0; easing: linear; loop: true"
+    geometry="primitive: cylinder; height: 30"
+    material="src: #smokeTexture; repeat: 2 1; side: double; fog: true; shader: flat; transparent: true; color: #111"></a-mixin>
+  <a-entity id="smoke1" mixin="smoke" geometry="radius: 10" position="0 1.4 0" animation__rotate="dur: 200000"></a-entity>
+  <a-entity id="smoke2" mixin="smoke" geometry="radius: 20" position="0 1.8 0" animation__rotate="dur: 243000"></a-entity>

  <a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>