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

Add miss visual feedback

Browse Source
This commit is contained in:
Diego Marcos
2018-10-12 12:15:54 -10:00
parent e0e99e99a5
commit 4195929098
2 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/beat.js
View File

@@ -213,6 +213,16 @@ AFRAME.registerComponent('beat', {
this.destroyed = true;
},
missHit: function (hand) {
var missEl = hand === 'left' ? this.missElLeft : this.missElRight;
if (!missEl) { return; }
missEl.object3D.position.copy(this.el.object3D.position);
missEl.object3D.position.y += 0.2;
missEl.object3D.position.z -= 0.5;
missEl.object3D.visible = true;
missEl.emit('beatmiss', null, false);
},
destroyBeat: (function () {
var parallelPlaneMaterial = new THREE.MeshBasicMaterial({color: '#00008b', side: THREE.DoubleSide});
var planeMaterial = new THREE.MeshBasicMaterial({color: 'grey', side: THREE.DoubleSide});
@@ -395,6 +405,7 @@ AFRAME.registerComponent('beat', {
returnToPool: function (force) {
if (!this.backToPool && !force) { return; }
if (!this.destroyed) { this.missHit(); }
this.el.sceneEl.components[this.poolName].returnEntity(this.el);
},

19
src/index.html
View File

@@ -90,11 +90,18 @@
<a-mixin id="wall" geometry wall material="shader: wall-shader; tex: #noiseTexture; repeat: 2 2; transparent: true; side: double">
<a-mixin id="badBeat"
geometry="primitive: plane"
material="shader: flat; transparent: true"
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: wronghit; easing: easeOutQuart; dur: 4000"
animation__alpha="property: components.material.material.opacity; from: 1; to: 0; startEvents: wronghit; easing: easeOutQuart; dur: 4000"></a-mixin>
<a-mixin id="missBeat"
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>
@@ -117,10 +124,10 @@
</a-entity>
<!-- Wrong + miss beat visual indicators. -->
<a-entity id="wrongLeft" mixin='badBeat' geometry="height: 0.3; width: 0.3" material="src: #wrongImg"></a-entity>
<a-entity id="wrongRight" mixin='badBeat' geometry="height: 0.3; width: 0.3" material="src: #wrongImg"></a-entity>
<a-entity id="missLeft" mixin='badBeat' geometry="height: 0.25; width: 0.5" material="src: #missImg"></a-entity>
<a-entity id="missRight" mixin='badBeat' geometry="height: 0.25; width: 0.5" material="src: #missImg"></a-entity>
<a-entity id="wrongLeft" mixin='badBeat'></a-entity>
<a-entity id="wrongRight" mixin='badBeat'></a-entity>
<a-entity id="missLeft" mixin='missBeat'></a-entity>
<a-entity id="missRight" mixin='missBeat'></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>