From 5dd7166da2e52d8e12be8cadab617966292b6de5 Mon Sep 17 00:00:00 2001 From: Diego Marcos Date: Wed, 14 Nov 2018 14:01:43 -0800 Subject: [PATCH] Move wall initilization to wall component. Implement wall warmup --- src/components/beat-loader.js | 24 ++++++------ src/components/debug-beat-loader.js | 17 ++++++++- src/components/wall.js | 59 +++++++++++++++++++++++++++-- 3 files changed, 84 insertions(+), 16 deletions(-) diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js index 200288a..5a1afb1 100644 --- a/src/components/beat-loader.js +++ b/src/components/beat-loader.js @@ -72,6 +72,8 @@ AFRAME.registerComponent('beat-loader', { this.songCurrentTime = undefined; this.xhr = null; this.stageColors = this.el.components['stage-colors']; + // Beats arrive at sword stroke distance synced with the music. + this.swordOffset = 1.5; this.twister = document.getElementById('twister'); this.leftStageLasers = document.getElementById('leftStageLasers'); this.rightStageLasers = document.getElementById('rightStageLasers'); @@ -209,9 +211,7 @@ AFRAME.registerComponent('beat-loader', { generateBeat: (function () { const beatObj = {}; - // Beats arrive at sword stroke distance synced with the music. - const swordOffset = 1.5; - + return function (noteInfo) { var beatEl; var color; @@ -231,7 +231,7 @@ AFRAME.registerComponent('beat-loader', { if (!beatEl) { return; } // Apply sword offset. Blocks arrive on beat in front of the user. - beatObj.anticipationPosition = -data.beatAnticipationTime * data.beatSpeed - swordOffset; + beatObj.anticipationPosition = -data.beatAnticipationTime * data.beatSpeed - this.swordOffset; beatObj.color = color; beatObj.cutDirection = this.orientationsHumanized[noteInfo._cutDirection]; beatObj.horizontalPosition = this.horizontalPositionsHumanized[noteInfo._lineIndex]; @@ -251,17 +251,19 @@ AFRAME.registerComponent('beat-loader', { var el = this.el.sceneEl.components.pool__wall.requestEntity(); const data = this.data; var speed = this.data.beatSpeed; + const wallObj = {}; if (!el) { return; } const durationSeconds = 60 * (wallInfo._duration / this.bpm); - el.setAttribute('wall', 'speed', speed); - el.object3D.position.set( - this.horizontalPositions[wallInfo._lineIndex], - 1.30, - -(this.data.beatAnticipationTime * speed) - ); - el.object3D.scale.set(wallInfo._width * 0.30, 2.5, durationSeconds * speed); + wallObj.anticipationPosition = -data.beatAnticipationTime * data.beatSpeed - this.swordOffset; + wallObj.durationSeconds = durationSeconds; + wallObj.horizontalPosition = this.horizontalPositionsHumanized[wallInfo._lineIndex]; + wallObj.speed = speed; + wallObj.warmupPosition = -data.beatWarmupTime * data.beatWarmupSpeed; + wallObj.width = wallInfo._width; + el.setAttribute('wall', wallObj); + el.components.wall.updatePosition(); el.play(); }, diff --git a/src/components/debug-beat-loader.js b/src/components/debug-beat-loader.js index 4e69947..b12b330 100644 --- a/src/components/debug-beat-loader.js +++ b/src/components/debug-beat-loader.js @@ -39,12 +39,15 @@ AFRAME.registerComponent('debug-beat-loader', { generateBeat: function (beatInfo) { var type; + if (beatInfo.type === 'wall') { + this.generateWall(beatInfo); + return; + } if (beatInfo.type === 'mine') { type = 3; } else { type = beatInfo.color === 'red' ? 0 : 1; } - debugger; this.beatLoader.generateBeat({ _lineIndex: this.beatLoader.positionHumanized[beatInfo.position].index, _lineLayer: this.beatLoader.positionHumanized[beatInfo.position].layer, @@ -55,6 +58,16 @@ AFRAME.registerComponent('debug-beat-loader', { }); }, + + generateWall: function (wallInfo) { + this.beatLoader.bpm = 90; + this.beatLoader.generateWall({ + _lineIndex: this.beatLoader.positionHumanized[wallInfo.position].index, + _width: 2, + _duration: 3 + }); + }, + /** * Debug generate beats. */ @@ -110,6 +123,7 @@ AFRAME.registerComponent('debug-beat-loader', { addButton('arrow', menuDiv); addButton('dot', menuDiv); addButton('mine', menuDiv); + addButton('wall', menuDiv); parentDiv.appendChild(menuDiv); } @@ -187,7 +201,6 @@ AFRAME.registerComponent('debug-beat-loader', { color: self.selectedBeat.color }; if (!self.selectedPositionEl) { return; } - debugger; self.selectedPositionEl.innerHTML = self.selectedBeat.type + color + orientation; self.beats[self.selectedPositionEl.id] = { position: self.selectedBeat.position, diff --git a/src/components/wall.js b/src/components/wall.js index b811c44..6fdc33c 100644 --- a/src/components/wall.js +++ b/src/components/wall.js @@ -1,15 +1,41 @@ +import {BEAT_WARMUP_OFFSET, BEAT_WARMUP_SPEED, BEAT_WARMUP_TIME} from '../constants/beat'; + /** * Wall speed and haptics. */ AFRAME.registerComponent('wall', { schema: { - speed: {default: 1.0} + anticipationPosition: {default: 0}, + durationSeconds: {default: 0}, + horizontalPosition: {default: 'middleleft', oneOf: ['left', 'middleleft', 'middleright', 'right']}, + speed: {default: 1.0}, + warmupPosition: {default: 0}, + height: {default: 1.3}, + width: {default: 1} + }, + + horizontalPositions: { + 'left': -0.75, + 'middleleft': -0.25, + 'middleright': 0.25, + 'right': 0.75 }, init: function () { this.maxZ = 10; }, + updatePosition: function () { + const el = this.el; + const data = this.data; + el.object3D.position.set( + this.horizontalPositions[data.horizontalPosition], + data.height, + data.anticipationPosition + data.warmupPosition + data.durationSeconds * data.speed / 2 + ); + el.object3D.scale.set(data.width * 0.30, 2.5, data.durationSeconds * data.speed); + }, + pause: function () { this.el.object3D.visible = false; this.el.removeAttribute('data-collidable-head'); @@ -20,8 +46,35 @@ AFRAME.registerComponent('wall', { this.el.setAttribute('data-collidable-head', ''); }, - tock: function (time, delta) { - this.el.object3D.position.z += this.data.speed * (delta / 1000); + tock: function (time, timeDelta) { + const data = this.data; + const position = this.el.object3D.position; + if (this.intersecting) { + var int; + if (this.saberHit['rightHand'].active) { + int = this.saberHit['rightHand'].raycaster.getIntersection(this.el); + if (int) { this.material.uniforms.hitRight.value = int.point; } + } + if (this.saberHit['leftHand'].active) { + int = this.saberHit['leftHand'].raycaster.getIntersection(this.el); + if (int) { this.material.uniforms.hitLeft.value = int.point; } + } + } + + // Move. + if (position.z < data.anticipationPosition) { + let newPositionZ = position.z + BEAT_WARMUP_SPEED * (timeDelta / 1000); + // Warm up / warp in. + if (newPositionZ < data.anticipationPosition) { + position.z = newPositionZ; + } else { + position.z = data.anticipationPosition; + } + } else { + // Standard moving. + position.z += this.data.speed * (timeDelta / 1000); + } + if (this.el.object3D.position.z > this.maxZ) { this.returnToPool(); return;