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

backglow, fog and tunnel neon colors (events 0 & 1)

Browse Source
This commit is contained in:
Diego F. Goberna
2018-12-03 23:24:18 +01:00
committed by Diego Marcos
parent 39d36ccc3e
commit 54c22691c6
11 changed files with 124 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/assets.html
View File

@@ -20,7 +20,7 @@
<a-asset-item id="tunnelObj" src="assets/models/tunnel.obj"></a-asset-item>
<a-asset-item id="tunnelNeonObj" src="assets/models/tunnelneon.obj"></a-asset-item>
-->
<a-asset-item id="stageObj" src="assets/models/stage.obj"></a-asset-item>
<a-asset-item id="stageNormalObj" src="assets/models/stagenormal.obj"></a-asset-item>
<a-asset-item id="stageAdditiveObj" src="assets/models/stageadditive.obj"></a-asset-item>
<a-asset-item id="stepbackObj" src="assets/models/stepback.obj"></a-asset-item>
<a-asset-item id="missObj" src="assets/models/miss.obj"></a-asset-item>
@@ -150,5 +150,22 @@
animation__mouseenter1="property: components.slice9.material.color; type: color; from: #999; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave1="property: components.slice9.material.color; type: color; from: #FFF; to: #999; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
animation__mouseenter2="property: scale; from: 1 1 1; to: 1.1 1.1 1.1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150">
</a-mixin>
animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"></a-mixin>
<a-mixin id="bgColorAnimation"
animation__bgcoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #111; dur: 500; easing: linear; startEvents: bgcoloroff"
animation__bgcolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: bgcolorblue"
animation__bgcolorbluefade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: bgcolorbluefade"
animation__bgcolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: bgcolorred"
animation__bgcolorredfade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: bgcolorredfade"
></a-mixin>
<a-mixin id="tunnelColorAnimation"
animation__tunnelcoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #111; dur: 500; easing: linear; startEvents: tunnelcoloroff"
animation__tunnelcolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: tunnelcolorblue"
animation__tunnelcolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: tunnelcolorbluefade"
animation__tunnelcolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: tunnelcolorred"
animation__tunnelcolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: tunnelcolorredfade"
></a-mixin>

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

