Nice menu background added

src/classes/Assets.ts

@@ -3,6 +3,8 @@ import { CreepDefinition, GemDefinition, MissionDefinition, TowerDefinition } fr
 import { Engine } from './Bastion';
 
 export default class GameAssets {
+    public static MainBackground: PIXI.Texture;
+
     public static Frame01Texture: PIXI.Texture;
     public static Frame02Texture: PIXI.Texture;
     public static Frame03Texture: PIXI.Texture;
@@ -105,6 +107,7 @@ export default class GameAssets {
             this.Load('./assets/gui/frame_blue.png').then((texture) => (this.BlueBackground = texture)),
             this.Load('./assets/gui/banner_01.png').then((texture) => (this.BannerGemsmith = texture)),
             this.Load('./assets/gui/note.png').then((texture) => (this.EndScreenDialog = texture)),
+            this.Load('./assets/gui/main_background.jpg').then((texture) => (this.MainBackground = texture)),
 
             this.Load('./assets/tutorial/tutorial01.jpg').then((texture) => (this.Tutorial01 = texture)),
             this.Load('./assets/tutorial/tutorial02.jpg').then((texture) => (this.Tutorial02 = texture)),

src/scenes/Main.ts

@@ -1,3 +1,4 @@
+import GameAssets from '../classes/Assets';
 import { Engine } from '../classes/Bastion';
 import { FadeInOut, Tween } from '../classes/game/AnimationManager';
 import Button, { ButtonTexture } from '../classes/gui/Button';
@@ -8,50 +9,27 @@ import * as PIXI from 'pixi.js';
 
 export class MainScene extends Scene {
     public init() {
+        // Background
+        this.addMainBackground();
+
         const NewGameButton = {
             caption: 'New Game',
-            rect: new PIXI.Rectangle(
+            rect: new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + 0 * 70, 300, 60),
-                Engine.app.canvas.width / 2 - 300 / 2,
-                Engine.app.canvas.height / 5 + 2 * 80,
-                300,
-                60
-            ),
 
-            texture: ButtonTexture.Button02,
+            texture: ButtonTexture.Button01,
+        };
+        const TutorialButton = {
+            caption: 'How to play',
+            rect: new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + 1 * 70, 300, 60),
+            texture: ButtonTexture.Button01,
         };
 
         const SettingsButton = {
             caption: 'Settings',
-            rect: new PIXI.Rectangle(
+            rect: new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + 2 * 70, 300, 60),
-                Engine.app.canvas.width / 2 - 300 / 2,
+            texture: ButtonTexture.Button01,
-                Engine.app.canvas.height / 5 + 4 * 80,
-                300,
-                60
-            ),
-            texture: ButtonTexture.Button02,
         };
-        const TutorialButton = {
+
-            caption: 'How to play',
-            rect: new PIXI.Rectangle(
-                Engine.app.canvas.width / 2 - 300 / 2,
-                Engine.app.canvas.height / 5 + 3 * 80,
-                300,
-                60
-            ),
-            texture: ButtonTexture.Button02,
-        };
-        let text = new PIXI.Text({
-            x: Engine.app.canvas.width / 2 - 300 / 2,
-            y: Engine.app.canvas.height / 5 + 20,
-            text: 'BASTION',
-            style: {
-                fill: 0xffaa00,
-                fontFamily: 'Aclonica',
-                fontSize: 100,
-            },
-        });
-        text.x = text.x - text.width / 5;
-        Engine.GameMaster.currentScene.stage.addChild(text);
         let text2 = new PIXI.Text({
             x: 0,
             y: 0,
@@ -62,11 +40,9 @@ export class MainScene extends Scene {
                 fontWeight: 'bold',
             },
         });
-        Engine.GameMaster.currentScene.stage.addChild(text2);
+        this.stage.addChild(text2);
         const button01 = new Button(NewGameButton.rect, NewGameButton.caption, NewGameButton.texture, true);
         button01.onClick = (e) => {
-            Engine.GameMaster.currentScene.stage.removeChild(text);
-            Engine.GameMaster.currentScene.stage.removeChild(text2);
             Engine.GameMaster.changeScene(new MissionPickerScene());
         };
 
@@ -76,8 +52,6 @@ export class MainScene extends Scene {
         };
         let b3 = new Button(TutorialButton.rect, TutorialButton.caption, TutorialButton.texture, true);
         b3.onClick = (e) => {
-            Engine.GameMaster.currentScene.stage.removeChild(text);
-            Engine.GameMaster.currentScene.stage.removeChild(text2);
             Engine.GameMaster.changeScene(new HowToPlay());
         };
     }

src/scenes/MissionPicker.ts

@@ -8,18 +8,14 @@ import * as PIXI from 'pixi.js';
 
 export class MissionPickerScene extends Scene {
     public init() {
-        const button = new Button(new PIXI.Rectangle(0, 0, 300, 60), 'Back to main', ButtonTexture.Button01);
+        this.addMainBackground();
+        const button = new Button(new PIXI.Rectangle(10, 10, 300, 60), 'Back to main', ButtonTexture.Button01);
         button.onClick = (e) => {
             Engine.GameMaster.changeScene(new MainScene());
         };
         Assets.Missions.forEach((mission, index) => {
             const button = new Button(
-                new PIXI.Rectangle(
+                new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + index * 70, 300, 60),
-                    Engine.app.canvas.width / 2 - 300 / 2,
-                    Engine.app.canvas.height / 5 + index * 80,
-                    300,
-                    60
-                ),
                 mission.name,
                 ButtonTexture.Button01
             );

src/scenes/Scene.ts

@@ -1,3 +1,4 @@
+import GameAssets from '../classes/Assets';
 import { Engine } from '../classes/Bastion';
 import GuiObject from '../classes/GuiObject';
 import * as PIXI from 'pixi.js';
@@ -18,6 +19,14 @@ export default class Scene {
         });
     }
 
+    public addMainBackground() {
+        // Background
+        const sprite = new PIXI.Sprite(GameAssets.MainBackground);
+        sprite.width = Engine.app.canvas.width;
+        sprite.height = Engine.app.canvas.height;
+        this.stage.addChild(sprite);
+    }
+
     public get events(): PIXI.EventEmitter {
         return this._events;
     }