diff --git a/src/base/Button.ts b/src/base/Button.ts index 02f1bbc..f74f99c 100644 --- a/src/base/Button.ts +++ b/src/base/Button.ts @@ -9,7 +9,7 @@ export default class Button extends GameObject { setCaption(caption: string) { this.caption = caption; - this.createButton(); + this.drawButton(); } constructor(caption: string, bounds: PIXI.Rectangle, color: PIXI.Color) { @@ -18,26 +18,41 @@ export default class Button extends GameObject { this.color = color; this.container.interactive = true; this.buttonTexture = Assets.ButtonTexture; - this.createButton(); + this.drawButton(); } protected triggerBoundsChanged() { - this.createButton(); + this.drawButton(); } - private createButton() { + private drawButton() { + console.log( + `Drawing button ${this.caption} at ${JSON.stringify(this.bounds)}` + ); this.container.removeChildren(); // const button = new PIXI.Graphics(); // button.rect(0, 0, this.bounds.width, this.bounds.height); // button.fill(this.color); - console.log(this.buttonTexture); - const button = new PIXI.Sprite(this.buttonTexture); // TODO: sliced texture + //console.log(this.buttonTexture); + const button = new PIXI.NineSliceSprite({ + texture: this.buttonTexture, + leftWidth: 100, + topHeight: 100, + rightWidth: 100, + bottomHeight: 100, + }); button.x = 0; button.y = 0; button.width = this.bounds.width; button.height = this.bounds.height; this.container.addChild(button); - const text = new PIXI.Text({ text: this.caption }); + const text = new PIXI.Text({ + text: this.caption, + style: new PIXI.TextStyle({ + fill: 0xffffff, + fontSize: 24, + }), + }); this.container.addChild(text); text.anchor.set(0.5, 0.5); text.x = this.bounds.width / 2; diff --git a/src/base/Game.ts b/src/base/Game.ts index 924d7c9..cefd5af 100644 --- a/src/base/Game.ts +++ b/src/base/Game.ts @@ -3,11 +3,10 @@ import MissionMenuSelect from "../scenes/MissionSelectMenu"; import GameScene from "../scenes/GameScene"; import GameObject from "./GameObject"; import * as PIXI from "pixi.js"; -import Scene from "../scenes/Base"; +import SceneBase from "../scenes/SceneBase"; export default class Game extends GameObject { - private _currentScene: Scene | null = null; - public ticker: PIXI.Ticker | null = null; + private _currentScene: SceneBase | null = null; constructor(bounds: PIXI.Rectangle) { super(bounds); @@ -21,6 +20,16 @@ export default class Game extends GameObject { this.setScene(mainScene); } + private setScene(scene: SceneBase) { + if (this._currentScene) { + this.container.removeChild(this._currentScene.container); + this._currentScene.destroy(); + } + this._currentScene = scene; + console.log("Setting scene", this._currentScene.constructor); + this.container.addChild(scene.container); + } + private onNewGame = () => { console.log("New Game"); const missionSelectScene = new MissionMenuSelect(this.bounds); @@ -38,33 +47,6 @@ export default class Game extends GameObject { console.log("Settings"); }; - private setScene(scene: Scene) { - if (this._currentScene) { - this.container.removeChild(this._currentScene.container); - } - this._currentScene = scene; - console.log(this._currentScene.constructor); - this.container.addChild(scene.container); - if (this._currentScene.constructor.name == "GameScene") { - // dont change GameScene name XD - this.ticker = new PIXI.Ticker(); - this.ticker.maxFPS = 60; - this.ticker.minFPS = 30; - this.ticker.add(this.update); - console.log(this._currentScene); - this.ticker.start(); - } else { - if (this.ticker != null) { - this.ticker.stop(); - this.ticker.destroy(); - } - } - } - - private update(time) { - this._currentScene.update(); - } - protected triggerBoundsChanged(): void { this.drawScene(); } diff --git a/src/base/GameObject.ts b/src/base/GameObject.ts index 12648a5..1246e73 100644 --- a/src/base/GameObject.ts +++ b/src/base/GameObject.ts @@ -6,15 +6,18 @@ export default abstract class GameObject { private _events: PIXI.EventEmitter = new PIXI.EventEmitter(); - public getBounds(): PIXI.Rectangle { - return this.bounds; - } - public setBounds(x: number, y: number, width: number, height: number) { this.bounds = new PIXI.Rectangle(x, y, width, height); this.triggerBoundsChanged(); // GameObject implements this. } + public destroy() { + this._events.removeAllListeners(); + if (this._container.parent) + this._container.parent.removeChild(this._container); + this._container.destroy(); + } + public get container(): PIXI.Container { return this._container; } diff --git a/src/main.ts b/src/main.ts index 885f382..5f5c14b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -9,6 +9,7 @@ import Assets from "./base/Assets"; resizeTo: document.body, backgroundColor: "white", sharedTicker: true, + preference: "webgl", }); document.body.appendChild(app.canvas); diff --git a/src/scenes/GameScene.ts b/src/scenes/GameScene.ts index 6e11186..1ce1cd6 100644 --- a/src/scenes/GameScene.ts +++ b/src/scenes/GameScene.ts @@ -1,12 +1,24 @@ import Button from "../base/Button"; -import Scene from "./Base"; +import SceneBase from "./SceneBase"; import * as PIXI from "pixi.js"; -export default class GameScene extends Scene { - private grid; - // DO NOT CHANGE NAME, WILL BREAK Game.ts +export default class GameScene extends SceneBase { + private _ticker: PIXI.Ticker; + constructor(bounds: PIXI.Rectangle) { super(bounds); + this._ticker = new PIXI.Ticker(); + this._ticker = new PIXI.Ticker(); + this._ticker.maxFPS = 60; + this._ticker.minFPS = 30; + this._ticker.add(this.update); + this._ticker.start(); + } + + public destroy() { + super.destroy(); + this._ticker.stop(); + this._ticker.destroy(); } public update() {} diff --git a/src/scenes/MainMenu.ts b/src/scenes/MainMenu.ts index 9ead958..9c02a80 100644 --- a/src/scenes/MainMenu.ts +++ b/src/scenes/MainMenu.ts @@ -1,8 +1,8 @@ import Button from "../base/Button"; -import Scene from "./Base"; +import SceneBase from "./SceneBase"; import * as PIXI from "pixi.js"; -export default class MainMenu extends Scene { +export default class MainMenu extends SceneBase { private _newGameButton: Button; private _settingsButton: Button; diff --git a/src/scenes/MissionSelectMenu.ts b/src/scenes/MissionSelectMenu.ts index 5f9770a..70c966b 100644 --- a/src/scenes/MissionSelectMenu.ts +++ b/src/scenes/MissionSelectMenu.ts @@ -1,8 +1,8 @@ import Button from "../base/Button"; -import Scene from "./Base"; +import SceneBase from "./SceneBase"; import * as PIXI from "pixi.js"; -export default class MissionMenuSelect extends Scene { +export default class MissionMenuSelect extends SceneBase { private _buttons: Button[] = []; constructor(bounds: PIXI.Rectangle) { diff --git a/src/scenes/Base.ts b/src/scenes/SceneBase.ts similarity index 77% rename from src/scenes/Base.ts rename to src/scenes/SceneBase.ts index 7126780..ad53162 100644 --- a/src/scenes/Base.ts +++ b/src/scenes/SceneBase.ts @@ -1,14 +1,14 @@ import * as PIXI from "pixi.js"; import GameObject from "../base/GameObject"; -export default abstract class Scene extends GameObject { +export default abstract class SceneBase extends GameObject { constructor(bounds: PIXI.Rectangle) { super(bounds); this.createScene(); } + protected triggerBoundsChanged() { this.createScene(); } - protected abstract createScene(); - public update() {} + protected abstract createScene(); } diff --git a/src/scenes/SettingsMenu.ts b/src/scenes/SettingsMenu.ts index 5e2d136..1cb9c5f 100644 --- a/src/scenes/SettingsMenu.ts +++ b/src/scenes/SettingsMenu.ts @@ -1,8 +1,8 @@ import Button from "../base/Button"; -import Scene from "./Base"; +import SceneBase from "./SceneBase"; import * as PIXI from "pixi.js"; -export default class SettingsMenu extends Scene { +export default class SettingsMenu extends SceneBase { private _newGameButton: Button; private _settingsButton: Button;