[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
adding pixi-utils to pixi-scaffold
+386
+386
pixi-utils.js
+386
pixi-utils.js
···
1
+
import * as PIXI from "https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.min.mjs";
2
+
import JSUtils from "https://flo-bit.github.io/js-utils/utils.js";
3
+
import Vector from "https://flo-bit.github.io/js-utils/vector.js";
4
+
5
+
const shapePresets = {};
6
+
7
+
class Shape extends PIXI.Graphics {
8
+
constructor(opts) {
9
+
super();
10
+
opts = JSUtils.combine(opts, shapePresets);
11
+
this.fillColor = opts.color ?? opts.fill ?? opts.c;
12
+
this.fillAlpha = opts.fillAlpha ?? 1;
13
+
14
+
this._strokeColor = opts.strokeColor ?? opts.stroke;
15
+
this.strokeAlpha = opts.strokeAlpha ?? 1;
16
+
this.strokeWeight = opts.strokeWeight ?? 1;
17
+
18
+
this.size = new Vector(
19
+
opts.width ?? opts.w ?? opts.size ?? opts.s ?? 100,
20
+
opts.height ?? opts.h ?? opts.size ?? opts.s ?? 100
21
+
);
22
+
23
+
this.shape = opts.shape ?? opts.type ?? "rect";
24
+
25
+
this._cornerRadius = opts.cornerRadius ?? opts.corner ?? 0;
26
+
27
+
this.a = opts.a;
28
+
this.b = opts.b;
29
+
30
+
if (opts.text) {
31
+
let textOpts = JSUtils.merge(
32
+
{ text: opts.text },
33
+
opts.style,
34
+
opts.textStyle,
35
+
opts.textOptions
36
+
);
37
+
this._text = new Text(textOpts);
38
+
this.addChild(this._text);
39
+
}
40
+
41
+
Utils.applySettings(this, opts);
42
+
this.redraw();
43
+
}
44
+
45
+
set text(text) {
46
+
this._text.text = text;
47
+
}
48
+
get text() {
49
+
return this._text.text;
50
+
}
51
+
set fontSize(t) {
52
+
this._text.style.fontSize = t;
53
+
}
54
+
get fontSize() {
55
+
return this._text.style.fontSize;
56
+
}
57
+
set fontColor(c) {
58
+
this._text.style.fill = c;
59
+
}
60
+
get fontColor() {
61
+
return this._text.style.fill;
62
+
}
63
+
64
+
get(name) {
65
+
return this.getChild(name);
66
+
}
67
+
getChild(name) {
68
+
return this.getChildByName(name);
69
+
}
70
+
71
+
add(c) {
72
+
return Utils.addChild(this, c);
73
+
}
74
+
75
+
get cornerRadius() {
76
+
return this._cornerRadius;
77
+
}
78
+
set cornerRadius(cR) {
79
+
this._cornerRadius = cR;
80
+
this.redraw();
81
+
}
82
+
83
+
set color(c) {
84
+
this.fillColor = c;
85
+
this.redraw();
86
+
}
87
+
get color() {
88
+
return this.fillColor;
89
+
}
90
+
set fill(c) {
91
+
this.fillColor = c;
92
+
this.redraw();
93
+
}
94
+
get fill() {
95
+
return this.fillColor;
96
+
}
97
+
98
+
set stroke(c) {
99
+
this.strokeColor = c;
100
+
}
101
+
get stroke() {
102
+
return this._strokeColor;
103
+
}
104
+
set strokeColor(c) {
105
+
this._strokeColor = c;
106
+
this.redraw();
107
+
}
108
+
get strokeColor() {
109
+
return this._strokeColor;
110
+
}
111
+
set weight(w) {
112
+
this.strokeWeight = w;
113
+
this.redraw();
114
+
}
115
+
get weight() {
116
+
return this.strokeWeight;
117
+
}
118
+
119
+
set width(w) {
120
+
this.size.x = w;
121
+
this.redraw();
122
+
}
123
+
get width() {
124
+
return this.size.x;
125
+
}
126
+
set height(h) {
127
+
this.size.y = h;
128
+
this.redraw();
129
+
}
130
+
get height() {
131
+
return this.size.y;
132
+
}
133
+
134
+
move(x, y) {
135
+
if (x) this.position.x += x;
136
+
if (y) this.position.y += y;
137
+
}
138
+
139
+
setStroke(color, weight, alpha) {
140
+
this.strokeColor = color;
141
+
this.strokeWeight = weight;
142
+
this.strokeAlpha = alpha;
143
+
144
+
this.redraw();
145
+
}
146
+
147
+
redraw() {
148
+
this.clear();
149
+
150
+
if (this.fillColor != undefined)
151
+
this.beginFill(this.fillColor, this.fillAlpha);
152
+
153
+
if (this._strokeColor != undefined)
154
+
this.lineStyle(this.strokeWeight, this._strokeColor, this.strokeAlpha);
155
+
156
+
if (this.shape == "rect") {
157
+
if (this._cornerRadius <= 0) {
158
+
this.drawRect(
159
+
-this.size.x / 2,
160
+
-this.size.y / 2,
161
+
this.size.x,
162
+
this.size.y
163
+
);
164
+
} else {
165
+
this.drawRoundedRect(
166
+
-this.size.x / 2,
167
+
-this.size.y / 2,
168
+
this.size.x,
169
+
this.size.y,
170
+
this._cornerRadius
171
+
);
172
+
}
173
+
} else if (this.shape == "circle" || this.shape == "ellipse") {
174
+
this.drawEllipse(0, 0, this.size.x / 2, this.size.y / 2);
175
+
} else if (
176
+
this.shape == "line" &&
177
+
this.a != undefined &&
178
+
this.b != undefined
179
+
) {
180
+
this.moveTo(this.a.x, this.a.y);
181
+
this.lineTo(this.b.x, this.b.y);
182
+
}
183
+
}
184
+
}
185
+
186
+
const spritePresets = {};
187
+
188
+
class Sprite extends PIXI.Sprite {
189
+
constructor(opts) {
190
+
opts = JSUtils.combine(opts, spritePresets);
191
+
super(opts.texture);
192
+
193
+
Utils.applySettings(this, opts);
194
+
}
195
+
196
+
add(c) {
197
+
return Utils.addChild(this, c);
198
+
}
199
+
}
200
+
201
+
const containerPresets = {};
202
+
203
+
class Container extends PIXI.Container {
204
+
constructor(opts) {
205
+
opts = JSUtils.combine(opts, containerPresets);
206
+
super();
207
+
208
+
Utils.applySettings(this, opts);
209
+
}
210
+
211
+
add(c) {
212
+
return Utils.addChild(this, c);
213
+
}
214
+
}
215
+
216
+
const graphicsPresets = {};
217
+
218
+
class Graphics extends PIXI.Graphics {
219
+
constructor(opts) {
220
+
opts = JSUtils.combine(opts, graphicsPresets);
221
+
super();
222
+
223
+
Utils.applySettings(this, opts);
224
+
}
225
+
226
+
add(c) {
227
+
return Utils.addChild(this, c);
228
+
}
229
+
}
230
+
231
+
const textPresets = {};
232
+
233
+
class Text extends PIXI.Text {
234
+
constructor(opts) {
235
+
opts = JSUtils.combine(opts, textPresets);
236
+
let style = JSUtils.merge(opts.style, opts);
237
+
super(opts.text, {
238
+
fontFamily:
239
+
style.fontFamily ?? style.textFamily ?? style.family ?? "Arial",
240
+
fontSize: style.fontSize ?? style.textSize ?? style.size ?? 24,
241
+
fill:
242
+
style.fontColor ??
243
+
style.textColor ??
244
+
style.color ??
245
+
style.fill ??
246
+
style.c ??
247
+
0xffffff,
248
+
align: style.fontAlign ?? style.textAlign ?? style.align ?? "center",
249
+
});
250
+
251
+
Utils.applySettings(this, opts);
252
+
}
253
+
254
+
add(c) {
255
+
Utils.addChild(this, c);
256
+
}
257
+
}
258
+
259
+
const animatedSpritePresets = {};
260
+
261
+
class AnimatedSprite extends PIXI.AnimatedSprite {
262
+
constructor(opts) {
263
+
opts = JSUtils.combine(opts, animatedSpritePresets);
264
+
super(opts.textures);
265
+
266
+
Utils.applySettings(this, opts);
267
+
}
268
+
}
269
+
270
+
class Utils {
271
+
static applySettings(obj, opts) {
272
+
obj.alpha = opts.alpha ?? 1;
273
+
obj.name = opts.name;
274
+
obj.interactive = opts.interactive ?? false;
275
+
276
+
obj.x = opts.x ?? 0;
277
+
obj.y = opts.y ?? 0;
278
+
obj.zIndex = opts.zIndex ?? 0;
279
+
280
+
obj.rotation = opts.rotation ?? 0;
281
+
282
+
if (obj.anchor !== undefined) {
283
+
obj.anchor.set(
284
+
opts.anchorX ?? opts.anchor ?? 0.5,
285
+
opts.anchorY ?? opts.anchor ?? 0.5
286
+
);
287
+
}
288
+
289
+
obj.tint = opts.tint ?? 0xffffff;
290
+
obj.scale.set(
291
+
opts.scaleX ?? opts.scale ?? 1,
292
+
opts.scaleY ?? opts.scale ?? 1
293
+
);
294
+
295
+
if (opts.width) obj.width = opts.width;
296
+
if (opts.height) obj.height = opts.height;
297
+
298
+
obj.visible = opts.visible ?? true;
299
+
300
+
if (opts.mask) obj.mask = opts.mask;
301
+
if (opts.hitArea) obj.hitArea = opts.hitArea;
302
+
303
+
obj.sortableChildren = opts.sortChildren ?? opts.sort ?? true;
304
+
305
+
if (opts.child) {
306
+
obj.add(child);
307
+
}
308
+
if (opts.children) {
309
+
for (let child of opts.children) {
310
+
obj.add(child);
311
+
}
312
+
}
313
+
obj.opts = opts;
314
+
return obj;
315
+
}
316
+
317
+
static addChild(parent, child) {
318
+
child = Utils.process(child);
319
+
if (child == undefined) return;
320
+
321
+
if (!Array.isArray(child)) {
322
+
parent.addChild(child);
323
+
return child;
324
+
}
325
+
326
+
for (let c of child) {
327
+
parent.addChild(c);
328
+
}
329
+
return child;
330
+
}
331
+
332
+
static process(child) {
333
+
if (child == undefined) return;
334
+
335
+
if (Array.isArray(child)) {
336
+
return child.map((c) => Utils.process(c));
337
+
}
338
+
if (typeof child == "function") {
339
+
child = child(child);
340
+
}
341
+
342
+
if (child == undefined) return;
343
+
// check if child is already a pixi object
344
+
if (child.isSprite != undefined) {
345
+
return child;
346
+
}
347
+
348
+
// try to find type of object from type property
349
+
if (child.type == "container") {
350
+
return new Container(child);
351
+
}
352
+
if (child.type == "sprite") {
353
+
return new Sprite(child);
354
+
}
355
+
if (child.type == "shape") {
356
+
return new Shape(child);
357
+
}
358
+
if (child.type == "anim" || child.type == "animation") {
359
+
return new AnimatedSprite(child);
360
+
}
361
+
if (child.type == "text") {
362
+
return new Text(child);
363
+
}
364
+
if (child.type == "graphics") {
365
+
return new Graphics(child);
366
+
}
367
+
368
+
// try to find type of object from other properties
369
+
if (child.shape != undefined) {
370
+
return new Shape(child);
371
+
}
372
+
if (child.texture != undefined) {
373
+
return new Sprite(child);
374
+
}
375
+
if (child.text != undefined) {
376
+
return new Text(child);
377
+
}
378
+
if (child.children != undefined) {
379
+
return new Container(child);
380
+
}
381
+
382
+
return child;
383
+
}
384
+
}
385
+
386
+
export { Shape, Utils, Sprite, Container, Graphics, Text, AnimatedSprite };