diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js index 0dfee2a..03f2df0 100644 --- a/src/components/beat-loader.js +++ b/src/components/beat-loader.js @@ -1,4 +1,7 @@ -var utils = require('../utils'); +import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED} from '../constants/beat'; +import utils from '../utils'; + +const WARMUP_TIME = (BEAT_WARMUP_OFFSET / BEAT_WARMUP_SPEED) * 1000; // ms. /** * Load beat data (all the beats and such). @@ -30,7 +33,6 @@ AFRAME.registerComponent('beat-loader', { init: function () { this.audioAnalyserEl = document.getElementById('audioanalyser'); - this.beams = document.getElementById('beams').components.beams; this.beatData = null; this.beatDataProcessed = false; this.beatContainer = document.getElementById('beatContainer'); @@ -148,7 +150,8 @@ AFRAME.registerComponent('beat-loader', { if (this.beatsTimeOffset !== undefined && this.songCurrentTime !== this.el.components.song.context.currentTime) { this.songCurrentTime = this.el.components.song.context.currentTime; - this.beatsTime = (this.songCurrentTime + this.data.beatAnticipationTime) * 1000; + this.beatsTime = (this.songCurrentTime + this.data.beatAnticipationTime) * 1000 + + WARMUP_TIME; } notes = this.beatData._notes; @@ -228,7 +231,7 @@ AFRAME.registerComponent('beat-loader', { this.orientations[noteInfo._cutDirection]); beatEl.play(); - this.beams.newBeam(color, beatEl.object3D.position); + beatEl.components.beat.onGenerate(); }; })(), diff --git a/src/components/beat.js b/src/components/beat.js index 342d6e7..c6a3818 100644 --- a/src/components/beat.js +++ b/src/components/beat.js @@ -1,6 +1,7 @@ -var SIGN_MATERIAL = {shader: 'flat', color: '#88f'}; +import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED} from '../constants/beat'; -var auxObj3D = new THREE.Object3D(); +const auxObj3D = new THREE.Object3D(); +const SIGN_MATERIAL = {shader: 'flat', color: '#88f'}; /** * Create beat from pool, collision detection, clipping planes. @@ -38,6 +39,7 @@ AFRAME.registerComponent('beat', { init: function () { this.backToPool = false; + this.beams = document.getElementById('beams').components.beams; this.beatBoundingBox = new THREE.Box3(); this.cutDirection = new THREE.Vector3(); this.destroyed = false; @@ -47,6 +49,7 @@ AFRAME.registerComponent('beat', { this.returnToPoolTimer = 800; this.rotationAxis = new THREE.Vector3(); this.saberEls = this.el.sceneEl.querySelectorAll('[saber-controls]'); + this.startPositionZ = undefined; this.rightCutPlanePoints = [ new THREE.Vector3(), new THREE.Vector3(), @@ -97,9 +100,9 @@ AFRAME.registerComponent('beat', { }, play: function () { + this.blockEl.object3D.visible = true; this.destroyed = false; this.el.object3D.visible = true; - this.blockEl.object3D.visible = true; }, tock: function (time, timeDelta) { @@ -109,7 +112,20 @@ AFRAME.registerComponent('beat', { // Only check collisions when close. const collisionZThreshold = -4; if (this.el.object3D.position.z > collisionZThreshold) { this.checkCollisions(); } - this.el.object3D.position.z += this.data.speed * (timeDelta / 1000); + + // Move. + if (this.el.object3D.position.z < this.startPositionZ) { + // Warm up / warp in. + this.el.object3D.position.z += BEAT_WARMUP_SPEED * (timeDelta / 1000); + if (this.el.object3D.position.z >= this.startPositionZ) { + this.beams.newBeam(this.data.color, this.el.object3D.position); + } + } else { + // Standard moving. + this.el.object3D.position.z += this.data.speed * (timeDelta / 1000); + } + + // Check. this.backToPool = this.el.object3D.position.z >= 2; if (this.backToPool) { this.missHit(); } } diff --git a/src/constants/beat.js b/src/constants/beat.js new file mode 100644 index 0000000..c5edc83 --- /dev/null +++ b/src/constants/beat.js @@ -0,0 +1,2 @@ +export const BEAT_WARMUP_OFFSET = 100; +export const BEAT_WARMUP_SPEED = 250;