Skip to content

Commit

Permalink
Add logos on GUI + Manage GUI resize
Browse files Browse the repository at this point in the history
  • Loading branch information
@dorianbayart
dorianbayart committed Nov 19, 2023
1 parent 60a5802 commit 81dfeee
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 24 deletions.
79 changes: 70 additions & 9 deletions energy/gui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ var deltaSize = 5 / refreshDelay;

var latest = 0;

var hpToDisplay;
var hpToDisplay = 0;

export class Gui {
constructor() {
Expand All @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 = () => {
Expand Down
35 changes: 20 additions & 15 deletions energy/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ function init() {

// MAZE MESH
const mazeMaterial = new THREE.MeshLambertMaterial({
color: COLOR.GRAY,
color: COLOR.LIGHTERGRAY,
reflectivity: 1,
// shininess: 150
});
Expand All @@ -132,53 +132,57 @@ 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;
g.meshes.mobMesh.receiveShadow = true;
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;


Expand Down Expand Up @@ -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 = () => {
Expand Down

0 comments on commit 81dfeee

Please sign in to comment.