juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor gameover animations

Browse Source
This commit is contained in:
Kevin Ngo
2018-10-10 02:24:22 -07:00
parent 46b7b19b5a
commit f46f4e04b5
6 changed files with 77 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/beat-loader.js
View File

@@ -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;
}
});

30
src/components/beat.js
View File

@@ -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
});

33
src/components/gameover.js
View File

@@ -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);
}
}
});

51
src/components/stage-colors.js
View File

@@ -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);
}
});