flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/pixi-scaffold. basic pixi.js scaffold for quick testing/demoing
flo-bit.github.io/pixi-scaffold/
javascript
pixijs
scaffold
2.9 kB
108 lines
1import * as PIXI from "https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.min.mjs";
2import * as PixiUtils from "./pixi-utils.js";
3
4export default class PixiScaffold {
5 static run(opts) {
6 return new PixiScaffold(opts);
7 }
8
9 constructor(opts) {
10 this.opts = opts ?? {};
11 window.PIXI = PIXI;
12 this.opts.PS = this;
13 window.PS = this;
14 window.Color = PixiUtils.Color;
15 this.app = new PIXI.Application(this.opts.renderOptions);
16 this.app.view.style.position = "absolute";
17 this.app.view.style.top = "0px";
18 this.app.view.style.left = "0px";
19 document.body.appendChild(this.app.view);
20
21 this.w = opts.w ?? 1000;
22 this.h = opts.h ?? 1000;
23 this.root = new PIXI.Container();
24 this.root.sortableChildren = true;
25 this.app.stage.addChild(this.root);
26 this.windowResized();
27
28 this.keys = {};
29 document.addEventListener("keydown", this.keyDown.bind(this));
30 document.addEventListener("keyup", this.keyUp.bind(this));
31 window.addEventListener("resize", this.windowResized.bind(this));
32
33 if (this.opts.assets) {
34 this.load();
35 return;
36 }
37
38 this.setup();
39 }
40
41 load() {
42 for (let k of Object.keys(this.opts.assets)) {
43 PIXI.Assets.add(k, this.opts.assets[k]);
44 }
45
46 const texturesPromise = PIXI.Assets.load(Object.keys(this.opts.assets));
47 texturesPromise.then(this.loadingFinished.bind(this));
48 }
49
50 loadingFinished(textures) {
51 this.textures = textures ?? {};
52 this.setup();
53 }
54
55 setup() {
56 if (this.opts.setup) this.opts.setup(this);
57 this.start();
58 }
59
60 start() {
61 let ticker = PIXI.Ticker.shared;
62 ticker.add(this.animate.bind(this));
63 }
64
65 animate() {
66 /* Update your scene here */
67 let elapsed = PIXI.Ticker.shared.elapsedMS / 1000.0;
68 let total = PIXI.Ticker.shared.lastTime / 1000.0;
69
70 if (this.opts.update) this.opts.update(elapsed, total, this);
71 }
72 resizeRoot() {
73 let w = document.documentElement.clientWidth,
74 h = document.documentElement.clientHeight;
75 let scl = Math.min(w / this.w, h / this.h);
76 this.root.position.x = w / 2;
77 this.root.position.y = h / 2;
78 this.root.scale.x = scl;
79 this.root.scale.y = scl;
80 }
81 windowResized() {
82 // using clientWidth and clientHeight instead of innerWidth and innerHeight
83 // because of weird ios web app behavior which doesn't update innerWidth and innerHeight immediately
84 this.app.renderer.resize(
85 document.documentElement.clientWidth,
86 document.documentElement.clientHeight
87 );
88 this.resizeRoot();
89 }
90 keyDown(event) {
91 if (this.opts.keyDown) {
92 this.opts.keyDown(event.key, event);
93 }
94 this.keys[event.key] = true;
95 }
96 keyUp(event) {
97 this.keys[event.key] = false;
98 }
99 addChild(c) {
100 this.root.addChild(c);
101 return c;
102 }
103 add(c) {
104 return PixiUtils.Utils.addChild(this.root, c);
105 }
106}
107
108export { PixiScaffold, PixiUtils };