more assets, more workring

This commit is contained in:
koneko 2024-11-20 20:42:57 +01:00
parent 14b06915c6
commit c6a1ae71b1
15 changed files with 89 additions and 22 deletions

BIN
public/assets/gui/button_01.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
public/assets/gui/frame_01.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/assets/gui/frame_green.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

BIN
public/assets/gui/frame_red.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

BIN
public/assets/gui/gems.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

BIN
public/assets/gui/money.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

View File

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/assets/gui/shield_02.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

BIN
public/assets/gui/w_anvil.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

View File

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

View File

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

View File

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