tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site

Browse Source 
- free/dispose game and map class
This commit is contained in:
Kum1ta
2024-08-27 19:34:41 +02:00
parent 87f3411af4
commit 5630f33bc3
2 changed files with 178 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
site/real_game/class/Map.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/08/27 14:29:36 by edbernar ### ########.fr */ /* Updated: 2024/08/27 19:33:00 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -15,60 +15,30 @@ import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { Video } from './Video.js'; import { Video } from './Video.js';
const loader = new GLTFLoader(); let loader = null;
let scene = null; let scene = null;
let videoList = [];
let interval2 = null;
let videoCanvas = null;
let videoCanvasTexture = null;
let materialCanvas = null;
// Plane // Plane
let geometryPlane = null;
let materialPlane = null;
let meshPlane = null;
let textureLoaderPlane = null; let textureLoaderPlane = null;
let texturePlane = null; let texturePlane = null;
// Border wall // Border wall
let geometryWall = null;
let materialWall = null;
let meshWall = null;
// Gravity changer // Gravity changer
let geometry1 = null;
let material1 = null;
let ring1 = null;
let geometry2 = null;
let material2 = null;
let ring2 = null;
let geometry3 = null;
let material3 = null;
let ring3 = null;
let geometry4 = null;
let material4 = null;
let circle1 = null;
let geometry5 = null;
let material5 = null;
let circle2 = null;
let geometry6 = null;
let material6 = null;
let collider = null;
let groupJumper = null;
// Wall obstacle
let geometryWallObs = null;
let materialWallObs = null;
let meshWallObs = null;
// Banner
let videoCanvas = null;
let video1 = null;
let video2 = null;
let video3 = null;
let video4 = null;
let video5 = null;
let videoCanvasTexture = null;
let materialCanvas = null;
// Gravity changer animation
let geometryGC = null;
let materialGC = null;
let ringGC = null;
let landmarkGC = null;
let interval = null;
// Wall obstacle
// Banner
// Gravity changer animation
class Map class Map
{ {
arrObject = []; arrObject = [];
@ -90,23 +60,59 @@ class Map
can: true can: true
}; };
static create() dispose()
{ {
videoList.forEach(elem => {
elem.video.pause();
elem.video.src = '';
elem.video.removeAttribute('src');
elem.video.load();
})
videoList = null;
videoCanvas.remove();
if (videoCanvasTexture)
videoCanvasTexture.dispose();
if (materialCanvas)
materialCanvas.dispose();
videoCanvas = null;
textureLoaderPlane = null;
loader = null;
if (texturePlane)
texturePlane.dispose();
this.arrObject.forEach(elem => {
if (elem.mesh instanceof THREE.Group)
{
elem.mesh.children.forEach(child => {
if (child.geometry)
child.geometry.dispose();
if (child.material)
child.material.dispose();
if (child.texture)
child.texture.dispose();
});
}
else
{
if (elem.mesh.geometry)
elem.mesh.geometry.dispose();
if (elem.mesh.material)
elem.mesh.material.dispose();
if (elem.mesh.texture)
elem.mesh.texture.dispose();
}
scene.remove(elem.mesh);
});
if (interval2)
clearInterval(interval2);
scene = null;
} }
static dispose()
{
// Plane
// Border wall
// Gravity changer
// Wall obstacle
// Banner
// Gravity changer animation
}
constructor(sceneToSet, length, obstacles) constructor(sceneToSet, length, obstacles)
{ {
scene = sceneToSet; loader = new GLTFLoader();
scene = sceneToSet;
this.centerPos.x = 0; this.centerPos.x = 0;
this.centerPos.y = 0.15; this.centerPos.y = 0.15;
this.centerPos.z = -length / 2 + length / 2; this.centerPos.z = -length / 2 + length / 2;
@ -118,33 +124,20 @@ class Map
this.#createBanner(); this.#createBanner();
if (obstacles) if (obstacles)
this.#generateObstacle(); this.#generateObstacle();
/***** JUST FOR TEST *****/
document.addEventListener('keypress', (e) => {
if (e.key == 'q')
{
for (let i = 0; i < this.arrObject.length; i++)
{
if (this.arrObject[i].type == 'jumperTop')
this.#animationGravityChanger(this.arrObject[i].mesh, true)
if (this.arrObject[i].type == 'jumperBottom')
this.#animationGravityChanger(this.arrObject[i].mesh, false)
}
}
})
/*************************/
}; };
#createPlanes(x, y, rot, name, isBottom, visual) #createPlanes(x, y, rot, name, isBottom, visual)
{ {
let geometryPlane = null;
let materialPlane = null;
let meshPlane = null;
for (let i = 0; i < this.arrObject.length; i++) for (let i = 0; i < this.arrObject.length; i++)
{ {
if (this.arrObject[i].name == name) if (this.arrObject[i].name == name)
throw Error("Name already exist."); throw Error("Name already exist.");
} }
geometryPlane = new THREE.PlaneGeometry(x, y);
geometryPlane = new THREE.PlaneGeometry(x, y);
if (typeof(visual) == 'string') if (typeof(visual) == 'string')
{ {
textureLoaderPlane = new THREE.TextureLoader(); textureLoaderPlane = new THREE.TextureLoader();
@ -168,15 +161,19 @@ class Map
#createWall(x, y, z, name) #createWall(x, y, z, name)
{ {
let geometryWall = null;
let materialWall = null;
let meshWall = null;
for (let i = 0; i < this.arrObject.length; i++) for (let i = 0; i < this.arrObject.length; i++)
{ {
if (this.arrObject[i].name == name) if (this.arrObject[i].name == name)
throw Error("Name already exist."); throw Error("Name already exist.");
} }
geometryWall = new THREE.BoxGeometry(0.05, 0.5, 0.75); geometryWall = new THREE.BoxGeometry(0.05, 0.5, 0.75);
materialWall = new THREE.MeshPhysicalMaterial(); materialWall = new THREE.MeshPhysicalMaterial();
meshWall = new THREE.Mesh(geometryWall, materialWall); meshWall = new THREE.Mesh(geometryWall, materialWall);
meshWall.position.set(x, y, z); meshWall.position.set(x, y, z);
materialWall.transparent = true; materialWall.transparent = true;
materialWall.opacity = 0.5; materialWall.opacity = 0.5;
@ -186,11 +183,32 @@ class Map
#createGravityChanger(x, y, z, name, typeName, onTop) #createGravityChanger(x, y, z, name, typeName, onTop)
{ {
let geometry1 = null;
let material1 = null;
let ring1 = null;
let geometry2 = null;
let material2 = null;
let ring2 = null;
let geometry3 = null;
let material3 = null;
let ring3 = null;
let geometry4 = null;
let material4 = null;
let circle1 = null;
let geometry5 = null;
let material5 = null;
let circle2 = null;
let geometry6 = null;
let material6 = null;
let collider = null;
let groupJumper = null;
for (let i = 0; i < this.arrObject.length; i++) for (let i = 0; i < this.arrObject.length; i++)
{ {
if (this.arrObject[i].name == name) if (this.arrObject[i].name == name)
throw Error("Name already exist."); throw Error("Name already exist.");
} }
geometry1 = new THREE.TorusGeometry(1, 0.1, 12, 24); geometry1 = new THREE.TorusGeometry(1, 0.1, 12, 24);
material1 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); material1 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
ring1 = new THREE.Mesh(geometry1, material1); ring1 = new THREE.Mesh(geometry1, material1);
@ -273,10 +291,13 @@ class Map
#createWallObstacle(x, y, size, onTop) #createWallObstacle(x, y, size, onTop)
{ {
let geometryWallObs = null;
let materialWallObs = null;
let meshWallObs = null;
geometryWallObs = new THREE.BoxGeometry(size, 0.5, 0.1); geometryWallObs = new THREE.BoxGeometry(size, 0.5, 0.1);
materialWallObs = new THREE.MeshPhysicalMaterial({color: 0xaaaafe}); materialWallObs = new THREE.MeshPhysicalMaterial({color: 0xaaaafe});
meshWallObs = new THREE.Mesh(geometryWallObs, materialWallObs); meshWallObs = new THREE.Mesh(geometryWallObs, materialWallObs);
if (onTop) if (onTop)
meshWallObs.position.set(x, this.playerLimits.up - 0.1, y); meshWallObs.position.set(x, this.playerLimits.up - 0.1, y);
else else
@ -300,7 +321,7 @@ class Map
videoCanvas.width = 100 * 2.33 * 20; videoCanvas.width = 100 * 2.33 * 20;
videoCanvas.height = 100; videoCanvas.height = 100;
let path = [ const path = [
'../textures/video/goal2.webm', '../textures/video/goal2.webm',
'../textures/video/pingpong.mp4', '../textures/video/pingpong.mp4',
'../textures/video/catch.mp4', '../textures/video/catch.mp4',
@ -308,9 +329,7 @@ class Map
'../textures/video/fortnite.mp4', '../textures/video/fortnite.mp4',
'../textures/video/Composition 1_1.webm', '../textures/video/Composition 1_1.webm',
] ]
// path.sort(() => Math.random() - 0.5); path.sort(() => Math.random() - 0.5);
let vSettings = [];
let spacingImages = [ let spacingImages = [
100 * 2.33 * 10 - (100 * 2.33), // 2 images 100 * 2.33 * 10 - (100 * 2.33), // 2 images
@ -319,10 +338,10 @@ class Map
100 * 2.33 * 1.25 - (100 * 2.33), // 16 images 100 * 2.33 * 1.25 - (100 * 2.33), // 16 images
]; ];
const nbVideos = 1; // 1, 2, 3, 4, 5 const nbVideos = 5; // 1, 2, 3, 4, 5
const nbImages = 3; // 0 = 2 img, 1 = 4 img, 2 = 8 img, 3 = 16 img const nbImages = 3; // 0 = 2 img, 1 = 4 img, 2 = 8 img, 3 = 16 img
// const startIndex = ((Math.random() * (path.length - nbVideos)).toFixed(0)) % path.length; const startIndex = ((Math.random() * (path.length - nbVideos)).toFixed(0)) % path.length;
const startIndex = 5; // const startIndex = 5;
for (let i = startIndex; i < (nbVideos + startIndex); i++) for (let i = startIndex; i < (nbVideos + startIndex); i++)
{ {
@ -331,29 +350,33 @@ class Map
videoTmp.play(); videoTmp.play();
drawVideoOnCanvas(); drawVideoOnCanvas();
}); });
vSettings.push({video: videoTmp, imageWidth: 100 * 2.33, imageHeight: 100}); videoList.push({video: videoTmp, imageWidth: 100 * 2.33, imageHeight: 100});
} }
function drawVideoOnCanvas() { function drawVideoOnCanvas()
ctx.clearRect(0, 0, videoCanvas.width, videoCanvas.height); {
if (videoCanvas)
if (nbVideos == 0)
return ;
let nbDraw = 0;
let vIndex = 0;
let y = 0;
for (let x = 0; x < videoCanvas.width; x += (vSettings[vIndex].imageWidth + spacingImages[nbImages]))
{ {
ctx.drawImage(vSettings[vIndex].video, x, y, vSettings[vIndex].imageWidth, vSettings[vIndex].imageHeight); ctx.clearRect(0, 0, videoCanvas.width, videoCanvas.height);
nbDraw++;
if (nbVideos > 1) if (nbVideos == 0)
vIndex++; return ;
if (vIndex >= nbVideos) let nbDraw = 0;
vIndex = 0; let vIndex = 0;
let y = 0;
for (let x = 0; x < videoCanvas.width; x += (videoList[vIndex].imageWidth + spacingImages[nbImages]))
{
ctx.drawImage(videoList[vIndex].video, x, y, videoList[vIndex].imageWidth, videoList[vIndex].imageHeight);
nbDraw++;
if (nbVideos > 1)
vIndex++;
if (vIndex >= nbVideos)
vIndex = 0;
}
videoCanvasTexture.needsUpdate = true;
requestAnimationFrame(drawVideoOnCanvas);
} }
videoCanvasTexture.needsUpdate = true;
requestAnimationFrame(drawVideoOnCanvas);
} }
// Create texture // Create texture
@ -364,34 +387,30 @@ class Map
materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: true}); materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: true});
// videoCanvas.innerHTML = 'Test'; // ca sert ca eddy ? Repond stp ?
loader.load( '../blender/exported/banner.glb', (gltf) => { loader.load( '../blender/exported/banner.glb', (gltf) => {
this.banner = gltf.scene.children[0]; this.banner = gltf.scene.children[0];
gltf = null;
this.banner.material = materialCanvas; this.banner.material = materialCanvas;
this.banner.position.y += 1.7; this.banner.position.y += 1.7;
this.banner.rotation.x = (Math.PI); this.banner.rotation.x = (Math.PI);
this.banner.rotation.y += -0.15; this.banner.rotation.y += -0.15;
scene.add(gltf.scene); scene.add(this.banner);
setInterval(() => { interval2 = setInterval(() => {
this.banner.rotation.y += 0.001; this.banner.rotation.y += 0.001;
}, 10); }, 10);
}, undefined, function ( error ) { }, undefined, function ( error ) {
console.error( error ); console.error( error );
} ); } );
function animate() {
requestAnimationFrame(animate);
}
animate();
} }
#animationGravityChanger(group, onTop) #animationGravityChanger(group, onTop)
{ {
geometryGC = new THREE.TorusGeometry(1.5, 0.05, 12, 24); let geometryGC = new THREE.TorusGeometry(1.5, 0.05, 12, 24);
materialGC = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); let materialGC = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
ringGC = new THREE.Mesh(geometryGC, materialGC); let ringGC = new THREE.Mesh(geometryGC, materialGC);
landmarkGC = group.children[0]; let landmarkGC = group.children[0];
let speed = 0.1; let speed = 0.1;
let interval = null;
ringGC.rotateX(-Math.PI / 2); ringGC.rotateX(-Math.PI / 2);
ringGC.position.set(landmarkGC.position.x, landmarkGC.position.y, landmarkGC.position.z); ringGC.position.set(landmarkGC.position.x, landmarkGC.position.y, landmarkGC.position.z);

60
site/real_game/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ /* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/08/27 15:21:49 by edbernar ### ########.fr */ /* Updated: 2024/08/27 19:18:17 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -46,13 +46,11 @@ const fpsLocker = {
let previousTime = 0; let previousTime = 0;
let scene = null; let scene = null;
let map = null; let map = null;
let bar1 = null; let ball = null;
let renderer = null; let renderer = null;
let player = null; let player = null;
let spotLight = null; let spotLight = null;
let ambiantLight = null; let ambiantLight = null;
let ball = null;
let bar2 = null;
let opponent = null; let opponent = null;
// ------------------- (need to be remove) -------------------- // // ------------------- (need to be remove) -------------------- //
@ -68,21 +66,22 @@ class Game
{ {
static create() static create()
{ {
previousTime = Date.now(); const bar1 = createBarPlayer(0xed56ea);
scene = new THREE.Scene() const bar2 = createBarPlayer(0xf3e11e);
map = new Map(scene, 13, true);
bar1 = createBarPlayer(0xed56ea); previousTime = Date.now();
renderer = new THREE.WebGLRenderer({antialias: true}); scene = new THREE.Scene()
map = new Map(scene, 13, true);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
player = new Player(bar1, map); player = new Player(bar1, map);
spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2); spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2);
spotLight.castShadow = true; spotLight.castShadow = true;
ambiantLight = new THREE.AmbientLight(0xffffff, 0.5); ambiantLight = new THREE.AmbientLight(0xffffff, 0.5);
ball = new Ball(scene, map); ball = new Ball(scene, map);
bar2 = createBarPlayer(0xf3e11e); opponent = new Opponent(bar2, map);
opponent = new Opponent(bar2, map); debug = false;
debug = false;
scene.add(player.object); scene.add(player.object);
scene.add(opponent.object); scene.add(opponent.object);
@ -99,6 +98,7 @@ class Game
cameraTmp.position.set(5, 3, 5); cameraTmp.position.set(5, 3, 5);
controls.target = new THREE.Vector3(map.centerPos.x, 0, map.centerPos.z); controls.target = new THREE.Vector3(map.centerPos.x, 0, map.centerPos.z);
document.addEventListener('keypress', (e) => { document.addEventListener('keypress', (e) => {
if (e.key == 'g') if (e.key == 'g')
player.pointAnimation(map); player.pointAnimation(map);
@ -113,8 +113,26 @@ class Game
static dispose() static dispose()
{ {
scene = null;
debug = false; debug = false;
if (renderer)
renderer.dispose();
renderer = null;
if (map)
map.dispose();
if (scene)
{
scene.children.forEach(child => {
if (child.geometry)
child.geometry.dispose();
if (child.material)
child.material.dispose();
if (child.texture)
child.texture.dispose();
scene.remove(child);
});
}
scene = null;
} }
} }
@ -155,4 +173,8 @@ function loop()
stats.end(); stats.end();
} }
Game.create(); Game.create();
setTimeout(() => {
Game.dispose();
}, 5000);