like2d 2.7.4 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -35
- package/dist/core/audio.d.ts +12 -9
- package/dist/core/audio.d.ts.map +1 -1
- package/dist/core/audio.js +7 -4
- package/dist/core/canvas.d.ts +58 -0
- package/dist/core/canvas.d.ts.map +1 -0
- package/dist/core/canvas.js +209 -0
- package/dist/core/events.d.ts +92 -7
- package/dist/core/events.d.ts.map +1 -1
- package/dist/core/events.js +20 -0
- package/dist/core/gamepad-mapping.d.ts +57 -18
- package/dist/core/gamepad-mapping.d.ts.map +1 -1
- package/dist/core/gamepad-mapping.js +23 -223
- package/dist/core/gamepad.d.ts +34 -58
- package/dist/core/gamepad.d.ts.map +1 -1
- package/dist/core/gamepad.js +79 -213
- package/dist/core/graphics.d.ts +175 -64
- package/dist/core/graphics.d.ts.map +1 -1
- package/dist/core/graphics.js +294 -198
- package/dist/core/input-state.d.ts +2 -2
- package/dist/core/input-state.d.ts.map +1 -1
- package/dist/core/input.d.ts +22 -15
- package/dist/core/input.d.ts.map +1 -1
- package/dist/core/input.js +25 -37
- package/dist/core/keyboard.d.ts +7 -7
- package/dist/core/keyboard.d.ts.map +1 -1
- package/dist/core/keyboard.js +24 -31
- package/dist/core/like.d.ts +98 -44
- package/dist/core/like.d.ts.map +1 -1
- package/dist/core/like.js +8 -0
- package/dist/core/mouse.d.ts +45 -22
- package/dist/core/mouse.d.ts.map +1 -1
- package/dist/core/mouse.js +90 -78
- package/dist/core/timer.d.ts +2 -5
- package/dist/core/timer.d.ts.map +1 -1
- package/dist/core/timer.js +2 -14
- package/dist/engine.d.ts +61 -11
- package/dist/engine.d.ts.map +1 -1
- package/dist/engine.js +119 -102
- package/dist/index.d.ts +42 -21
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +35 -14
- package/dist/math/index.d.ts +2 -0
- package/dist/math/index.d.ts.map +1 -0
- package/dist/math/index.js +1 -0
- package/dist/math/rect.d.ts +71 -0
- package/dist/math/rect.d.ts.map +1 -0
- package/dist/{core → math}/rect.js +8 -0
- package/dist/math/vector2.d.ts +78 -0
- package/dist/math/vector2.d.ts.map +1 -0
- package/dist/{core → math}/vector2.js +24 -0
- package/dist/prefab-scenes/index.d.ts +7 -0
- package/dist/prefab-scenes/index.d.ts.map +1 -0
- package/dist/prefab-scenes/index.js +6 -0
- package/dist/prefab-scenes/startScreen.d.ts +59 -0
- package/dist/prefab-scenes/startScreen.d.ts.map +1 -0
- package/dist/{scenes/startup.js → prefab-scenes/startScreen.js} +47 -7
- package/dist/scene.d.ts +103 -5
- package/dist/scene.d.ts.map +1 -1
- package/dist/scene.js +28 -1
- package/package.json +18 -2
- package/dist/core/canvas-config.d.ts +0 -22
- package/dist/core/canvas-config.d.ts.map +0 -1
- package/dist/core/canvas-config.js +0 -14
- package/dist/core/canvas-manager.d.ts +0 -25
- package/dist/core/canvas-manager.d.ts.map +0 -1
- package/dist/core/canvas-manager.js +0 -178
- package/dist/core/gamepad-buttons.d.ts +0 -23
- package/dist/core/gamepad-buttons.d.ts.map +0 -1
- package/dist/core/gamepad-buttons.js +0 -36
- package/dist/core/rect.d.ts +0 -26
- package/dist/core/rect.d.ts.map +0 -1
- package/dist/core/vector2.d.ts +0 -26
- package/dist/core/vector2.d.ts.map +0 -1
- package/dist/gamecontrollerdb.txt +0 -2221
- package/dist/scenes/startup.d.ts +0 -18
- package/dist/scenes/startup.d.ts.map +0 -1
package/dist/core/graphics.js
CHANGED
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @module graphics
|
|
3
|
+
* @description a reduced-state, Love2D-like wrapper around browser canvas
|
|
4
|
+
*
|
|
5
|
+
* # Graphics Module
|
|
6
|
+
*
|
|
7
|
+
* A wrapper around browser Canvas.
|
|
8
|
+
* In standard usage `like.gfx` gives a {@link BoundGraphics} object with a canvas already on it.
|
|
9
|
+
* So, you can for example call `like.gfx.rectangle('fill', 'green', [10, 10, 30, 30])`
|
|
10
|
+
*
|
|
11
|
+
* ## State Isolation
|
|
12
|
+
* Each drawing operation resets relevant canvas state before executing:
|
|
13
|
+
* - Stroke properties (`lineWidth`, `lineCap`, `lineJoin`, `miterLimit`) are always set to defaults first
|
|
14
|
+
* - No state leakage between drawing calls
|
|
15
|
+
*
|
|
16
|
+
* ## Predicable Parameter Ordering
|
|
17
|
+
* - No clunky argument overrides that could affect positionality.
|
|
18
|
+
* - **Required arguments** come first as positional parameters
|
|
19
|
+
* - **Optional arguments** are grouped in a trailing `props` object
|
|
20
|
+
* - **Mode** `'fill' | 'line'` is the first arg if relevent.
|
|
21
|
+
* - **Color** then {@link Color}, if relevant -- there is no `setColor`.
|
|
22
|
+
*
|
|
23
|
+
* ## Note: Coordinate System is unchanged from native Canvas.
|
|
24
|
+
* - Origin (0, 0) at top-left
|
|
25
|
+
* - X increases right
|
|
26
|
+
* - Y increases down
|
|
27
|
+
* - Angles in radians, 0 is right, positive is clockwise
|
|
28
|
+
*/
|
|
1
29
|
export class ImageHandle {
|
|
2
30
|
constructor(path) {
|
|
3
31
|
Object.defineProperty(this, "path", {
|
|
@@ -52,7 +80,7 @@ export class ImageHandle {
|
|
|
52
80
|
}
|
|
53
81
|
}
|
|
54
82
|
function parseColor(color) {
|
|
55
|
-
if (typeof color ===
|
|
83
|
+
if (typeof color === "string")
|
|
56
84
|
return color;
|
|
57
85
|
const [r, g, b, a = 1] = color;
|
|
58
86
|
return `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${a})`;
|
|
@@ -62,102 +90,275 @@ function applyColor(color) {
|
|
|
62
90
|
}
|
|
63
91
|
function setStrokeProps(ctx, props) {
|
|
64
92
|
ctx.lineWidth = props?.lineWidth ?? 1;
|
|
65
|
-
ctx.lineCap = props?.lineCap ??
|
|
66
|
-
ctx.lineJoin = props?.lineJoin ??
|
|
93
|
+
ctx.lineCap = props?.lineCap ?? "butt";
|
|
94
|
+
ctx.lineJoin = props?.lineJoin ?? "miter";
|
|
67
95
|
ctx.miterLimit = props?.miterLimit ?? 10;
|
|
68
96
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
97
|
+
/**
|
|
98
|
+
* A ready-made pure module for drawing to non-LIKE canvases.
|
|
99
|
+
*
|
|
100
|
+
* Acts as the core of the graphics system.
|
|
101
|
+
*
|
|
102
|
+
* import { pure as gfx } from "like/internal/graphics"
|
|
103
|
+
* gfx.clear(my2dContext, "red");
|
|
104
|
+
*/
|
|
105
|
+
export const pure = {
|
|
106
|
+
/**
|
|
107
|
+
* Clears the canvas with a solid color.
|
|
108
|
+
* @param ctx Canvas context.
|
|
109
|
+
* @param color Fill color.
|
|
110
|
+
*/
|
|
111
|
+
clear(ctx, color = [0, 0, 0, 1]) {
|
|
112
|
+
ctx.fillStyle = parseColor(color);
|
|
113
|
+
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
114
|
+
},
|
|
115
|
+
/**
|
|
116
|
+
* Draws a rectangle.
|
|
117
|
+
* @param ctx Canvas context.
|
|
118
|
+
* @param mode Fill or line.
|
|
119
|
+
* @param color Fill or stroke color.
|
|
120
|
+
* @param rect Rectangle [x, y, w, h].
|
|
121
|
+
* @param props Optional stroke properties.
|
|
122
|
+
*/
|
|
123
|
+
rectangle(ctx, mode, color, rect, props) {
|
|
124
|
+
const c = applyColor(color);
|
|
125
|
+
if (mode === "fill") {
|
|
126
|
+
ctx.fillStyle = c;
|
|
127
|
+
ctx.fillRect(...rect);
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
setStrokeProps(ctx, props);
|
|
131
|
+
ctx.strokeStyle = c;
|
|
132
|
+
ctx.strokeRect(...rect);
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
/**
|
|
136
|
+
* Draws a circle or ellipse.
|
|
137
|
+
* @param ctx Canvas context.
|
|
138
|
+
* @param mode Fill or line.
|
|
139
|
+
* @param color Fill or stroke color.
|
|
140
|
+
* @param position Center position.
|
|
141
|
+
* @param radii Radius (number) or [rx, ry] for ellipse.
|
|
142
|
+
* @param props Optional angle, arc, or stroke properties.
|
|
143
|
+
*/
|
|
144
|
+
circle(ctx, mode, color, position, radii, props) {
|
|
145
|
+
const [x, y] = position;
|
|
146
|
+
const c = applyColor(color);
|
|
147
|
+
const [rx, ry] = typeof radii === "number" ? [radii, radii] : radii;
|
|
148
|
+
const [startAngle, endAngle] = props?.arc ?? [0, Math.PI * 2];
|
|
149
|
+
const rotation = props?.angle ?? 0;
|
|
150
|
+
ctx.save();
|
|
151
|
+
ctx.translate(x, y);
|
|
152
|
+
ctx.scale(rx, ry);
|
|
153
|
+
ctx.rotate(rotation);
|
|
154
|
+
ctx.beginPath();
|
|
155
|
+
ctx.arc(0, 0, 1, startAngle, endAngle);
|
|
156
|
+
ctx.closePath();
|
|
157
|
+
ctx.restore();
|
|
158
|
+
if (mode === "fill") {
|
|
159
|
+
ctx.fillStyle = c;
|
|
160
|
+
ctx.fill();
|
|
161
|
+
}
|
|
162
|
+
else {
|
|
163
|
+
setStrokeProps(ctx, props);
|
|
164
|
+
ctx.strokeStyle = c;
|
|
165
|
+
ctx.stroke();
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
/**
|
|
169
|
+
* Draws connected line segments.
|
|
170
|
+
* @param ctx Canvas context.
|
|
171
|
+
* @param color Stroke color.
|
|
172
|
+
* @param points Array of [x, y] positions.
|
|
173
|
+
* @param props Optional stroke properties.
|
|
174
|
+
*/
|
|
175
|
+
line(ctx, color, points, props) {
|
|
176
|
+
if (points.length < 2)
|
|
177
|
+
return;
|
|
115
178
|
setStrokeProps(ctx, props);
|
|
116
|
-
ctx.
|
|
179
|
+
ctx.beginPath();
|
|
180
|
+
const [[x0, y0], ...rest] = points;
|
|
181
|
+
ctx.moveTo(x0, y0);
|
|
182
|
+
rest.forEach(([x, y]) => ctx.lineTo(x, y));
|
|
183
|
+
ctx.strokeStyle = applyColor(color);
|
|
117
184
|
ctx.stroke();
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
ctx
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
ctx.fillText(
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
185
|
+
},
|
|
186
|
+
/**
|
|
187
|
+
* Draws text at position.
|
|
188
|
+
* @param ctx Canvas context.
|
|
189
|
+
* @param color Fill color.
|
|
190
|
+
* @param text Text string.
|
|
191
|
+
* @param position Top-left position.
|
|
192
|
+
* @param props Optional font, text limit, or alignment.
|
|
193
|
+
*/
|
|
194
|
+
print(ctx, color, text, position, props) {
|
|
195
|
+
const [x, y] = position;
|
|
196
|
+
const { font = "16px sans-serif", limit, align = "left" } = props ?? {};
|
|
197
|
+
ctx.fillStyle = parseColor(color);
|
|
198
|
+
ctx.font = font;
|
|
199
|
+
if (limit !== undefined) {
|
|
200
|
+
const lines = wrapText(ctx, text, limit);
|
|
201
|
+
const lineHeight = getFontHeight(ctx);
|
|
202
|
+
lines.forEach((line, i) => {
|
|
203
|
+
const lineWidth = ctx.measureText(line).width;
|
|
204
|
+
const drawX = align === "center"
|
|
205
|
+
? x + (limit - lineWidth) / 2
|
|
206
|
+
: align === "right"
|
|
207
|
+
? x + limit - lineWidth
|
|
208
|
+
: x;
|
|
209
|
+
ctx.fillText(line, drawX, y + i * lineHeight);
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
else {
|
|
213
|
+
ctx.fillText(text, x, y);
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
/**
|
|
217
|
+
* Draws an image.
|
|
218
|
+
*
|
|
219
|
+
* @remarks named "draw" because it draws anything _drawable_
|
|
220
|
+
* in the long run.
|
|
221
|
+
*
|
|
222
|
+
* @param ctx Canvas context.
|
|
223
|
+
* @param handle Image handle from newImage.
|
|
224
|
+
* @param position Draw position.
|
|
225
|
+
* @param props Optional rotation, scale, origin, or quad.
|
|
226
|
+
*/
|
|
227
|
+
draw(ctx, handle, position, props) {
|
|
228
|
+
if (!handle.isReady())
|
|
229
|
+
return;
|
|
230
|
+
const element = handle.getElement();
|
|
231
|
+
if (!element)
|
|
232
|
+
return;
|
|
233
|
+
const [x, y] = position;
|
|
234
|
+
const { r = 0, scale = 1, origin = 0, quad } = props ?? {};
|
|
235
|
+
const [sx, sy] = typeof scale === "number" ? [scale, scale] : scale;
|
|
236
|
+
const [ox, oy] = typeof origin === "number" ? [origin, origin] : origin;
|
|
237
|
+
ctx.save();
|
|
238
|
+
ctx.translate(x, y);
|
|
239
|
+
ctx.rotate(r);
|
|
240
|
+
ctx.scale(sx, sy);
|
|
241
|
+
if (quad) {
|
|
242
|
+
const [qx, qy, qw, qh] = quad;
|
|
243
|
+
ctx.drawImage(element, qx, qy, qw, qh, -ox, -oy, qw, qh);
|
|
244
|
+
}
|
|
245
|
+
else {
|
|
246
|
+
ctx.drawImage(element, -ox, -oy);
|
|
247
|
+
}
|
|
248
|
+
ctx.restore();
|
|
249
|
+
},
|
|
250
|
+
/**
|
|
251
|
+
* Loads an image from a path.
|
|
252
|
+
* Unlike built-in loading, this pretends to be synchronous.
|
|
253
|
+
* @param ctx Canvas context.
|
|
254
|
+
* @param path Image file path.
|
|
255
|
+
* @returns ImageHandle for use with draw.
|
|
256
|
+
*/
|
|
257
|
+
newImage(_ctx, path) {
|
|
258
|
+
return new ImageHandle(path);
|
|
259
|
+
},
|
|
260
|
+
/**
|
|
261
|
+
* Sets the clipping region.
|
|
262
|
+
* @param ctx Canvas context.
|
|
263
|
+
* @param rect Clipping rectangle, or full canvas if omitted.
|
|
264
|
+
*/
|
|
265
|
+
clip(ctx, rect) {
|
|
266
|
+
ctx.beginPath();
|
|
267
|
+
if (rect) {
|
|
268
|
+
const [x, y, w, h] = rect;
|
|
269
|
+
ctx.rect(x, y, w, h);
|
|
270
|
+
}
|
|
271
|
+
else {
|
|
272
|
+
ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
273
|
+
}
|
|
274
|
+
ctx.clip();
|
|
275
|
+
},
|
|
276
|
+
/**
|
|
277
|
+
* Draws a polygon.
|
|
278
|
+
* @param ctx Canvas context.
|
|
279
|
+
* @param mode Fill or line.
|
|
280
|
+
* @param color Fill or stroke color.
|
|
281
|
+
* @param points Array of [x, y] vertices.
|
|
282
|
+
* @param props Optional stroke properties.
|
|
283
|
+
*/
|
|
284
|
+
polygon(ctx, mode, color, points, props) {
|
|
285
|
+
if (points.length < 3)
|
|
286
|
+
return;
|
|
287
|
+
const c = applyColor(color);
|
|
288
|
+
ctx.beginPath();
|
|
289
|
+
const [[x0, y0], ...rest] = points;
|
|
290
|
+
ctx.moveTo(x0, y0);
|
|
291
|
+
rest.forEach(([x, y]) => ctx.lineTo(x, y));
|
|
292
|
+
ctx.closePath();
|
|
293
|
+
if (mode === "fill") {
|
|
294
|
+
ctx.fillStyle = c;
|
|
295
|
+
ctx.fill();
|
|
296
|
+
}
|
|
297
|
+
else {
|
|
298
|
+
setStrokeProps(ctx, props);
|
|
299
|
+
ctx.strokeStyle = c;
|
|
300
|
+
ctx.stroke();
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
/**
|
|
304
|
+
* Draws individual pixels.
|
|
305
|
+
* @param ctx Canvas context.
|
|
306
|
+
* @param color Fill color.
|
|
307
|
+
* @param pts Array of [x, y] positions.
|
|
308
|
+
*/
|
|
309
|
+
points(ctx, color, pts) {
|
|
310
|
+
ctx.fillStyle = applyColor(color);
|
|
311
|
+
pts.forEach(([x, y]) => ctx.fillRect(x, y, 1, 1));
|
|
312
|
+
},
|
|
313
|
+
/**
|
|
314
|
+
* Saves canvas state.
|
|
315
|
+
* @param ctx Canvas context.
|
|
316
|
+
*/
|
|
317
|
+
push(ctx) {
|
|
318
|
+
ctx.save();
|
|
319
|
+
},
|
|
320
|
+
/**
|
|
321
|
+
* Restores canvas state.
|
|
322
|
+
* @param ctx Canvas context.
|
|
323
|
+
*/
|
|
324
|
+
pop(ctx) {
|
|
325
|
+
ctx.restore();
|
|
326
|
+
},
|
|
327
|
+
/**
|
|
328
|
+
* Applies a translation.
|
|
329
|
+
* @param ctx Canvas context.
|
|
330
|
+
* @param offset [x, y] offset.
|
|
331
|
+
*/
|
|
332
|
+
translate(ctx, offset) {
|
|
333
|
+
const [x, y] = offset;
|
|
334
|
+
ctx.translate(x, y);
|
|
335
|
+
},
|
|
336
|
+
/**
|
|
337
|
+
* Applies a rotation.
|
|
338
|
+
* @param ctx Canvas context.
|
|
339
|
+
* @param angle Rotation in radians.
|
|
340
|
+
*/
|
|
341
|
+
rotate(ctx, angle) {
|
|
342
|
+
ctx.rotate(angle);
|
|
343
|
+
},
|
|
344
|
+
/**
|
|
345
|
+
* Applies a scale.
|
|
346
|
+
* @param ctx Canvas context.
|
|
347
|
+
* @param factor Scale factor (number or [x, y]).
|
|
348
|
+
*/
|
|
349
|
+
scale(ctx, factor) {
|
|
350
|
+
const [sx, sy] = typeof factor === "number" ? [factor, factor] : factor;
|
|
351
|
+
ctx.scale(sx, sy);
|
|
352
|
+
},
|
|
353
|
+
};
|
|
153
354
|
function wrapText(ctx, text, maxWidth) {
|
|
154
|
-
const words = text.split(
|
|
355
|
+
const words = text.split(" ");
|
|
155
356
|
const [first, ...rest] = words;
|
|
156
357
|
const lines = [];
|
|
157
|
-
let current = first ??
|
|
158
|
-
rest.forEach(word => {
|
|
159
|
-
if (ctx.measureText(current +
|
|
160
|
-
current +=
|
|
358
|
+
let current = first ?? "";
|
|
359
|
+
rest.forEach((word) => {
|
|
360
|
+
if (ctx.measureText(current + " " + word).width < maxWidth) {
|
|
361
|
+
current += " " + word;
|
|
161
362
|
}
|
|
162
363
|
else {
|
|
163
364
|
lines.push(current);
|
|
@@ -171,115 +372,10 @@ function getFontHeight(ctx) {
|
|
|
171
372
|
const match = ctx.font.match(/(\d+)px/);
|
|
172
373
|
return match ? parseInt(match[1]) : 16;
|
|
173
374
|
}
|
|
174
|
-
export function
|
|
175
|
-
const ctx = s.currentCtx;
|
|
176
|
-
if (!handle.isReady())
|
|
177
|
-
return;
|
|
178
|
-
const element = handle.getElement();
|
|
179
|
-
if (!element)
|
|
180
|
-
return;
|
|
181
|
-
const [x, y] = position;
|
|
182
|
-
const { r = 0, scale = 1, origin = 0, quad } = props ?? {};
|
|
183
|
-
const [sx, sy] = typeof scale === 'number' ? [scale, scale] : scale;
|
|
184
|
-
const [ox, oy] = typeof origin === 'number' ? [origin, origin] : origin;
|
|
185
|
-
ctx.save();
|
|
186
|
-
ctx.translate(x, y);
|
|
187
|
-
ctx.rotate(r);
|
|
188
|
-
ctx.scale(sx, sy);
|
|
189
|
-
if (quad) {
|
|
190
|
-
const [qx, qy, qw, qh] = quad;
|
|
191
|
-
ctx.drawImage(element, qx, qy, qw, qh, -ox, -oy, qw, qh);
|
|
192
|
-
}
|
|
193
|
-
else {
|
|
194
|
-
ctx.drawImage(element, -ox, -oy);
|
|
195
|
-
}
|
|
196
|
-
ctx.restore();
|
|
197
|
-
}
|
|
198
|
-
export function getCanvasSize(s) {
|
|
199
|
-
return [s.currentCtx.canvas.width, s.currentCtx.canvas.height];
|
|
200
|
-
}
|
|
201
|
-
export function newImage(_s, path) {
|
|
202
|
-
return new ImageHandle(path);
|
|
203
|
-
}
|
|
204
|
-
export function newCanvas(s, size) {
|
|
205
|
-
const [w, h] = size;
|
|
206
|
-
const element = document.createElement('canvas');
|
|
207
|
-
element.width = w;
|
|
208
|
-
element.height = h;
|
|
209
|
-
const ctx = element.getContext('2d');
|
|
210
|
-
if (!ctx)
|
|
211
|
-
throw new Error('Failed to create canvas context');
|
|
212
|
-
const canvas = { size, element, ctx };
|
|
213
|
-
s.canvases.set(canvas, true);
|
|
214
|
-
return canvas;
|
|
215
|
-
}
|
|
216
|
-
export function setCanvas(s, canvas) {
|
|
217
|
-
s.currentCtx = canvas?.ctx ?? s.screenCtx;
|
|
218
|
-
}
|
|
219
|
-
export function clip(s, rect) {
|
|
220
|
-
const ctx = s.currentCtx;
|
|
221
|
-
ctx.beginPath();
|
|
222
|
-
if (rect) {
|
|
223
|
-
const [x, y, w, h] = rect;
|
|
224
|
-
ctx.rect(x, y, w, h);
|
|
225
|
-
}
|
|
226
|
-
else {
|
|
227
|
-
ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
228
|
-
}
|
|
229
|
-
ctx.clip();
|
|
230
|
-
}
|
|
231
|
-
export function polygon(s, mode, color, points, props) {
|
|
232
|
-
const ctx = s.currentCtx;
|
|
233
|
-
if (points.length < 3)
|
|
234
|
-
return;
|
|
235
|
-
const c = applyColor(color);
|
|
236
|
-
ctx.beginPath();
|
|
237
|
-
const [[x0, y0], ...rest] = points;
|
|
238
|
-
ctx.moveTo(x0, y0);
|
|
239
|
-
rest.forEach(([x, y]) => ctx.lineTo(x, y));
|
|
240
|
-
ctx.closePath();
|
|
241
|
-
if (mode === 'fill') {
|
|
242
|
-
ctx.fillStyle = c;
|
|
243
|
-
ctx.fill();
|
|
244
|
-
}
|
|
245
|
-
else {
|
|
246
|
-
setStrokeProps(ctx, props);
|
|
247
|
-
ctx.strokeStyle = c;
|
|
248
|
-
ctx.stroke();
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
export function points(s, color, pts) {
|
|
252
|
-
const ctx = s.currentCtx;
|
|
253
|
-
ctx.fillStyle = applyColor(color);
|
|
254
|
-
pts.forEach(([x, y]) => ctx.fillRect(x, y, 1, 1));
|
|
255
|
-
}
|
|
256
|
-
export function push(s) {
|
|
257
|
-
s.currentCtx.save();
|
|
258
|
-
}
|
|
259
|
-
export function pop(s) {
|
|
260
|
-
s.currentCtx.restore();
|
|
261
|
-
}
|
|
262
|
-
export function translate(s, offset) {
|
|
263
|
-
const [x, y] = offset;
|
|
264
|
-
s.currentCtx.translate(x, y);
|
|
265
|
-
}
|
|
266
|
-
export function rotate(s, angle) {
|
|
267
|
-
s.currentCtx.rotate(angle);
|
|
268
|
-
}
|
|
269
|
-
export function scale(s, factor) {
|
|
270
|
-
const [sx, sy] = typeof factor === 'number' ? [factor, factor] : factor;
|
|
271
|
-
s.currentCtx.scale(sx, sy);
|
|
272
|
-
}
|
|
273
|
-
const graphicsFns = {
|
|
274
|
-
clear, rectangle, circle, line, print,
|
|
275
|
-
draw: drawImage, getCanvasSize, newCanvas, setCanvas,
|
|
276
|
-
clip, polygon, points, newImage,
|
|
277
|
-
push, pop, translate, rotate, scale,
|
|
278
|
-
};
|
|
279
|
-
export function bindGraphics(s) {
|
|
375
|
+
export function bindGraphics(ctx) {
|
|
280
376
|
const bound = {};
|
|
281
|
-
for (const [name, fn] of Object.entries(
|
|
282
|
-
bound[name] = (...args) => fn(
|
|
377
|
+
for (const [name, fn] of Object.entries(pure)) {
|
|
378
|
+
bound[name] = (...args) => fn(ctx, ...args);
|
|
283
379
|
}
|
|
284
380
|
return bound;
|
|
285
381
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-state.d.ts","sourceRoot":"","sources":["../../src/core/input-state.ts"],"names":[],"mappings":"AAAA,qBAAa,iBAAiB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"input-state.d.ts","sourceRoot":"","sources":["../../src/core/input-state.ts"],"names":[],"mappings":"AAAA,qBAAa,iBAAiB,CAAC,CAAC;IACvB,SAAS,SAAgB;IACzB,SAAS,SAAgB;IAEhC,MAAM,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG;QAAE,WAAW,EAAE,CAAC,EAAE,CAAC;QAAC,YAAY,EAAE,CAAC,EAAE,CAAA;KAAE;IAuBpE,MAAM,CAAC,GAAG,EAAE,CAAC,GAAG,OAAO;IAIvB,WAAW,CAAC,GAAG,EAAE,CAAC,GAAG,OAAO;IAI5B,YAAY,CAAC,GAAG,EAAE,CAAC,GAAG,OAAO;IAI7B,eAAe,IAAI,GAAG,CAAC,CAAC,CAAC;IAIzB,KAAK,IAAI,IAAI;CAId"}
|
package/dist/core/input.d.ts
CHANGED
|
@@ -1,28 +1,35 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import type { KeyboardInternal } from './keyboard';
|
|
2
|
+
import type { MouseInternal } from './mouse';
|
|
3
|
+
import { GamepadTarget, GamepadInternal } from './gamepad';
|
|
4
|
+
import { MouseButton } from './events';
|
|
5
|
+
export type InputType = InputBinding['type'];
|
|
6
|
+
export type InputBinding = {
|
|
7
|
+
type: 'keyboard';
|
|
8
|
+
scancode: string;
|
|
9
|
+
} | {
|
|
10
|
+
type: 'mouse';
|
|
11
|
+
button: MouseButton;
|
|
12
|
+
} | {
|
|
13
|
+
type: 'gamepad';
|
|
14
|
+
gamepad: GamepadTarget;
|
|
15
|
+
button: number;
|
|
16
|
+
};
|
|
17
|
+
export declare class InputInternal {
|
|
10
18
|
private actionMap;
|
|
11
19
|
private actionStateTracker;
|
|
12
20
|
private keyboard;
|
|
13
21
|
private mouse;
|
|
14
22
|
private gamepad;
|
|
15
23
|
constructor(deps: {
|
|
16
|
-
keyboard:
|
|
17
|
-
mouse:
|
|
18
|
-
gamepad:
|
|
24
|
+
keyboard: KeyboardInternal;
|
|
25
|
+
mouse: MouseInternal;
|
|
26
|
+
gamepad: GamepadInternal;
|
|
19
27
|
});
|
|
20
|
-
|
|
21
|
-
unmap(action: string): void;
|
|
28
|
+
setAction(action: string, inputs?: string[]): void;
|
|
22
29
|
isDown(action: string): boolean;
|
|
23
30
|
justPressed(action: string): boolean;
|
|
24
31
|
justReleased(action: string): boolean;
|
|
25
|
-
|
|
32
|
+
_update(): {
|
|
26
33
|
pressed: string[];
|
|
27
34
|
released: string[];
|
|
28
35
|
};
|
package/dist/core/input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/core/input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/core/input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG3D,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;AAC7C,MAAM,MAAM,YAAY,GACpB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GACtC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,GACtC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,aAAa,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,qBAAa,aAAa;IACxB,OAAO,CAAC,SAAS,CAAqC;IACtD,OAAO,CAAC,kBAAkB,CAAmC;IAC7D,OAAO,CAAC,QAAQ,CAAmB;IACnC,OAAO,CAAC,KAAK,CAAgB;IAC7B,OAAO,CAAC,OAAO,CAAkB;gBAErB,IAAI,EAAE;QAAE,QAAQ,EAAE,gBAAgB,CAAC;QAAC,KAAK,EAAE,aAAa,CAAC;QAAC,OAAO,EAAE,eAAe,CAAA;KAAE;IAMhG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAE,MAAM,EAAO,GAAG,IAAI;IAWtD,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAO/B,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIpC,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIrC,OAAO,IAAI;QAAE,OAAO,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;KAAE;IAgBpD,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,eAAe;IAcvB,KAAK,IAAI,IAAI;CAId"}
|