supermedium brand colors
This commit is contained in:
Diego F. Goberna
committed by
Diego Marcos
Diego Marcos
parent
6d78a80525
commit
09685d7bd8
@@ -34,8 +34,10 @@
|
||||
<a-asset-item id="logoObj" src="assets/models/logo.obj"></a-asset-item>
|
||||
<a-asset-item id="logofrontUObj" src="assets/models/logofront-u.obj"></a-asset-item>
|
||||
<a-asset-item id="logoGlowObj" src="assets/models/logoglow.obj"></a-asset-item>
|
||||
<a-asset-item id="logoGodraysObj" src="assets/models/logogodrays.obj"></a-asset-item>
|
||||
<a-asset-item id="saberGlowObj" src="assets/models/saberglow.obj"></a-asset-item>
|
||||
|
||||
<a-asset-item id="redbeamObj" src="assets/models/redbeam.obj"></a-asset-item>
|
||||
<a-asset-item id="bluebeamObj" src="assets/models/bluebeam.obj"></a-asset-item>
|
||||
|
||||
|
||||
<!--<a-asset-item id="wallglowObj" src="assets/models/wallglow.obj"></a-asset-item>-->
|
||||
@@ -44,7 +46,6 @@
|
||||
<a-asset-item id="tutorial2Obj" src="assets/models/tutorial2.obj"></a-asset-item>
|
||||
<a-asset-item id="tutorial3Obj" src="assets/models/tutorial3.obj"></a-asset-item>
|
||||
|
||||
<audio id="beatMissSound" src="assets/sounds/miss.ogg"></audio>
|
||||
<audio id="confirmSound" src="assets/sounds/beatHit.ogg"></audio>
|
||||
<audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
|
||||
<audio id="victorySound" src="assets/sounds/victory.ogg"></audio>
|
||||
@@ -68,7 +69,7 @@
|
||||
<img id="playImg" src="assets/img/play.png">
|
||||
<img id="sliceImg" src="assets/img/slice.png">
|
||||
<img id="slicebtnImg" src="assets/img/slicebtn.png">
|
||||
<img id="beamImg" src="assets/img/beam.png">
|
||||
<!--<img id="beamImg" src="assets/img/beam.png">-->
|
||||
<img id="wrongImg" src="assets/img/wrong.png">
|
||||
<img id="missImg" src="assets/img/miss.png">
|
||||
<img id="noiseTexture" src="assets/img/noise.png">
|
||||
@@ -117,10 +118,10 @@
|
||||
mixin="beatScore"
|
||||
text="value: GOOD; color: #A8E3FF"></a-mixin>
|
||||
<a-mixin
|
||||
id="beatScoreGreat"
|
||||
score-beat="type: great"
|
||||
id="beatScoreExcellent"
|
||||
score-beat="type: excellent"
|
||||
mixin="beatScore"
|
||||
text="value: GREAT; wrapCount: 16; color: #60CCFF"></a-mixin>
|
||||
text="value: EXCELLENT; wrapCount: 16; color: #60CCFF"></a-mixin>
|
||||
<a-mixin
|
||||
id="beatScoreSuper"
|
||||
score-beat="type: super"
|
||||
@@ -135,10 +136,11 @@
|
||||
|
||||
<a-mixin
|
||||
id="wall"
|
||||
data-saber-particles
|
||||
geometry
|
||||
material="shader: wallShader; transparent: true; side: double;"
|
||||
wall></a-mixin>
|
||||
wall
|
||||
saber-intersection
|
||||
></a-mixin>
|
||||
|
||||
<a-mixin
|
||||
id="beatWrong"
|
||||
@@ -168,11 +170,16 @@
|
||||
<!-- stage, neons, etc animations launched from beat-loader events -->
|
||||
|
||||
<a-mixin id="bgColorAnimation"
|
||||
animation__bgcoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: {{ COLORS.BG_OFF }}; dur: 500; easing: linear; startEvents: bgcoloroff"
|
||||
animation__bgcolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: {{ COLORS.BG_BLUE }}; dur: 5; easing: linear; startEvents: bgcolorblue"
|
||||
animation__bgcolorbluefade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: {{ COLORS.BG_BRIGHTBLUE }}; to: {{ COLORS.BG_BLUE }}; dur: 500; easing: linear; startEvents: bgcolorbluefade"
|
||||
animation__bgcolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: {{ COLORS.BG_RED }}; dur: 5; easing: linear; startEvents: bgcolorred"
|
||||
animation__bgcolorredfade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: {{ COLORS.BG_BRIGHTBLUE }}; to: {{ COLORS.BG_RED }}; dur: 500; easing: linear; startEvents: bgcolorredfade"
|
||||
animation__bgcoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; to: {{ COLORS.BG_OFF }}; dur: 500; easing: linear; startEvents: bgcoloroff"
|
||||
animation__bgcolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; to: {{ COLORS.BG_BLUE }}; dur: 5; easing: linear; startEvents: bgcolorblue"
|
||||
animation__bgcolorbluefade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; from: {{ COLORS.BG_BRIGHTBLUE }}; to: {{ COLORS.BG_BLUE }}; dur: 500; easing: linear; startEvents: bgcolorbluefade"
|
||||
animation__bgcolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; to: {{ COLORS.BG_RED }}; dur: 5; easing: linear; startEvents: bgcolorred"
|
||||
animation__bgcolorredfade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; from: {{ COLORS.BG_BRIGHTRED }}; to: {{ COLORS.BG_RED }}; dur: 500; easing: linear; startEvents: bgcolorredfade"
|
||||
|
||||
|
||||
animation__skycoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_OFF }}; dur: 500; easing: linear; startEvents: bgcoloroff"
|
||||
animation__skycolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_BLUE }}; dur: 5; easing: linear; startEvents: bgcolorblue"
|
||||
animation__skycolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_RED }}; dur: 5; easing: linear; startEvents: bgcolorred"
|
||||
></a-mixin>
|
||||
|
||||
<a-mixin id="tunnelColorAnimation"
|
||||
@@ -183,6 +190,14 @@
|
||||
animation__tunnelcolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: tunnelcolorredfade"
|
||||
></a-mixin>
|
||||
|
||||
<a-mixin id="floorColorAnimation"
|
||||
animation__floorcoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.floorNeon.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: floorcoloroff"
|
||||
animation__floorcolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.floorNeon.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: floorcolorblue"
|
||||
animation__floorcolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.floorNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: floorcolorbluefade"
|
||||
animation__floorcolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.floorNeon.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: floorcolorred"
|
||||
animation__floorcolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.floorNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: floorcolorredfade"
|
||||
></a-mixin>
|
||||
|
||||
<a-mixin id="leftLaserColorAnimation"
|
||||
animation__leftlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: leftlasercoloroff"
|
||||
animation__leftlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: leftlasercolorblue"
|
||||
|
||||
@@ -23,22 +23,22 @@ AFRAME.registerComponent('beams', {
|
||||
},
|
||||
|
||||
play: function () {
|
||||
// Material.
|
||||
const materialOptions = {
|
||||
color: 0xaa3333,
|
||||
map: new THREE.TextureLoader().load('assets/img/beam.png'),
|
||||
transparent: true,
|
||||
blending: THREE.AdditiveBlending
|
||||
};
|
||||
const redMaterial = new THREE.MeshBasicMaterial(materialOptions);
|
||||
materialOptions.color = 0x4444cc;
|
||||
const blueMaterial = new THREE.MeshBasicMaterial(materialOptions);
|
||||
this.texture = materialOptions.map;
|
||||
|
||||
// Beam pools.
|
||||
const geometry = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
|
||||
this.redBeams = this.createBeamPool(geometry, redMaterial);
|
||||
this.blueBeams = this.createBeamPool(geometry, blueMaterial);
|
||||
//const geometry = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
|
||||
|
||||
var objData;
|
||||
var loader;
|
||||
var redGeometry, blueGeometry;
|
||||
|
||||
var loader = new THREE.OBJLoader();
|
||||
objData = document.getElementById('redbeamObj').data;
|
||||
redGeometry = loader.parse(objData).children[0].geometry;
|
||||
|
||||
objData = document.getElementById('bluebeamObj').data;
|
||||
blueGeometry = loader.parse(objData).children[0].geometry;
|
||||
|
||||
this.redBeams = this.createBeamPool(redGeometry, this.el.sceneEl.systems.materials.stageAdditive);
|
||||
this.blueBeams = this.createBeamPool(blueGeometry, this.el.sceneEl.systems.materials.stageAdditive);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -292,9 +292,8 @@ AFRAME.registerComponent('beat-loader', {
|
||||
case 3:
|
||||
this.stageColors.setColor('rightlaser', event._value);
|
||||
break;
|
||||
case 400:
|
||||
case 4:
|
||||
this.stageColors.setColor('floor', event._value);
|
||||
this.stageColors.setColor('stageNeon', event._value);
|
||||
break;
|
||||
case 8:
|
||||
this.twister.components.twister.pulse(event._value);
|
||||
|
||||
@@ -258,7 +258,7 @@ AFRAME.registerComponent('beat', {
|
||||
roughness: 0.10,
|
||||
sphericalEnvMap: '#envmapTexture',
|
||||
emissive: this.materialColor[this.data.color],
|
||||
emissiveIntensity: 0.27,
|
||||
emissiveIntensity: 0.17,
|
||||
color: this.materialColor[this.data.color]
|
||||
});
|
||||
this.setObjModelFromTemplate(blockEl, this.models[this.data.type]);
|
||||
@@ -372,7 +372,7 @@ AFRAME.registerComponent('beat', {
|
||||
roughness: 0.12,
|
||||
sphericalEnvMap: '#envmapTexture',
|
||||
emissive: this.materialColor[this.data.color],
|
||||
emissiveIntensity: 0.27,
|
||||
emissiveIntensity: 0.17,
|
||||
color: this.materialColor[this.data.color],
|
||||
side: 'double'
|
||||
});
|
||||
@@ -391,7 +391,7 @@ AFRAME.registerComponent('beat', {
|
||||
roughness: 0.12,
|
||||
sphericalEnvMap: '#envmapTexture',
|
||||
emissive: this.materialColor[this.data.color],
|
||||
emissiveIntensity: 0.27,
|
||||
emissiveIntensity: 0.17,
|
||||
color: this.materialColor[this.data.color],
|
||||
side: 'double'
|
||||
});
|
||||
|
||||
@@ -7,7 +7,8 @@ AFRAME.registerSystem('materials', {
|
||||
init: function () {
|
||||
this.stageNormal = new THREE.ShaderMaterial({
|
||||
uniforms: {
|
||||
color: {value: new THREE.Color(COLORS.BG_BLUE)},
|
||||
skyColor: {value: new THREE.Color(COLORS.SKY_BLUE)},
|
||||
backglowColor: {value: new THREE.Color(COLORS.BG_BLUE)},
|
||||
src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
|
||||
},
|
||||
vertexShader: stageNormalShaders.vertexShader,
|
||||
@@ -18,8 +19,8 @@ AFRAME.registerSystem('materials', {
|
||||
|
||||
this.stageAdditive = new THREE.ShaderMaterial({
|
||||
uniforms: {
|
||||
tunnelNeon: {value: new THREE.Color(COLORS.NEON_BLUE)},
|
||||
floorNeon: {value: new THREE.Color(COLORS.NEON_BLUE)},
|
||||
tunnelNeon: {value: new THREE.Color(COLORS.NEON_RED)},
|
||||
floorNeon: {value: new THREE.Color(COLORS.NEON_RED)},
|
||||
leftLaser: {value: new THREE.Color(COLORS.NEON_BLUE)},
|
||||
rightLaser: {value: new THREE.Color(COLORS.NEON_BLUE)},
|
||||
textGlow: {value: new THREE.Color(COLORS.TEXT_OFF)},
|
||||
|
||||
@@ -23,6 +23,10 @@ AFRAME.registerComponent('stage-colors', {
|
||||
resetColors: function () {
|
||||
this.updateColors('blue');
|
||||
this.el.emit('bgcolorblue', null, false);
|
||||
this.el.emit('tunnelcolorred', null, false);
|
||||
this.el.emit('floorcolorred', null, false);
|
||||
this.el.emit('leftlasercolorblue', null, false);
|
||||
this.el.emit('rightlasercolorblue', null, false);
|
||||
},
|
||||
|
||||
updateColors: function (color) {
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
const COLORS = require('../constants/colors.js');
|
||||
|
||||
const WALL_COLOR = new THREE.Color(COLORS.NEON_RED);
|
||||
const WALL_BG = new THREE.Color(COLORS.SKY_RED);
|
||||
|
||||
|
||||
AFRAME.registerShader('wallShader', {
|
||||
schema: {
|
||||
@@ -63,7 +68,8 @@ AFRAME.registerShader('wallShader', {
|
||||
return mix(c, f, luvw.z);
|
||||
}
|
||||
|
||||
|
||||
#define WALL_COLOR vec3(${WALL_COLOR.r}, ${WALL_COLOR.g}, ${WALL_COLOR.b})
|
||||
#define WALL_BG vec3(${WALL_BG.r}, ${WALL_BG.g}, ${WALL_BG.b})
|
||||
|
||||
void main() {
|
||||
vec2 uv1 = uvs.xy-0.5;
|
||||
@@ -93,7 +99,10 @@ AFRAME.registerShader('wallShader', {
|
||||
w *= 0.9;
|
||||
bg *= 0.5;
|
||||
|
||||
vec3 col = vec3(r * 0.8 + w, w + 0.05, w + 0.08);
|
||||
vec3 COL = WALL_COLOR;
|
||||
vec3 BG = WALL_BG * 0.1;
|
||||
|
||||
vec3 col = vec3(r * COL.r + w + BG.r, r * COL.g + w + BG.g, r * COL.b + w + BG.b);
|
||||
|
||||
vec3 hit;
|
||||
hit = drawCircle(worldPos, hitRight, 0.04, 0.05, vec3(1.0, 0.4, 0.4));
|
||||
|
||||
35
src/constants/colors-brand.js
Normal file
35
src/constants/colors-brand.js
Normal file
@@ -0,0 +1,35 @@
|
||||
module.exports = {
|
||||
OFF: '#111',
|
||||
RED: '#ff3a7b',
|
||||
BLUE: '#08bfa2',
|
||||
|
||||
UI_ACCENT: '#08bfa2',
|
||||
|
||||
SKY_OFF: '#297547',
|
||||
SKY_BLUE: '#840d42',
|
||||
SKY_RED: '#154136',
|
||||
|
||||
BG_OFF: '#081a0f',
|
||||
BG_BLUE: '#379f5e',
|
||||
BG_BRIGHTBLUE: '#4fd983',
|
||||
BG_RED: '#ff1f81',
|
||||
BG_BRIGHTRED: '#ff6bb0',
|
||||
|
||||
NEON_OFF: '#000',
|
||||
NEON_BLUE: '#008a70',
|
||||
NEON_BRIGHTBLUE: '#87c2ff',
|
||||
NEON_RED: '#f01978',
|
||||
NEON_BRIGHTRED: '#ff70b5',
|
||||
|
||||
TEXT_OFF: '#000',
|
||||
TEXT_NORMAL: '#444',
|
||||
TEXT_BOLD: '#888',
|
||||
|
||||
BEAT_RED: '#46021c',
|
||||
BEAT_BLUE: '#01261a',
|
||||
|
||||
MINE_RED: '#1c060e',
|
||||
MINE_RED_EMISSION: '#2a0d1b',
|
||||
MINE_BLUE: '#011114',
|
||||
MINE_BLUE_EMISSION: '#072020',
|
||||
};
|
||||
35
src/constants/colors-orig.js
Normal file
35
src/constants/colors-orig.js
Normal file
@@ -0,0 +1,35 @@
|
||||
module.exports = {
|
||||
OFF: '#111',
|
||||
RED: '#f00',
|
||||
BLUE: '#00f',
|
||||
|
||||
UI_ACCENT: '#067197',
|
||||
|
||||
SKY_OFF: '#222',
|
||||
SKY_BLUE: '#007AB8',
|
||||
SKY_RED: '#B80000',
|
||||
|
||||
BG_OFF: '#222',
|
||||
BG_BLUE: '#007AB8',
|
||||
BG_BRIGHTBLUE: '#5FCCFF',
|
||||
BG_RED: '#B80000',
|
||||
BG_BRIGHTRED: '#FF4343',
|
||||
|
||||
NEON_OFF: '#000',
|
||||
NEON_BLUE: '#00f',
|
||||
NEON_BRIGHTBLUE: '#aaf',
|
||||
NEON_RED: '#f00',
|
||||
NEON_BRIGHTRED: '#faa',
|
||||
|
||||
TEXT_OFF: '#000',
|
||||
TEXT_NORMAL: '#444',
|
||||
TEXT_BOLD: '#888',
|
||||
|
||||
BEAT_RED: '#290404',
|
||||
BEAT_BLUE: '#08083E',
|
||||
|
||||
MINE_RED: '#070304',
|
||||
MINE_RED_EMISSION: '#090707',
|
||||
MINE_BLUE: '#030407',
|
||||
MINE_BLUE_EMISSION: '#070709',
|
||||
};
|
||||
@@ -1,29 +1,35 @@
|
||||
module.exports = {
|
||||
OFF: '#111',
|
||||
RED: '#f00',
|
||||
BLUE: '#00f',
|
||||
RED: '#ff3a7b',
|
||||
BLUE: '#08bfa2',
|
||||
|
||||
BG_OFF: '#222',
|
||||
BG_BLUE: '#007AB8',
|
||||
BG_BRIGHTBLUE: '#5FCCFF',
|
||||
BG_RED: '#B80000',
|
||||
BG_BRIGHTRED: '#FF4343',
|
||||
UI_ACCENT: '#08bfa2',
|
||||
|
||||
SKY_OFF: '#297547',
|
||||
SKY_BLUE: '#840d42',
|
||||
SKY_RED: '#154136',
|
||||
|
||||
BG_OFF: '#081a0f',
|
||||
BG_BLUE: '#379f5e',
|
||||
BG_BRIGHTBLUE: '#4fd983',
|
||||
BG_RED: '#ff1f81',
|
||||
BG_BRIGHTRED: '#ff6bb0',
|
||||
|
||||
NEON_OFF: '#000',
|
||||
NEON_BLUE: '#00f',
|
||||
NEON_BRIGHTBLUE: '#aaf',
|
||||
NEON_RED: '#f00',
|
||||
NEON_BRIGHTRED: '#faa',
|
||||
NEON_BLUE: '#008a70',
|
||||
NEON_BRIGHTBLUE: '#87c2ff',
|
||||
NEON_RED: '#f01978',
|
||||
NEON_BRIGHTRED: '#ff70b5',
|
||||
|
||||
TEXT_OFF: '#000',
|
||||
TEXT_NORMAL: '#444',
|
||||
TEXT_BOLD: '#888',
|
||||
|
||||
BEAT_RED: '#570808',
|
||||
BEAT_BLUE: '#10106A',
|
||||
BEAT_RED: '#46021c',
|
||||
BEAT_BLUE: '#01261a',
|
||||
|
||||
MINE_RED: '#070304',
|
||||
MINE_RED_EMISSION: '#090707',
|
||||
MINE_BLUE: '#030407',
|
||||
MINE_BLUE_EMISSION: '#070709',
|
||||
MINE_RED: '#1c060e',
|
||||
MINE_RED_EMISSION: '#2a0d1b',
|
||||
MINE_BLUE: '#011114',
|
||||
MINE_BLUE_EMISSION: '#072020',
|
||||
};
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<a-scene
|
||||
stats
|
||||
mixin="gameoverAnimation bgColorAnimation tunnelColorAnimation leftLaserColorAnimation rightLaserColorAnimation textGlowColorAnimation"
|
||||
mixin="gameoverAnimation bgColorAnimation tunnelColorAnimation leftLaserColorAnimation rightLaserColorAnimation textGlowColorAnimation floorColorAnimation"
|
||||
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"
|
||||
@@ -41,18 +41,16 @@
|
||||
pool__beat-mine="mixin: mine; size: 12; container: #beatContainer"
|
||||
pool__beatscoreok="mixin: beatScoreOk; size: 2; container: #beatContainer"
|
||||
pool__beatscoregood="mixin: beatScoreGood; size: 2; container: #beatContainer"
|
||||
pool__beatscoregreat="mixin: beatScoreGreat; size: 2; container: #beatContainer"
|
||||
pool__beatscoreexcellent="mixin: beatScoreExcellent; size: 2; container: #beatContainer"
|
||||
pool__beatscoresuper="mixin: beatScoreSuper; size: 2; container: #beatContainer"
|
||||
pool__wall="mixin: wall; size: 10; container: #beatContainer"
|
||||
proxy-event__cleargame1="event: gamemenuexit; as: cleargame; to: a-scene"
|
||||
proxy-event__cleargame2="event: gamemenurestart; as: cleargame; to: a-scene"
|
||||
play-sound__beatwrong="sound: #beatMissSound; event: beatwrong; volume: 0.4"
|
||||
play-sound__beatwrong="sound: #beatMissSound; event: beatwrong; volume: 0.75"
|
||||
proxy-event__pausegame="event: pausegame; as: textglowoff; to: a-scene"
|
||||
proxy-event__resumegame="event: gamemenuresume; as: textglownormal; to: a-scene"
|
||||
play-sound__victory="sound: #victorySong; event: victory"
|
||||
play-sound__crescendo="sound: #crescendo; event: victory; volume: 0.75"
|
||||
play-sound__victory="sound: #victorySong; event: victory"
|
||||
search
|
||||
stage-colors="color: blue"
|
||||
vr-mode-ui="enterVRButton: #vrButton"
|
||||
@@ -113,7 +111,7 @@
|
||||
particleplayer="src: #mineParticlesJSON; pscale: 0.5; scale: 1.4; loop: false; on: explode; img: #sparkImg; count: 20%; animateScale: true; initialScale: 3 1 1; finalScale: 0.2 0.2 1"></a-entity>
|
||||
<a-entity
|
||||
id="sparkParticles"
|
||||
particleplayer="src: #sparksJSON; color: #fcc; pscale: 0.7; on: explode; scale: 0.1; loop: false; img: #spark2Img; dur: 700; count: 50%; animateScale: true; initialScale: 3 0.5 1; finalScale: 0.1 0.5 1"></a-entity>
|
||||
particleplayer="src: #sparksJSON; color: #fcc; pscale: 0.7; on: explode; scale: 0.3; loop: false; img: #spark2Img; dur: 700; count: 50%; animateScale: true; initialScale: 3 0.5 1; finalScale: 0.1 0.5 1"></a-entity>
|
||||
|
||||
<a-mixin
|
||||
id="cursorMesh"
|
||||
@@ -149,78 +147,74 @@
|
||||
{% macro saber (hand, otherHand, bladeColor, beamColor) %}
|
||||
<a-entity id="{{ hand }}Hand"
|
||||
class="saber"
|
||||
mixin="raycaster"
|
||||
bind__hand-swapper="enabled: {{ otherHand }}RaycasterActive"
|
||||
bind__menu-controls="page: search.page; selectedChallengeId: menuSelectedChallenge.id"
|
||||
bind__pauser="enabled: isPlaying"
|
||||
bind__raycaster="enabled: {{ hand }}RaycasterActive"
|
||||
bind__raycaster-game="enabled: isPlaying"
|
||||
bind__saber-controls="bladeEnabled: isPlaying; isPaused: isPaused"
|
||||
bind__saber-particles="enabled: isPlaying"
|
||||
bind__trail="enabled: isPlaying"
|
||||
haptics="events: mouseenter; dur: 35; force: 0.075"
|
||||
haptics__beat="eventsFrom: #beatContainer; events: beatcollide{{ hand }}; dur: 80; force: 0.3"
|
||||
haptics__beat="eventsFrom: #beatContainer; events: beatcollide{{ hand }}; dur: 80; force: 0.2"
|
||||
haptics__draw="events: drawblade; dur: 750; force: 0.025"
|
||||
haptics-saber
|
||||
haptics-wall
|
||||
raycaster="objects: [raycastable]; far: 5"
|
||||
raycaster__game="objects: [raycastable-game]:not(.blade{{ hand }}); far: 1; interval: 50"
|
||||
saber-particles="hand: {{ hand }}"
|
||||
saber-controls="hand: {{ hand }}"
|
||||
thumb-controls
|
||||
thumb-controls-debug="enabled: false; hand: {{ hand }}; controllerType: vive-controls"
|
||||
trail="color: {{ bladeColor }}; hand: {{ hand }}">
|
||||
<a-entity
|
||||
id="saberLengthOffset"
|
||||
bind__position="controllerType === 'oculus-touch-controls' && '0 0 0.025' || '0 0 0.06'">
|
||||
|
||||
<a-entity id="{{ hand }}Laser"
|
||||
id="{{ hand }}Laser"
|
||||
bind__cursor-laser="enabled: menuActive && activeHand === '{{ hand }}'"
|
||||
geometry="primitive: cylinder; height: 1; radius: 0.005"
|
||||
material="color: {{ beamColor }}; shader: flat"
|
||||
rotation="-90 0 0"></a-entity>
|
||||
|
||||
<a-entity class="saberContainer" rotation="90 0 0">
|
||||
<a-entity class="saberContainer" rotation="90 0 0">
|
||||
<a-entity
|
||||
class="bladeContainer"
|
||||
bind__visible="isPlaying"
|
||||
animation="property: scale; from: 0 0 0; to: 1 1 1; dur: 750; easing: linear; startEvents: drawblade"
|
||||
scale="0.001 0.001 0.001">
|
||||
<a-entity
|
||||
class="bladeContainer"
|
||||
bind__visible="isPlaying"
|
||||
animation="property: scale; from: 0 0 0; to: 1 1 1; dur: 750; easing: linear; startEvents: drawblade"
|
||||
scale="0.001 0.001 0.001">
|
||||
<a-entity
|
||||
class="blade blade{{ hand }}"
|
||||
geometry="primitive: box; height: 0.9; depth: 0.02; width: 0.02"
|
||||
material="shader: flat; color: #fff"
|
||||
raycastable-game
|
||||
position="0 -0.55 0"></a-entity>
|
||||
<a-entity
|
||||
class="saberglow"
|
||||
obj-model="obj: #saberGlowObj"
|
||||
material="shader: flat; color: {{ bladeColor }}; blending: additive; opacity: 0.08"
|
||||
position="0 -0.55 0"></a-entity>
|
||||
</a-entity>
|
||||
class="blade blade{{ hand }}"
|
||||
geometry="primitive: box; height: 0.9; depth: 0.02; width: 0.02"
|
||||
material="shader: flat; color: #fff"
|
||||
raycastable-game
|
||||
position="0 -0.55 0"></a-entity>
|
||||
<a-entity
|
||||
class="saberHandle"
|
||||
geometry="primitive: box; height: 0.2; depth: 0.025; width: 0.025"
|
||||
material="shader: flat; color: #151515">
|
||||
<a-entity
|
||||
class="highlightTop"
|
||||
geometry="primitive: box; height: 0.18; depth: 0.005; width: 0.005"
|
||||
material="shader: flat; color: {{ bladeColor }}"
|
||||
position="0 0 0.0125"></a-entity>
|
||||
<a-entity
|
||||
class="highlightBottom"
|
||||
geometry="primitive: box; height: 0.18; depth: 0.005; width: 0.005"
|
||||
material="shader: flat; color: {{ bladeColor }}"
|
||||
position="0 0 -0.0125"></a-entity>
|
||||
</a-entity>
|
||||
class="saberglow"
|
||||
obj-model="obj: #saberGlowObj"
|
||||
material="shader: flat; color: {{ bladeColor }}; blending: additive; opacity: 0.08"
|
||||
position="0 -0.55 0"></a-entity>
|
||||
</a-entity>
|
||||
<a-entity
|
||||
class="fakeGlow"
|
||||
fake-glow="color: {{ beamColor }}"
|
||||
position="0 0.01 0"
|
||||
rotation="90 0 0"
|
||||
bind__visible="!isPlaying">
|
||||
class="saberHandle"
|
||||
geometry="primitive: box; height: 0.2; depth: 0.025; width: 0.025"
|
||||
material="shader: flat; color: #151515">
|
||||
<a-entity
|
||||
class="highlightTop"
|
||||
geometry="primitive: box; height: 0.18; depth: 0.005; width: 0.005"
|
||||
material="shader: flat; color: {{ bladeColor }}"
|
||||
position="0 0 0.0125"></a-entity>
|
||||
<a-entity
|
||||
class="highlightBottom"
|
||||
geometry="primitive: box; height: 0.18; depth: 0.005; width: 0.005"
|
||||
material="shader: flat; color: {{ bladeColor }}"
|
||||
position="0 0 -0.0125"></a-entity>
|
||||
</a-entity>
|
||||
</a-entity>
|
||||
|
||||
<a-entity
|
||||
class="fakeGlow"
|
||||
fake-glow="color: {{ beamColor }}"
|
||||
position="0 0.01 0"
|
||||
rotation="90 0 0"
|
||||
bind__visible="!isPlaying">
|
||||
</a-entity>
|
||||
</a-entity>
|
||||
|
||||
<a-entity
|
||||
@@ -233,8 +227,8 @@
|
||||
scale="1.3 1.3 1.3"></a-entity>
|
||||
{% endmacro %}
|
||||
|
||||
{{ saber('left', 'right', '#f00', 'pink') }}
|
||||
{{ saber('right', 'left', '#00f', 'cyan') }}
|
||||
{{ saber('left', 'right', '#850e3e', 'pink') }}
|
||||
{{ saber('right', 'left', '#256c43', 'cyan') }}
|
||||
</a-entity>
|
||||
|
||||
<a-entity
|
||||
@@ -248,6 +242,7 @@
|
||||
<a-entity
|
||||
id="mouseCursor"
|
||||
bind__raycaster="enabled: !inVR"
|
||||
mixin="raycaster"
|
||||
cursor="rayOrigin: mouse"
|
||||
raycaster="objects: [raycastable]"></a-entity>
|
||||
<a-entity
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
animation__mouseleave="property: components.slice9.material.opacity; from: 0.3; to: 0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
|
||||
mixin="slice"
|
||||
raycaster-target="width: 1; height: 0.32"
|
||||
slice9="width: 0.8; color: #067197; height: 0.130; padding: 0.03; opacity: 0"></a-mixin>
|
||||
slice9="width: 0.8; color: {{ COLORS.UI_ACCENT }}; height: 0.130; padding: 0.03; opacity: 0"></a-mixin>
|
||||
|
||||
<a-entity
|
||||
id="searchPrevPage"
|
||||
@@ -86,7 +86,7 @@
|
||||
bind-item__animation__mouseleavevisible="enabled: menuSelectedChallenge.id !== item.id"
|
||||
bind-toggle__raycastable="menuActive"
|
||||
geometry="primitive: plane; width: 1.1; height: 0.2"
|
||||
material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
|
||||
material="shader: flat; color: {{ COLORS.UI_ACCENT }}; transparent: true; opacity: 0.0"
|
||||
position="0 -0.13 -0.002"
|
||||
play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
|
||||
animation__mouseenter="property: components.material.material.opacity; from: 0.0; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150; delay: 1"
|
||||
@@ -178,7 +178,7 @@
|
||||
bind-item__animation__mouseleavevisible="enabled: menuSelectedChallenge.difficulty !== item"
|
||||
bind-toggle__raycastable="menuActive && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
|
||||
geometry="primitive: plane; width: 0.4; height: 0.2"
|
||||
material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
|
||||
material="shader: flat; color: {{ COLORS.UI_ACCENT }}; transparent: true; opacity: 0.0"
|
||||
position="0 -0.005 0"
|
||||
play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
|
||||
animation__mouseenter="property: components.material.material.opacity; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
|
||||
|
||||
@@ -91,7 +91,6 @@
|
||||
<a-entity obj-model="obj: #rightLaserObj" materials="name: stageAdditive" position="14 -1.5 -36"></a-entity>
|
||||
</a-entity>
|
||||
|
||||
<a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>
|
||||
<a-entity id="twister" position="0 0 -35" rotation="90 0 0" bind__twister="enabled: isPlaying"></a-entity>
|
||||
|
||||
<a-entity
|
||||
@@ -109,9 +108,12 @@
|
||||
<a-entity id="smoke1" mixin="smoke" position="0 1.4 0" animation__rotate="dur: 200000"></a-entity>
|
||||
<!-- <a-entity id="smoke2" mixin="smoke" position="0 1.8 0" scale="1.09 0.8 1.09" animation__rotate="dur: 243000"></a-entity>-->
|
||||
|
||||
<a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>
|
||||
|
||||
<a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>
|
||||
|
||||
<a-entity id="logo" bind__visible="menuActive || isVictory" position="0 6 -7.5" rotation="90 0 0">
|
||||
<a-entity id="logoGodraysObj" obj-model="obj: #logoGodraysObj" materials="name: logoadditive"></a-entity>
|
||||
<a-entity id="logoObj" obj-model="obj: #logoObj" materials="name: logo"></a-entity>
|
||||
<a-entity id="logoFrontU" obj-model="obj: #logofrontUObj" materials="name: logo" logoflicker="delay: 1200" bind__logoflicker="active: menuActive || isVictory"></a-entity>
|
||||
<a-entity id="logoGlowObj" obj-model="obj: #logoGlowObj" materials="name: logoadditive"></a-entity>
|
||||
@@ -121,12 +123,10 @@
|
||||
<!-- material="color: #030303" -->
|
||||
<a-entity
|
||||
id="floor"
|
||||
data-saber-particles
|
||||
geometry="primitive: plane; width: 3; height: 3"
|
||||
rotation="-90 0 0"
|
||||
raycastable-game
|
||||
rotation="-90 0 0"
|
||||
material="shader: floorShader; color: #f33; normalMap: #floorNormalsImg; envMap: #floorEnvImg"
|
||||
bind__saber-intersection="active: isPlaying"
|
||||
stepback></a-entity>
|
||||
|
||||
<a-entity
|
||||
@@ -139,4 +139,3 @@
|
||||
rotation="-45 0 0">
|
||||
</a-entity>
|
||||
</a-entity>
|
||||
f
|
||||
Reference in New Issue
Block a user