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

improved animations in miss&wrong beats

Browse Source
This commit is contained in:
Diego F. Goberna
2018-10-04 00:04:50 +02:00
parent 8509555a9c
commit dc97bdb1aa
2 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/beat.js
View File

@@ -193,10 +193,9 @@ AFRAME.registerComponent('beat', {
var wrongEl = hand === 'left' ? this.wrongElLeft : this.wrongElRight;
if (!wrongEl) { return; }
wrongEl.object3D.position.copy(this.el.object3D.position);
wrongEl.object3D.position.y += 0.5;
wrongEl.object3D.position.y += 0.2;
wrongEl.object3D.position.z -= 0.5;
wrongEl.object3D.visible = true;
wrongEl.object3D.material.opacity = 1;
wrongEl.emit('beatwrong');
this.destroyed = true;
},

14
src/index.html
View File

@@ -66,12 +66,12 @@
<a-mixin id="arrow-red-beat" beat="color: red; type: arrow"></a-mixin>
<a-mixin id="dot-blue-beat" beat="color: blue; type: dot"></a-mixin>
<a-mixin id="bad-beat-anims"
<a-mixin id="bad-beat"
geometry="primitive: plane"
material="shader: flat; transparent: true"
visible="false"
animation__posz="property: object3D.position.z; to: -15; startEvents: beatwrong; easing: easeOutQuint"
animation__alpha="property: material.opacity; from: 1; to: 0; startEvents: beatwrong; delay: 200; easing: easeOutQuint"
animation__posz="property: object3D.position.z; to: -8; startEvents: beatwrong; easing: easeOutQuart; duration: 4000"
animation__alpha="property: material.opacity; from: 1; to: 0; startEvents: beatwrong; easing: easeOutQuart; duration: 4000"></a-mixin>
</a-assets>
@@ -86,10 +86,10 @@
</a-entity>
<!-- Wrong + miss beat visual indicators. -->
<a-entity id="wrongLeft" mixin='bad-beat' geometry="height: 0.2; width: 0.2" material="src: #wrongRedImg"></a-entity>
<a-entity id="wrongRight" mixin='bad-beat' geometry="height: 0.2; width: 0.2" material="src: #wrongBlueImg"></a-entity>
<a-entity id="missLeft" mixin='bad-beat' geometry="height: 0.15; width: 0.3" material="src: #missRedImg"></a-entity>
<a-entity id="missRight" mixin='bad-beat' geometry="height: 0.15; width: 0.3" material="src: #missBlueImg"></a-entity>
<a-entity id="wrongLeft" mixin='bad-beat' geometry="height: 0.3; width: 0.3" material="src: #wrongRedImg"></a-entity>
<a-entity id="wrongRight" mixin='bad-beat' geometry="height: 0.3; width: 0.3" material="src: #wrongBlueImg"></a-entity>
<a-entity id="missLeft" mixin='bad-beat' geometry="height: 0.25; width: 0.5" material="src: #missRedImg"></a-entity>
<a-entity id="missRight" mixin='bad-beat' geometry="height: 0.25; width: 0.5" material="src: #missBlueImg"></a-entity>
<!-- Player. -->
<a-mixin