From 8338f9e16fd970dfb69a44a49001067059750d8a Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Mon, 8 Oct 2018 17:30:13 -0700 Subject: [PATCH] improve beam resume out of pause menu --- src/components/beams.js | 7 ++++++- src/components/beat-loader.js | 23 ++++++++++++----------- src/components/beat.js | 2 -- src/index.html | 20 ++++++++++---------- src/state/index.js | 1 + src/templates/stage.html | 2 +- 6 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/components/beams.js b/src/components/beams.js index 2594e84..64fd1bd 100644 --- a/src/components/beams.js +++ b/src/components/beams.js @@ -2,6 +2,7 @@ const ANIME = AFRAME.ANIME || AFRAME.anime; AFRAME.registerComponent('beams', { schema: { + isPlaying: {default: false}, poolSize: {default: 3} }, @@ -48,13 +49,15 @@ AFRAME.registerComponent('beams', { } } - this.el.sceneEl.addEventListener('cleargame', this.clearBeams.bind(this)); + this.clearBeams = this.clearBeams.bind(this); + this.el.sceneEl.addEventListener('cleargame', this.clearBeams); }, /** * Use tick for manual ANIME animations, else it will create RAF. */ tick: function (t, dt) { + if (!this.data.isPlaying) { return; } for (let i = 0; i < this.beams.length; i++) { let beam = this.beams[i]; // Tie animation state to beam visibility. @@ -85,6 +88,8 @@ AFRAME.registerComponent('beams', { clearBeams: function () { for (let i = 0; i < this.beams.length; i++) { this.beams[i].visible = false; + this.beams[i].time = 0; + this.beams[i].scale.x = 1; } } }); diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js index a6eb11d..678366a 100644 --- a/src/components/beat-loader.js +++ b/src/components/beat-loader.js @@ -18,6 +18,7 @@ AFRAME.registerComponent('beat-loader', { init: function () { this.audioSync = undefined; + this.beams = document.getElementById('beams').components.beams; this.beatData = null; this.beatContainer = document.getElementById('beatContainer'); this.bpm = undefined; @@ -115,36 +116,36 @@ AFRAME.registerComponent('beat-loader', { const beatObj = {}; return function (noteInfo) { + var beatEl; var color; var orientation; - var el; var type = noteInfo._cutDirection === 8 ? 'dot' : 'arrow'; + color = noteInfo._type === 0 ? 'red' : 'blue'; if (noteInfo._type === 3) { type = 'mine'; color = undefined; } - el = this.requestBeat(type, color); - if (!el) { return; } + beatEl = this.requestBeat(type, color); + if (!beatEl) { return; } beatObj.color = color; beatObj.type = type; beatObj.speed = this.data.beatSpeed; - el.setAttribute('beat', beatObj); - el.object3D.position.set( + beatEl.setAttribute('beat', beatObj); + beatEl.object3D.position.set( this.horizontalPositions[noteInfo._lineIndex], this.verticalPositions[noteInfo._lineLayer], -this.data.beatAnticipationTime * this.data.beatSpeed ); - el.object3D.rotation.z = THREE.Math.degToRad(this.orientations[noteInfo._cutDirection]); - el.play(); + beatEl.object3D.rotation.z = THREE.Math.degToRad(this.orientations[noteInfo._cutDirection]); + beatEl.play(); + + this.beams.newBeam(color, beatEl.object3D.position); if (this.first) { return; } - this.first = { - el: el, - time: noteInfo._time - }; + this.first = {el: beatEl, time: noteInfo._time}; }; })(), diff --git a/src/components/beat.js b/src/components/beat.js index 791a798..b08a7ed 100644 --- a/src/components/beat.js +++ b/src/components/beat.js @@ -53,7 +53,6 @@ AFRAME.registerComponent('beat', { this.missElLeft = document.getElementById('missLeft'); this.missElRight = document.getElementById('missRight'); - this.beams = document.getElementById('beams').components['beams']; this.particles = document.getElementById('saberParticles'); this.initBlock(); @@ -336,7 +335,6 @@ AFRAME.registerComponent('beat', { this.destroyed = false; this.el.object3D.visible = true; this.blockEl.object3D.visible = true; - this.beams.newBeam(this.data.color, this.el.object3D.position); }, initCuttingClippingPlanes: function () { diff --git a/src/index.html b/src/index.html index 8bd0b30..4d2c968 100644 --- a/src/index.html +++ b/src/index.html @@ -84,25 +84,25 @@ - - + + {% include './templates/stage.html' %} {% include './templates/gameUi.html' %} {% include './templates/menu.html' %} {% include './templates/dialogs.html' %} + + + + + + + + - - - - - - - - { + if (!state.isPlaying) { return; } state.isPaused = true; }, diff --git a/src/templates/stage.html b/src/templates/stage.html index fa7e820..3ca3ff8 100644 --- a/src/templates/stage.html +++ b/src/templates/stage.html @@ -53,7 +53,7 @@ - +