restyled tutorial (fixes #162, fixes #170, no logic)

assets/models/tutorial1.obj

@@ -180,15 +180,15 @@ vt 0.512334 0.217236
 vt 0.703736 0.188073
 vt 0.729756 0.338669
 vt 0.703736 0.338669
-vt 0.418083 0.181401
+vt 0.482012 0.219661
-vt 0.317260 0.282223
+vt 0.433898 0.267774
-vt 0.317260 0.181401
+vt 0.433898 0.219661
 vt 0.547906 0.252809
 vt 0.636049 0.329220
 vt 0.636049 0.178623
 vt 0.547906 0.252809
 vt 0.729756 0.188073
-vt 0.418083 0.282223
+vt 0.482012 0.267774
 s off
 f 54/55 55/56 53/57
 f 56/58 59/59 55/60
@@ -230,15 +230,15 @@ vt 0.512334 0.217236
 vt 0.703736 0.188073
 vt 0.729756 0.338669
 vt 0.703736 0.338669
-vt 0.328390 0.211080
+vt 0.433347 0.263455
-vt 0.429212 0.311902
+vt 0.469105 0.299213
-vt 0.328390 0.311902
+vt 0.433347 0.299213
 vt 0.636049 0.329220
 vt 0.636049 0.329220
 vt 0.636049 0.178623
 vt 0.547906 0.252809
 vt 0.729756 0.188073
-vt 0.429212 0.211080
+vt 0.469105 0.263455
 s off
 f 68/79 71/80 67/81
 f 72/82 69/83 71/84
@@ -280,13 +280,13 @@ vt 0.770070 0.236653
 vt 0.869289 0.176807
 vt 0.893553 0.271978
 vt 0.869289 0.271978
-vt 0.324076 0.230237
+vt 0.437505 0.255048
-vt 0.396278 0.302439
+vt 0.467384 0.293502
-vt 0.324076 0.302439
+vt 0.437001 0.285431
 vt 0.893553 0.176807
 vt 0.794335 0.331824
 vt 0.794335 0.331824
-vt 0.396278 0.230237
+vt 0.467888 0.263118
 s off
 f 79/103 84/104 83/105
 f 84/106 81/107 83/108
@@ -313,9 +313,9 @@ v -0.203502 0.265636 0.138416
 v -0.148827 0.267350 0.144021
 v -0.198343 0.269119 0.083259
 v -0.143782 0.273016 0.088739
-vt 0.412973 0.215397
+vt 0.464315 0.246402
-vt 0.340770 0.287600
+vt 0.438247 0.272469
-vt 0.340770 0.215397
+vt 0.438247 0.246402
 vt 0.980513 0.213086
 vt 0.960293 0.292395
 vt 0.960293 0.213086
@@ -331,7 +331,7 @@ vt 0.770070 0.236653
 vt 0.869289 0.176807
 vt 0.893553 0.271978
 vt 0.869289 0.271978
-vt 0.412973 0.287600
+vt 0.464315 0.272469
 vt 0.980513 0.292395
 vt 0.893553 0.176807
 vt 0.794335 0.331824

src/assets.html

@@ -17,6 +17,7 @@
 <a-asset-item id="tunnelNeonObj" src="assets/models/tunnelneon.obj"></a-asset-item>
 <a-asset-item id="tutorial1Obj" src="assets/models/tutorial1.obj"></a-asset-item>
 <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="confirmSound" src="assets/sounds/beatHit.ogg"></audio>
 <audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
@@ -94,3 +95,13 @@
   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-mixin
+  id="bigMenuButton"
+  mixin="slice"
+  slice9="src: #slicebtnImg; color: #999; width: 1; left: 70; top: 70; height: 0.2; padding: 0.1"
+  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>

src/state/index.js

@@ -98,7 +98,8 @@ AFRAME.registerState({
       songNameTexts: '',  // All names in search results merged together.
       songSubNameTexts: ''  // All sub names in search results merged together.
     },
-    searchResultsPage: []
+    searchResultsPage: [],
+    tutorialActive: false
   },
 
   handlers: {

src/templates/menu.html

@@ -309,16 +309,6 @@
   proxy-event__accept="event: superkeyboardinput; to: a-scene; as: keyboardclose">
 </a-entity>
 
-<a-mixin
-  id="bigMenuButton"
-  mixin="slice"
-  slice9="src: #slicebtnImg; color: #999; width: 1; left: 70; top: 70; height: 0.2; padding: 0.1"
-  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>
-
 <a-entity id="genreButtons" position="-0.55 0.2 -1.9">
   <a-entity id="genreButton"
     mixin="bigMenuButton"

src/templates/tutorial.html

@@ -1,45 +1,47 @@
-<a-entity id="tutorial"
+<a-entity id="tutorial" class="overlay" position="0 1.5 -1.7" scale="0.7 0.7 0.7" bind__visible="tutorialActive">
-  class="overlay"
+  <a-entity position="0 0.32 0.001" geometry-merger="preserveOriginal: false" material="shader: flat; color: #ffffff">
-  position="1.1 1.6 0.2"
+    <a-entity position="-1.17 0 0" geometry="primitive: ring; radiusInner: 0.08; radiusOuter: 0.095; segmentsPhi: 1; segmentsTheta: 30; buffer: false"></a-entity>
-  rotation="0 -90 0"
+    <a-entity position="0 0 0" geometry="primitive: ring; radiusInner: 0.08; radiusOuter: 0.095; segmentsPhi: 1; segmentsTheta: 30; buffer: false"></a-entity>
-  scale="0.8 0.8 0.8"
+    <a-entity position="1.17 0 0" geometry="primitive: ring; radiusInner: 0.08; radiusOuter: 0.095; segmentsPhi: 1; segmentsTheta: 30; buffer: false"></a-entity>
-  bind__visible="menuActive">
-  <a-entity mixin="slice" slice9="width: 0.94; height: 0.25; left: 70; padding: 0.03; opacity: 0.9" position="-0.62 -0.18 -0.01"></a-entity>
-  <a-entity mixin="slice" slice9="width: 1.29; height: 0.21; left: 70; padding: 0.03; opacity: 0.9" position="-0.44 -0.455 -0.01"></a-entity>
-  <a-entity mixin="slice" slice9="width: 1.21; height: 0.21; left: 70; padding: 0.03; opacity: 0.9" position="-0.48 -0.715 -0.01"></a-entity>
-  <a-entity position="-0.3 0 0">
-    <a-entity geometry-merger="preserveOriginal: false" material="shader: flat; color: #ffffff">
-      <a-entity position="-0.64 -0.18 0" geometry="primitive: ring; radiusInner: 0.07; radiusOuter: 0.085; segmentsPhi: 1; segmentsTheta: 30; buffer: false"></a-entity>
-      <a-entity position="-0.64 -0.45 0" geometry="primitive: ring; radiusInner: 0.07; radiusOuter: 0.085; segmentsPhi: 1; segmentsTheta: 30; buffer: false"></a-entity>
-      <a-entity position="-0.64 -0.705 0" geometry="primitive: ring; radiusInner: 0.07; radiusOuter: 0.085; segmentsPhi: 1; segmentsTheta: 30; buffer: false"></a-entity>
-    </a-entity>
-    <a-entity mixin="font" text="align: center; value: 1\n2\n3; baseline: top; wrapCount: 22; lineHeight: 117" position="-0.64 -0.220 0"></a-entity>
-    <a-entity mixin="font" text="baseline: top; lineHeight: 30.21; value: Slice the beats\n\n\n\n\n\nDodge walls, avoid cutting mines\n\n\n\n\nMore swing, more points!; wrapCount: 30" position="-0.01 -0.18 0"></a-entity>
-    <a-entity mixin="font" text="value: (mind color and direction!)" position="-0.01 -0.26 0"></a-entity>
   </a-entity>
+  <a-entity mixin="font" text="align: center; value: 1 2 3; baseline: top; wrapCount: 50; letterSpacing: 180; width: 3" position="0 0.27 0"></a-entity>
+  <a-entity mixin="font" text="baseline: top; lineHeight: 50; align: center; value: SLICE THE BEATS\nMind color and direction!; wrapCount: 28" position="-1.17 0.1 0"></a-entity>
+  <a-entity mixin="font" text="baseline: top; lineHeight: 50; align: center; value: DODGE WALLS,\nAVOID CUTTING MINES; wrapCount: 28" position="0 0.1 0"></a-entity>
+  <a-entity mixin="font" text="baseline: top; lineHeight: 50; align: center; value: MORE SWING,\nMORE POINTS!; wrapCount: 28" position="1.17 0.1 0"></a-entity>
+
+  <a-entity
+    obj-model="obj: #tutorial3Obj"
+    material="side: double; shader: flat; transparent: true; src: #tutorialImg"
+    position="1.1 -0.45 0.2"
+    scale="0.9 0.9 0.9"
+    bind__animation="enabled: menuActive"
+    animation="property: object3D.rotation.y; from: -60; to: -10; dur: 5000; dir: alternate; easing: easeInOutCubic; loop: true"
+    ></a-entity>
 </a-entity>
 
 <a-entity id="tutorialBloom"
-  position="1.1 1.6 0.2"
+  position="0 1.5 -1.7"
-  rotation="0 -90 0"
+  scale="0.7 0.7 0.7"
-  scale="0.8 0.8 0.8"
+  bind__visible="tutorialActive">
-  bind__visible="menuActive">
   <a-entity
     mixin="font"
-    text="letterSpacing: 2; value: How To Play; color: #aaa; wrapCount: 25"
+    text="align: center; value: HOW TO PLAY; color: #aaa; wrapCount: 30; width: 3"
-    position="-0.3 0.03 0"></a-entity>
+    position="0 0.6 0"></a-entity>
+
+  <a-entity mixin="slice" slice9="left: 70; width: 0.9; height: 1.1; padding: 0.12; opacity: 0.9" position="-1.17 -0.05 -0.01"></a-entity>
+  <a-entity mixin="slice" slice9="left: 70; width: 0.9; height: 1.1; padding: 0.12; opacity: 0.9" position="0 -0.05 -0.01"></a-entity>
+  <a-entity mixin="slice" slice9="left: 70; width: 0.9; height: 1.1; padding: 0.12; opacity: 0.9" position="1.17 -0.05 -0.01"></a-entity>
 
   <a-entity
     obj-model="obj: #tutorial1Obj"
     material="side: double; shader: flat; transparent: true; src: #tutorialImg"
-    position="0.12 -0.3 0"
+    position="-1.1 -0.45 0.2"
     scale="0.9 0.9 0.9"
     bind__animation="enabled: menuActive"
-    animation="property: object3D.rotation.y; from: -20; to: 35; dur: 5000; dir: alternate; easing: easeInOutCubic; loop: true"
+    animation="property: object3D.rotation.y; from: -20; to: 55; dur: 5000; dir: alternate; easing: easeInOutCubic; loop: true"
     ></a-entity>
 
-  <a-entity
+  <a-entity position="0 -0.2 0.2" scale="1.1 1.1 1.1">
-    position="0.59 -0.34 0">
     <a-entity
       geometry="width: 0.3; height: 0.04; depth: 0.3"
       bind__animation="enabled: menuActive"
@@ -51,7 +53,7 @@
       position="-0.04 -0.07 0.03"
       bind__animation="enabled: menuActive"
       animation="property: object3D.position.z; from: -0.24; to: 0.1; dur: 2000; easing: linear; loop: true; easing: easeInOutCubic"
-      material="color: #161616; roughness: 0.38; metalness: 0.48;"
+      material="emissive: #080808; color: #222; roughness: 0.38; metalness: 0.7;"
       ></a-entity>
     <a-entity
       obj-model="obj: #mineObj"
@@ -59,15 +61,23 @@
       position="-0.09 -0.18 0.01"
       bind__animation="enabled: menuActive"
       animation="property: object3D.position.z; from: -0.25; to: -0.04; dur: 2000; easing: linear; loop: true; easing: easeInOutCubic"
-      material="color: #161616; roughness: 0.38; metalness: 0.48;"
+      material="emissive: #080808; color: #222; roughness: 0.38; metalness: 0.7;"
       ></a-entity>
     <a-entity
       obj-model="obj: #tutorial2Obj"
       material="side: double; shader: flat; transparent: true; src: #tutorialImg"
       bind__animation="enabled: menuActive"
-      animation="property: object3D.position.x; from: 0.05; to: 0.098; dur: 2000; easing: linear; loop: true; easing: easeInOutCubic"
+      animation="property: object3D.position.x; from: -0.05; to: 0.098; dur: 2000; easing: linear; loop: true; easing: easeInOutCubic"
       position="0.098 -0.26 0"
       scale="0.9 0.9 0.9"
       ></a-entity>
   </a-entity>
+
+  <a-entity id="tutorialClose"
+    mixin="bigMenuButton"
+    position="0 -0.840 0"
+    bind-toggle__raycastable="tutorialActive"
+    proxy-event="event: click; to: a-scene; as: tutorialclose">
+    <a-entity mixin="font" text="align: center; color: #AAA; wrapCount: 15; value: OK" position="0 -0.09 0.01"></a-entity>
+  </a-entity>
 </a-entity>