From f64a8619364805bd2160b5a31db8184715668c80 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Thu, 28 May 2015 10:43:58 +0200 Subject: [PATCH] Finished tutorial, corrected bug, and fixed TutoCamera collision (a little) --- js/TutoCamera.js | 21 ++++++++++--- js/prototype/Coin.js | 53 ++++++++++++++++++++------------- js/prototype/TutorialSteps.js | 56 +++++++++++++++++++++++++++++++++-- js/prototype/initScene.js | 4 +-- js/prototype/main.js | 1 + js/prototype/replay.js | 1 + js/prototype/tutorial.js | 3 +- 7 files changed, 108 insertions(+), 31 deletions(-) diff --git a/js/TutoCamera.js b/js/TutoCamera.js index d375fb9..4264472 100644 --- a/js/TutoCamera.js +++ b/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 diff --git a/js/prototype/Coin.js b/js/prototype/Coin.js index 3e9d0c6..93c3205 100644 --- a/js/prototype/Coin.js +++ b/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); - this.callback = callback; + 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) - (function(self) { - self.update = function() { - // self.mesh.rotation.y += 0.1; - } - })(this); + var self = this; + if (this.ready && this.rotating) + this.mesh.rotation.y += 0.1 } Coin.prototype.get = function() { if (!this.got) { this.got = true; - this.callback(); + + // Call the callback if any + if (this.callback) + this.callback(); + if (this.mesh) { this.mesh.visible = false; } @@ -75,17 +79,24 @@ Coin.total = 1; Coin.BASIC_MESH = null; Coin._loader = new THREE.OBJLoader(); -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.material.color.setHex(0xff0000); - mesh.geometry.computeVertexNormals(); - mesh.raycastable = true; - Coin.BASIC_MESH = mesh - } - }); + +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(scale,scale,scale); + mesh.material.color.setHex(0xff0000); + mesh.geometry.computeVertexNormals(); + mesh.raycastable = true; + Coin.BASIC_MESH = mesh + } + }); + } + ); +} diff --git a/js/prototype/TutorialSteps.js b/js/prototype/TutorialSteps.js index b0e3627..68d96cc 100644 --- a/js/prototype/TutorialSteps.js +++ b/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"); } } diff --git a/js/prototype/initScene.js b/js/prototype/initScene.js index cc35835..22ba442 100644 --- a/js/prototype/initScene.js +++ b/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), - target: new THREE.Vector3(-0.18679773265767263,0.20096245470190005,-39.8098422840047) + position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036), + target: new THREE.Vector3(0.24120226734232672,0.20096245470190008,-40.5998422840047) }; } diff --git a/js/prototype/main.js b/js/prototype/main.js index 50e3a97..6c0ec6b 100644 --- a/js/prototype/main.js +++ b/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); diff --git a/js/prototype/replay.js b/js/prototype/replay.js index 59ab5b6..3a8388e 100644 --- a/js/prototype/replay.js +++ b/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); diff --git a/js/prototype/tutorial.js b/js/prototype/tutorial.js index ab5d26d..444b52e 100644 --- a/js/prototype/tutorial.js +++ b/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;