basic animation management + global var rename

src/classes/Assets.ts

@@ -1,6 +1,6 @@
 import * as PIXI from 'pixi.js';
 import { CreepStatsDefinition, MissionDefinition, TowerDefinition } from './Definitions';
-import { Globals } from './Bastion';
+import { Engine } from './Bastion';
 
 export default class GameAssets {
     public static async LoadAssets() {
@@ -12,10 +12,10 @@ export default class GameAssets {
                 fontSize: 50,
             }),
         });
-        text.x = Globals.app.canvas.width / 2;
+        text.x = Engine.app.canvas.width / 2;
-        text.y = Globals.app.canvas.height / 2;
+        text.y = Engine.app.canvas.height / 2;
         text.anchor.set(0.5, 0.5);
-        Globals.app.stage.addChild(text);
+        Engine.app.stage.addChild(text);
         GameAssets.Button01Texture = await PIXI.Assets.load({
             src: '/assets/gui/button_01.png',
         });

src/classes/Bastion.ts

@@ -6,8 +6,9 @@ import { Grid } from './game/Grid';
 import WaveManager from './game/WaveManager';
 import TowerManager from './game/TowerManager';
 import { GameScene } from '../scenes/Game';
+import AnimationManager from './game/AnimationManager';
 
-export class Globals {
+export class Engine {
     public static app: PIXI.Application;
     public static GameMaster: GameMaster;
     public static WindowHeight: number;
@@ -16,6 +17,7 @@ export class Globals {
     public static Grid: Grid;
     public static WaveManager: WaveManager;
     public static TowerManager: TowerManager;
+    public static AnimationManager: AnimationManager;
     public static GameScene: GameScene;
     public static latestCommit: string;
 }
@@ -26,17 +28,17 @@ export default class GameMaster {
     private GameObjects: GameObject[] = [];
 
     constructor() {
-        Globals.GameMaster = this;
+        Engine.GameMaster = this;
     }
 
     public _CreateGuiObject(object: GuiObject) {
         this.currentScene.gui.push(object);
-        Globals.app.stage.addChild(object.container);
+        Engine.app.stage.addChild(object.container);
     }
 
     public _RemoveGuiObject(object: GuiObject) {
         this.currentScene.gui.splice(this.currentScene.gui.indexOf(object), 1);
-        Globals.app.stage.removeChild(object.container);
+        Engine.app.stage.removeChild(object.container);
     }
 
     public changeScene(newScene: Scene) {

src/classes/GuiObject.ts

@@ -1,5 +1,5 @@
 import * as PIXI from 'pixi.js';
-import { Globals } from './Bastion';
+import { Engine } from './Bastion';
 
 export default abstract class GuiObject {
     public readonly name: string = this.constructor.name;
@@ -37,7 +37,7 @@ export default abstract class GuiObject {
     }
 
     constructor(interactive?: boolean) {
-        Globals.GameMaster._CreateGuiObject(this);
+        Engine.GameMaster._CreateGuiObject(this);
         if (!interactive) return;
         this._container.interactive = true;
         this._container.onwheel = (e) => {

src/classes/game/AnimationManager.ts

@@ -0,0 +1,59 @@
+import * as PIXI from 'pixi.js';
+
+class Animateable {
+    public finished: boolean = false;
+    protected callbackFn: Function;
+
+    public Finish() {
+        this.finished = true;
+    }
+
+    public update(ms) {
+        if (this.finished) return this.callbackFn();
+    }
+}
+
+export class FadeInOut extends Animateable {
+    public fadeType: 'in' | 'out';
+    public fadeTime: number;
+    public pixiObject: PIXI.Container;
+    private ticks: number = 0;
+
+    constructor(type: 'in' | 'out', timeInFrames: number, object: PIXI.Container, callbackFn: Function) {
+        super();
+        this.fadeType = type;
+        this.fadeTime = timeInFrames;
+        this.pixiObject = object;
+        this.callbackFn = callbackFn;
+        if (type == 'in') {
+            this.pixiObject.alpha = 0;
+        } else {
+            this.pixiObject.alpha = 1;
+        }
+    }
+
+    public update(ms) {
+        super.update(ms);
+        this.ticks++;
+        if (this.fadeType == 'in') {
+            this.pixiObject.alpha = this.ticks / this.fadeTime;
+        } else {
+            this.pixiObject.alpha -= 1 / this.fadeTime;
+        }
+        console.log(this.pixiObject.alpha);
+        if (this.ticks >= this.fadeTime) this.Finish();
+    }
+}
+
+export default class AnimationManager {
+    public AnimationQueue: Animateable[] = [];
+    public Animate(animatable: Animateable) {
+        this.AnimationQueue.push(animatable);
+    }
+    public update(ms) {
+        this.AnimationQueue.forEach((anim) => {
+            if (anim.finished) this.AnimationQueue.splice(this.AnimationQueue.indexOf(anim), 1);
+            anim.update(ms);
+        });
+    }
+}

src/classes/game/Creep.ts

@@ -1,6 +1,6 @@
 import GameAssets from '../Assets';
 import Assets from '../Assets';
-import { Globals } from '../Bastion';
+import { Engine } from '../Bastion';
 import { CreepStatsDefinition, CreepType, PathDefinition } from '../Definitions';
 import GameObject from '../GameObject';
 import * as PIXI from 'pixi.js';
@@ -48,17 +48,17 @@ export default class Creep extends GameObject {
         this.path = path;
         this.x = path[0][1] * 64 + 32; // centered
         this.y = path[0][0] * 64 + 32;
-        Globals.GameScene.events.on(CreepEvents.TakenDamage, (creepID, damage) => {
+        Engine.GameScene.events.on(CreepEvents.TakenDamage, (creepID, damage) => {
             if (creepID != this.id) return;
             this.health -= damage;
         });
-        Globals.Grid.container.addChild(this.container);
+        Engine.Grid.container.addChild(this.container);
         this.container.addChild(this.sprite);
     }
     public update(elapsedMS: number) {
         if (this.dead) return;
         if (this.health <= 0) {
-            Globals.GameScene.events.emit(CreepEvents.Died, this.maxHealth, this);
+            Engine.GameScene.events.emit(CreepEvents.Died, this.maxHealth, this);
             this.destroy();
             this.dead = true;
             return;

src/classes/game/Grid.ts

@@ -2,7 +2,7 @@ import * as PIXI from 'pixi.js';
 import GameObject from '../GameObject';
 import { GameMapDefinition, TerrainType } from '../Definitions';
 import GameAssets from '../Assets';
-import { Globals } from '../Bastion';
+import { Engine } from '../Bastion';
 import Creep, { CreepEvents } from './Creep';
 
 export class Cell extends GameObject {
@@ -23,7 +23,7 @@ export class Cell extends GameObject {
         this.bb.y = this.row * 64;
         this.bb.width = 64;
         this.bb.height = 64;
-        Globals.Grid.container.addChild(this.container);
+        Engine.Grid.container.addChild(this.container);
         this.container.x = this.bb.x;
         this.container.y = this.bb.y;
 
@@ -35,7 +35,7 @@ export class Cell extends GameObject {
         this.clickDetector.fill({ color: 0xff0000, alpha: 0 });
         this.container.addChild(this.clickDetector);
         this.clickDetector.onpointerdown = (e) => {
-            Globals.Grid._gridCellClicked(row, column);
+            Engine.Grid._gridCellClicked(row, column);
         };
 
         if (!GameAssets.DebuggingEnabled) return;
@@ -89,12 +89,12 @@ export class Grid extends GameObject {
     constructor(map: GameMapDefinition, missionIndex) {
         super();
         this.gameMap = map;
-        Globals.Grid = this;
+        Engine.Grid = this;
         this.bb.x = 0;
         this.bb.y = 0;
         this.bb.width = 64 * 30;
         this.bb.height = 64 * 17;
-        Globals.app.stage.addChild(this.container);
+        Engine.app.stage.addChild(this.container);
 
         let background = new PIXI.Sprite(GameAssets.MissionBackgrounds[missionIndex]);
         background.x = 0;

src/classes/game/MissionStats.ts

@@ -1,5 +1,5 @@
 import Assets from '../Assets';
-import { Globals } from '../Bastion';
+import { Engine } from '../Bastion';
 import GameObject from '../GameObject';
 import * as PIXI from 'pixi.js';
 
@@ -48,7 +48,7 @@ export default class MissionStats extends GameObject {
         this.gold = initialGold;
         this.container.x = 0;
         this.container.y = 20;
-        Globals.app.stage.addChild(this.container);
+        Engine.app.stage.addChild(this.container);
         this.healthText = new PIXI.Text({
             text: `${this.hp}`,
             style: new PIXI.TextStyle({

src/classes/game/Projectile.ts

@@ -1,6 +1,6 @@
 import * as PIXI from 'pixi.js';
 import GameObject from '../GameObject';
-import { Globals } from '../Bastion';
+import { Engine } from '../Bastion';
 import Creep, { CreepEvents } from './Creep';
 
 export function calculateAngleToPoint(x, y, targetX, targetY) {
@@ -30,7 +30,7 @@ export default class Projectile extends GameObject {
         this.container.x = this.x;
         this.container.y = this.y;
         this.container.addChild(this.sprite);
-        Globals.app.stage.addChild(this.container);
+        Engine.app.stage.addChild(this.container);
 
         this.angle = angle;
         this.speed = 0.9;
@@ -43,7 +43,7 @@ export default class Projectile extends GameObject {
     public update(elapsedMS) {
         if (this.deleteMe) return;
         if (this.x > 2000 || this.x < 0 || this.y > 2000 || this.y < 0 || this.timeToLive <= 0) return this.destroy();
-        Globals.Grid.creeps.forEach((creep) => {
+        Engine.Grid.creeps.forEach((creep) => {
             if (this.timeToLive <= 0) return;
             if (creep.container && this.checkCollision(creep)) {
                 this.timeToLive--;
@@ -60,7 +60,7 @@ export default class Projectile extends GameObject {
 
     public onCollide(creep) {
         console.log('COLLIDED WITH' + creep);
-        Globals.GameScene.events.emit(CreepEvents.TakenDamage, creep.id, this.damage);
+        Engine.GameScene.events.emit(CreepEvents.TakenDamage, creep.id, this.damage);
     }
 
     public checkCollision(creep: Creep) {

src/classes/game/Tower.ts

@@ -1,4 +1,4 @@
-import { Globals } from '../Bastion';
+import { Engine } from '../Bastion';
 import * as PIXI from 'pixi.js';
 import GameObject from '../GameObject';
 import { TowerDefinition } from '../Definitions';
@@ -47,7 +47,7 @@ export class Tower extends GameObject {
         this.behaviour = behaviour;
         this.definition = definition;
         this.ticksUntilNextShot = 0;
-        let parent: Cell = Globals.Grid.getCellByRowAndCol(row, column);
+        let parent: Cell = Engine.Grid.getCellByRowAndCol(row, column);
         this.sprite = new PIXI.Sprite({
             texture: texture,
             height: 64,
@@ -63,10 +63,10 @@ export class Tower extends GameObject {
         parent.clickDetector.onmouseleave = (e) => {
             this.graphics.clear();
         };
-        Globals.app.stage.addChild(this.graphics);
+        Engine.app.stage.addChild(this.graphics);
     }
     public GetCreepsInRange() {
-        let creeps = Globals.Grid.creeps;
+        let creeps = Engine.Grid.creeps;
         return creeps.filter((creep) => {
             const x = creep.x;
             const y = creep.y;

src/classes/game/TowerManager.ts

@@ -1,5 +1,5 @@
 import * as PIXI from 'pixi.js';
-import { Globals } from '../Bastion';
+import { Engine } from '../Bastion';
 import { TerrainType, TowerDefinition } from '../Definitions';
 import GameAssets from '../Assets';
 import GameObject from '../GameObject';
@@ -15,11 +15,11 @@ export default class TowerManager {
     private selectedTower: TowerDefinition | null = null;
     private towers: Tower[] = [];
     constructor() {
-        Globals.TowerManager = this;
+        Engine.TowerManager = this;
     }
     public ToggleChoosingTowerLocation(towerName: string) {
         if (!this.canPlaceTowers) return;
-        Globals.Grid.toggleGrid();
+        Engine.Grid.toggleGrid();
         if (!this.isPlacingTower) {
             GameAssets.Towers.forEach((item) => {
                 if (item.name == towerName) {
@@ -54,21 +54,21 @@ export default class TowerManager {
             if (item.sprite == definition.sprite) idx = index;
         });
         const sprite = GameAssets.TowerSprites[idx];
-        if (!Globals.GameScene.MissionStats.hasEnoughGold(definition.stats.cost) && !ignoreCost)
+        if (!Engine.GameScene.MissionStats.hasEnoughGold(definition.stats.cost) && !ignoreCost)
             return console.warn('Does not have enough gold.');
         if (
             !this.GetTowerByRowAndCol(row, column) &&
-            Globals.Grid.getCellByRowAndCol(row, column).type != TerrainType.Path &&
+            Engine.Grid.getCellByRowAndCol(row, column).type != TerrainType.Path &&
-            Globals.Grid.getCellByRowAndCol(row, column).type != TerrainType.Restricted
+            Engine.Grid.getCellByRowAndCol(row, column).type != TerrainType.Restricted
         ) {
-            Globals.GameScene.MissionStats.spendGold(definition.stats.cost);
+            Engine.GameScene.MissionStats.spendGold(definition.stats.cost);
             let tower = new Tower(row, column, sprite, definition, behaviour);
             this.towers.push(tower);
             this.ToggleChoosingTowerLocation('RESET');
             console.log('SHOULDVE PLACED TOWER');
             console.log(this.selectedTower);
             this.selectedTower = null;
-            Globals.GameScene.events.emit(TowerEvents.TowerPlacedEvent, definition.name);
+            Engine.GameScene.events.emit(TowerEvents.TowerPlacedEvent, definition.name);
         } else {
             console.warn('Can not place tower on occupied spot or path. Try again.');
         }

src/classes/game/WaveManager.ts

@@ -1,7 +1,7 @@
 import { CreepType, MissionRoundDefinition, PathDefinition } from '../Definitions';
 import * as PIXI from 'pixi.js';
 import Creep, { CreepEvents } from './Creep';
-import { Globals } from '../Bastion';
+import { Engine } from '../Bastion';
 
 export enum WaveManagerEvents {
     CreepSpawned = 'creepSpawned',
@@ -25,7 +25,7 @@ export default class WaveManager {
     public events = new PIXI.EventEmitter();
     private internalCreepId: number = 0;
     constructor(rounds: MissionRoundDefinition[], paths: PathDefinition[]) {
-        Globals.WaveManager = this;
+        Engine.WaveManager = this;
         this.rounds = rounds;
         this.paths = paths;
     }

src/classes/gui/TowerTab.ts

@@ -1,7 +1,7 @@
 import * as PIXI from 'pixi.js';
 import GuiObject from '../GuiObject';
 import GameAssets from '../Assets';
-import { Globals } from '../Bastion';
+import { Engine } from '../Bastion';
 import { TowerEvents } from '../game/Tower';
 
 class TowerButton extends GuiObject {
@@ -33,7 +33,7 @@ class TowerButton extends GuiObject {
         });
         this.container.addChild(this.frameSprite);
         parent.addChild(this.container);
-        Globals.GameScene.events.on(TowerEvents.TowerPlacedEvent, (name) => {
+        Engine.GameScene.events.on(TowerEvents.TowerPlacedEvent, (name) => {
             this.frameSprite.tint = 0xffffff; // reset the tint after a tower has been placed
         });
         this.container.onmouseenter = (e) => {
@@ -45,7 +45,7 @@ class TowerButton extends GuiObject {
     public onClick(e: PIXI.FederatedPointerEvent): void {
         if (this.frameSprite.tint == 0x00ff00) this.frameSprite.tint = 0xffffff;
         else this.frameSprite.tint = 0x00ff00;
-        Globals.TowerManager.ToggleChoosingTowerLocation(this.towerName);
+        Engine.TowerManager.ToggleChoosingTowerLocation(this.towerName);
     }
 }
 

src/main.ts

@@ -1,13 +1,14 @@
 import * as PIXI from 'pixi.js';
-import GameMaster, { Globals } from './classes/Bastion';
+import GameMaster, { Engine } from './classes/Bastion';
 import Assets from './classes/Assets';
 import { MainScene } from './scenes/Main';
 import { GameScene } from './scenes/Game';
 import { log } from './utils';
+import AnimationManager from './classes/game/AnimationManager';
 
 (async () => {
     const app = new PIXI.Application();
-    Globals.app = app;
+    Engine.app = app;
     log('main - init()');
     await app.init({
         width: 1920, // Base width
@@ -24,43 +25,37 @@ import { log } from './utils';
     function resize() {
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
-        Globals.WindowHeight = windowHeight;
-        Globals.WindowWidth = windowWidth;
-
-        // Calculate scale factor to maintain aspect ratio
         const scaleX = windowWidth / app.screen.width;
         const scaleY = windowHeight / app.screen.height;
-        const scale = Math.min(scaleX, scaleY); // Use the smaller scale to fit
+        const scale = Math.min(scaleX, scaleY);
 
-        // Calculate new canvas size
         const gameWidth = Math.round(app.screen.width * scale);
         const gameHeight = Math.round(app.screen.height * scale);
-        log(`main - resize(); window: ${window.innerWidth}x${window.innerHeight}}; game ${gameWidth}x${gameHeight}`);
 
-        // Center the canvas
         const marginHorizontal = (windowWidth - gameWidth) / 2;
         const marginVertical = (windowHeight - gameHeight) / 2;
 
-        // Apply styles to canvas
         app.canvas.style.width = `${gameWidth}px`;
         app.canvas.style.height = `${gameHeight}px`;
         app.canvas.style.marginLeft = `${marginHorizontal}px`;
         app.canvas.style.marginTop = `${marginVertical}px`;
-        app.canvas.style.marginRight = `0`; // Prevent unnecessary margin
+        app.canvas.style.marginRight = `0`;
-        app.canvas.style.marginBottom = `0`; // Prevent unnecessary margin
+        app.canvas.style.marginBottom = `0`;
-        app.canvas.style.display = 'block'; // Prevent inline-block spacing issues
+        app.canvas.style.display = 'block';
     }
-    Globals.latestCommit = await fetch('/latest_commit').then((res) => res.text());
+    Engine.latestCommit = await fetch('/latest_commit').then((res) => res.text());
     window.addEventListener('resize', resize);
     resize();
     await Assets.LoadAssets();
     new GameMaster();
-    globalThis.Globals = Globals;
+    Engine.AnimationManager = new AnimationManager();
-    Globals.GameMaster.changeScene(new MainScene());
+    globalThis.Engine = Engine;
+    PIXI.Ticker.shared.add((ticker) => Engine.AnimationManager.update(ticker.elapsedMS));
+    Engine.GameMaster.changeScene(new MainScene());
     let params = new URLSearchParams(location.href);
-    if (params.entries().next().value[1] == 'game') Globals.GameMaster.changeScene(new GameScene('Mission 1'));
+    if (params.entries().next().value[1] == 'game') Engine.GameMaster.changeScene(new GameScene('Mission 1'));
 
-    if (Globals.latestCommit != 'DEVELOPMENT')
+    if (Engine.latestCommit != 'DEVELOPMENT')
         window.onbeforeunload = () => {
             return 'You are about to leave.';
         };

src/scenes/Game.ts

@@ -1,5 +1,5 @@
 import GameAssets from '../classes/Assets';
-import { Globals } from '../classes/Bastion';
+import { Engine } from '../classes/Bastion';
 import { MissionDefinition } from '../classes/Definitions';
 import Creep, { CreepEvents } from '../classes/game/Creep';
 import { Grid } from '../classes/game/Grid';
@@ -31,7 +31,7 @@ export class GameScene extends Scene {
 
     constructor(name: string) {
         super();
-        Globals.GameScene = this;
+        Engine.GameScene = this;
         GameAssets.Missions.forEach((mission, index) => {
             if (mission.name == name) {
                 this.mission = mission;
@@ -45,23 +45,23 @@ export class GameScene extends Scene {
         this.ticker.minFPS = 30;
         this.ticker.add(() => this.update(this.ticker.elapsedMS)); // bruh
         this.ticker.start();
-        const SidebarRect = new PIXI.Rectangle(64 * 30 - 360, 0, 360, Globals.app.canvas.height);
+        const SidebarRect = new PIXI.Rectangle(64 * 30 - 360, 0, 360, Engine.app.canvas.height);
-        const changeRoundButtonRect = new PIXI.Rectangle(50, Globals.app.canvas.height - 100, 310, 100);
+        const changeRoundButtonRect = new PIXI.Rectangle(50, Engine.app.canvas.height - 100, 310, 100);
         new Grid(this.mission.gameMap, this.missionIndex);
         new TowerManager();
         new WaveManager(this.mission.rounds, this.mission.gameMap.paths);
-        Globals.Grid.onGridCellClicked = (row, column) => {
+        Engine.Grid.onGridCellClicked = (row, column) => {
-            if (Globals.TowerManager.isPlacingTower) {
+            if (Engine.TowerManager.isPlacingTower) {
-                Globals.TowerManager.PlayerClickOnGrid(row, column);
+                Engine.TowerManager.PlayerClickOnGrid(row, column);
             }
         };
-        Globals.WaveManager.events.on(WaveManagerEvents.CreepSpawned, (creep: Creep) => {
+        Engine.WaveManager.events.on(WaveManagerEvents.CreepSpawned, (creep: Creep) => {
-            Globals.Grid.addCreep(creep);
+            Engine.Grid.addCreep(creep);
             creep.events.on(CreepEvents.Escaped, () => {
                 this.onCreepEscaped(creep);
             });
         });
-        Globals.WaveManager.events.on(WaveManagerEvents.Finished, () => {
+        Engine.WaveManager.events.on(WaveManagerEvents.Finished, () => {
             this.isWaveManagerFinished = true;
         });
         this.events.on(CreepEvents.Died, (playerAward, creepThatDied) => {
@@ -80,10 +80,10 @@ export class GameScene extends Scene {
         this.MissionStats = new MissionStats(100, 200);
     }
     public update(elapsedMS) {
-        Globals.WaveManager.update(elapsedMS);
+        Engine.WaveManager.update(elapsedMS);
-        Globals.Grid.update(elapsedMS);
+        Engine.Grid.update(elapsedMS);
-        Globals.TowerManager.update(elapsedMS);
+        Engine.TowerManager.update(elapsedMS);
-        if (this.isWaveManagerFinished && Globals.Grid.creeps.length == 0) {
+        if (this.isWaveManagerFinished && Engine.Grid.creeps.length == 0) {
             this.changeRoundButton.setEnabled(true);
             this.changeRoundButton.setCaption('Start');
             this.setRoundMode(RoundMode.Purchase);
@@ -123,9 +123,9 @@ export class GameScene extends Scene {
     private setRoundMode(roundMode: RoundMode) {
         this.roundMode = roundMode;
         if (this.roundMode == RoundMode.Combat) {
-            Globals.WaveManager.start(this.currentRound);
+            Engine.WaveManager.start(this.currentRound);
         } else {
-            Globals.WaveManager.end();
+            Engine.WaveManager.end();
         }
     }
     public NotifyPlayer(notification, notifytype) {

src/scenes/Main.ts

@@ -1,4 +1,5 @@
-import { Globals } from '../classes/Bastion';
+import { Engine } from '../classes/Bastion';
+import { FadeInOut } from '../classes/game/AnimationManager';
 import Button, { ButtonTexture } from '../classes/gui/Button';
 import { MissionPickerScene } from './MissionPicker';
 import Scene from './Scene';
@@ -9,8 +10,8 @@ export class MainScene extends Scene {
         const NewGameButton = {
             caption: 'New Game',
             rect: new PIXI.Rectangle(
-                Globals.app.canvas.width / 2 - 300 / 2,
+                Engine.app.canvas.width / 2 - 300 / 2,
-                Globals.app.canvas.height / 5 + 3 * 80,
+                Engine.app.canvas.height / 5 + 3 * 80,
                 300,
                 60
             ),
@@ -20,16 +21,16 @@ export class MainScene extends Scene {
         const SettingsButton = {
             caption: 'Settings',
             rect: new PIXI.Rectangle(
-                Globals.app.canvas.width / 2 - 300 / 2,
+                Engine.app.canvas.width / 2 - 300 / 2,
-                Globals.app.canvas.height / 5 + 4 * 80,
+                Engine.app.canvas.height / 5 + 4 * 80,
                 300,
                 60
             ),
             texture: ButtonTexture.Button02,
         };
         let text = new PIXI.Text({
-            x: Globals.app.canvas.width / 2 - 300 / 2,
+            x: Engine.app.canvas.width / 2 - 300 / 2,
-            y: Globals.app.canvas.height / 5 + 1 * 80,
+            y: Engine.app.canvas.height / 5 + 1 * 80,
             text: 'BASTION',
             style: {
                 fill: 0xffaa00,
@@ -38,28 +39,29 @@ export class MainScene extends Scene {
             },
         });
         text.x = text.x - text.width / 5;
-        Globals.app.stage.addChild(text);
+        Engine.app.stage.addChild(text);
         let text2 = new PIXI.Text({
             x: 0,
             y: 0,
-            text: 'Latest commit: ' + Globals.latestCommit,
+            text: 'Latest commit: ' + Engine.latestCommit,
             style: {
                 fill: 0x000000,
                 fontSize: 10,
                 fontWeight: 'bold',
             },
         });
-        Globals.app.stage.addChild(text2);
+        Engine.app.stage.addChild(text2);
         const button01 = new Button(NewGameButton.rect, NewGameButton.caption, NewGameButton.texture, true);
         button01.onClick = (e) => {
-            Globals.app.stage.removeChild(text);
+            Engine.app.stage.removeChild(text);
-            Globals.app.stage.removeChild(text2);
+            Engine.app.stage.removeChild(text2);
-            Globals.GameMaster.changeScene(new MissionPickerScene());
+            Engine.GameMaster.changeScene(new MissionPickerScene());
         };
 
         let b2 = new Button(SettingsButton.rect, SettingsButton.caption, SettingsButton.texture, true);
         b2.onClick = (e) => {
             alert('Does nothing for now, just placeholder.');
         };
+        Engine.AnimationManager.Animate(new FadeInOut('out', 120, b2.container, () => console.log(b2.container.alpha)));
     }
 }

src/scenes/MissionPicker.ts

@@ -1,5 +1,5 @@
 import Assets from '../classes/Assets';
-import { Globals } from '../classes/Bastion';
+import { Engine } from '../classes/Bastion';
 import Button, { ButtonTexture } from '../classes/gui/Button';
 import { GameScene } from './Game';
 import { MainScene } from './Main';
@@ -10,13 +10,13 @@ export class MissionPickerScene extends Scene {
     public init() {
         const button = new Button(new PIXI.Rectangle(0, 0, 300, 60), 'Back to main', ButtonTexture.Button01);
         button.onClick = (e) => {
-            Globals.GameMaster.changeScene(new MainScene());
+            Engine.GameMaster.changeScene(new MainScene());
         };
         Assets.Missions.forEach((mission, index) => {
             const button = new Button(
                 new PIXI.Rectangle(
-                    Globals.app.canvas.width / 2 - 300 / 2,
+                    Engine.app.canvas.width / 2 - 300 / 2,
-                    Globals.app.canvas.height / 5 + index * 80,
+                    Engine.app.canvas.height / 5 + index * 80,
                     300,
                     60
                 ),
@@ -24,7 +24,7 @@ export class MissionPickerScene extends Scene {
                 ButtonTexture.Button01
             );
             button.onClick = (e) => {
-                Globals.GameMaster.changeScene(new GameScene(mission.name));
+                Engine.GameMaster.changeScene(new GameScene(mission.name));
             };
         });
     }