i am sick, fix me
This commit is contained in:
parent
b7d084439f
commit
b394ff9e0a
@ -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;
|
||||||
|
@ -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() {
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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();
|
||||||
|
29
src/classes/gui/Sidebar.ts
Normal file
29
src/classes/gui/Sidebar.ts
Normal 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
29
src/classes/gui/Topbar.ts
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
@ -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
24
src/scenes/Game.ts
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
26
src/scenes/MissionPicker.ts
Normal file
26
src/scenes/MissionPicker.ts
Normal 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));
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
@ -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();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user