From 5b1707e8d3f080cef172bb35d0f88c26420ef454 Mon Sep 17 00:00:00 2001 From: hubourge Date: Thu, 29 Aug 2024 17:58:04 +0200 Subject: [PATCH] Game - Add video event goal/outstanding - Add video random mode - Add video clear --- site/real_game/class/MultiGame.js | 28 ++- site/real_game/class/multiClass/Map.js | 202 +++++++----------- ...{Composition 1_1.webm => outstanding.webm} | Bin 3 files changed, 99 insertions(+), 131 deletions(-) rename site/real_game/textures/video/{Composition 1_1.webm => outstanding.webm} (100%) diff --git a/site/real_game/class/MultiGame.js b/site/real_game/class/MultiGame.js index e70ab1b..cf76535 100644 --- a/site/real_game/class/MultiGame.js +++ b/site/real_game/class/MultiGame.js @@ -6,7 +6,7 @@ /* By: hubourge +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ -/* Updated: 2024/08/28 16:34:39 by hubourge ### ########.fr */ +/* Updated: 2024/08/29 17:54:30 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -36,6 +36,13 @@ Controls : - 4 : balle vers la gauche - 6 : balle vers ladroite - 9 : inversion gravite + + - p : clear video + - o : goal video + - i : outstanding video + - u : 16 video + - y : 8 video + - t : 4 video */ let debug = false; @@ -107,19 +114,22 @@ class MultiGame if (e.key == 'c') debug = !debug; if (e.key == 'p') - { - map.clearVideoCanvas(); - } + map.putVideoOnCanvas(0, null); if (e.key == 'o') - { - // map.clearVideoCanvas(); - map.putVideoOnCanvas(3, 'catch'); - } + map.putVideoOnCanvas(3, 'goal'); + if (e.key == 'i') + map.putVideoOnCanvas(3, 'outstanding'); + if (e.key == 'u') + map.putVideoOnCanvas(3, 3); + if (e.key == 'y') + map.putVideoOnCanvas(2, 3); + if (e.key == 't') + map.putVideoOnCanvas(1, 3); }) renderer.setAnimationLoop(loop) } - + static dispose() { debug = false; diff --git a/site/real_game/class/multiClass/Map.js b/site/real_game/class/multiClass/Map.js index c43b17a..ac0f2f8 100644 --- a/site/real_game/class/multiClass/Map.js +++ b/site/real_game/class/multiClass/Map.js @@ -6,7 +6,7 @@ /* By: hubourge +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ -/* Updated: 2024/08/28 19:07:03 by hubourge ### ########.fr */ +/* Updated: 2024/08/29 17:52:41 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -25,9 +25,21 @@ let materialCanvas = null; let textureLoaderPlane = null; let texturePlane = null; let ctx = null; -let path = []; -let spacingImages = []; -let clearVideo = false; + +let path = [ + {name: 'goal', onChoice: true, src:'../textures/video/goal2.webm'}, + {name: 'easteregg', onChoice: true, src:'../textures/video/easteregg.webm'}, + {name: 'outstanding', onChoice: true, src:'../textures/video/outstanding.webm'}, + {name: 'ping', onChoice: false, src:'../textures/video/pingpong.mp4'}, + {name: 'catch', onChoice: false, src:'../textures/video/catch.mp4'}, + {name: 'fortnite', onChoice: false, src:'../textures/video/fortnite.mp4'}, +] +let spacingImages = [ + 100 * 2.33 * 10 - (100 * 2.33), // 2 images + 100 * 2.33 * 5 - (100 * 2.33), // 4 images + 100 * 2.33 * 2.5 - (100 * 2.33), // 8 images + 100 * 2.33 * 1.25 - (100 * 2.33), // 16 images +]; class Map { @@ -112,7 +124,6 @@ class Map scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, '/textures/pastel.jpg')); scene.add(this.#createWall(-3.5, 0.4, -length/2, "wallLeft")); scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight")); - this.#createBanner(); if (obstacles) this.#generateObstacle(); }; @@ -298,90 +309,56 @@ class Map /* Todo (Hugo) : - Faire une zone Player banner (importer un model blender) - - Faire une zone pour les pub (s'inspirer de theFinals) (ok) - - - Effet gros pixel (ok) - - Effet de lumière en 2d (direct dans les videos) - - Preparer differents events + - Faire une zone pour les pub (ok) + - Effet gros pixel (ok) + - Effet de lumière en 2d (essayer shader ou filtre) + - Preparer differents events (ok) */ - #createBanner() + putVideoOnCanvas(nbImage, vNameNb) { - // Create canvas + this.#clearVideoCanvas(); + if (nbImage <= 0) + return ; + + let startIndex = 0; + let nbVideos = 1; + path.sort(() => Math.random() - 0.5); + + // Create the canvas for the video videoCanvas = document.createElement('canvas'); ctx = videoCanvas.getContext('2d'); videoCanvas.width = 100 * 2.33 * 20; videoCanvas.height = 100; + + // Get the number of videos to display + if (vNameNb && typeof(vNameNb) == 'number') + nbVideos = vNameNb; + if (vNameNb && typeof(vNameNb) == 'string') + startIndex = getIndex(vNameNb); - path = [ - {name: 'goal', src:'../textures/video/goal2.webm'}, - {name: 'ping', src:'../textures/video/pingpong.mp4'}, - {name: 'catch', src:'../textures/video/catch.mp4'}, - {name: 'easteregg', src:'../textures/video/easteregg.webm'}, - {name: 'fortnite', src:'../textures/video/fortnite.mp4'}, - {name: 'outstanding', src:'../textures/video/outstanding.webm'}, - ] - path.sort(() => Math.random() - 0.5); - - spacingImages = [ - 100 * 2.33 * 10 - (100 * 2.33), // 2 images - 100 * 2.33 * 5 - (100 * 2.33), // 4 images - 100 * 2.33 * 2.5 - (100 * 2.33), // 8 images - 100 * 2.33 * 1.25 - (100 * 2.33), // 16 images - ]; - - // const nbImages = 3; // 0 = 2 img, 1 = 4 img, 2 = 8 img, 3 = 16 img - - // // Create texture - // videoCanvasTexture = new THREE.CanvasTexture(videoCanvas); - // videoCanvasTexture.wrapS = THREE.RepeatWrapping; - // videoCanvasTexture.wrapT = THREE.RepeatWrapping; - // videoCanvasTexture.repeat.set(-1, 1); - - // materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: false}); - - // loader.load( '../blender/exported/banner.glb', (gltf) => { - // this.banner = gltf.scene.children[0]; - // gltf = null; - // this.banner.material = materialCanvas; - // this.banner.position.y += 1.7; - // this.banner.rotation.x = (Math.PI); - // this.banner.rotation.y += -0.15; - // scene.add(this.banner); - // interval2 = setInterval(() => { - // this.banner.rotation.y += 0.001; - // }, 10); - // }, undefined, function ( error ) { - // console.error( error ); - // } ); - } - - putVideoOnCanvas(nbImage, name) - { - console.log('put video canvas'); - - let startIndex; - let nbVideos = 1; - - if (name && typeof(name) == 'number') - nbVideos = name; - if (name && typeof(name) == 'string') + function getIndex(vNameNb) { - for (let index = 0; index < path.length; index++) + for (let i = 0; i < path.length; i++) { - if (path[index].name == name) - { - startIndex = index; - break ; - } - startIndex = 0; + if (path[i].name == vNameNb) + return (i); } + return (0); } - else - startIndex = ((Math.random() * (path.length - nbVideos)).toFixed(0)) % path.length; + // Fill the videoList with the videos for (let i = startIndex; i < (nbVideos + startIndex); i++) { - let videoTmp = new Video(path[i].src).video; + if (path[i].onChoice == true && !(vNameNb && typeof(vNameNb) == 'string')) + { + startIndex++; + continue ; + } + let videoTmp = null; + if (Math.random() < 0.99) + videoTmp = new Video(path[i].src).video; + else + videoTmp = new Video(path[getIndex('easteregg')].src).video; videoTmp.addEventListener('loadeddata', () => { videoTmp.play(); drawVideoOnCanvas(); @@ -389,17 +366,12 @@ class Map videoList.push({video: videoTmp, imageWidth: 100 * 2.33, imageHeight: 100}); } - console.log('videoList', videoList); - + // Draw the video on the canvas function drawVideoOnCanvas() { if (videoCanvas) { ctx.clearRect(0, 0, videoCanvas.width, videoCanvas.height); - if (clearVideo) - { - return ; - } if (nbVideos == 0) return ; let nbDraw = 0; @@ -413,20 +385,23 @@ class Map vIndex++; if (vIndex >= nbVideos) vIndex = 0; + if (!(videoList && videoList[vIndex])) + break ; } if (videoCanvasTexture) videoCanvasTexture.needsUpdate = true; requestAnimationFrame(drawVideoOnCanvas); } } - // Create texture + + // Create the material and the banner videoCanvasTexture = new THREE.CanvasTexture(videoCanvas); videoCanvasTexture.wrapS = THREE.RepeatWrapping; videoCanvasTexture.wrapT = THREE.RepeatWrapping; videoCanvasTexture.repeat.set(-1, 1); - - materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: false}); - + materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: true}); + + // Load the banner loader.load( '../blender/exported/banner.glb', (gltf) => { this.banner = gltf.scene.children[0]; gltf = null; @@ -443,15 +418,13 @@ class Map } ); } - clearVideoCanvas() + #clearVideoCanvas() { - console.log('clear video canvas'); if (videoCanvas) { videoCanvas.remove(); videoCanvas = null; } - if (videoList) { videoList.forEach(elem => { @@ -460,41 +433,26 @@ class Map elem.video.removeAttribute('src'); elem.video.load(); }) - videoList = null; - videoList = []; } - // if (videoCanvasTexture) - // videoCanvasTexture.dispose(); - - // videoCanvas = null; - // videoCanvasTexture = new THREE.CanvasTexture(videoCanvas); - // videoCanvasTexture.wrapS = THREE.RepeatWrapping; - // videoCanvasTexture.wrapT = THREE.RepeatWrapping; - // videoCanvasTexture.repeat.set(-1, 1); - - // if (materialCanvas) - // materialCanvas.dispose(); - - // materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: false}); - - // loader.load( '../blender/exported/banner.glb', (gltf) => { - // this.banner = gltf.scene.children[0]; - // gltf = null; - // this.banner.material = materialCanvas; - // this.banner.position.y += 1.7; - // this.banner.rotation.x = (Math.PI); - // this.banner.rotation.y += -0.15; - // scene.add(this.banner); - // interval2 = setInterval(() => { - // this.banner.rotation.y += 0.001; - // }, 10); - // }, undefined, function ( error ) { - // console.error( error ); - // } ); - - console.log('videoList', videoList); + videoList = []; + if (videoCanvasTexture) + { + videoCanvasTexture.dispose(); + videoCanvasTexture = null; + } + if (materialCanvas) + { + materialCanvas.dispose(); + materialCanvas = null; + } + if (interval2) + { + clearInterval(interval2); + interval2 = null; + } + scene.remove(this.banner); } - + #animationGravityChanger(group, onTop) { let geometryGC = new THREE.TorusGeometry(1.5, 0.05, 12, 24); @@ -562,7 +520,7 @@ class Map update(ball) { - for (let i = 0; i < this.arrObject.length; i++) + for (let i = 0; this.arrObject && i < this.arrObject.length; i++) { if (this.arrObject[i].name == "wallLeft") { diff --git a/site/real_game/textures/video/Composition 1_1.webm b/site/real_game/textures/video/outstanding.webm similarity index 100% rename from site/real_game/textures/video/Composition 1_1.webm rename to site/real_game/textures/video/outstanding.webm