render range preview above cells

This commit is contained in:
koneko 2025-01-18 14:01:18 +01:00
parent a9f083a81e
commit d75ea2427c
2 changed files with 16 additions and 11 deletions

View File

@ -18,7 +18,6 @@ export class Cell extends GameObject {
public g: PIXI.Graphics; public g: PIXI.Graphics;
public hasTowerPlaced: boolean = false; public hasTowerPlaced: boolean = false;
public clickDetector: PIXI.Graphics; public clickDetector: PIXI.Graphics;
public rangePreview: PIXI.Graphics;
constructor(type: TerrainType, row: number, column: number, isPath: boolean) { constructor(type: TerrainType, row: number, column: number, isPath: boolean) {
super(); super();
@ -39,9 +38,7 @@ export class Cell extends GameObject {
interactive: true, interactive: true,
}); });
// ? TODO: make range preview 1 global graphics obj, child. fix // ? TODO: make range preview 1 global graphics obj, child. fix
this.rangePreview = new PIXI.Graphics({
zIndex: 10,
});
this.g = new PIXI.Graphics({ this.g = new PIXI.Graphics({
zIndex: 5, zIndex: 5,
}); });
@ -49,7 +46,6 @@ export class Cell extends GameObject {
this.clickDetector.fill({ color: 0xff0000, alpha: 0 }); this.clickDetector.fill({ color: 0xff0000, alpha: 0 });
this.container.addChild(this.clickDetector); this.container.addChild(this.clickDetector);
this.container.addChild(this.g); this.container.addChild(this.g);
this.container.addChild(this.rangePreview);
this.clickDetector.on('pointerup', (e) => { this.clickDetector.on('pointerup', (e) => {
Engine.Grid.onGridCellClicked(row, column); Engine.Grid.onGridCellClicked(row, column);
}); });
@ -57,12 +53,12 @@ export class Cell extends GameObject {
Engine.GameScene.events.emit(GridEvents.CellMouseOver, this); Engine.GameScene.events.emit(GridEvents.CellMouseOver, this);
}); });
this.clickDetector.on('pointerleave', (e) => { this.clickDetector.on('pointerleave', (e) => {
this.rangePreview.clear(); Engine.Grid.rangePreview.clear();
}); });
Engine.GameScene.events.on(TowerEvents.TowerPlacedEvent, (_, row, col) => { Engine.GameScene.events.on(TowerEvents.TowerPlacedEvent, (_, row, col) => {
if (row == this.row && col == this.column) { if (row == this.row && col == this.column) {
this.hasTowerPlaced = true; this.hasTowerPlaced = true;
this.rangePreview.clear(); Engine.Grid.rangePreview.clear();
} }
}); });
Engine.GameScene.events.on(TowerEvents.TowerSoldEvent, (_, row, col) => { Engine.GameScene.events.on(TowerEvents.TowerSoldEvent, (_, row, col) => {
@ -74,9 +70,13 @@ export class Cell extends GameObject {
public showRangePreview(invalid, range) { public showRangePreview(invalid, range) {
let color = 0xffffff; let color = 0xffffff;
if (invalid) color = 0xff0000; if (invalid) color = 0xff0000;
this.rangePreview.clear(); Engine.Grid.rangePreview.clear();
this.rangePreview.circle(Engine.GridCellSize / 2, Engine.GridCellSize / 2, range * Engine.GridCellSize); Engine.Grid.rangePreview.circle(
this.rangePreview.fill({ color: color, alpha: 0.3 }); this.column * Engine.GridCellSize + Engine.GridCellSize / 2,
this.row * Engine.GridCellSize + Engine.GridCellSize / 2,
range * Engine.GridCellSize
);
Engine.Grid.rangePreview.fill({ color: color, alpha: 0.3 });
} }
public checkIfCantPlace() { public checkIfCantPlace() {
return ( return (
@ -104,6 +104,7 @@ export class Cell extends GameObject {
export class Grid extends GameObject { export class Grid extends GameObject {
private gameMap: GameMapDefinition; private gameMap: GameMapDefinition;
private cells: Cell[] = []; private cells: Cell[] = [];
public rangePreview: PIXI.Graphics;
public creeps: Creep[] = []; public creeps: Creep[] = [];
public gridShown: boolean = false; public gridShown: boolean = false;
@ -115,6 +116,7 @@ export class Grid extends GameObject {
this.bb.y = 0; this.bb.y = 0;
this.bb.width = Engine.GridCellSize * Engine.GridColumns; this.bb.width = Engine.GridCellSize * Engine.GridColumns;
this.bb.height = Engine.GridCellSize * Engine.GridRows; this.bb.height = Engine.GridCellSize * Engine.GridRows;
Engine.GameMaster.currentScene.stage.addChild(this.container); Engine.GameMaster.currentScene.stage.addChild(this.container);
let background = new PIXI.Sprite(GameAssets.MissionBackgrounds[missionIndex]); let background = new PIXI.Sprite(GameAssets.MissionBackgrounds[missionIndex]);
@ -130,6 +132,10 @@ export class Grid extends GameObject {
this.cells.push(cell); this.cells.push(cell);
} }
} }
this.rangePreview = new PIXI.Graphics({
zIndex: 10,
});
this.container.addChild(this.rangePreview);
} }
public toggleGrid(force?: 'hide' | 'show') { public toggleGrid(force?: 'hide' | 'show') {
this.cells.forEach((cell) => { this.cells.forEach((cell) => {

View File

@ -27,7 +27,6 @@ export default class TowerManager {
if (this.isPlacingTower) { if (this.isPlacingTower) {
let cantPlace = cell.checkIfCantPlace(); let cantPlace = cell.checkIfCantPlace();
if (cantPlace) { if (cantPlace) {
cell.rangePreview.clear();
cell.showRangePreview(true, this.selectedTower.stats.range); cell.showRangePreview(true, this.selectedTower.stats.range);
this.previewSprite.tint = 0xff0000; this.previewSprite.tint = 0xff0000;
} else { } else {