more assets, more workring
BIN
public/assets/gui/button_01.png
Executable file
After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 8.3 KiB |
BIN
public/assets/gui/frame_01.png
Executable file
After Width: | Height: | Size: 11 KiB |
BIN
public/assets/gui/frame_green.png
Executable file
After Width: | Height: | Size: 46 KiB |
BIN
public/assets/gui/frame_red.png
Executable file
After Width: | Height: | Size: 36 KiB |
BIN
public/assets/gui/frame_violet.png
Executable file
After Width: | Height: | Size: 40 KiB |
BIN
public/assets/gui/gems.png
Executable file
After Width: | Height: | Size: 112 KiB |
BIN
public/assets/gui/money.png
Executable file
After Width: | Height: | Size: 222 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
BIN
public/assets/gui/shield_02.png
Executable file
After Width: | Height: | Size: 226 KiB |
BIN
public/assets/gui/w_anvil.png
Executable file
After Width: | Height: | Size: 210 KiB |
@ -2,20 +2,47 @@ import * as PIXI from 'pixi.js';
|
|||||||
import DynamicObject from './DynamicObject';
|
import DynamicObject from './DynamicObject';
|
||||||
|
|
||||||
export class Foundation {
|
export class Foundation {
|
||||||
|
public static _PIXIApp: PIXI.Application;
|
||||||
public static Master: Master;
|
public static Master: Master;
|
||||||
public static WindowHeight: number;
|
public static WindowHeight: number;
|
||||||
public static WindowWidth: number;
|
public static WindowWidth: number;
|
||||||
|
public static AspectRatio: number = 4 / 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Master {
|
export default class Master {
|
||||||
public DynamicObjects: DynamicObject[];
|
private DynamicObjects: DynamicObject[];
|
||||||
public ticker: PIXI.Ticker;
|
private ticker: PIXI.Ticker;
|
||||||
|
public stage: PIXI.Container = new PIXI.Container({
|
||||||
|
width: Foundation.WindowWidth,
|
||||||
|
height: Foundation.WindowHeight,
|
||||||
|
});
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
Foundation.Master = this;
|
Foundation.Master = this;
|
||||||
this.ticker = new PIXI.Ticker();
|
this.ticker = new PIXI.Ticker();
|
||||||
this.ticker.maxFPS = 60;
|
this.ticker.maxFPS = 60;
|
||||||
this.ticker.minFPS = 30;
|
this.ticker.minFPS = 30;
|
||||||
this.ticker.add(() => this.update(this.ticker.elapsedMS)); // bruh
|
this.ticker.add(() => this.update(this.ticker.elapsedMS));
|
||||||
|
}
|
||||||
|
|
||||||
|
public _CreateDynamicObject(object: DynamicObject) {
|
||||||
|
this.DynamicObjects.push(object);
|
||||||
|
}
|
||||||
|
|
||||||
|
public _RemoveDynamicObject(object: DynamicObject) {
|
||||||
|
this.DynamicObjects.splice(this.DynamicObjects.indexOf(object), 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
public RefreshStage() {
|
||||||
|
Foundation._PIXIApp.stage.removeChildren();
|
||||||
|
this.stage.width = Foundation.WindowWidth;
|
||||||
|
this.stage.height = Foundation.WindowHeight;
|
||||||
|
Foundation._PIXIApp.stage.addChild(this.stage);
|
||||||
|
}
|
||||||
|
|
||||||
|
public update(elapsedMS) {
|
||||||
|
this.DynamicObjects.forEach((element) => {
|
||||||
|
element.update(elapsedMS);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
public update(elapsedMS) {}
|
|
||||||
}
|
}
|
||||||
|
@ -2,27 +2,30 @@ import * as PIXI from 'pixi.js';
|
|||||||
import { Foundation } from './Bastion';
|
import { Foundation } from './Bastion';
|
||||||
|
|
||||||
export default abstract class DynamicObject {
|
export default abstract class DynamicObject {
|
||||||
protected _container: PIXI.Container;
|
public readonly name: string = this.constructor.name;
|
||||||
|
|
||||||
protected bounds: PIXI.Rectangle;
|
protected _container: PIXI.Container = new PIXI.Container();
|
||||||
|
|
||||||
private _events: PIXI.EventEmitter = new PIXI.EventEmitter();
|
protected _events: PIXI.EventEmitter = new PIXI.EventEmitter();
|
||||||
|
|
||||||
public abstract events: Enumerator;
|
|
||||||
|
|
||||||
public destroy() {
|
public destroy() {
|
||||||
this._events.removeAllListeners();
|
this._events.removeAllListeners();
|
||||||
if (this._container.parent) this._container.parent.removeChild(this._container);
|
if (this._container.parent) this._container.parent.removeChild(this._container);
|
||||||
this._container.destroy();
|
this._container.destroy();
|
||||||
|
Foundation.Master._RemoveDynamicObject(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
public get container(): PIXI.Container {
|
public get container(): PIXI.Container {
|
||||||
return this._container;
|
return this._container;
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(bounds?: PIXI.Rectangle) {
|
public get events(): PIXI.EventEmitter {
|
||||||
this.bounds = bounds ?? new PIXI.Rectangle(0, 0, 0, 0);
|
return this._events;
|
||||||
this._container = new PIXI.Container();
|
}
|
||||||
Foundation.Master.DynamicObjects.push(this);
|
|
||||||
|
public update(elapsedMS) {}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
Foundation.Master._CreateDynamicObject(this);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
41
src/classes/GuiObject.ts
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import * as PIXI from 'pixi.js';
|
||||||
|
|
||||||
|
export default abstract class GuiObject {
|
||||||
|
public readonly name: string = this.constructor.name;
|
||||||
|
|
||||||
|
protected _container: PIXI.Container;
|
||||||
|
|
||||||
|
protected _events: PIXI.EventEmitter = new PIXI.EventEmitter();
|
||||||
|
|
||||||
|
public destroy() {
|
||||||
|
this._events.removeAllListeners();
|
||||||
|
if (this._container.parent) this._container.parent.removeChild(this._container);
|
||||||
|
this._container.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
public get container(): PIXI.Container {
|
||||||
|
return this._container;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get events(): PIXI.EventEmitter {
|
||||||
|
return this._events;
|
||||||
|
}
|
||||||
|
|
||||||
|
public onClick(e: PIXI.FederatedPointerEvent) {
|
||||||
|
console.warn(`[${this.name} does not implement GuiObject.onClick()]`);
|
||||||
|
}
|
||||||
|
public onWheel(e: PIXI.FederatedWheelEvent) {
|
||||||
|
console.warn(`[${this.name} does not implement GuiObject.onWheel()]`);
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this._container = new PIXI.Container();
|
||||||
|
this._container.interactive = true;
|
||||||
|
this._container.onwheel = (e) => {
|
||||||
|
this.onWheel(e);
|
||||||
|
};
|
||||||
|
this._container.onclick = (e) => {
|
||||||
|
this.onClick(e);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
14
src/main.ts
@ -3,13 +3,14 @@ import Master, { Foundation } from './classes/Bastion';
|
|||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
const app = new PIXI.Application();
|
const app = new PIXI.Application();
|
||||||
const aspectRatio = 4 / 3;
|
const aspectRatio = Foundation.AspectRatio;
|
||||||
const maxWidth = window.innerWidth;
|
const maxWidth = window.innerWidth;
|
||||||
const maxHeight = window.innerHeight;
|
const maxHeight = window.innerHeight;
|
||||||
const width = Math.min(maxWidth * 0.75, maxHeight * aspectRatio);
|
const width = Math.min(maxWidth * 0.75, maxHeight * aspectRatio);
|
||||||
const height = width / aspectRatio;
|
const height = width / aspectRatio;
|
||||||
Foundation.WindowWidth = width;
|
Foundation.WindowWidth = width;
|
||||||
Foundation.WindowHeight = height;
|
Foundation.WindowHeight = height;
|
||||||
|
Foundation._PIXIApp = app;
|
||||||
|
|
||||||
await app.init({
|
await app.init({
|
||||||
width: width,
|
width: width,
|
||||||
@ -20,19 +21,14 @@ import Master, { Foundation } from './classes/Bastion';
|
|||||||
});
|
});
|
||||||
|
|
||||||
document.body.appendChild(app.canvas);
|
document.body.appendChild(app.canvas);
|
||||||
|
let master = new Master();
|
||||||
|
master.RefreshStage();
|
||||||
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;
|
||||||
Foundation.WindowWidth = newWidth;
|
Foundation.WindowWidth = newWidth;
|
||||||
Foundation.WindowHeight = newHeight;
|
Foundation.WindowHeight = newHeight;
|
||||||
app.renderer.resize(newWidth, newHeight);
|
app.renderer.resize(newWidth, newHeight);
|
||||||
|
master.RefreshStage();
|
||||||
});
|
});
|
||||||
new Master();
|
|
||||||
// await Assets.LoadAssets();
|
|
||||||
// const game = new Game(app.screen);
|
|
||||||
// app.stage.addChild(game.container);
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// app.renderer.resize(window.innerWidth, window.innerHeight);
|
|
||||||
// game.setBounds(0, 0, app.screen.width, app.screen.height);
|
|
||||||
// });
|
|
||||||
})();
|
})();
|
||||||
|