diff --git a/src/components/beams.js b/src/components/beams.js index 8faecf9..2594e84 100644 --- a/src/components/beams.js +++ b/src/components/beams.js @@ -4,6 +4,7 @@ AFRAME.registerComponent('beams', { schema: { poolSize: {default: 3} }, + init: function () { var redMaterial; var blueMaterial; @@ -11,6 +12,7 @@ AFRAME.registerComponent('beams', { var geo; var beam; + this.beams = []; this.redBeams = []; this.blueBeams = []; this.currentRed = 0; @@ -31,19 +33,35 @@ AFRAME.registerComponent('beams', { for (var i = 0; i < this.data.poolSize; i++) { beam = new THREE.Mesh(geo, j === 0 ? redMaterial : blueMaterial); beam.visible = false; - beam.anim = ANIME({ + beam.animation = ANIME({ + autoplay: false, targets: beam.scale, x: 0.00001, - autoplay: false, duration: 300, easing: 'easeInCubic', - complete: (anim) => { beam.visible = false; } + complete: () => { beam.visible = false; } }); this.el.object3D.add(beam); this[j === 0 ? 'redBeams' : 'blueBeams'].push(beam); + this.beams.push(beam); } } + + this.el.sceneEl.addEventListener('cleargame', this.clearBeams.bind(this)); + }, + + /** + * Use tick for manual ANIME animations, else it will create RAF. + */ + tick: function (t, dt) { + for (let i = 0; i < this.beams.length; i++) { + let beam = this.beams[i]; + // Tie animation state to beam visibility. + if (!beam.visible) { continue; } + beam.time += dt; + beam.animation.tick(beam.time); + } }, newBeam: function (color, position) { @@ -51,7 +69,8 @@ AFRAME.registerComponent('beams', { if (color === 'red') { beam = this.redBeams[this.currentRed]; this.currentRed = (this.currentRed + 1) % this.redBeams.length; - beam.position.set(position.x, position.y, position.z + this.currentRed / 50.0); // z offset to avoid z-fighting + // z offset to avoid z-fighting. + beam.position.set(position.x, position.y, position.z + this.currentRed / 50.0); } else { beam = this.blueBeams[this.currentBlue]; this.currentBlue = (this.currentBlue + 1) % this.blueBeams.length; @@ -60,7 +79,12 @@ AFRAME.registerComponent('beams', { beam.visible = true; beam.scale.x = 1; - beam.anim.restart(); - } + beam.time = 0; + }, + clearBeams: function () { + for (let i = 0; i < this.beams.length; i++) { + this.beams[i].visible = false; + } + } }); diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js index 651d76d..2dfcd74 100644 --- a/src/components/beat-loader.js +++ b/src/components/beat-loader.js @@ -24,7 +24,7 @@ AFRAME.registerComponent('beat-loader', { this.first = null; this.lastTime = undefined; - this.el.addEventListener('pausemenurestart', this.restart.bind(this)); + this.el.addEventListener('cleargame', this.clearBeats.bind(this)); }, update: function () { @@ -183,12 +183,16 @@ AFRAME.registerComponent('beat-loader', { return pool.requestEntity(); }, - restart: function () { + /** + * Restart by returning all beats to pool. + */ + clearBeats: function () { this.audioSync = null; this.first = null; this.lastTime = 0; for (let i = 0; i < this.beatContainer.children.length; i++) { - this.beatContainer.children[i].components.beat.returnToPool(); + console.log('returning to pool'); + this.beatContainer.children[i].components.beat.returnToPool(true); } } }); diff --git a/src/components/beat.js b/src/components/beat.js index e7ef141..791a798 100644 --- a/src/components/beat.js +++ b/src/components/beat.js @@ -64,6 +64,12 @@ AFRAME.registerComponent('beat', { update: function () { this.updateBlock(); this.updateFragments(); + + if (this.data.type === 'mine') { + this.poolName = `pool__beat-mine`; + } else { + this.poolName = `pool__beat-${this.data.type}-${this.data.color}`; + } }, initBlock: function () { @@ -386,14 +392,9 @@ AFRAME.registerComponent('beat', { leftBorderInnerPlane.setFromCoplanarPoints(leftCutPlanePointsWorld[2], leftCutPlanePointsWorld[1], leftCutPlanePointsWorld[0]); }, - returnToPool: function () { - var poolName; - var type; - if (!this.backToPool) { return; } - type = this.data.type; - poolName = 'pool__beat-' + type; - if (type !== 'mine') { poolName += '-' + this.data.color; } - this.el.sceneEl.components[poolName].returnEntity(this.el); + returnToPool: function (force) { + if (!this.backToPool && !force) { return; } + this.el.sceneEl.components[this.poolName].returnEntity(this.el); }, tock: (function () { diff --git a/src/index.html b/src/index.html index 793e99c..8bd0b30 100644 --- a/src/index.html +++ b/src/index.html @@ -25,6 +25,8 @@ pool__beat-dot-red="mixin: beat dot-red-beat; 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">