better tower functionality

Dev

public/assets/json/Towers.json

@@ -14,5 +14,21 @@
             "cost": 100,
             "range": 3
         }
+    },
+    {
+        "name": "Circle Tower",
+        "behaviour": "BasicTowerBehaviour",
+        "sprite": "circle_tower",
+        "texture": null,
+        "projectileTextures": [],
+        "projectileTexturesArrayLength": 4,
+        "description": "If you feel a little circular.",
+        "stats": {
+            "damage": 6,
+            "cooldown": 180,
+            "gemSlotsAmount": 3,
+            "cost": 125,
+            "range": 3
+        }
     }
 ]

src/classes/Assets.ts

@@ -13,20 +13,25 @@ export default class GameAssets {
     public static GreenBackground: PIXI.Texture;
     public static Button01Texture: PIXI.Texture;
     public static Button02Texture: PIXI.Texture;
+    public static ButtonSmallTexture: PIXI.Texture;
     public static HealthTexture: PIXI.Texture;
     public static GoldTexture: PIXI.Texture;
     public static WaveTexture: PIXI.Texture;
 
+    public static PlayIconTexture: PIXI.Texture;
+    public static PauseIconTexture: PIXI.Texture;
+    public static ExclamationIconTexture: PIXI.Texture;
+    public static HomeIconTexture: PIXI.Texture;
+    public static HammerIconTexture: PIXI.Texture;
+
     public static Missions: MissionDefinition[];
     public static MissionBackgrounds: PIXI.Texture[] = [];
-    public static TowerSprites: PIXI.Texture[] = [];
     public static Towers: TowerDefinition[];
     public static Creeps: CreepDefinition[];
 
     private static text;
     private static async Load(src) {
         this.text.text = 'Loading asset: ' + src;
-        console.log('LOADING ' + src);
         return await PIXI.Assets.load({
             src: src,
         });
@@ -66,6 +71,7 @@ export default class GameAssets {
             this.Load('/aclonica.woff2'),
             this.Load('/assets/gui/button_01.png').then((texture) => (this.Button01Texture = texture)),
             this.Load('/assets/gui/button_02.png').then((texture) => (this.Button02Texture = texture)),
+            this.Load('/assets/gui/button_small.png').then((texture) => (this.ButtonSmallTexture = texture)),
             this.Load('/assets/gui/frame_01.png').then((texture) => (this.Frame01Texture = texture)),
             this.Load('/assets/gui/frame_02.png').then((texture) => (this.Frame02Texture = texture)),
             this.Load('/assets/gui/frame_03.png').then((texture) => (this.Frame03Texture = texture)),
@@ -77,6 +83,11 @@ export default class GameAssets {
             this.Load('/assets/gui/heart.png').then((texture) => (this.HealthTexture = texture)),
             this.Load('/assets/gui/money.png').then((texture) => (this.GoldTexture = texture)),
             this.Load('/assets/gui/wave.png').then((texture) => (this.WaveTexture = texture)),
+            this.Load('/assets/gui/icons/play.png').then((texture) => (this.PlayIconTexture = texture)),
+            this.Load('/assets/gui/icons/pause.png').then((texture) => (this.PauseIconTexture = texture)),
+            this.Load('/assets/gui/icons/exclamation.png').then((texture) => (this.ExclamationIconTexture = texture)),
+            this.Load('/assets/gui/icons/home.png').then((texture) => (this.HomeIconTexture = texture)),
+            this.Load('/assets/gui/icons/hammer.png').then((texture) => (this.HammerIconTexture = texture)),
             this.LoadMissions(),
             this.LoadTowers(),
             this.LoadCreeps(),
@@ -110,21 +121,13 @@ export default class GameAssets {
         const res = await fetch('/assets/json/Towers.json');
         const towers = await res.json();
         this.Towers = towers;
-        console.log(this.Towers);
         for (let idx = 0; idx < this.Towers.length; idx++) {
             const tower = this.Towers[idx];
             for (let i = 0; i < tower.projectileTexturesArrayLength; i++) {
-                console.log(`WANT TO LOAD /assets/projectiles/${tower.sprite}/${i}.png`);
                 const texture = await this.Load(`/assets/projectiles/${tower.sprite}/${i}.png`);
                 tower.projectileTextures[i] = texture;
-                console.log(tower.projectileTextures);
             }
         }
-        towers.forEach(async (tower) => {
-            let index = this.TowerSprites.length - 1;
-            if (index == -1) index = 0;
-            this.TowerSprites[index] = await this.Load(`/assets/towers/${tower.sprite}.png`);
-        });
     }
 
     private static async LoadMission(missionUrl: string) {

src/classes/game/Grid.ts

@@ -4,14 +4,21 @@ import { GameMapDefinition, TerrainType } from '../Definitions';
 import GameAssets from '../Assets';
 import { Engine } from '../Bastion';
 import Creep, { CreepEvents } from './Creep';
+import { TowerEvents } from './Tower';
+
+export enum GridEvents {
+    CellMouseOver = 'cellmouseover',
+}
 
 export class Cell extends GameObject {
     public type: TerrainType;
     public row: number;
     public column: number;
     public isPath: boolean = false;
-    private g: PIXI.Graphics;
+    public g: PIXI.Graphics;
+    public hasTowerPlaced: boolean = false;
     public clickDetector: PIXI.Graphics;
+    public rangePreview: PIXI.Graphics;
 
     constructor(type: TerrainType, row: number, column: number, isPath: boolean) {
         super();
@@ -31,36 +38,64 @@ export class Cell extends GameObject {
             zIndex: 99,
             interactive: true,
         });
+        this.rangePreview = new PIXI.Graphics({
+            zIndex: 6,
+        });
         this.clickDetector.rect(0, 0, this.bb.width, this.bb.height);
         this.clickDetector.fill({ color: 0xff0000, alpha: 0 });
         this.container.addChild(this.clickDetector);
-        this.clickDetector.onpointerdown = (e) => {
+        this.container.addChild(this.rangePreview);
+        this.clickDetector.on('pointerup', (e) => {
             Engine.Grid.onGridCellClicked(row, column);
-        };
+        });
+        this.clickDetector.on('pointerenter', (e) => {
+            Engine.GameScene.events.emit(GridEvents.CellMouseOver, this);
+        });
+        this.clickDetector.on('pointerleave', (e) => {
+            this.rangePreview.clear();
+        });
+        Engine.GameScene.events.on(TowerEvents.TowerPlacedEvent, (_, row, col) => {
+            if (row == this.row && col == this.column) {
+                this.hasTowerPlaced = true;
+                this.rangePreview.clear();
+            }
+        });
+        Engine.GameScene.events.on(TowerEvents.TowerSoldEvent, (_, row, col) => {
+            if (row == this.row && col == this.column) {
+                this.hasTowerPlaced = false;
+            }
+        });
+    }
+    public showRangePreview(invalid, range) {
+        let color = 0xffffff;
+        if (invalid) color = 0xff0000;
+        this.rangePreview.clear();
+        this.rangePreview.circle(Engine.GridCellSize / 2, Engine.GridCellSize / 2, range * Engine.GridCellSize);
+        this.rangePreview.fill({ color: color, alpha: 0.3 });
+    }
+    public checkIfCantPlace() {
+        return (
+            this.hasTowerPlaced || this.isPath || this.type == TerrainType.Path || this.type == TerrainType.Restricted
+        );
     }
     public gDraw() {
         this.g = new PIXI.Graphics({
             zIndex: 5,
         });
         this.g.rect(0, 0, this.bb.width, this.bb.height);
-        switch (this.type) {
+        if (this.type == TerrainType.Restricted) {
-            case TerrainType.Restricted:
+            this.g.fill({ color: 0x222222, alpha: 0.5 });
-                this.g.fill({ color: 0x222222, alpha: 0.5 });
+        } else if (this.hasTowerPlaced) {
-                break;
+            this.g.fill({ color: 0xff0000, alpha: 0.5 });
-            case TerrainType.Path:
+        } else if (this.type == TerrainType.Path) {
-                this.g.fill({ color: 0x222222, alpha: 0.5 });
+            this.g.fill({ color: 0x222222, alpha: 0.5 });
-                break;
+        } else if (this.type == TerrainType.Buildable) {
-            case TerrainType.Buildable:
+            this.g.stroke({ color: 0x00ff00, alpha: 0.9 });
-                this.g.stroke({ color: 0x00ff00, alpha: 0.9 });
-                break;
         }
         this.container.addChild(this.g);
     }
     public gClear() {
-        if (this.g != null) {
+        this.g.clear();
-            this.container.removeChild(this.g);
-            this.g.destroy();
-        }
     }
     public update() {}
 }

src/classes/game/Projectile.ts

@@ -24,7 +24,7 @@ export default class Projectile extends GameObject {
         this.y = y;
         this.damage = damage;
         this.sprite = new PIXI.AnimatedSprite({ textures: textures, scale: 0.25, rotation: angle });
-        this.sprite.anchor.set(0.5);
+        this.sprite.anchor.set(0.5, 0.5);
         this.sprite.play();
         this.container.x = this.x;
         this.container.y = this.y;

src/classes/game/Tower.ts

@@ -29,6 +29,7 @@ export type TowerInstance = {
 
 export enum TowerEvents {
     TowerPlacedEvent = 'towerPlacedEvent',
+    TowerSoldEvent = 'towerSoldEvent',
 }
 
 export class Tower extends GameObject {
@@ -40,6 +41,8 @@ export class Tower extends GameObject {
     private sprite: PIXI.Sprite;
     private ticksUntilNextShot: number;
     private graphics: PIXI.Graphics = new PIXI.Graphics();
+    private parent: Cell;
+
     constructor(row, column, texture, definition, behaviour) {
         super();
         this.row = row;
@@ -47,7 +50,8 @@ export class Tower extends GameObject {
         this.behaviour = behaviour;
         this.definition = definition;
         this.ticksUntilNextShot = 0;
-        let parent: Cell = Engine.Grid.getCellByRowAndCol(row, column);
+        this.parent = Engine.Grid.getCellByRowAndCol(row, column);
+        console.log(texture);
         this.sprite = new PIXI.Sprite({
             texture: texture,
             height: Engine.GridCellSize,
@@ -55,24 +59,21 @@ export class Tower extends GameObject {
             zIndex: 10,
         });
         this.container.addChild(this.sprite);
-        parent.container.addChild(this.container);
+        this.parent.container.addChild(this.container);
-        parent.clickDetector.onmouseenter = (e) => {
+        this.container.interactiveChildren = true;
-            this.showRangeDisplay();
+        this.parent.clickDetector.on('pointerenter', this.onParentCellEnter);
-        };
+        this.parent.clickDetector.on('pointerleave', this.onParentCellLeave);
-        parent.clickDetector.onmouseleave = (e) => {
-            this.graphics.clear();
-        };
         Engine.GameMaster.currentScene.stage.addChild(this.graphics);
-        this.showRangeDisplay();
-    }
-    public showRangeDisplay() {
-        this.graphics.circle(
-            this.column * Engine.GridCellSize + Engine.GridCellSize / 2,
-            this.row * Engine.GridCellSize + Engine.GridCellSize / 2,
-            this.definition.stats.range * Engine.GridCellSize
-        );
-        this.graphics.fill({ color: 0xff0000, alpha: 0.5 });
     }
+
+    private onParentCellEnter = (e) => {
+        if (!Engine.TowerManager.isPlacingTower) this.parent.showRangePreview(false, this.definition.stats.range);
+    };
+
+    private onParentCellLeave = (e) => {
+        this.graphics.clear();
+    };
+
     public GetCreepsInRange() {
         let creeps = Engine.Grid.creeps;
         return creeps.filter((creep) => {
@@ -112,4 +113,11 @@ export class Tower extends GameObject {
             }
         }
     }
+
+    override destroy(): void {
+        super.destroy();
+        this.parent.clickDetector.off('pointerenter', this.onParentCellEnter);
+        this.parent.clickDetector.off('pointerleave', this.onParentCellLeave);
+        this.graphics.destroy();
+    }
 }

src/classes/game/TowerManager.ts

@@ -3,7 +3,7 @@ import { Engine } from '../Bastion';
 import { TerrainType, TowerDefinition } from '../Definitions';
 import GameAssets from '../Assets';
 import { Tower, TowerEvents } from './Tower';
-import { Cell } from './Grid';
+import { Cell, GridEvents } from './Grid';
 
 export enum TowerBehaviours {
     BasicTowerBehaviour = 'BasicTowerBehaviour',
@@ -13,9 +13,32 @@ export default class TowerManager {
     public isPlacingTower: boolean = false;
     public canPlaceTowers: boolean = true;
     private selectedTower: TowerDefinition | null = null;
+    private previewSprite: PIXI.Sprite = new PIXI.Sprite({
+        parent: Engine.GameMaster.currentScene.stage,
+        zIndex: 10,
+        width: 64,
+        height: 64,
+        alpha: 0.8,
+    });
     private towers: Tower[] = [];
     constructor() {
         Engine.TowerManager = this;
+        Engine.GameScene.events.on(GridEvents.CellMouseOver, (cell: Cell) => {
+            if (this.isPlacingTower) {
+                let cantPlace = cell.checkIfCantPlace();
+                if (cantPlace) {
+                    cell.rangePreview.clear();
+                    cell.showRangePreview(true, this.selectedTower.stats.range);
+                    this.previewSprite.tint = 0xff0000;
+                } else {
+                    cell.showRangePreview(false, this.selectedTower.stats.range);
+                    this.previewSprite.tint = 0xffffff;
+                }
+                this.previewSprite.x = cell.column * Engine.GridCellSize;
+                this.previewSprite.y = cell.row * Engine.GridCellSize;
+                this.previewSprite.texture = this.selectedTower.texture;
+            }
+        });
     }
     public ToggleChoosingTowerLocation(towerName: string) {
         if (!this.canPlaceTowers) return;
@@ -27,6 +50,7 @@ export default class TowerManager {
                 }
             });
         } else {
+            this.previewSprite.texture = null;
             this.selectedTower = null;
         }
         this.isPlacingTower = !this.isPlacingTower;
@@ -51,16 +75,13 @@ export default class TowerManager {
         this.towers.forEach((tower) => {
             if (tower.row == row && tower.column == col) returnTower = tower;
         });
+        // console.log(returnTower, row, col);
         return returnTower;
     }
     public PlaceTower(definition: TowerDefinition, row, column, behaviour: string, ignoreCost?) {
-        let idx = 0;
+        const sprite = this.selectedTower.texture;
-        GameAssets.Towers.forEach((item, index) => {
-            if (item.sprite == definition.sprite) idx = index;
-        });
-        const sprite = GameAssets.TowerSprites[idx];
         if (!Engine.GameScene.MissionStats.hasEnoughGold(definition.stats.cost) && !ignoreCost)
-            return console.warn('Does not have enough gold.');
+            return Engine.NotificationManager.Notify('Not enough gold.', 'warn');
         if (
             !this.GetTowerByRowAndCol(row, column) &&
             Engine.Grid.getCellByRowAndCol(row, column).type != TerrainType.Path &&
@@ -71,7 +92,8 @@ export default class TowerManager {
             this.towers.push(tower);
             this.ToggleChoosingTowerLocation('RESET');
             this.selectedTower = null;
-            Engine.GameScene.events.emit(TowerEvents.TowerPlacedEvent, definition.name);
+            this.previewSprite.x = -100;
+            Engine.GameScene.events.emit(TowerEvents.TowerPlacedEvent, definition.name, row, column);
         } else {
             Engine.NotificationManager.Notify(
                 'Can not place tower on path or other tower, choose another spot.',

src/classes/gui/Button.ts

@@ -14,6 +14,8 @@ export default class Button extends GuiObject {
 
     private buttonSprite: PIXI.NineSliceSprite;
     private buttonText: PIXI.Text;
+    // Used for custom button logic.
+    public buttonIcon: PIXI.Sprite;
 
     setCaption(caption: string) {
         this.caption = caption;
@@ -57,4 +59,8 @@ export default class Button extends GuiObject {
         this.container.x = this.bounds.x;
         this.container.y = this.bounds.y;
     }
+
+    public CustomButtonLogic() {
+        console.warn(this.name + ' - Button.CustomButtonLogic() is not implemented.');
+    }
 }

src/classes/gui/TowerTab.ts

@@ -8,8 +8,9 @@ class TowerButton extends GuiObject {
     private frameSprite: PIXI.NineSliceSprite;
     private background: PIXI.Sprite;
     private towerName: string;
+    private iconSprite: PIXI.Sprite;
     private i: number = 0;
-    constructor(index: number, row, width, height, parent: PIXI.Container, backgroundTexture, towerName) {
+    constructor(index: number, row, width, height, parent: PIXI.Container, backgroundTexture, towerName, iconTexture) {
         if (index > 3 || row > 2 || index < 0 || row < 0) throw 'Index/row out of bounds for TowerButton.';
         super(true);
         this.towerName = towerName;
@@ -18,10 +19,18 @@ class TowerButton extends GuiObject {
         this.background = new PIXI.Sprite({
             texture: backgroundTexture,
         });
+        this.iconSprite = new PIXI.Sprite({
+            texture: iconTexture,
+        });
         this.background.width = width;
         this.background.height = height;
+        this.iconSprite.x = width / 2;
+        this.iconSprite.y = height / 2;
+        this.iconSprite.width = width / 2;
+        this.iconSprite.height = height / 2;
+        this.iconSprite.anchor.set(0.5, 0.5);
         this.container.addChild(this.background);
-
+        this.container.addChild(this.iconSprite);
         this.frameSprite = new PIXI.NineSliceSprite({
             texture: GameAssets.Frame02Texture,
             leftWidth: 100,
@@ -37,11 +46,11 @@ class TowerButton extends GuiObject {
         Engine.GameScene.events.on(TowerEvents.TowerPlacedEvent, (name) => {
             this.frameSprite.tint = 0xffffff; // reset the tint after a tower has been placed
         });
-        this.container.onmouseenter = (e) => {
+        this.container.onpointerenter = (e) => {
             // add on mouse over info (banner next to sidebar)
         };
 
-        this.container.onmouseleave = (e) => {};
+        this.container.onpointerleave = (e) => {};
     }
     public onClick(e: PIXI.FederatedPointerEvent): void {
         if (this.frameSprite.tint == 0x00ff00) this.frameSprite.tint = 0xffffff;
@@ -76,7 +85,25 @@ export default class TowerTab extends GuiObject {
         this.towerTabSprite.height = this.bounds.height;
         this.container.addChild(this.towerTabSprite);
 
-        new TowerButton(0, 0, 70, 70, this.container, GameAssets.RedBackground, 'Basic Tower');
+        new TowerButton(
-        new TowerButton(0, 1, 70, 70, this.container, GameAssets.GreenBackground, 'Basic Tower');
+            0,
+            0,
+            70,
+            70,
+            this.container,
+            GameAssets.RedBackground,
+            'Basic Tower',
+            GameAssets.HammerIconTexture
+        );
+        new TowerButton(
+            0,
+            1,
+            70,
+            70,
+            this.container,
+            GameAssets.GreenBackground,
+            'Circle Tower',
+            GameAssets.HomeIconTexture
+        );
     }
 }

src/scenes/Game.ts

@@ -71,20 +71,29 @@ export class GameScene extends Scene {
             this.MissionStats.earnGold(playerAward);
         });
         this.sidebar = new Sidebar(GameUIConstants.SidebarRect);
-        this.changeRoundButton = new Button(
+        this.changeRoundButton = new Button(GameUIConstants.ChangeRoundButtonRect, '', ButtonTexture.Button01, true);
-            GameUIConstants.ChangeRoundButtonRect,
-            'Start',
-            ButtonTexture.Button01,
-            true
-        );
         this.changeRoundButton.container.removeFromParent();
         this.sidebar.container.addChild(this.changeRoundButton.container);
+        // Added custom button logic to still keep all the regular events for the button, just have an icon instead of text.
+        // TODO: maybe make this better? add like a seperate class for icon buttons or smth
+        this.changeRoundButton.CustomButtonLogic = () => {
+            this.changeRoundButton.buttonIcon = new PIXI.Sprite({
+                texture: GameAssets.PlayIconTexture,
+                x: this.changeRoundButton.container.width / 2,
+                y: this.changeRoundButton.container.height / 2,
+                scale: 0.2,
+            });
+            this.changeRoundButton.buttonIcon.anchor.set(0.5, 0.5);
+            this.changeRoundButton.container.addChild(this.changeRoundButton.buttonIcon);
+        };
+        this.changeRoundButton.CustomButtonLogic();
         this.changeRoundButton.onClick = () => {
             if (this.playerWon) return this.ReturnToMain();
-            if (this.isGameOver) return Engine.NotificationManager.Notify('No more waves.', 'warn');
+            if (this.roundMode == RoundMode.Combat)
-            this.changeRoundButton.setEnabled(false);
+                return Engine.NotificationManager.Notify('Wave is already in progress.', 'warn');
-            this.changeRoundButton.setCaption('WAVE IN PROGRESS');
+            if (this.isGameOver) return Engine.NotificationManager.Notify('No more waves.', 'danger');
             this.setRoundMode(RoundMode.Combat);
+            this.changeRoundButton.buttonIcon.texture = GameAssets.ExclamationIconTexture;
             this.events.emit(WaveManagerEvents.NewWave, `${this.currentRound + 1}`);
         };
 
@@ -103,9 +112,8 @@ export class GameScene extends Scene {
         Engine.TowerManager.update(elapsedMS);
         if (this.isWaveManagerFinished && Engine.Grid.creeps.length == 0) {
             this.isWaveManagerFinished = false;
-            this.changeRoundButton.setEnabled(true);
-            this.changeRoundButton.setCaption('Start');
             this.setRoundMode(RoundMode.Purchase);
+            this.changeRoundButton.buttonIcon.texture = GameAssets.PlayIconTexture;
             Engine.NotificationManager.Notify(
                 `Round ${this.currentRound + 1}/${this.mission.rounds.length} completed.`,
                 'info'
@@ -115,7 +123,7 @@ export class GameScene extends Scene {
             }
             if (this.currentRound + 1 == this.mission.rounds.length) {
                 Engine.NotificationManager.Notify(`Mission victory!!`, 'reward');
-                this.changeRoundButton.setCaption('Return to menu');
+                this.changeRoundButton.buttonIcon.texture = GameAssets.HomeIconTexture;
                 this.playerWon = true;
             } else this.currentRound++;
         }