@@ -281,38 +281,36 @@ AFRAME.registerComponent('beat-loader', {
generateEvent: function (event) {
switch(event._type) {
case 0:
this.stageColors.setColor('fog', event._value);
this.stageColors.setColor('sky', event._value);
this.stageColors.setColor('backglow', event._value);
this.stageColors.setColor('bg', event._value);
break;
case 1:
this.stageColors.setColor('tunnelNeon', event._value);
this.stageColors.setColor('tunnel', event._value);
break;
case 2:
case 200:
this.stageColors.setColor('leftStageLaser0', event._value);
this.stageColors.setColor('leftStageLaser1', event._value);
this.stageColors.setColor('leftStageLaser2', event._value);
break;
case 3:
case 300:
this.stageColors.setColor('rightStageLaser0', event._value);
this.stageColors.setColor('rightStageLaser1', event._value);
this.stageColors.setColor('rightStageLaser2', event._value);
break;
case 4:
case 400:
this.stageColors.setColor('floor', event._value);
this.stageColors.setColor('stageNeon', event._value);
break;
case 8:
case 800:
this.twister.components.twister.pulse(event._value);
break;
case 9:
case 900:
// zoom was a bit disturbing
this.twister.components.twister.pulse(event._value);
break;
case 12:
case 1200:
this.leftStageLasers.components['stage-lasers'].pulse(event._value);
break;
case 13:
case 1300:
this.rightStageLasers.components['stage-lasers'].pulse(event._value);
break;
}

10
src/components/materials.js
View File

@@ -9,9 +9,7 @@ AFRAME.registerSystem('materials', {
this.stageNormal = new THREE.ShaderMaterial({
uniforms: {
redColor: {value: new THREE.Vector3(1, 0, 0) },
blueColor: {value: new THREE.Vector3(0, 0, 1) },
fogColor: {value: new THREE.Vector3(0, 0.48, 0.72) },
color: {value: new THREE.Vector3(0, 0.48, 0.72) },
src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
},
vertexShader: stageNormalShaders.vertexShader,
@@ -22,14 +20,13 @@ AFRAME.registerSystem('materials', {
this.stageAdditive = new THREE.ShaderMaterial({
uniforms: {
redColor: {value: new THREE.Vector3(1, 0, 0) },
blueColor: {value: new THREE.Vector3(0, 0, 1) },
tunnelNeon: {value: new THREE.Vector3(0, 0, 1) },
src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
},
vertexShader: stageAdditiveShaders.vertexShader,
fragmentShader: stageAdditiveShaders.fragmentShader,
fog: false,
blending: THREE.AdditiveBlending,
fog: false,
transparent: true
});
}
@@ -51,7 +48,6 @@ AFRAME.registerComponent('materials', {
}
mesh = this.el.getObject3D('mesh');
if (!mesh) {
console.log('not loaded yet');
this.el.addEventListener('model-loaded', this.applyMaterial.bind(this));
} else {
this.applyMaterial(mesh);

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

@@ -1,14 +1,35 @@
function $ (id) { return document.getElementById(id); };
AFRAME.registerComponent('stage-colors', {
dependencies: ['background', 'fog'],
dependencies: ['background'],
schema: {
color: {default: 'blue', oneOf: ['blue', 'red']}
},
init: function () {
/*
this.colorCodes = ['off', 'blue', 'blue', 'bluefade', '', 'red', 'red', 'redfade'];
this.el.addEventListener('cleargame', this.resetColors.bind(this));
},
update: function (oldData) {
this.updateColors(this.data.color);
},
setColor: function (target, code) {
this.el.emit(`${target}color${this.colorCodes[code]}`, null, false);
},
resetColors: function () {
this.updateColors('blue');
this.el.emit('bgcolorblue', null, false);
},
updateColors: function (color) {
}
/*
init: function () {
this.neonRed = new THREE.Color(0xff9999);
this.neonBlue = new THREE.Color(0x9999ff);
this.defaultRed = new THREE.Color(0xff0000);
@@ -31,13 +52,10 @@ AFRAME.registerComponent('stage-colors', {
envMap: this.mineEnvMap[this.data.color]
});
this.sky = document.getElementById('sky');
this.backglow = document.getElementById('backglow');
this.auxColor = new THREE.Color();
this.targets = {};
['fog',
'sky',
'backglow',
['stageNormal',
'tunnelNeon',
'leftStageLaser0',
'leftStageLaser1',
@@ -47,48 +65,34 @@ AFRAME.registerComponent('stage-colors', {
'rightStageLaser2',
'floor',
'stageNeon'].forEach(id => {
this.targets[id] = id == 'fog' ? this.el.sceneEl : document.getElementById(id);
this.targets[id] = document.getElementById(id);
});
this.colorCodes = ['off', 'blue', 'blue', 'bluefade', '', 'red', 'red', 'redfade'];
this.el.addEventListener('cleargame', this.resetColors.bind(this));
*/
},
update: function (oldData) {
// this.updateColors(this.data.color);
this.updateColors(this.data.color);
},
setColor: function (target, code) {
/* const mesh = this.targets[target].getObject3D('mesh');
const mesh = this.targets[target].getObject3D('mesh');
if (mesh) { mesh.material.opacity = 1; }
this.targets[target].emit('color' + this.colorCodes[code], null, false);
*/
},
resetColors: function () {
/*
this.updateColors('blue');
for (let target in this.targets) {
this.targets[target].emit('colorblue', null, false);
}
*/
},
updateColors: function (color) {
/*
const red = color === 'red';
// Init or reset.
try {
this.backglow.getObject3D('mesh').material.color.set(red ? '#f10' : '#00acfc');
} catch (e) {
this.backglow.addEventListener('object3dset', () => {
this.backglow.getObject3D('mesh').material.color.set(red ? '#f10' : '#00acfc');
});
}
this.sky.getObject3D('mesh').material.color.set(red ? '#f10' : '#00acfc');
this.el.sceneEl.object3D.background.set(red ? '#770100' : '#15252d');
this.el.sceneEl.object3D.fog.color.set(red ? '#a00' : '#007cb9');
@@ -100,6 +104,7 @@ AFRAME.registerComponent('stage-colors', {
this.mineMaterial.emissive = this.mineEmission[red ? 'red' : 'blue'];
this.mineMaterial.envMap = this.mineEnvMap[red ? 'red' : 'blue'];
this.mineMaterial.needsUpdate = true;
*/
}
*/
});

2
src/index.html
View File

@@ -18,7 +18,7 @@
<a-scene
stats
mixin="gameoverAnimation fogAnimation"
mixin="gameoverAnimation fogAnimation bgColorAnimation tunnelColorAnimation"
bind__beat-loader="challengeId: challenge.id; difficulty: menuSelectedChallenge.difficulty; isPlaying: isPlaying; menuSelectedChallengeId: menuSelectedChallenge.id"
bind__gameover="isGameOver: isGameOver"
bind__intro-song="isPlaying: menuActive && !menuSelectedChallenge.id; isSearching: isSearching"

17
src/templates/stage.html
View File

@@ -8,20 +8,6 @@
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
@@ -87,7 +73,8 @@
-->
<a-entity
id="stageobj"
obj-model="obj: #stageObj"
mixin="gameoverAnimation"
obj-model="obj: #stageNormalObj"
materials="name: stageNormal"></a-entity>
<a-entity
id="stageadditiveobj"