diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js
index a422856..0e95bd6 100644
--- 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;
}
});
diff --git a/src/components/beat.js b/src/components/beat.js
index bb9f1d2..cd046ee 100644
--- 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
-});
\ No newline at end of file
diff --git a/src/components/gameover.js b/src/components/gameover.js
index 5da62ae..eb41caf 100644
--- 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);
+ }
}
});
diff --git a/src/components/stage-colors.js b/src/components/stage-colors.js
index b80e817..9cc4a88 100644
--- 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);
- }
-
});
diff --git a/src/index.html b/src/index.html
index e8bfdd2..9f76e5f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,27 +9,30 @@
@@ -68,10 +71,13 @@
-
-
-
-
+
+
+
+
+
+
+
-
+
-
+
@@ -49,9 +60,16 @@
-
-
-
+
+
+