diff --git a/public/style.css b/public/style.css index abf102a..d81f31a 100644 --- a/public/style.css +++ b/public/style.css @@ -7,7 +7,7 @@ html { width: 100vw; height: 100vh; overflow: hidden; - background-color: red; + background-color: black; display: flex; flex-direction: row; align-items: center; diff --git a/src/classes/Bastion.ts b/src/classes/Bastion.ts index d7caf2b..e51e075 100644 --- a/src/classes/Bastion.ts +++ b/src/classes/Bastion.ts @@ -13,7 +13,7 @@ export class environment { export default class GameMaster { public currentScene: Scene; - private GameObjects: GameObject[]; + private GameObjects: GameObject[] = []; private ticker: PIXI.Ticker; constructor() { diff --git a/src/classes/GameObject.ts b/src/classes/GameObject.ts index 69b5fc6..ed999a6 100644 --- a/src/classes/GameObject.ts +++ b/src/classes/GameObject.ts @@ -26,7 +26,6 @@ export default abstract class GameObject { public abstract update(elapsedMS): void; constructor() { - // Define stuff that goes into this.container (visual elements), then call super(). environment.GameMaster._CreateGameObject(this); } } diff --git a/src/classes/GuiObject.ts b/src/classes/GuiObject.ts index 3fac59f..624988d 100644 --- a/src/classes/GuiObject.ts +++ b/src/classes/GuiObject.ts @@ -8,7 +8,7 @@ export default abstract class GuiObject { protected _events: PIXI.EventEmitter = new PIXI.EventEmitter(); - protected enabled: boolean; + protected enabled: boolean = true; public destroy() { this._events.removeAllListeners(); diff --git a/src/classes/gui/Sidebar.ts b/src/classes/gui/Sidebar.ts new file mode 100644 index 0000000..760772b --- /dev/null +++ b/src/classes/gui/Sidebar.ts @@ -0,0 +1,29 @@ +import * as PIXI from 'pixi.js'; +import GuiObject from '../GuiObject'; +import Assets from '../Assets'; + +export default class Sidebar extends GuiObject { + private bounds: PIXI.Rectangle; + private sidebarSprite: PIXI.NineSliceSprite; + + constructor(bounds: PIXI.Rectangle) { + super(false); + this.bounds = bounds; + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + this.container.width = this.bounds.width; + this.container.height = this.bounds.height; + this.sidebarSprite = new PIXI.NineSliceSprite({ + texture: Assets.Frame01Texture, + leftWidth: 100, + topHeight: 100, + rightWidth: 100, + bottomHeight: 100, + }); + this.sidebarSprite.x = 40; + this.sidebarSprite.y = -40; + this.sidebarSprite.width = this.bounds.width + 40; + this.sidebarSprite.height = this.bounds.height + 80; + this.container.addChild(this.sidebarSprite); + } +} diff --git a/src/classes/gui/Topbar.ts b/src/classes/gui/Topbar.ts new file mode 100644 index 0000000..be4526a --- /dev/null +++ b/src/classes/gui/Topbar.ts @@ -0,0 +1,29 @@ +import * as PIXI from 'pixi.js'; +import GuiObject from '../GuiObject'; +import Assets from '../Assets'; + +export default class Topbar extends GuiObject { + private bounds: PIXI.Rectangle; + private sidebarSprite: PIXI.NineSliceSprite; + + constructor(bounds: PIXI.Rectangle) { + super(false); + this.bounds = bounds; + this.container.x = this.bounds.x; + this.container.y = this.bounds.y; + this.container.width = this.bounds.width; + this.container.height = this.bounds.height; + this.sidebarSprite = new PIXI.NineSliceSprite({ + texture: Assets.Frame01Texture, + leftWidth: 100, + topHeight: 100, + rightWidth: 100, + bottomHeight: 100, + }); + this.sidebarSprite.x = -40; + this.sidebarSprite.y = -40; + this.sidebarSprite.width = this.bounds.width + 40; + this.sidebarSprite.height = this.bounds.height; + this.container.addChild(this.sidebarSprite); + } +} diff --git a/src/main.ts b/src/main.ts index 0ac6560..ab87868 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,8 @@ import * as PIXI from 'pixi.js'; import GameMaster, { environment } from './classes/Bastion'; import Assets from './classes/Assets'; +import { MainScene } from './scenes/Main'; +import { GameScene } from './scenes/Game'; (async () => { const app = new PIXI.Application(); @@ -16,13 +18,17 @@ import Assets from './classes/Assets'; await app.init({ width: width, height: height, - backgroundColor: 'white', + backgroundColor: 'gray', sharedTicker: true, preference: 'webgl', }); document.body.appendChild(app.canvas); await Assets.LoadAssets(); new GameMaster(); + environment.GameMaster.changeScene(new MainScene()); + let params = new URLSearchParams(location.href); + if (params.entries().next().value[1] == 'game') environment.GameMaster.changeScene(new GameScene('Mission 1')); + window.addEventListener('resize', () => { const newWidth = Math.min(window.innerWidth * 0.75, window.innerHeight * aspectRatio); const newHeight = newWidth / aspectRatio; diff --git a/src/scenes/Game.ts b/src/scenes/Game.ts new file mode 100644 index 0000000..bedf074 --- /dev/null +++ b/src/scenes/Game.ts @@ -0,0 +1,24 @@ +import Assets from '../classes/Assets'; +import { environment } from '../classes/Bastion'; +import { MissionDefinition } from '../classes/Definitions'; +import Sidebar from '../classes/gui/Sidebar'; +import Topbar from '../classes/gui/Topbar'; +import Scene from './Scene'; +import * as PIXI from 'pixi.js'; + +export class GameScene extends Scene { + public mission: MissionDefinition; + constructor(name: string) { + super(); + Assets.Missions.forEach((mission) => { + if (mission.name == name) this.mission = mission; + }); + } + public init() { + const SidebarRect = new PIXI.Rectangle(environment.WindowWidth - 400, 0, 400, environment.WindowHeight); + const TopbarRect = new PIXI.Rectangle(0, 0, environment.WindowWidth, 150); + + new Topbar(TopbarRect); + new Sidebar(SidebarRect); + } +} diff --git a/src/scenes/Main.ts b/src/scenes/Main.ts index ec658fe..aa62336 100644 --- a/src/scenes/Main.ts +++ b/src/scenes/Main.ts @@ -1,9 +1,28 @@ -import Button from '../classes/gui/Button'; +import { environment } from '../classes/Bastion'; +import Button, { ButtonTexture } from '../classes/gui/Button'; +import { MissionPickerScene } from './MissionPicker'; import Scene from './Scene'; import * as PIXI from 'pixi.js'; export class MainScene extends Scene { public init() { - new Button(new PIXI.Bounds(0, 0, 200, 200)); + const NewGameButton = { + caption: 'New Game', + rect: new PIXI.Rectangle(environment.WindowWidth / 2 - 300 / 2, environment.WindowHeight / 2 - 80, 300, 60), + texture: ButtonTexture.Button01, + }; + + const SettingsButton = { + caption: 'Settings', + rect: new PIXI.Rectangle(environment.WindowWidth / 2 - 300 / 2, environment.WindowHeight / 2 + 20, 300, 60), + texture: ButtonTexture.Button01, + }; + + const button01 = new Button(NewGameButton.rect, NewGameButton.caption, NewGameButton.texture, true); + button01.onClick = (e) => { + environment.GameMaster.changeScene(new MissionPickerScene()); + }; + + new Button(SettingsButton.rect, SettingsButton.caption, SettingsButton.texture, true); } } diff --git a/src/scenes/MissionPicker.ts b/src/scenes/MissionPicker.ts new file mode 100644 index 0000000..f9ea9fa --- /dev/null +++ b/src/scenes/MissionPicker.ts @@ -0,0 +1,26 @@ +import Assets from '../classes/Assets'; +import { environment } from '../classes/Bastion'; +import Button, { ButtonTexture } from '../classes/gui/Button'; +import { GameScene } from './Game'; +import Scene from './Scene'; +import * as PIXI from 'pixi.js'; + +export class MissionPickerScene extends Scene { + public init() { + Assets.Missions.forEach((mission, index) => { + const button = new Button( + new PIXI.Rectangle( + environment.WindowWidth / 2 - 300 / 2, + environment.WindowHeight / 5 + index * 80, + 300, + 60 + ), + mission.name, + ButtonTexture.Button01 + ); + button.onClick = (e) => { + environment.GameMaster.changeScene(new GameScene(mission.name)); + }; + }); + } +} diff --git a/src/scenes/Scene.ts b/src/scenes/Scene.ts index d495f8a..cfc718e 100644 --- a/src/scenes/Scene.ts +++ b/src/scenes/Scene.ts @@ -1,7 +1,7 @@ import GuiObject from '../classes/GuiObject'; export default class Scene { - public gui: GuiObject[]; + public gui: GuiObject[] = []; public destroy() { this.gui.forEach((element) => { element.destroy();