i am sick, fix me

This commit is contained in:
koneko 2024-11-28 03:12:15 +01:00
parent b7d084439f
commit b394ff9e0a
11 changed files with 140 additions and 8 deletions

View File

@ -7,7 +7,7 @@ html {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background-color: red; background-color: black;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;

View File

@ -13,7 +13,7 @@ export class environment {
export default class GameMaster { export default class GameMaster {
public currentScene: Scene; public currentScene: Scene;
private GameObjects: GameObject[]; private GameObjects: GameObject[] = [];
private ticker: PIXI.Ticker; private ticker: PIXI.Ticker;
constructor() { constructor() {

View File

@ -26,7 +26,6 @@ export default abstract class GameObject {
public abstract update(elapsedMS): void; public abstract update(elapsedMS): void;
constructor() { constructor() {
// Define stuff that goes into this.container (visual elements), then call super().
environment.GameMaster._CreateGameObject(this); environment.GameMaster._CreateGameObject(this);
} }
} }

View File

@ -8,7 +8,7 @@ export default abstract class GuiObject {
protected _events: PIXI.EventEmitter = new PIXI.EventEmitter(); protected _events: PIXI.EventEmitter = new PIXI.EventEmitter();
protected enabled: boolean; protected enabled: boolean = true;
public destroy() { public destroy() {
this._events.removeAllListeners(); this._events.removeAllListeners();

View File

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

29
src/classes/gui/Topbar.ts Normal file
View File

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

View File

@ -1,6 +1,8 @@
import * as PIXI from 'pixi.js'; import * as PIXI from 'pixi.js';
import GameMaster, { environment } from './classes/Bastion'; import GameMaster, { environment } from './classes/Bastion';
import Assets from './classes/Assets'; import Assets from './classes/Assets';
import { MainScene } from './scenes/Main';
import { GameScene } from './scenes/Game';
(async () => { (async () => {
const app = new PIXI.Application(); const app = new PIXI.Application();
@ -16,13 +18,17 @@ import Assets from './classes/Assets';
await app.init({ await app.init({
width: width, width: width,
height: height, height: height,
backgroundColor: 'white', backgroundColor: 'gray',
sharedTicker: true, sharedTicker: true,
preference: 'webgl', preference: 'webgl',
}); });
document.body.appendChild(app.canvas); document.body.appendChild(app.canvas);
await Assets.LoadAssets(); await Assets.LoadAssets();
new GameMaster(); 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', () => { window.addEventListener('resize', () => {
const newWidth = Math.min(window.innerWidth * 0.75, window.innerHeight * aspectRatio); const newWidth = Math.min(window.innerWidth * 0.75, window.innerHeight * aspectRatio);
const newHeight = newWidth / aspectRatio; const newHeight = newWidth / aspectRatio;

24
src/scenes/Game.ts Normal file
View File

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

View File

@ -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 Scene from './Scene';
import * as PIXI from 'pixi.js'; import * as PIXI from 'pixi.js';
export class MainScene extends Scene { export class MainScene extends Scene {
public init() { 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);
} }
} }

View File

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

View File

@ -1,7 +1,7 @@
import GuiObject from '../classes/GuiObject'; import GuiObject from '../classes/GuiObject';
export default class Scene { export default class Scene {
public gui: GuiObject[]; public gui: GuiObject[] = [];
public destroy() { public destroy() {
this.gui.forEach((element) => { this.gui.forEach((element) => {
element.destroy(); element.destroy();