WIP

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;

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();
   }

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;
   }

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);

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() {}

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;
 

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) {

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();
 }

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;