242 lines
14 KiB
HTML
242 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Super Saber</title>
|
|
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
|
|
{% if IS_PRODUCTION %}
|
|
<script src="vendor/aframe-master.min.js"></script>
|
|
{% else %}
|
|
<script src="vendor/aframe-master.js"></script>
|
|
{% endif %}
|
|
<script src="build/build.js"></script>
|
|
</head>
|
|
<body>
|
|
<audio id="introSong" src="assets/sounds/introSong.ogg" loop></audio>
|
|
|
|
<a-scene
|
|
mixin="gameoverAnimation"
|
|
bind__beat-loader="challengeId: challenge.id; difficulty: challenge.difficulty; isPlaying: isPlaying"
|
|
bind__gameover="isGameOver: isGameOver"
|
|
bind__intro-song="isPlaying: menu.active && !menuSelectedChallenge.id"
|
|
bind__song="challengeId: challenge.id; isPlaying: isPlaying; isBeatsPreloaded: challenge.isBeatsPreloaded; isGameOver: isGameOver"
|
|
bind__song-preview-system="challengeId: challenge.id; isSongLoading: isSongLoading; selectedChallengeId: menuSelectedChallenge.id"
|
|
bind__overlay="enabled: !isPlaying"
|
|
animation__gameover="property: object3D.background; type: color; to: #750000; startEvents: gameover"
|
|
animation__gameoverfog="property: components.fog.el.object3D.fog.color; type: color; to: #330000; startEvents: gameover; dur: 500; easing: easeInQuad"
|
|
console-shortcuts
|
|
debug-controller
|
|
effect-bloom="strength: 1"
|
|
gpu-preloader
|
|
loading-screen="backgroundColor: #000;"
|
|
overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #inGameMenu"
|
|
pool__beat-arrow-blue="mixin: arrowBlueBeat; size: 5; container: #beatContainer"
|
|
pool__beat-arrow-red="mixin: arrowRedBeat; size: 10; container: #beatContainer"
|
|
pool__beat-dot-blue="mixin: dotBlueBeat; size: 10; container: #beatContainer"
|
|
pool__beat-dot-red="mixin: dotRedBeat; size: 10; container: #beatContainer"
|
|
pool__beat-mine="mixin: mine; size: 10; container: #beatContainer"
|
|
pool__wall="mixin: wall; size: 10; container: #beatContainer"
|
|
proxy-event__menuleft="event: menuchallengeunselect; to: .menuAnimation"
|
|
proxy-event__menuright="event: menuchallengeselect; to: .menuAnimation"
|
|
proxy-event__cleargame1="event: pausemenuexit; as: cleargame; to: a-scene"
|
|
proxy-event__cleargame2="event: pausemenurestart; as: cleargame; to: a-scene"
|
|
search
|
|
stage-colors="color: blue"
|
|
fog="color: #a00; density: 0.035; type: exponential"
|
|
vr-mode-ui="enterVRButton: #vrButton">
|
|
<a-assets timeout="10000">
|
|
<a-asset-item id="arrowObj" src="assets/models/arrow.obj"></a-asset-item>
|
|
<a-asset-item id="backglowObj" src="assets/models/backglow.obj"></a-asset-item>
|
|
<a-asset-item id="beatObj" src="assets/models/beat.obj"></a-asset-item>
|
|
<a-asset-item id="dotObj" src="assets/models/dot.obj"></a-asset-item>
|
|
<a-asset-item id="logofrontObj" src="assets/models/logofront.obj"></a-asset-item>
|
|
<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="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>
|
|
<a-asset-item id="stageNeonObj" src="assets/models/neons.obj"></a-asset-item>
|
|
<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>
|
|
|
|
<audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
|
|
|
|
<img id="backglowTexture" src="assets/img/stage/backglow.png">
|
|
<img id="cursorMeshImg" src="assets/models/laser/laser.png">
|
|
<img id="downIconImg" src="assets/img/downIcon.png">
|
|
<img id="envmapTexture" src="assets/img/envMap.png"></img>
|
|
<img id="floorImg" src="assets/img/stage/floor.png">
|
|
<img id="gridImg" src="assets/img/grid.png">
|
|
<img id="playImg" src="assets/img/play.png">
|
|
<img id="skyTexture" src="assets/img/stage/sky.jpg">
|
|
<img id="sliceImg" src="assets/img/slice.png">
|
|
<img id="slicebtnImg" src="assets/img/slicebtn.png">
|
|
<img id="smokeTexture" src="assets/img/stage/smoke.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"></img>
|
|
<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>
|
|
<a-mixin id="font" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
|
|
<a-mixin id="textFont" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
|
|
|
|
<a-mixin id="beat" visible="false"></a-mixin>
|
|
<a-mixin id="beatBlock" mixin="gameoverAnimation" animation__gameover="property: components.material.material.opacity; from: 1; to: 0; startEvents: gameover"></a-mixin>
|
|
<a-mixin id="beatSign" mixin="gameoverAnimation" animation__gameover="property: components.material.material.opacity; from: 1; to: 0; startEvents: gameover"></a-mixin>
|
|
<a-mixin id="arrowBlueBeat" mixin="beat" beat="color: blue; type: arrow"></a-mixin>
|
|
<a-mixin id="arrowRedBeat" mixin="beat" beat="color: red; type: arrow"></a-mixin>
|
|
<a-mixin id="dotBlueBeat" mixin="beat" beat="color: blue; type: dot"></a-mixin>
|
|
<a-mixin id="dotRedBeat" mixin="beat" beat="color: red; type: dot"></a-mixin>
|
|
<a-mixin id="gameoverAnimation" animation__gameover="dur: 1000; easing: easeOutQuad"></a-mixin>
|
|
<a-mixin id="mine" mixin="beat" beat="type: mine"></a-mixin>
|
|
<a-mixin id="wall" geometry wall material="shader: wall-shader; tex: #noiseTexture; repeat: 2 2; transparent: true; side: double">
|
|
|
|
<a-mixin id="beatWrong"
|
|
geometry="primitive: plane; height: 0.3; width: 0.3"
|
|
material="shader: flat; transparent: true; src: #wrongImg"
|
|
visible="false"
|
|
animation__posz="property: object3D.position.z; to: -8; startEvents: beatwrong; easing: easeOutQuart; dur: 4000"
|
|
animation__alpha="property: components.material.material.opacity; from: 1; to: 0; startEvents: beatwrong; easing: easeOutQuart; dur: 4000"></a-mixin>
|
|
|
|
<a-mixin id="beatMiss"
|
|
geometry="primitive: plane; height: 0.25; width: 0.5"
|
|
material="shader: flat; transparent: true; src: #missImg"
|
|
visible="false"
|
|
animation__posz="property: object3D.position.z; to: -8; startEvents: beatmiss; easing: easeOutQuart; dur: 4000"
|
|
animation__alpha="property: components.material.material.opacity; from: 1; to: 0; startEvents: beatmiss; easing: easeOutQuart; dur: 4000"></a-mixin>
|
|
</a-assets>
|
|
|
|
<a-entity id="arrowObjTemplate" obj-model="obj: #arrowObj" visible="false"></a-entity>
|
|
<a-entity id="beatObjTemplate" obj-model="obj: #beatObj" visible="false"></a-entity>
|
|
<a-entity id="dotObjTemplate" obj-model="obj: #dotObj" visible="false"></a-entity>
|
|
<a-entity id="mineObjTemplate" obj-model="obj: #mineObj" visible="false"></a-entity>
|
|
|
|
<a-entity id="cursorLaser" obj-model="obj: #laserObj" visible="false"></a-entity>
|
|
|
|
<a-entity id="container">
|
|
<a-entity
|
|
id="beatContainer"
|
|
beat-hit-sound
|
|
bind__pause="isPaused: !isPlaying"
|
|
sound__beathit="poolSize: 12; src: assets/sounds/beatHit.ogg"></a-entity>
|
|
{% include './templates/stage.html' %}
|
|
{% include './templates/score.html' %}
|
|
{% include './templates/menu.html' %}
|
|
{% include './templates/inGameMenu.html' %}
|
|
</a-entity>
|
|
|
|
<!-- Wrong + miss beat visual indicators. -->
|
|
<a-entity id="badContainer" bind__visible="isPlaying">
|
|
<a-entity id="wrongLeft" mixin='beatWrong'></a-entity>
|
|
<a-entity id="wrongRight" mixin='beatWrong'></a-entity>
|
|
<a-entity id="missLeft" mixin='beatMiss'></a-entity>
|
|
<a-entity id="missRight" mixin='beatMiss'></a-entity>
|
|
</a-entity>
|
|
|
|
<a-entity id="saberParticles" particleplayer="src: #sabercutParticles; pscale: 0.5; loop: false; on: explode; img: #sparkImg; count: 20%; animateScale: true; initialScale: 4 1 1; finalScale: 0.2 0.2 1"> </a-entity>
|
|
|
|
<!-- Player. -->
|
|
<a-mixin
|
|
id="raycaster"
|
|
raycaster="objects: [raycastable]; far: 3"
|
|
line="opacity: 0.75"></a-mixin>
|
|
<a-mixin
|
|
id="cursorMesh"
|
|
material="shader: flat; transparent: true; src: #cursorMeshImg; depthTest: false"
|
|
sub-object="from: #cursorLaser; name: glow"></a-mixin>
|
|
<a-entity id="cameraRig">
|
|
<a-entity id="camera" position="0 1.6 0.5" camera look-controls wasd-controls>
|
|
<a-entity
|
|
id="cameraCollider"
|
|
bind__aabb-collider="enabled: isPlaying"
|
|
aabb-collider="objects: [collidable]; interval: 50; collideNonVisible: false"
|
|
geometry="primitive: box; width: 0.25; height: 0.25; depth: 0.25"
|
|
proxy-event__wallhitstart="event: hitstart; to: a-scene; as: wallhitstart"
|
|
proxy-event__wallhitend="event: hitend; to: a-scene; as: wallhitend"
|
|
visible="false"></a-entity>
|
|
</a-entity>
|
|
|
|
{% macro saber (hand, otherHand, bladeColor, beamColor) %}
|
|
<a-entity id="{{ hand }}Hand"
|
|
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__saber-controls="bladeEnabled: isPlaying; isPaused: isPaused"
|
|
bind__trail="enabled: isPlaying"
|
|
haptics="events: mouseenter; dur: 35; force: 0.075"
|
|
saber-controls="hand: {{ hand }}"
|
|
thumb-controls
|
|
thumb-controls-debug="enabled: false; hand: {{ hand }}; controllerType: vive-controls"
|
|
trail="color: {{ bladeColor }}; hand: {{ hand }}">
|
|
<a-entity
|
|
id="{{ hand }}Laser"
|
|
bind__visible="menu.active && activeHand === '{{ hand }}'"
|
|
cursor-laser="hand: {{ hand }}"
|
|
sub-object="from: #cursorLaser; name: beam"
|
|
material="color: {{ beamColor }}; shader: flat; transparent: true; opacity: 0.04"></a-entity>
|
|
|
|
<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="blade"
|
|
geometry="primitive: box; height: 0.9; depth: 0.02; width: 0.02"
|
|
material="shader: flat; color: {{ bladeColor }}"
|
|
position="0 -0.55 0"></a-entity>
|
|
</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>
|
|
</a-entity>
|
|
|
|
<a-entity class="fakeGlow" rotation="90 0 0" position="0 0.01 0" bind__visible="!isPlaying">
|
|
<a-entity geometry="primitive: cylinder; height: 0.1831; radius: 0.0055" material="color: {{ beamColor }}; shader: flat; opacity: 0.11"></a-entity>
|
|
<a-entity geometry="primitive: cylinder; height: 0.1832; radius: 0.0065" material="color: {{ beamColor }}; shader: flat; opacity: 0.09"></a-entity>
|
|
<a-entity geometry="primitive: cylinder; height: 0.1833; radius: 0.0075" material="color: {{ beamColor }}; shader: flat; opacity: 0.06"></a-entity>
|
|
<a-entity geometry="primitive: cylinder; height: 0.1834; radius: 0.0085" material="color: {{ beamColor }}; shader: flat; opacity: 0.04"></a-entity>
|
|
</a-entity>
|
|
</a-entity>
|
|
|
|
<a-entity
|
|
id="{{ hand }}CursorMesh"
|
|
mixin="cursorMesh"
|
|
bind__cursor-mesh="active: {{ hand }}RaycasterActive"
|
|
cursor-mesh="active: {{ hand }}RaycasterActive; cursorEl: #{{ hand }}Hand"
|
|
material="color: {{ beamColor }}"
|
|
scale="1.3 1.3 1.3"></a-entity>
|
|
{% endmacro %}
|
|
|
|
{{ saber('left', 'right', '#FFA8A8', 'pink') }}
|
|
{{ saber('right', 'left', '#78AAFF', 'cyan') }}
|
|
</a-entity>
|
|
|
|
{% if not IS_PRODUCTION %}
|
|
<a-entity id="mouseCursor" mixin="raycaster" cursor="rayOrigin: mouse"
|
|
bind__raycaster="enabled: !inVR" raycaster="showLine: false"></a-entity>
|
|
<a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"
|
|
bind__cursor-mesh="active: menu.active"></a-entity>
|
|
{% endif %}
|
|
</a-scene>
|
|
<a id="vrButton" href="#" title="Enter VR / Fullscreen"></a>
|
|
</body>
|
|
</html>
|