Finished tutorial, corrected bug, and fixed TutoCamera collision (a

little)

js/TutoCamera.js

@@ -147,7 +147,19 @@ TutoCamera.prototype.normalMotion = function(time) {
     if (this.motion.moveLeft)     {direction.add(Tools.mul(left,    speed)); this.changed = true;}
     if (this.motion.moveRight)    {direction.sub(Tools.mul(left,    speed)); this.changed = true;}
 
-    if (!this.collisions || !this.isColliding(direction)) {
+    var collide = this.isColliding(direction);
+    if (this.collisions && collide) {
+        var face = collide.face;
+        var vertices = collide.object.geometry.vertices;
+        var normal = Tools.cross(Tools.diff(vertices[face.b], vertices[face.a]), Tools.diff(vertices[face.c], vertices[face.a])).normalize();
+
+        if (Tools.dot(normal, direction) > 0) {
+            normal.multiplyScalar(-1);
+        }
+
+        normal.multiplyScalar(0.01);
+        this.position.add(normal);
+    } else {
         this.position.add(direction);
     }
 
@@ -248,11 +260,9 @@ TutoCamera.prototype.isColliding = function(direction) {
     for (var i in intersects) {
         if (intersects[i].distance < Tools.norm(direction) + this.speed * 300 &&
             intersects[i].object.raycastable) {
-            return true;
+            return intersects[i];
         }
     }
-
-    return false;
 }
 
 // Look function
@@ -269,6 +279,9 @@ TutoCamera.prototype.onKeyEvent = function(event, toSet) {
     var motionJsonCopy = JSON.stringify(this.motion);
 
     if (this.allowed.keyboardTranslate) {
+        if (this.tutorial.nextAction() ===  'translate-keyboard') {
+            this.tutorial.nextStep();
+        }
         switch ( event.keyCode ) {
             // Azerty keyboards
             case 38: case 90:  this.motion.moveForward   = toSet; break; // up / z

js/prototype/Coin.js

@@ -2,7 +2,10 @@ var Coin = function(x,y,z, callback) {
     this.ready = false;
     this.got = false;
     this.init(x,y,z);
+    if (callback) {
         this.callback = callback;
+        this.rotating = true;
+    }
 }
 
 var _toto = new Audio();
@@ -31,18 +34,19 @@ Coin.prototype.addToScene = function(scene) {
 }
 
 Coin.prototype.update = function() {
-    if (this.ready)
+    var self = this;
-        (function(self) {
+    if (this.ready && this.rotating)
-            self.update = function() {
+        this.mesh.rotation.y += 0.1
-                // self.mesh.rotation.y += 0.1;
-            }
-        })(this);
 }
 
 Coin.prototype.get = function() {
     if (!this.got) {
         this.got = true;
+
+        // Call the callback if any
+        if (this.callback)
             this.callback();
+
         if (this.mesh) {
             this.mesh.visible = false;
         }
@@ -75,12 +79,18 @@ Coin.total = 1;
 Coin.BASIC_MESH = null;
 
 Coin._loader = new THREE.OBJLoader();
+
+Coin.init = function(scale) {
+    if (scale === undefined) {
+        scale = 0.005;
+    }
+
     Coin._loader.load(
         static_path + 'data/coin/Coin.obj',
         function(object) {
             object.traverse(function (mesh) {
                 if (mesh instanceof THREE.Mesh) {
-                mesh.scale.set(0.005,0.005,0.005);
+                    mesh.scale.set(scale,scale,scale);
                     mesh.material.color.setHex(0xff0000);
                     mesh.geometry.computeVertexNormals();
                     mesh.raycastable = true;
@@ -89,3 +99,4 @@ Coin._loader.load(
             });
         }
     );
+}

js/prototype/TutorialSteps.js

@@ -1,7 +1,9 @@
 var TutorialSteps = function(tutoCamera) {
     this.camera = tutoCamera;
     this.step = 0;
+    this.coins = 0;
     this.camera.allowed = {};
+    this.camera.allowed.keyboardTranslate = true;
 
     this.instructions = [
         {
@@ -21,8 +23,32 @@ var TutorialSteps = function(tutoCamera) {
             justclick: false
         },
         {
-            text:"Nice ! You can try to use the keyboard arrows to move the camera",
+            text: "Nice, there are a few coins around you, try to get them ! 1/4",
+            justclick: false
+        },
+        {
+            text: "2/4",
+            justclick: false
+        },
+        {
+            text: "3/4",
+            justclick: false
+        },
+        {
+            text:"Nice ! You will now learn to translate the camera",
             justclick: true
+        },
+        {
+            text: "Try pressing the up key to go forward !",
+            justclick: false
+        },
+        {
+            text: "There is a red coin on the top of the castle ! Try to find it by targetting the place where you want to go with the mouse, and then using the arrow keys to go there",
+            justclick: false
+        },
+        {
+            text: "You got it ! I think you're ready to play !",
+            justclick: false
         }
     ];
 
@@ -31,19 +57,36 @@ var TutorialSteps = function(tutoCamera) {
 TutorialSteps.prototype.nextStep = function() {
     if (this.step < this.instructions.length) {
         this.alert(this.instructions[this.step].text, this.instructions[this.step].justclick);
+        var callback = function() {self.coins++; self.nextStep();};
+        var self = this;
         switch (this.step) {
             case 0: break;
             case 1: this.camera.allowed.mouseRotate       = true; break;
             case 2: this.camera.allowed.keyboardRotate    = true; break;
             case 3:
                 this.camera.allowed.keyboardRotate    = true;
-                var self = this;
                 coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, function() {
                     self.nextStep();
+                    self.coins++;
                 }));
                 coins[coins.length-1].addToScene(scene);
                 break;
-            case 4: this.camera.allowed.keyboardTranslate = true; break;
+            case 4:
+                coins.push(new Coin(-0.670782299402527,1.847042640633274,1.562644363633795, callback));
+                coins[coins.length-1].addToScene(scene);
+                coins.push(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback));
+                coins[coins.length-1].addToScene(scene);
+                coins.push(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback));
+                coins[coins.length-1].addToScene(scene);
+                break;
+            case 7:
+                this.camera.move(this.camera.resetElements);
+                this.camera.allowed.keyboardTranslate = true;
+                break;
+            case 8:
+                coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
+                coins[coins.length-1].addToScene(scene);
+                break;
         }
         this.step++;
     }
@@ -53,6 +96,13 @@ TutorialSteps.prototype.nextAction = function() {
     switch (this.step) {
         case 2: return 'rotate-mouse';
         case 3: return 'rotate-keyboard';
+        case 9: return 'translate-keyboard';
+    }
+}
+
+TutorialSteps.prototype.tryFinish = function() {
+    if (this.coins === 8) {
+        console.log("Finished");
     }
 }
 

js/prototype/initScene.js

@@ -70,8 +70,8 @@ function initPeachCastle(scene, collidableObjects, loader, static_path) {
 
 function resetPeachElements() {
     return {
-        position: new THREE.Vector3(-0.18679773265763222,0.20096245470188506,0.19015771599529685),
+        position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
-        target: new THREE.Vector3(-0.18679773265767263,0.20096245470190005,-39.8098422840047)
+        target: new THREE.Vector3(0.24120226734232672,0.20096245470190008,-40.5998422840047)
     };
 }
 

js/prototype/main.js

@@ -109,6 +109,7 @@ function init() {
     // Load scene
     // initPeachCastle(scene, collidableObjects, loader, static_path);
     initBobombScene(scene, collidableObjects, loader, static_path);
+    Coin.init();
     coins = createBobombCoins();
 
     setTimeout(function() {coins.forEach(function(coin) { coin.addToScene(scene);})}, 1000);

js/prototype/replay.js

@@ -85,6 +85,7 @@ function init() {
     // Load scene
     // initPeachCastle(scene, collidableObjects, loader, static_path);
     initBobombScene(scene, collidableObjects, loader, static_path);
+    Coin.init();
     coins = createBobombCoins();
 
     setTimeout(function() {coins.forEach(function(coin) { coin.addToScene(scene);})}, 1000);

js/prototype/tutorial.js

@@ -116,6 +116,7 @@ function init() {
     initPeachCastle(scene, collidableObjects, loader, static_path);
     // initBobombScene(scene, collidableObjects, loader, static_path);
 
+    Coin.init(0.001);
     coins = [];
     // coins = createBobombCoins();
     // setTimeout(function() {coins.forEach(function(coin) { coin.addToScene(scene);})}, 1000);
@@ -224,7 +225,7 @@ function render() {
     });
 
     // Update coins
-    // coins.forEach(function(coin) { coin.update(); });
+    coins.forEach(function(coin) { coin.update(); });
 
     // Update main camera
     var currentTime = Date.now() - previousTime;