diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js index 1b86832..50b31a3 100644 --- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js +++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js @@ -13,6 +13,9 @@ import { GLTFLoader } from '/static/javascript/three/examples/jsm/loaders/GLTFLoader.js'; import * as THREE from '/static/javascript/three/build/three.module.js' import { Video } from '/static/javascript/multiOnlineGame/Video.js'; +import { GUI } from '/static/javascript/three/examples/jsm/libs/lil-gui.module.min.js'; +import { player, opponent, ball} from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js'; +import { Ball } from '/static/javascript/multiOnlineGame/Ball.js' let loader = null; let scene = null; @@ -24,6 +27,11 @@ let materialCanvas = null; let textureLoaderPlane = null; let texturePlane = null; let ctx = null; +let fireworkMixer = null; +let canvasText = null; +let contextCanvasText = null; +let textureCanvasText = null; +let score = {player: 0, opponent: 0}; let path = [ {name: 'goal', onChoice: true, src:'/static/video/multiOnlineGamePage/goal2.webm', blob: null}, @@ -55,9 +63,6 @@ class Map ballObject = null; mapLength = 0; banner = null; - firework = null; - fireworkMixer = null; - fireworkAnimations = null; centerPos = { x: -1, y: -1, @@ -131,6 +136,29 @@ class Map scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight")); if (obstacles) this.#generateObstacle(); + + { // A retirer + /* Style de couleur why not + 0xFFCCCC + 0xFF9999 + 0xFF6666 + 0xFF3333 + 0xCC0000 + + 0xCCFFCC + 0x99FF99 + 0x66FF66 + 0x33FF33 + 0x009900 + + 0xCCCCFF + 0x9999FF + 0x6666FF + 0x3333FF + 0x0000CC + */ + } + this.putScoreboard(0xCCCCFF); }; #createPlanes(x, y, rot, name, isBottom, visual) @@ -185,7 +213,7 @@ class Map this.arrObject[i].mesh.material.color.set(texture); } } - } + }; #createWall(x, y, z, name) { @@ -331,15 +359,82 @@ class Map else meshWallObs.position.set(x, 0.4, y); return (meshWallObs); - } + }; + + putScoreboard(color) + { + this.#clearScoreboard(); + let materialScoreboard = null; + let geometryScoreboard1 = null; + let meshScoreboard1 = null; + let geometryScoreboard2 = null; + let meshScoreboard2 = null; + + let materialText = null; + let geometryText1 = null; + let meshText1 = null; + let geometryText2 = null; + let meshText2 = null; + + let height = 1.8; + let width = 6; + let depth = 0.2; + + materialScoreboard = new THREE.MeshPhysicalMaterial({color: color}); + geometryScoreboard1 = new THREE.BoxGeometry(width, height, depth); + meshScoreboard1 = new THREE.Mesh(geometryScoreboard1, materialScoreboard); + geometryScoreboard2 = new THREE.BoxGeometry(width, height, depth); + meshScoreboard2 = new THREE.Mesh(geometryScoreboard2, materialScoreboard); + + canvasText = document.createElement('canvas'); + contextCanvasText = canvasText.getContext('2d'); + canvasText.width = 512 * 2; + canvasText.height = 256 * 2; + drawScore(score); + textureCanvasText = new THREE.CanvasTexture(canvasText); + + materialText = new THREE.MeshBasicMaterial({ map: textureCanvasText }); + geometryText1 = new THREE.PlaneGeometry(width - 0.15, height - 0.15); + meshText1 = new THREE.Mesh(geometryText1, materialText); + geometryText2 = new THREE.PlaneGeometry(width - 0.15, height - 0.15); + meshText2 = new THREE.Mesh(geometryText2, materialText); + + meshScoreboard1.rotation.y = Math.PI; + meshText1.rotation.y = Math.PI; + meshScoreboard1.position.set(0, 1.65, 9.5); + meshText1.position.set(0, 1.65, 9.5 - depth / 2 - 0.05); + meshScoreboard2.position.set(0, 1.65, -9.5); + meshText2.position.set(0, 1.65, - 9.5 + depth / 2 + 0.05); + + scene.add(meshScoreboard1); + scene.add(meshScoreboard2); + scene.add(meshText1); + scene.add(meshText2); + this.arrObject.push({mesh: meshScoreboard1, name: "", type: "scoreboard"}); + this.arrObject.push({mesh: meshScoreboard2, name: "", type: "scoreboard"}); + this.arrObject.push({mesh: meshText1, name: "", type: "scoreboard"}); + this.arrObject.push({mesh: meshText2, name: "", type: "scoreboard"}); + }; + + #clearScoreboard() + { + for (let i = 0; i < this.arrObject.length; i++) + { + if (this.arrObject[i].type == "scoreboard") + { + if (this.arrObject[i].mesh.geometry) + this.arrObject[i].mesh.geometry.dispose(); + if (this.arrObject[i].mesh.material) + this.arrObject[i].mesh.material.dispose(); + scene.remove(this.arrObject[i].mesh); + this.arrObject[i].mesh.geometry = null; + this.arrObject[i].mesh.material = null; + this.arrObject[i].mesh = null; + this.arrObject.splice(i, 1); + } + } + }; - /* Todo (Hugo) : - - Faire une zone Player banner (importer un model blender) - - 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) - */ putVideoOnCanvas(nbImage, vNameNb) { this.#clearVideoCanvas(); @@ -440,7 +535,7 @@ class Map }, undefined, function ( error ) { console.error( error ); } ); - } + }; #clearVideoCanvas() { @@ -475,27 +570,31 @@ class Map interval2 = null; } scene.remove(this.banner); - } + }; animationGoal() { + let actions = {}; + loader.load('/static/models3D/multiOnlineGame/fireworkv1.glb', (gltf) => { - this.firework = gltf.scene.children[0]; - this.fireworkAnimations = gltf.animations; // Récupérez les animations du modèle - gltf = null; - this.firework.material = new THREE.MeshPhysicalMaterial({color: 0xff0000}); - scene.add(this.firework); - - this.fireworkMixer = new THREE.AnimationMixer(this.firework); - this.fireworkAnimations.forEach((clip) => { - this.fireworkMixer.clipAction(clip).play(); // Joue toutes les animations - }); - - console.log(this.firework); + fireworkMixer = new THREE.AnimationMixer(gltf.scene); + for (let value of gltf.animations){ + let action = fireworkMixer.clipAction(value); + action.play(); + } + scene.add(gltf.scene); + fireworkAnimate(); }, undefined, function (error) { console.error(error); }); - } + + let fireworkAnimate = function () + { + console.log("fireworkAnimate"); + requestAnimationFrame(fireworkAnimate); + fireworkMixer.update(0.016); + } + }; #animationGravityChanger(group, onTop) { @@ -522,7 +621,7 @@ class Map if (materialGC.opacity == 0) clearInterval(interval); }, 10); - } + }; #generateObstacle() { @@ -564,9 +663,6 @@ class Map update(ball) { - if (this.mixer) { - this.mixer.update(0.016); // Le deltaTime, ajustez selon le temps entre les frames - } for (let i = 0; this.arrObject && i < this.arrObject.length; i++) { if (this.arrObject[i].name == "wallLeft") @@ -643,6 +739,34 @@ class Map } } }; + + updateScore(name, score) + { + if (name == "player") + score.player++; + else if (name == "opponent") + score.opponent++; + drawScore(score); + textureCanvasText.needsUpdate = true; + } + + reCreate(name) + { + this.updateScore(name, score); + ball.resetPosBall(); + player.resetPosPlayer(); + player.reserCameraPlayer(); + opponent.resetPosOpponent(); + }; }; -export { Map }; +function drawScore(score) +{ + contextCanvasText.clearRect(0, 0, canvasText.width, canvasText.height); + contextCanvasText.fillStyle = "white"; + contextCanvasText.font = "bold 350px Arial"; + contextCanvasText.textAlign = "center"; + contextCanvasText.fillText(score.player + " - " + score.opponent, canvasText.width / 2, canvasText.height - canvasText.height / 4); +}; + +export { Map }; \ No newline at end of file diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Opponent.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Opponent.js index f56e1cd..eab10ff 100644 --- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Opponent.js +++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Opponent.js @@ -11,6 +11,7 @@ /* ************************************************************************** */ let opponentExist = false; +let mapLength = 0; class Opponent { @@ -33,6 +34,7 @@ class Opponent opponentExist = true; this.object = object; this.object.position.set(0, 0.3, -map.mapLength / 2 + 0.2); + mapLength = map.mapLength; } dispose() @@ -44,6 +46,11 @@ class Opponent { } + resetPosOpponent() + { + this.object.position.set(0, 0.3, -mapLength / 2 + 0.2); + } + movePlayer(content) { const lerp = (start, end, t) => start + (end - start) * t; diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js index 07d7f93..4da136f 100644 --- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js +++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js @@ -46,6 +46,7 @@ import * as THREE from '/static/javascript/three/build/three.module.js' let playerExist = false; let isOnPointAnim = false; let pressedButton = []; +let mapLength = 0; class Player { @@ -70,6 +71,7 @@ class Player this.limits = map.playerLimits; this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000); this.object.position.set(0, this.limits.down, map.mapLength / 2 - 0.2); + mapLength = map.mapLength; this.setCameraPosition( this.object.position.x, this.object.position.y + 0.7, @@ -92,6 +94,20 @@ class Player clearInterval(interval); } + resetPosPlayer() + { + this.object.position.set(0, this.limits.down, mapLength / 2 - 0.2); + } + + reserCameraPlayer() + { + this.setCameraPosition( + this.object.position.x, + this.object.position.y + 0.7, + this.object.position.z + 1.5 + ); + } + pointAnimation(map) { const tmpCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000); diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js index 607d585..84e28fa 100644 --- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js +++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js @@ -45,6 +45,9 @@ Controls : - u : 16 video - y : 8 video - t : 4 video + + - l : recreate et augmente le score de player + - k : recreate et augmente le score de opponent */ let scene = null; @@ -107,7 +110,6 @@ class MultiOnlineGamePage controls.target = new THREE.Vector3(map.centerPos.x, 0, map.centerPos.z); ////////////////////////// - document.addEventListener('keypress', (e) => { if (e.key == 'g') player.pointAnimation(map); @@ -130,6 +132,10 @@ class MultiOnlineGamePage map.putVideoOnCanvas(2, 3); if (e.key == 't') map.putVideoOnCanvas(1, 3); + if (e.key == 'l') + map.reCreate("player"); + if (e.key == 'k') + map.reCreate("opponent"); }) renderer.setAnimationLoop(loop) @@ -225,4 +231,4 @@ function loop() //////////// } -export { MultiOnlineGamePage, opponent, ball }; +export { MultiOnlineGamePage, player, opponent, ball }; \ No newline at end of file