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

little)
This commit is contained in:
Thomas FORGIONE 2015-05-28 10:43:58 +02:00
parent e2edfcfbfc
commit f64a861936
7 changed files with 108 additions and 31 deletions

View File

@ -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.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.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); this.position.add(direction);
} }
@ -248,11 +260,9 @@ TutoCamera.prototype.isColliding = function(direction) {
for (var i in intersects) { for (var i in intersects) {
if (intersects[i].distance < Tools.norm(direction) + this.speed * 300 && if (intersects[i].distance < Tools.norm(direction) + this.speed * 300 &&
intersects[i].object.raycastable) { intersects[i].object.raycastable) {
return true; return intersects[i];
} }
} }
return false;
} }
// Look function // Look function
@ -269,6 +279,9 @@ TutoCamera.prototype.onKeyEvent = function(event, toSet) {
var motionJsonCopy = JSON.stringify(this.motion); var motionJsonCopy = JSON.stringify(this.motion);
if (this.allowed.keyboardTranslate) { if (this.allowed.keyboardTranslate) {
if (this.tutorial.nextAction() === 'translate-keyboard') {
this.tutorial.nextStep();
}
switch ( event.keyCode ) { switch ( event.keyCode ) {
// Azerty keyboards // Azerty keyboards
case 38: case 90: this.motion.moveForward = toSet; break; // up / z case 38: case 90: this.motion.moveForward = toSet; break; // up / z

25
js/prototype/Coin.js vendored
View File

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

View File

@ -1,7 +1,9 @@
var TutorialSteps = function(tutoCamera) { var TutorialSteps = function(tutoCamera) {
this.camera = tutoCamera; this.camera = tutoCamera;
this.step = 0; this.step = 0;
this.coins = 0;
this.camera.allowed = {}; this.camera.allowed = {};
this.camera.allowed.keyboardTranslate = true;
this.instructions = [ this.instructions = [
{ {
@ -21,8 +23,32 @@ var TutorialSteps = function(tutoCamera) {
justclick: false 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 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() { TutorialSteps.prototype.nextStep = function() {
if (this.step < this.instructions.length) { if (this.step < this.instructions.length) {
this.alert(this.instructions[this.step].text, this.instructions[this.step].justclick); 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) { switch (this.step) {
case 0: break; case 0: break;
case 1: this.camera.allowed.mouseRotate = true; break; case 1: this.camera.allowed.mouseRotate = true; break;
case 2: this.camera.allowed.keyboardRotate = true; break; case 2: this.camera.allowed.keyboardRotate = true; break;
case 3: case 3:
this.camera.allowed.keyboardRotate = true; this.camera.allowed.keyboardRotate = true;
var self = this;
coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, function() { coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, function() {
self.nextStep(); self.nextStep();
self.coins++;
})); }));
coins[coins.length-1].addToScene(scene); coins[coins.length-1].addToScene(scene);
break; 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++; this.step++;
} }
@ -53,6 +96,13 @@ TutorialSteps.prototype.nextAction = function() {
switch (this.step) { switch (this.step) {
case 2: return 'rotate-mouse'; case 2: return 'rotate-mouse';
case 3: return 'rotate-keyboard'; case 3: return 'rotate-keyboard';
case 9: return 'translate-keyboard';
}
}
TutorialSteps.prototype.tryFinish = function() {
if (this.coins === 8) {
console.log("Finished");
} }
} }

View File

@ -70,8 +70,8 @@ function initPeachCastle(scene, collidableObjects, loader, static_path) {
function resetPeachElements() { function resetPeachElements() {
return { 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)
}; };
} }

View File

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

View File

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

View File

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