diff --git a/public/assets/gui/main_background.jpg b/public/assets/gui/main_background.jpg new file mode 100644 index 0000000..3bc3c52 Binary files /dev/null and b/public/assets/gui/main_background.jpg differ diff --git a/src/classes/Assets.ts b/src/classes/Assets.ts index ff3f944..0212684 100644 --- a/src/classes/Assets.ts +++ b/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)), diff --git a/src/scenes/Main.ts b/src/scenes/Main.ts index 01c8e23..eb5047b 100644 --- a/src/scenes/Main.ts +++ b/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( - Engine.app.canvas.width / 2 - 300 / 2, - Engine.app.canvas.height / 5 + 2 * 80, - 300, - 60 - ), + rect: new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + 0 * 70, 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( - Engine.app.canvas.width / 2 - 300 / 2, - Engine.app.canvas.height / 5 + 4 * 80, - 300, - 60 - ), - texture: ButtonTexture.Button02, + rect: new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + 2 * 70, 300, 60), + texture: ButtonTexture.Button01, }; - 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()); }; } diff --git a/src/scenes/MissionPicker.ts b/src/scenes/MissionPicker.ts index 7ff5605..4c7e738 100644 --- a/src/scenes/MissionPicker.ts +++ b/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( - Engine.app.canvas.width / 2 - 300 / 2, - Engine.app.canvas.height / 5 + index * 80, - 300, - 60 - ), + new PIXI.Rectangle(Engine.app.canvas.width / 2 - 300 / 2, 400 + index * 70, 300, 60), mission.name, ButtonTexture.Button01 ); diff --git a/src/scenes/Scene.ts b/src/scenes/Scene.ts index 0686908..0108a77 100644 --- a/src/scenes/Scene.ts +++ b/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; }