From 81dfeee40edb9fddec516285a28da66b1b2fe216 Mon Sep 17 00:00:00 2001 From: Dorian Bayart Date: Sun, 19 Nov 2023 23:48:50 +0100 Subject: [PATCH] Add logos on GUI + Manage GUI resize --- energy/gui.js | 79 ++++++++++++++++++++++++++++++++++++++++++------ energy/script.js | 35 ++++++++++++--------- 2 files changed, 90 insertions(+), 24 deletions(-) diff --git a/energy/gui.js b/energy/gui.js index 731dbe2..31dbd1c 100644 --- a/energy/gui.js +++ b/energy/gui.js @@ -42,7 +42,7 @@ var deltaSize = 5 / refreshDelay; var latest = 0; -var hpToDisplay; +var hpToDisplay = 0; export class Gui { constructor() { @@ -51,6 +51,9 @@ export class Gui { this.mouse = new THREE.Vector2(); this.raycaster = new THREE.Raycaster(); + this.moneyLogo; + this.scoreLogo; + this.livesLogo; this.money; this.score; this.lives; @@ -91,9 +94,9 @@ export class Gui { deltas = deltas.slice(-deltaSize); fps = Math.round(deltas.length / deltas.reduce((a, b) => a + b)); - this.money.text = `Money: ${g.gameManager.game.money}`; - this.score.text = `Score: ${g.gameManager.game.score}`; - this.lives.text = `Lives: ${g.gameManager.game.lives}`; + this.money.text = g.gameManager.game.money; + this.score.text = g.gameManager.game.score; + this.lives.text = g.gameManager.game.lives; this.energyPerSec.text = `Energy: ${g.gameManager.game.energyPerSec >= 0 ? '+' : ''}${g.gameManager.game.energyPerSec.toFixed(g.gameManager.game.energyPerSec > 10 ? 0 : 2)}/s`; if (displayStats) { @@ -165,25 +168,83 @@ export class Gui { } initTexts = () => { + /* MONEY */ + this.moneyLogo = PIXI.Sprite.from('../public/icons/money-alt.svg'); + this.moneyLogo.anchor.set(.5); + this.moneyLogo.width = 1.4*this.textStyle.fontSize; + this.moneyLogo.height = 1.4*this.textStyle.fontSize; + this.moneyLogo.tint = 0x00FF00; + g.scenePixi.addChild(this.moneyLogo); + this.money = new PIXI.Text('', this.textStyle); - this.money.position.set(5, 2); g.scenePixi.addChild(this.money); + /* SCORE */ + this.scoreLogo = PIXI.Sprite.from('../public/icons/trophy.svg'); + this.scoreLogo.anchor.set(.5); + this.scoreLogo.width = 1.2*this.textStyle.fontSize; + this.scoreLogo.height = 1.2*this.textStyle.fontSize; + this.scoreLogo.tint = 0x00FF00; + g.scenePixi.addChild(this.scoreLogo); + this.score = new PIXI.Text('', this.textStyle); - this.score.position.set(5, 1.1*this.textStyle.fontSize + 2); g.scenePixi.addChild(this.score); + /* LIVES */ + this.livesLogo = PIXI.Sprite.from('../public/icons/heart-shield.svg'); + this.livesLogo.anchor.set(.5); + this.livesLogo.width = 1.4*this.textStyle.fontSize; + this.livesLogo.height = 1.4*this.textStyle.fontSize; + this.livesLogo.tint = 0x00FF00; + g.scenePixi.addChild(this.livesLogo); + this.lives = new PIXI.Text('', this.textStyle); - this.lives.position.set(5, 1.1*this.textStyle.fontSize*2 + 2); g.scenePixi.addChild(this.lives); + /* ENERGY */ this.energyPerSec = new PIXI.Text('', this.textStyle); - this.energyPerSec.position.set(window.innerWidth - energyBarParameters.width - 5, energyBarParameters.height + 2); g.scenePixi.addChild(this.energyPerSec); + /* DEBUG STATS */ this.debugStats = new PIXI.Text('', this.textStyle); - this.debugStats.position.set(5, window.innerHeight - 2.4*this.textStyle.fontSize - 5); g.scenePixi.addChild(this.debugStats); + + this.onResize(); + } + + onResize = () => { + if(window.innerWidth < 500 && window.innerWidth < window.innerHeight) { // Portrait + const logoSize = this.moneyLogo.width; + this.moneyLogo.x = logoSize/2 + 5; + this.moneyLogo.y = logoSize/2 + 3; + this.money.position.set(5 + this.moneyLogo.width + 4, 2); + + this.scoreLogo.x = logoSize/2 + 5; + this.scoreLogo.y = logoSize/2 + 1.5*this.textStyle.fontSize + 3; + this.score.position.set(5 + logoSize + 4, 1.5*this.textStyle.fontSize + 2); + + this.livesLogo.x = logoSize/2 + 5; + this.livesLogo.y = logoSize/2 + 2*1.5*this.textStyle.fontSize + 3; + this.lives.position.set(5 + logoSize + 4, 2*1.5*this.textStyle.fontSize + 2); + } else { // Landscape + this.moneyLogo.x = this.moneyLogo.width/2 + 5; + this.moneyLogo.y = this.moneyLogo.height/2 + 3; + this.money.position.set(5 + this.moneyLogo.width + 4, 2); + + this.scoreLogo.x = this.scoreLogo.width/2 + 105; + this.scoreLogo.y = this.scoreLogo.height/2 + 3; + this.score.position.set(105 + this.scoreLogo.width + 4, 2); + + this.livesLogo.x = this.livesLogo.width/2 + 205; + this.livesLogo.y = this.livesLogo.height/2 + 2; + this.lives.position.set(205 + this.livesLogo.width + 4, 2); + } + + this.progressBar.bg.position.x = window.innerWidth - energyBarParameters.width - 5; + this.progressBar.fill.position.x = window.innerWidth - energyBarParameters.width - 5; + this.energyPerSec.position.set(window.innerWidth - energyBarParameters.width - 5, energyBarParameters.height + 2); + + this.debugStats.position.set(5, window.innerHeight - 2.4*this.textStyle.fontSize - 5); } createTowerGui_open = () => { diff --git a/energy/script.js b/energy/script.js index e9f9898..98f1acc 100644 --- a/energy/script.js +++ b/energy/script.js @@ -122,7 +122,7 @@ function init() { // MAZE MESH const mazeMaterial = new THREE.MeshLambertMaterial({ - color: COLOR.GRAY, + color: COLOR.LIGHTERGRAY, reflectivity: 1, // shininess: 150 }); @@ -132,7 +132,7 @@ function init() { g.meshes.wallMesh.receiveShadow = true; // MOB MESH - const mobMaterial = new THREE.MeshLambertMaterial({ color: COLOR.BLUE }); + const mobMaterial = new THREE.MeshLambertMaterial({ color: COLOR.LIGHTERBLUE }); const mobGeometry = new THREE.BoxGeometry(1 / 2, 1 / 2, 1 / 2); g.meshes.mobMesh = new THREE.Mesh(mobGeometry, mobMaterial); g.meshes.mobMesh.castShadow = true; @@ -140,45 +140,49 @@ function init() { g.meshes.mobMesh.position.y = g.meshes.mobMesh.geometry.parameters.height / 2; // MISSILE MESH - const missileMaterial = new THREE.MeshLambertMaterial({ color: COLOR.INDIGO }); + const missileMaterial_normal = new THREE.MeshLambertMaterial({ color: COLOR.LIGHTBROWN }); + const missileMaterial_rocket = new THREE.MeshLambertMaterial({ color: COLOR.LIGHTERINDIGO }); const missileGeometry_normal = new THREE.SphereGeometry(.12, Math.floor(8 * g.parameters.quality), Math.floor(8 * g.parameters.quality)); const missileGeometry_rocket = new THREE.CylinderGeometry(.1, .12, .25, Math.floor(8 * g.parameters.quality), 1); - MISSILE_TYPES.NORMAL.mesh = new THREE.Mesh(missileGeometry_normal, missileMaterial); + MISSILE_TYPES.NORMAL.mesh = new THREE.Mesh(missileGeometry_normal, missileMaterial_normal); MISSILE_TYPES.NORMAL.mesh.castShadow = true; // MISSILE_TYPES.NORMAL.mesh.receiveShadow = true; - MISSILE_TYPES.ROCKET.mesh = new THREE.Mesh(missileGeometry_rocket, missileMaterial); + MISSILE_TYPES.ROCKET.mesh = new THREE.Mesh(missileGeometry_rocket, missileMaterial_rocket); MISSILE_TYPES.ROCKET.mesh.castShadow = true; // MISSILE_TYPES.ROCKET.mesh.receiveShadow = true; - const particuleMaterial = new THREE.MeshLambertMaterial({ color: COLOR.INDIGO }); + const particuleMaterial_normal = new THREE.MeshLambertMaterial({ color: COLOR.LIGHTBROWN }); + const particuleMaterial_rocket = new THREE.MeshLambertMaterial({ color: COLOR.LIGHTERINDIGO }); const particuleGeometry_normal = new THREE.BoxGeometry(PARTICULE_TYPES.NORMAL.size, PARTICULE_TYPES.NORMAL.size, PARTICULE_TYPES.NORMAL.size); const particuleGeometry_rocket = new THREE.BoxGeometry(PARTICULE_TYPES.ROCKET.size, PARTICULE_TYPES.ROCKET.size, PARTICULE_TYPES.ROCKET.size); - PARTICULE_TYPES.NORMAL.mesh = new THREE.Mesh(particuleGeometry_normal, particuleMaterial); + PARTICULE_TYPES.NORMAL.mesh = new THREE.Mesh(particuleGeometry_normal, particuleMaterial_normal); PARTICULE_TYPES.NORMAL.mesh.castShadow = true; // PARTICULE_TYPES.NORMAL.mesh.receiveShadow = true; - PARTICULE_TYPES.ROCKET.mesh = new THREE.Mesh(particuleGeometry_rocket, particuleMaterial); + PARTICULE_TYPES.ROCKET.mesh = new THREE.Mesh(particuleGeometry_rocket, particuleMaterial_rocket); PARTICULE_TYPES.ROCKET.mesh.castShadow = true; // PARTICULE_TYPES.ROCKET.mesh.receiveShadow = true; // TOWER MESH - const towerMaterial = new THREE.MeshLambertMaterial({ color: COLOR.BROWN }); + const towerMaterial_normal = new THREE.MeshLambertMaterial({ color: COLOR.LIGHTERBROWN }); + const towerMaterial_rocket = new THREE.MeshLambertMaterial({ color: COLOR.INDIGO }); const towerGeometry_normal = new THREE.BoxGeometry(.5, .75, .5); const towerGeometry_rocket = new THREE.CylinderGeometry(.2, .3, .75, Math.floor(12 * g.parameters.quality), 1); - TOWER_TYPES.NORMAL.mesh = new THREE.Mesh(towerGeometry_normal, towerMaterial); + TOWER_TYPES.NORMAL.mesh = new THREE.Mesh(towerGeometry_normal, towerMaterial_normal); TOWER_TYPES.NORMAL.mesh.castShadow = true; TOWER_TYPES.NORMAL.mesh.receiveShadow = true; - TOWER_TYPES.ROCKET.mesh = new THREE.Mesh(towerGeometry_rocket, towerMaterial); + TOWER_TYPES.ROCKET.mesh = new THREE.Mesh(towerGeometry_rocket, towerMaterial_rocket); TOWER_TYPES.ROCKET.mesh.castShadow = true; TOWER_TYPES.ROCKET.mesh.receiveShadow = true; // RANGE TOWER MESH - const rangeMaterial = new THREE.MeshLambertMaterial({ transparent: true, opacity: 0.5, color: COLOR.BROWN }); + const rangeMaterial_normal = new THREE.MeshLambertMaterial({ transparent: true, opacity: 0.5, color: COLOR.LIGHTBROWN }); + const rangeMaterial_rocket = new THREE.MeshLambertMaterial({ transparent: true, opacity: 0.5, color: COLOR.LIGHTERINDIGO }); const rangeGeometry_normal = new THREE.CylinderGeometry( TOWER_TYPES.NORMAL.range, TOWER_TYPES.NORMAL.range, 0.05, Math.floor(24 * g.parameters.quality), 1 ); const rangeGeometry_rocket = new THREE.CylinderGeometry( TOWER_TYPES.ROCKET.range, TOWER_TYPES.ROCKET.range, 0.05, Math.floor(24 * g.parameters.quality), 1 ); - TOWER_TYPES.NORMAL.rangeMesh = new THREE.Mesh(rangeGeometry_normal, rangeMaterial); + TOWER_TYPES.NORMAL.rangeMesh = new THREE.Mesh(rangeGeometry_normal, rangeMaterial_normal); TOWER_TYPES.NORMAL.rangeMesh.receiveShadow = true; - TOWER_TYPES.ROCKET.rangeMesh = new THREE.Mesh(rangeGeometry_rocket, rangeMaterial); + TOWER_TYPES.ROCKET.rangeMesh = new THREE.Mesh(rangeGeometry_rocket, rangeMaterial_rocket); TOWER_TYPES.ROCKET.rangeMesh.receiveShadow = true; @@ -299,11 +303,12 @@ const render = async () => { const onResize = () => { g.renderer.setPixelRatio(window.devicePixelRatio /** g.parameters.quality*/); g.renderer.setSize(window.innerWidth, window.innerHeight); + g.rendererPixi.resize(window.innerWidth, window.innerHeight); g.camera.fov = getFov(); g.camera.aspect = window.innerWidth / window.innerHeight; g.camera.updateProjectionMatrix(); - g.gui.debugStats.position.set(5, window.innerHeight - 2.4*g.gui.textStyle.fontSize - 5); + g.gui.onResize(); }; const getFov = () => {