wired all scene sync events
This commit is contained in:
Diego F. Goberna
@@ -4,6 +4,7 @@ var utils = require('../utils');
|
||||
* Load beat data (all the beats and such).
|
||||
*/
|
||||
AFRAME.registerComponent('beat-loader', {
|
||||
dependencies: ['stage-colors'],
|
||||
schema: {
|
||||
beatAnticipationTime: {default: 2.0},
|
||||
beatSpeed: {default: 4.0},
|
||||
@@ -27,7 +28,14 @@ AFRAME.registerComponent('beat-loader', {
|
||||
this.songCurrentTime = undefined;
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
|
||||
this.stageColors = this.el.components['stage-colors'];
|
||||
this.twister = document.getElementById('twister');
|
||||
this.leftStageLasers = document.getElementById('leftStageLasers');
|
||||
this.rightStageLasers = document.getElementById('rightStageLasers');
|
||||
|
||||
this.el.addEventListener('cleargame', this.clearBeats.bind(this));
|
||||
|
||||
//this.addDebugControls();
|
||||
},
|
||||
|
||||
update: function (oldData) {
|
||||
@@ -223,30 +231,41 @@ AFRAME.registerComponent('beat-loader', {
|
||||
},
|
||||
|
||||
generateEvent: function (event) {
|
||||
console.log(event);
|
||||
switch(event._type) {
|
||||
case 0: // lasers color
|
||||
case 1: // tunnel neon color
|
||||
document.getElementById('tunnelNeon').setAttribute('colorPreset', event._value);
|
||||
document.getElementById('tunnelNeon').emit('pulse');
|
||||
break;
|
||||
case 2: document.getElementById('leftStageLasers').setAttribute('colorPreset', event._value);
|
||||
break;
|
||||
case 3: document.getElementById('rightStageLasers').setAttribute('colorPreset', event._value);
|
||||
break;
|
||||
case 0:
|
||||
this.stageColors.setColor('fog', event._value);
|
||||
this.stageColors.setColor('sky', event._value);
|
||||
this.stageColors.setColor('backglow', event._value);
|
||||
break;
|
||||
case 1:
|
||||
this.stageColors.setColor('tunnelNeon', event._value);
|
||||
break;
|
||||
case 2:
|
||||
this.stageColors.setColor('leftStageLaser0', event._value);
|
||||
this.stageColors.setColor('leftStageLaser1', event._value);
|
||||
this.stageColors.setColor('leftStageLaser2', event._value);
|
||||
break;
|
||||
case 3:
|
||||
this.stageColors.setColor('rightStageLaser0', event._value);
|
||||
this.stageColors.setColor('rightStageLaser1', event._value);
|
||||
this.stageColors.setColor('rightStageLaser2', event._value);
|
||||
break;
|
||||
case 4:
|
||||
document.getElementById('floor').emit('pulse');
|
||||
document.getElementById('stageNeon').emit('pulse');
|
||||
break;
|
||||
this.stageColors.setColor('floor', event._value);
|
||||
this.stageColors.setColor('stageNeon', event._value);
|
||||
break;
|
||||
case 8:
|
||||
case 9: document.getElementById('twister').components.twister.pulse(event._value);
|
||||
break;
|
||||
case 12: document.getElementById('leftStageLasers').components['stage-lasers'].pulse(event._value);
|
||||
console.log('left laser', event._value);
|
||||
break;
|
||||
case 13: document.getElementById('rightStageLasers').components['stage-lasers'].pulse(event._value);
|
||||
console.log('right laser', event._value);
|
||||
break;
|
||||
this.twister.components.twister.pulse(event._value);
|
||||
break;
|
||||
case 9:
|
||||
this.twister.components.twister.zoom(event._value);
|
||||
break;
|
||||
case 12:
|
||||
this.leftStageLasers.components['stage-lasers'].pulse(event._value);
|
||||
break;
|
||||
case 13:
|
||||
this.rightStageLasers.components['stage-lasers'].pulse(event._value);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -277,6 +296,56 @@ AFRAME.registerComponent('beat-loader', {
|
||||
child.components.wall.returnToPool(true);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addDebugControls: function () {
|
||||
var self = this;
|
||||
var currControl = 0;
|
||||
function addControl(i, name, type){
|
||||
var div = document.createElement('div');
|
||||
div.style.position = 'absolute';
|
||||
div.id = 'stagecontrol' + i;
|
||||
div.style.width = '100px';
|
||||
div.style.height = '30px';
|
||||
div.style.top = type === 'element' ? '20px' : '70px';
|
||||
div.style.background = '#000';
|
||||
div.style.color = '#fff';
|
||||
div.style.zIndex = 999999999;
|
||||
div.style.padding = '5px';
|
||||
div.style.font = '14px sans-serif';
|
||||
div.style.textAlign = 'center';
|
||||
div.style.cursor = 'pointer';
|
||||
div.style.left = (20 + i * 120)+'px';
|
||||
div.innerHTML = name;
|
||||
if (type === 'element') {
|
||||
div.addEventListener('click', () => {
|
||||
document.getElementById('stagecontrol' + currControl).style.background = '#000';
|
||||
div.style.background = '#66f';
|
||||
currControl = i;
|
||||
} )
|
||||
} else {
|
||||
div.addEventListener('click', () => { self.generateEvent({_type: currControl, _value: i}) })
|
||||
}
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
|
||||
[ 'sky',
|
||||
'tunnelNeon',
|
||||
'leftStageLasers',
|
||||
'rightStageLasers',
|
||||
'floor'].forEach((id, i) => {addControl(i, id, 'element'); });
|
||||
|
||||
[
|
||||
'off',
|
||||
'blue',
|
||||
'blue',
|
||||
'bluefade',
|
||||
'',
|
||||
'red',
|
||||
'red',
|
||||
'redfade'
|
||||
].forEach((id, i) => {addControl(i, id, 'value'); });
|
||||
;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -25,9 +25,27 @@ AFRAME.registerComponent('stage-colors', {
|
||||
});
|
||||
this.sky = document.getElementById('sky');
|
||||
this.backglow = document.getElementById('backglow');
|
||||
this.smoke1 = document.getElementById('smoke1');
|
||||
this.smoke2 = document.getElementById('smoke2');
|
||||
this.auxColor = new THREE.Color();
|
||||
|
||||
let $ = function (id) { return document.getElementById(id); };
|
||||
|
||||
this.targets = {};
|
||||
[ 'fog',
|
||||
'sky',
|
||||
'backglow',
|
||||
'tunnelNeon',
|
||||
'leftStageLaser0',
|
||||
'leftStageLaser1',
|
||||
'leftStageLaser2',
|
||||
'rightStageLaser0',
|
||||
'rightStageLaser1',
|
||||
'rightStageLaser2',
|
||||
'floor',
|
||||
'stageNeon'].forEach((id) => {
|
||||
this.targets[id] = id == 'fog' ? this.el.sceneEl : document.getElementById(id);
|
||||
});
|
||||
|
||||
this.colorCodes = ['off', 'blue', 'blue', 'bluefade', '', 'red', 'red', 'redfade'];
|
||||
},
|
||||
|
||||
update: function (oldData) {
|
||||
@@ -46,5 +64,11 @@ AFRAME.registerComponent('stage-colors', {
|
||||
this.mineMaterial.emissive = this.mineEmission[red ? 'red' : 'blue'];
|
||||
this.mineMaterial.envMap = this.mineEnvMap[red ? 'red' : 'blue'];
|
||||
this.mineMaterial.needsUpdate = true;
|
||||
},
|
||||
|
||||
setColor: function (target, code) {
|
||||
var mesh = this.targets[target].getObject3D('mesh');
|
||||
if (mesh) mesh.material.opacity = 1;
|
||||
this.targets[target].emit('color' + this.colorCodes[code], {}, false);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -13,7 +13,7 @@ AFRAME.registerComponent('stage-lasers', {
|
||||
},
|
||||
|
||||
pulse: function (speed) {
|
||||
this.speed = speed / 3;
|
||||
this.speed = speed / 5;
|
||||
},
|
||||
|
||||
tick: function (time, delta) {
|
||||
|
||||
@@ -12,16 +12,23 @@ AFRAME.registerComponent('twister', {
|
||||
init: function () {
|
||||
this.currentTwist = 0;
|
||||
this.animate = false;
|
||||
this.zoomProgress = 0;
|
||||
},
|
||||
|
||||
pulse: function (twist) {
|
||||
if (!this.data.enabled) { return; }
|
||||
if (twist == 0) { twist = 0.1 + Math.random() * 0.25; }
|
||||
else twist = Math.min(twist, 0.5);
|
||||
if (twist == 0) { twist = 0.05 + Math.random() * 0.15; }
|
||||
else twist = Math.min(twist * 0.5, 0.5);
|
||||
twist *= Math.random() < 0.5 ? -1 : 1; // random direction
|
||||
this.el.setAttribute('twister', {twist: twist});
|
||||
},
|
||||
|
||||
zoom: function () {
|
||||
if (!this.data.enabled) { return; }
|
||||
this.zoomProgress = 0.01;
|
||||
this.animate = true;
|
||||
},
|
||||
|
||||
update: function (oldData) {
|
||||
var radius = 4;
|
||||
var segment;
|
||||
@@ -65,16 +72,28 @@ AFRAME.registerComponent('twister', {
|
||||
|
||||
tick: function (time, delta) {
|
||||
if (!this.animate) { return; }
|
||||
if (Math.abs(this.data.twist - this.currentTwist) < 0.001) {
|
||||
delta *= 0.001;
|
||||
|
||||
this.currentTwist += (this.data.twist - this.currentTwist) * delta;
|
||||
|
||||
var child = this.el.object3D.children[0];
|
||||
var zoom = this.zoomProgress ? Math.sin(this.zoomProgress * Math.PI) * 0.4 : 0;
|
||||
|
||||
while (child) {
|
||||
child.rotation.y = this.currentTwist;
|
||||
child.position.y = this.data.positionIncrement + zoom;
|
||||
child = child.children[0];
|
||||
}
|
||||
|
||||
if (this.zoomProgress > 0) {
|
||||
this.zoomProgress += delta;
|
||||
if (this.zoomProgress >= 1) {
|
||||
this.zoomProgress = 0;
|
||||
}
|
||||
}
|
||||
if (Math.abs(this.data.twist - this.currentTwist) < 0.001 && this.zoomProgress == 0){
|
||||
this.animate = false;
|
||||
}
|
||||
|
||||
this.currentTwist += (this.data.twist - this.currentTwist) * delta * 0.001;
|
||||
|
||||
var child = this.el.object3D.children[0];
|
||||
while (child) {
|
||||
child.rotation.y = this.currentTwist;
|
||||
child = child.children[0];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<audio id="introSong" src="assets/sounds/introSong.ogg" loop></audio>
|
||||
|
||||
<a-scene
|
||||
mixin="gameoverAnimation"
|
||||
mixin="gameoverAnimation fogAnimation"
|
||||
bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty; isPlaying: isPlaying"
|
||||
bind__gameover="isGameOver: isGameOver"
|
||||
bind__intro-song="isPlaying: menu.active && !menuSelectedChallenge.id"
|
||||
@@ -52,6 +52,7 @@
|
||||
<a-asset-item id="logobackObj" src="assets/models/logoback.obj"></a-asset-item>
|
||||
<a-asset-item id="logofrontUObj" src="assets/models/logofront-u.obj"></a-asset-item>
|
||||
<a-asset-item id="laserObj" src="assets/models/laser/laser.obj"></a-asset-item>
|
||||
<a-asset-item id="laserNeonObj" src="assets/models/laserneon.obj"></a-asset-item>
|
||||
<a-asset-item id="logoSparks" src="assets/models/logosparks.json"></a-asset-item>
|
||||
<a-asset-item id="mineObj" src="assets/models/mine.obj"></a-asset-item>
|
||||
<a-asset-item id="sabercutParticles" src="assets/models/sabercut.json"></a-asset-item>
|
||||
@@ -76,6 +77,7 @@
|
||||
<img id="wrongImg" src="assets/img/wrong.png">
|
||||
<img id="missImg" src="assets/img/miss.png">
|
||||
<img id="noiseTexture" src="assets/img/noise.png"></img>
|
||||
<img id="neonImg" src="assets/img/neon.png">
|
||||
<img id="sparkImg" src="assets/img/spark.png">
|
||||
|
||||
<a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.7; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.18"></a-mixin>
|
||||
|
||||
@@ -1,11 +1,49 @@
|
||||
<a-mixin id="stageLaser" geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>
|
||||
<a-mixin id="stageLaser" obj-model="obj:#laserNeonObj" material="depthWrite: false; transparent: true; shader: flat; fog: false; color: #00a; src: #neonImg;"></a-mixin>
|
||||
|
||||
<a-mixin id="neonAnimation"
|
||||
material="shader: flat; fog: false; color: #9999ff"
|
||||
animation__coloroff="property: components.material.material.opacity;
|
||||
to: 0.1; dur: 500; easing: linear; startEvents: coloroff"
|
||||
animation__colorblue="property: components.material.material.color;
|
||||
type: color; to: #AAAAFF; dur: 5; easing: linear; startEvents: colorblue"
|
||||
animation__colorbluefade="property: components.material.material.color;
|
||||
type: color; from: #EEF; to: #AAAAff; dur: 500; easing: linear; startEvents: colorbluefade"
|
||||
animation__colorred="property: components.material.material.color;
|
||||
type: color; to: #FFAAAA; dur: 5; easing: linear; startEvents: colorred"
|
||||
animation__colorredfade="property: components.material.material.color;
|
||||
type: color; from: #FEE; to: #ffAAAA; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>
|
||||
|
||||
<a-mixin id="bgAnimation"
|
||||
material="shader: flat; fog: false;"
|
||||
animation__coloroff="property: components.material.material.color;
|
||||
type: color; to: #111; dur: 500; easing: linear; startEvents: coloroff"
|
||||
animation__colorblue="property: components.material.material.color;
|
||||
type: color; to: #00acfc; dur: 5; easing: linear; startEvents: colorblue"
|
||||
animation__colorbluefade="property: components.material.material.color;
|
||||
type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: colorbluefade"
|
||||
animation__colorred="property: components.material.material.color;
|
||||
type: color; to: #fc0000; dur: 5; easing: linear; startEvents: colorred"
|
||||
animation__colorredfade="property: components.material.material.color;
|
||||
type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>
|
||||
|
||||
<a-mixin id="fogAnimation"
|
||||
animation__coloroff="property: components.fog.el.object3D.fog.color;
|
||||
type: color; to: #010101; dur: 500; easing: linear; startEvents: coloroff"
|
||||
animation__colorblue="property: components.fog.el.object3D.fog.color;
|
||||
type: color; to: #007cb9; dur: 5; easing: linear; startEvents: colorblue"
|
||||
animation__colorbluefade="property: components.fog.el.object3D.fog.color;
|
||||
type: color; from: #3398CA; to: #007cb9; dur: 500; easing: linear; startEvents: colorbluefade"
|
||||
animation__colorred="property: components.fog.el.object3D.fog.color;
|
||||
type: color; to: #b90000; dur: 5; easing: linear; startEvents: colorred"
|
||||
animation__colorredfade="property: components.fog.el.object3D.fog.color;
|
||||
type: color; from: #ff0000; to: #b90000; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>
|
||||
|
||||
<a-sky
|
||||
id="sky"
|
||||
mixin="gameoverAnimation"
|
||||
mixin="gameoverAnimation bgAnimation"
|
||||
animation__gameover="property: components.material.material.color; type: color; to: #301000; startEvents: gameover"
|
||||
geometry="segmentsHeight: 16; segmentsWidth: 32"
|
||||
material="fog: false; src: #skyTexture"></a-sky>
|
||||
material="src: #skyTexture"></a-sky>
|
||||
|
||||
<a-entity
|
||||
id="audioAnalyser"
|
||||
@@ -15,10 +53,10 @@
|
||||
|
||||
<a-entity id="stage">
|
||||
<a-entity id="backglow"
|
||||
mixin="gameoverAnimation"
|
||||
mixin="gameoverAnimation bgAnimation"
|
||||
animation__gameover="property: components.material.material.opacity; to: 0.2; startEvents: gameover"
|
||||
obj-model="obj: #backglowObj"
|
||||
material="shader: flat; transparent: true; fog: false; color: #f00; src: #backglowTexture; opacity: 0.8"
|
||||
material="transparent: true; color: #f00; src: #backglowTexture; opacity: 0.7"
|
||||
position="0 0 -50"
|
||||
scale="20 20 20"></a-entity>
|
||||
|
||||
@@ -43,22 +81,23 @@
|
||||
</a-entity>
|
||||
|
||||
<a-entity id="tunnel" obj-model="obj:#tunnelObj" material="shader: flat; flatShading: true; color: #010101"></a-entity>
|
||||
<a-entity id="tunnelNeon" obj-model="obj:#tunnelNeonObj" material="shader: flat; fog: false; color: #9999ff" animation="property: components.material.material.color; type: color; from: #FFF to: #6666ff; dur: 200; easing: linear; startEvents: pulse"></a-entity>
|
||||
<a-entity id="tunnelNeon" obj-model="obj:#tunnelNeonObj" material="shader: flat; fog: false; transparent: true; color: #9999ff; src: #neonImg; depthWrite: false;"
|
||||
mixin="neonAnimation"></a-entity>
|
||||
|
||||
<a-entity id="stageNeon" obj-model="obj:#stageNeonObj" material="shader: flat; fog: false; color: #9999ff" animation="property: components.material.material.color; type: color; from: #FFF to: #6666ff; dur: 200; easing: linear; startEvents: pulse"></a-entity>
|
||||
<a-entity id="stageNeon" obj-model="obj:#stageNeonObj" mixin="neonAnimation"></a-entity>
|
||||
|
||||
<!-- Lasers left. -->
|
||||
<a-entity bind__stage-lasers="enabled: !menu.active" id="leftStageLasers">
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position=" -6 2.3 -40"></a-entity>
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position="-10 0 -38"></a-entity>
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position="-14 -3 -36"></a-entity>
|
||||
<a-entity id="leftStageLaser0" mixin="stageLaser neonAnimation" position=" -6 2.3 -40"></a-entity>
|
||||
<a-entity id="leftStageLaser1" mixin="stageLaser neonAnimation" position="-10 0 -38"></a-entity>
|
||||
<a-entity id="leftStageLaser2" mixin="stageLaser neonAnimation" position="-14 -3 -36"></a-entity>
|
||||
</a-entity>
|
||||
|
||||
<!-- Lasers right. -->
|
||||
<a-entity bind__stage-lasers="enabled: !menu.active" id="rightStageLasers">
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position=" 6 4 -40"></a-entity>
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position="10 2 -38"></a-entity>
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position="14 -1.5 -36"></a-entity>
|
||||
<a-entity id="rightStageLaser0" mixin="stageLaser neonAnimation" position=" 6 4 -40"></a-entity>
|
||||
<a-entity id="rightStageLaser1" mixin="stageLaser neonAnimation" position="10 2 -38"></a-entity>
|
||||
<a-entity id="rightStageLaser2" mixin="stageLaser neonAnimation" position="14 -1.5 -36"></a-entity>
|
||||
</a-entity>
|
||||
|
||||
<a-mixin
|
||||
@@ -109,9 +148,8 @@
|
||||
</a-entity>
|
||||
|
||||
<a-entity
|
||||
id="floor"
|
||||
animation="property: components.material.material.color; type: color; from: #FFF to: #888; dur: 200; easing: linear; startEvents: pulse"
|
||||
id="floor" mixin="neonAnimation"
|
||||
geometry="primitive: plane; width: 3; height: 3"
|
||||
material="color: #888; shader: flat; src: #floorImg"
|
||||
material="color: #AAF; shader: flat; src: #floorImg"
|
||||
rotation="-90 0 0"></a-entity>
|
||||
</a-entity>
|
||||
|
||||
Reference in New Issue
Block a user