Skip to content

Commit

Permalink
creation d'obstacles
Browse files Browse the repository at this point in the history
  • Loading branch information
michael-marynowicz committed Mar 17, 2022
1 parent 3884656 commit f30c76d
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 97 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<title>tp1 BabylonJS</title>
<title>Catch And Become Unique</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/default.css">
<script src="lib/babylon.max.js"></script>
Expand Down
222 changes: 126 additions & 96 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
let canvas; //http://127.0.0.1:5501/index.html
let canvas;
let engine;
let scene;
let boule;
let ground;
let ground2;
let followCamera;
let nbrJeton=20;
// vars for handling inputs
let rotationOffset=180;
let inputStates = {};

window.onload = startGame;
Expand All @@ -13,70 +15,68 @@ function startGame() {
canvas = document.querySelector("#myCanvas");
engine = new BABYLON.Engine(canvas, true);
scene = createScene();
//let bullet = createBullet(scene);

// modify some default settings (i.e pointer events to prevent cursor to go
// out of the game window)
scene.jetons=[];
modifySettings();
generateJetons(scene);
engine.runRenderLoop(() => {
let deltaTime = engine.getDeltaTime(); // remind you something ?

boule.move();
collision();
scene.render();
//generation des obstacles
createPipe(50,0);
tremplin(-150,200)
stepByStep(5,100);

createBoundingBox(boule);
generateJetons();
collision();
engine.runRenderLoop(() => {

//followCamera.rotationOffset+=0.5;
if(nbrJeton>19){
boule.move();
scene.render();
}
else{
//boule.moveWithCollisions(new BABYLON.Vector3(0, 1*boule.speed, 0));
boule.move();
scene.render();
}
});
}

function createScene() {
let scene = new BABYLON.Scene(engine);
ground = createGround(scene);
let freeCamera = createFreeCamera(scene);

boule = createBoule(scene);


// second parameter is the target to follow
let followCamera = createFollowCamera(scene, boule);
ground = createGround(0);
ground2 = createGround(200);
let freeCamera = createFreeCamera();
boule = createBoule();
followCamera = createFollowCamera( boule);
scene.activeCamera = followCamera;

createLights(scene);

createLights();
return scene;
}

function createGround(scene) {
function createGround(y) {
const groundOptions = { width:2000, height:2000, subdivisions:20, minHeight:0, maxHeight:100, onReady: onGroundCreated};
//scene is optional and defaults to the current scene
const ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap("gdhm", 'images/hmap1.png', groundOptions, scene);

function onGroundCreated() {
const groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
groundMaterial.diffuseTexture = new BABYLON.Texture("images/grass.jpg");
groundMaterial.diffuseTexture = new BABYLON.Texture("images/grass.png");
ground.material = groundMaterial;
// to be taken into account by collision detection
ground.position.y=y;
ground.checkCollisions = true;
//groundMaterial.wireframe=true;
}
return ground;
}

function createLights(scene) {
// i.e sun light with all light rays parallels, the vector is the direction.
function createLights() {
let light0 = new BABYLON.DirectionalLight("dir0", new BABYLON.Vector3(-1, -1, 0), scene);

}

function createFreeCamera(scene) {
function createFreeCamera() {
let camera = new BABYLON.FreeCamera("freeCamera", new BABYLON.Vector3(0, 50, 0), scene);
camera.attachControl(canvas);
// prevent camera to cross ground
camera.checkCollisions = true;
// avoid flying with the camera
camera.applyGravity = true;

// Add extra keys for camera movements
// Need the ascii code of the extra key(s). We use a string method here to get the ascii code
camera.keysUp.push('z'.charCodeAt(0));
camera.keysDown.push('s'.charCodeAt(0));
camera.keysLeft.push('q'.charCodeAt(0));
Expand All @@ -89,69 +89,52 @@ function createFreeCamera(scene) {
return camera;
}

function createFollowCamera(scene, target) {
function createFollowCamera(target) {
let camera = new BABYLON.FollowCamera("bouleFollowCamera", target.position, scene, target);
camera.radius = 50; // how far from the object to follow
camera.heightOffset = 14; // how high above the object to place the camera
camera.rotationOffset = 180; // the viewing angle
camera.rotationOffset = rotationOffset; // the viewing angle
camera.cameraAcceleration = .1; // how fast to move
camera.maxCameraSpeed = 5; // speed limit
return camera;
}

let zMovement = 5;
function createBoule(scene) {
function createBoule() {
boule = new BABYLON.MeshBuilder.CreateSphere("heroboule", {diameter : 7}, scene);
let bouleMaterial = new BABYLON.StandardMaterial("bouleMaterial", scene);
bouleMaterial.diffuseColor = new BABYLON.Color3.White;
bouleMaterial.emissiveColor = new BABYLON.Color3.Black;
boule.material = bouleMaterial;

// By default the box/boule is in 0, 0, 0, let's change that...
boule.position.y = 3.5;
boule.speed = 1;
boule.frontVector = new BABYLON.Vector3(0, 0, 1);
boule.move = () => {
//boule.position.z += -1; // speed should be in unit/s, and depends on
// deltaTime !

// if we want to move while taking into account collision detections
// collision uses by default "ellipsoids"

boule.move = () => { //TODO bien detecter les colisions car la ce n'est pas assez precis
let yMovement = 0;

if (boule.position.y > 2) {
zMovement = 0;
yMovement = -2;
}
//boule.moveWithCollisions(new BABYLON.Vector3(0, yMovement, zMovement));


}
if(inputStates.up) {
//boule.moveWithCollisions(new BABYLON.Vector3(0, 0, 1*boule.speed));
boule.moveWithCollisions(boule.frontVector.multiplyByFloats(boule.speed, boule.speed, boule.speed));
}
}
if(inputStates.down) {
//boule.moveWithCollisions(new BABYLON.Vector3(0, 0, -1*boule.speed));
boule.moveWithCollisions(boule.frontVector.multiplyByFloats(-boule.speed, -boule.speed, -boule.speed));

}
}
if(inputStates.left) {
//boule.moveWithCollisions(new BABYLON.Vector3(-1*boule.speed, 0, 0));
boule.rotation.y -= 0.02;
boule.frontVector = new BABYLON.Vector3(Math.sin(boule.rotation.y), 0, Math.cos(boule.rotation.y));
}
}
if(inputStates.right) {
//boule.moveWithCollisions(new BABYLON.Vector3(1*boule.speed, 0, 0));
boule.rotation.y += 0.02;
boule.frontVector = new BABYLON.Vector3(Math.sin(boule.rotation.y), 0, Math.cos(boule.rotation.y));
}
if(inputStates.space){

}

}

}
return boule;
}

Expand All @@ -160,17 +143,12 @@ window.addEventListener("resize", () => {
});

function modifySettings() {
// as soon as we click on the game window, the mouse pointer is "locked"
// you will have to press ESC to unlock it

// key listeners for the boule
inputStates.left = false;
inputStates.right = false;
inputStates.up = false;
inputStates.down = false;
inputStates.space = false;

//add the listener to the main, window object, and update the states

window.addEventListener('keydown', (event) => {
if ((event.key === "ArrowLeft") || (event.key === "q")|| (event.key === "Q")) {
inputStates.left = true;
Expand All @@ -185,7 +163,6 @@ function modifySettings() {
}
}, false);

//if the key will be released, change the states object
window.addEventListener('keyup', (event) => {
if ((event.key === "ArrowLeft") || (event.key === "q")|| (event.key === "Q")) {
inputStates.left = false;
Expand All @@ -197,64 +174,117 @@ function modifySettings() {
inputStates.down = false;
} else if (event.key === " ") {
inputStates.space = false;
}
}

}, false);
}

function createJeton(i,scene){
let xrand = Math.floor(Math.random()*500 - 250);
let zrand = Math.floor(Math.random()*500 - 250);
function createJeton(i,x,y,z){ // cree un jeton aux coordonnées (x,y,z)
let jeton = new BABYLON.MeshBuilder.CreateSphere("jeton_"+i, {diameter : 2}, scene);
let jetonMaterial = new BABYLON.StandardMaterial("jetonMaterial", scene);
jeton.position.y = 1;
jeton.position.x = xrand;
jeton.position.z = zrand;
jeton.position.y = y;
jeton.position.x = x;
jeton.position.z = z;
jetonMaterial.emissiveColor = new BABYLON.Color3.Blue;
jeton.material = jetonMaterial;
jeton.checkCollisions=false;

jeton.checkCollisions=true;
createBoundingBox(jeton);
createBoundingBox(boule);
return jeton;
}

function createBoundingBox(elt){
function createBoundingBox(elt){ // fonction pour generer les bounding box
let eltMin = elt.getBoundingInfo().boundingBox.minimum;
let eltMax = elt.getBoundingInfo().boundingBox.maximum;

let bouleMin = ground.getBoundingInfo().boundingBox.minimum;
let bouleMax = ground.getBoundingInfo().boundingBox.maximum;
let groundMin = ground.getBoundingInfo().boundingBox.minimum;
let groundMax = ground.getBoundingInfo().boundingBox.maximum;

let newMin = BABYLON.Vector3.Minimize(eltMin, bouleMin);
let newMax = BABYLON.Vector3.Maximize(eltMax, bouleMax);
let newMin = BABYLON.Vector3.Minimize(eltMin, groundMin);
let newMax = BABYLON.Vector3.Maximize(eltMax, groundMax);

elt.setBoundingInfo(new BABYLON.BoundingInfo(newMin, newMax));
elt.showBoundingBox = false;
}

function generateJetons(scene){
scene.jeton = []
function generateJetons(){
for (let i = 0; i < nbrJeton; i++) {
scene.jeton[i] = createJeton(i,scene);
let xrand = Math.floor(Math.random()*500 - 250);
let zrand = Math.floor(Math.random()*500 - 250);
console.log(i)
scene.jetons[i] = createJeton(i,xrand,1,zrand);
}
}

function collision(){
function collision(){// detecte quand la boule rentre en colision avec un jeton
boule.actionManager = new BABYLON.ActionManager(scene);
// register an action for when the cannonball intesects a dude, so we need to iterate on each dude
scene.jeton.forEach(jeton => {
scene.jetons.forEach(jeton => {
boule.actionManager.registerAction(new BABYLON.ExecuteCodeAction(
{trigger : BABYLON.ActionManager.OnIntersectionEnterTrigger,
parameter : jeton}, // dude is the mesh, Dude is the instance if Dude class that has a bbox as a property named bounder.
// see Dude class, line 16 ! dudeMesh.Dude = this;
parameter : jeton},
() => {
//console.log("HIT !")
jeton.dispose();
//cannonball.dispose(); // don't work properly why ? Need for a closure ?
nbrJeton-=1;
}
));
});
}

//############ Creation des obstacles ###################
function stepByStep(x,z){
createStep(20,20,0,x+10,5,z);
createStep(10,10,1,x+33,10,z);
createStep(5,5,2,x+48,15,z);
createStep(10,10,3,x+63,10,z);
createStep(20,20,4,x+83,5,z);
scene.jetons[nbrJeton]=createJeton(nbrJeton,x+48,20,z);
nbrJeton-=1;

}

function createStep(w,s,id,x,y,z){
let step = new BABYLON.MeshBuilder.CreateBox("step_"+id,{size:s,width : w,height:2},scene);
step.material = new BABYLON.StandardMaterial("stepMaterial", scene);
step.checkCollisions = true;
step.position.x=x;
step.position.y=y;
step.position.z = z;
createBoundingBox(step);

}

function createPipe(x,z){
const pipe = BABYLON.MeshBuilder.CreateCylinder("cylinder", {height:40, size:50,diameterTop:1,diameterBottom:60});
pipe.position.x=x;
pipe.position.z=z;
pipe.position.y=1;
pipe.checkCollisions = true;
createBoundingBox(pipe);
scene.jetons[nbrJeton]=createJeton(nbrJeton,x,24,z);
nbrJeton-=1;
}

function tremplin(x,z){
const curve = BABYLON.MeshBuilder.CreateSphere("sphere", {arc: 0.25,diameter:60, sideOrientation: 2});
curve.position.x=x;
curve.position.z=z;
curve.position.y=27;
createBoundingBox(curve);
curve.checkCollisions=true;

const torus = BABYLON.MeshBuilder.CreateTorus("torus", {thickness: 0.85, diameter: 10});
torus.position.z=z+85;
torus.position.x=x-20;
torus.position.y = 36;
torus.rotation = new BABYLON.Vector3(0, 0, 3.1);
createBoundingBox(torus);
torus.checkCollisions=true;

scene.jetons[nbrJeton]=createJeton(nbrJeton,torus.position.x,torus.position.y,torus.position.z=z+25);
nbrJeton-=1;

}





0 comments on commit f30c76d

Please sign in to comment.