@guinetik/gcanvas 1.0.1 → 1.0.2
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/demos/coordinates.html +698 -0
- package/demos/cube3d.html +23 -0
- package/demos/demos.css +17 -3
- package/demos/dino.html +42 -0
- package/demos/gameobjects.html +626 -0
- package/demos/index.html +17 -7
- package/demos/js/coordinates.js +840 -0
- package/demos/js/cube3d.js +789 -0
- package/demos/js/dino.js +1420 -0
- package/demos/js/gameobjects.js +176 -0
- package/demos/js/plane3d.js +256 -0
- package/demos/js/platformer.js +1579 -0
- package/demos/js/sphere3d.js +229 -0
- package/demos/js/sprite.js +473 -0
- package/demos/js/tde/accretiondisk.js +3 -3
- package/demos/js/tde/tidalstream.js +2 -2
- package/demos/plane3d.html +24 -0
- package/demos/platformer.html +43 -0
- package/demos/sphere3d.html +24 -0
- package/demos/sprite.html +18 -0
- package/docs/concepts/coordinate-system.md +384 -0
- package/docs/concepts/shapes-vs-gameobjects.md +187 -0
- package/docs/fluid-dynamics.md +99 -97
- package/package.json +1 -1
- package/src/game/game.js +11 -5
- package/src/game/objects/index.js +3 -0
- package/src/game/objects/platformer-scene.js +411 -0
- package/src/game/objects/scene.js +14 -0
- package/src/game/objects/sprite.js +529 -0
- package/src/game/pipeline.js +20 -16
- package/src/game/ui/theme.js +123 -121
- package/src/io/input.js +75 -45
- package/src/io/mouse.js +44 -19
- package/src/io/touch.js +35 -12
- package/src/shapes/cube3d.js +599 -0
- package/src/shapes/index.js +2 -0
- package/src/shapes/plane3d.js +687 -0
- package/src/shapes/sphere3d.js +75 -6
- package/src/util/camera2d.js +315 -0
- package/src/util/index.js +1 -0
- package/src/webgl/shaders/plane-shaders.js +332 -0
- package/src/webgl/shaders/sphere-shaders.js +4 -2
|
@@ -0,0 +1,626 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Shapes vs GameObjects - GCanvas Guide</title>
|
|
8
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.css">
|
|
9
|
+
<style>
|
|
10
|
+
/* Terminal-style Prism overrides */
|
|
11
|
+
code[class*="language-"],
|
|
12
|
+
pre[class*="language-"] {
|
|
13
|
+
color: #ccc;
|
|
14
|
+
background: #0a0a0a;
|
|
15
|
+
text-shadow: none;
|
|
16
|
+
}
|
|
17
|
+
pre[class*="language-"] {
|
|
18
|
+
background: #0a0a0a;
|
|
19
|
+
border: 1px solid #1a1a1a;
|
|
20
|
+
}
|
|
21
|
+
.token.comment,
|
|
22
|
+
.token.prolog,
|
|
23
|
+
.token.doctype,
|
|
24
|
+
.token.cdata { color: #555; }
|
|
25
|
+
.token.punctuation { color: #888; }
|
|
26
|
+
.token.property,
|
|
27
|
+
.token.tag,
|
|
28
|
+
.token.constant,
|
|
29
|
+
.token.symbol,
|
|
30
|
+
.token.deleted { color: #0f0; }
|
|
31
|
+
.token.boolean,
|
|
32
|
+
.token.number { color: #0ff; }
|
|
33
|
+
.token.selector,
|
|
34
|
+
.token.attr-name,
|
|
35
|
+
.token.string,
|
|
36
|
+
.token.char,
|
|
37
|
+
.token.builtin,
|
|
38
|
+
.token.inserted { color: #7fff7f; }
|
|
39
|
+
.token.operator,
|
|
40
|
+
.token.entity,
|
|
41
|
+
.token.url,
|
|
42
|
+
.language-css .token.string,
|
|
43
|
+
.style .token.string,
|
|
44
|
+
.token.variable { color: #ccc; }
|
|
45
|
+
.token.atrule,
|
|
46
|
+
.token.attr-value,
|
|
47
|
+
.token.function,
|
|
48
|
+
.token.class-name { color: #0f0; }
|
|
49
|
+
.token.keyword { color: #0f0; font-weight: bold; }
|
|
50
|
+
.token.regex,
|
|
51
|
+
.token.important { color: #fd8; }
|
|
52
|
+
</style>
|
|
53
|
+
<style>
|
|
54
|
+
*, *::before, *::after {
|
|
55
|
+
box-sizing: border-box;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
html, body {
|
|
59
|
+
overflow-x: hidden;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
body {
|
|
63
|
+
font-family: 'Courier New', 'Consolas', monospace;
|
|
64
|
+
line-height: 1.6;
|
|
65
|
+
color: #aaa;
|
|
66
|
+
max-width: 1000px;
|
|
67
|
+
margin: 0 auto;
|
|
68
|
+
padding: 20px;
|
|
69
|
+
background-color: #000;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
header {
|
|
73
|
+
margin-bottom: 40px;
|
|
74
|
+
padding: 20px;
|
|
75
|
+
border-bottom: 2px solid #0f0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
h1 {
|
|
79
|
+
font-size: 2.5em;
|
|
80
|
+
margin-bottom: 10px;
|
|
81
|
+
color: #0f0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
h2 {
|
|
85
|
+
font-size: 1.8em;
|
|
86
|
+
margin-top: 40px;
|
|
87
|
+
margin-bottom: 20px;
|
|
88
|
+
padding-bottom: 10px;
|
|
89
|
+
border-bottom: 2px solid #0f0;
|
|
90
|
+
color: #0f0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
h3 {
|
|
94
|
+
font-size: 1.4em;
|
|
95
|
+
margin-top: 30px;
|
|
96
|
+
color: #0f0;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
p {
|
|
100
|
+
margin-bottom: 15px;
|
|
101
|
+
color: #aaa;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
pre {
|
|
105
|
+
background-color: #0a0a0a;
|
|
106
|
+
color: #ccc;
|
|
107
|
+
padding: 15px;
|
|
108
|
+
border: 1px solid #1a1a1a;
|
|
109
|
+
overflow-x: auto;
|
|
110
|
+
margin: 15px 0;
|
|
111
|
+
max-width: 100%;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
code {
|
|
115
|
+
font-family: 'Courier New', monospace;
|
|
116
|
+
background-color: #111;
|
|
117
|
+
color: #0f0;
|
|
118
|
+
padding: 2px 6px;
|
|
119
|
+
border: none;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
pre code {
|
|
123
|
+
background-color: transparent;
|
|
124
|
+
color: #ccc;
|
|
125
|
+
padding: 0;
|
|
126
|
+
border: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.comparison {
|
|
130
|
+
display: grid;
|
|
131
|
+
grid-template-columns: 1fr 1fr;
|
|
132
|
+
gap: 20px;
|
|
133
|
+
margin: 30px 0;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@media (max-width: 768px) {
|
|
137
|
+
.comparison {
|
|
138
|
+
grid-template-columns: 1fr;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.comparison-box {
|
|
143
|
+
background-color: #0a0a0a;
|
|
144
|
+
border: 1px solid #0f0;
|
|
145
|
+
padding: 20px;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.comparison-box h4 {
|
|
149
|
+
color: #0f0;
|
|
150
|
+
margin-top: 0;
|
|
151
|
+
margin-bottom: 15px;
|
|
152
|
+
font-size: 1.2em;
|
|
153
|
+
border-bottom: 1px solid #1a1a1a;
|
|
154
|
+
padding-bottom: 10px;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.comparison-box ul {
|
|
158
|
+
list-style: none;
|
|
159
|
+
padding: 0;
|
|
160
|
+
margin: 0;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.comparison-box li {
|
|
164
|
+
padding: 5px 0;
|
|
165
|
+
padding-left: 20px;
|
|
166
|
+
position: relative;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.comparison-box li:before {
|
|
170
|
+
content: ">";
|
|
171
|
+
color: #0f0;
|
|
172
|
+
position: absolute;
|
|
173
|
+
left: 0;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.pipeline-diagram {
|
|
177
|
+
display: flex;
|
|
178
|
+
flex-direction: column;
|
|
179
|
+
gap: 10px;
|
|
180
|
+
margin: 30px 0;
|
|
181
|
+
padding: 20px;
|
|
182
|
+
background-color: #0a0a0a;
|
|
183
|
+
border: 1px solid #1a1a1a;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.pipeline-row {
|
|
187
|
+
display: flex;
|
|
188
|
+
align-items: center;
|
|
189
|
+
gap: 10px;
|
|
190
|
+
flex-wrap: wrap;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.pipeline-box {
|
|
194
|
+
background-color: #000;
|
|
195
|
+
border: 1px solid #0f0;
|
|
196
|
+
color: #0f0;
|
|
197
|
+
padding: 8px 16px;
|
|
198
|
+
font-size: 0.9em;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.pipeline-arrow {
|
|
202
|
+
color: #0f0;
|
|
203
|
+
font-size: 1.2em;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.pipeline-label {
|
|
207
|
+
color: #666;
|
|
208
|
+
font-size: 0.85em;
|
|
209
|
+
min-width: 120px;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.note {
|
|
213
|
+
background-color: #0a1a0a;
|
|
214
|
+
padding: 15px;
|
|
215
|
+
border-left: 3px solid #0f0;
|
|
216
|
+
margin: 20px 0;
|
|
217
|
+
color: #7fff7f;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.warning {
|
|
221
|
+
background-color: #1a1a0a;
|
|
222
|
+
padding: 15px;
|
|
223
|
+
border-left: 3px solid #ff0;
|
|
224
|
+
margin: 20px 0;
|
|
225
|
+
color: #ffa;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
table {
|
|
229
|
+
width: 100%;
|
|
230
|
+
border-collapse: collapse;
|
|
231
|
+
margin: 20px 0;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
th, td {
|
|
235
|
+
border: 1px solid #1a1a1a;
|
|
236
|
+
padding: 12px;
|
|
237
|
+
text-align: left;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
th {
|
|
241
|
+
background-color: #0a0a0a;
|
|
242
|
+
color: #0f0;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
td {
|
|
246
|
+
background-color: #050505;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
a {
|
|
250
|
+
color: #0f0;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.back-link {
|
|
254
|
+
display: inline-block;
|
|
255
|
+
margin-bottom: 20px;
|
|
256
|
+
color: #0f0;
|
|
257
|
+
text-decoration: none;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.back-link:hover {
|
|
261
|
+
text-decoration: underline;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.canvas-demo {
|
|
265
|
+
width: 100%;
|
|
266
|
+
height: 200px;
|
|
267
|
+
background-color: #050505;
|
|
268
|
+
border: 1px solid #1a1a1a;
|
|
269
|
+
position: relative;
|
|
270
|
+
overflow: hidden;
|
|
271
|
+
margin: 15px 0;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.canvas-demo canvas {
|
|
275
|
+
display: block;
|
|
276
|
+
width: 100%;
|
|
277
|
+
height: 100%;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.canvas-label {
|
|
281
|
+
position: absolute;
|
|
282
|
+
bottom: 10px;
|
|
283
|
+
right: 10px;
|
|
284
|
+
background-color: rgba(0, 0, 0, 0.8);
|
|
285
|
+
color: #0f0;
|
|
286
|
+
padding: 4px 8px;
|
|
287
|
+
font-size: 12px;
|
|
288
|
+
}
|
|
289
|
+
</style>
|
|
290
|
+
</head>
|
|
291
|
+
|
|
292
|
+
<body>
|
|
293
|
+
<a href="pipeline.html" class="back-link">< Back to Rendering Pipeline</a>
|
|
294
|
+
|
|
295
|
+
<header>
|
|
296
|
+
<h1>Shapes vs GameObjects</h1>
|
|
297
|
+
<p>Understanding when to use each abstraction in GCanvas</p>
|
|
298
|
+
</header>
|
|
299
|
+
|
|
300
|
+
<section>
|
|
301
|
+
<h2>Two Sides of GCanvas</h2>
|
|
302
|
+
<p>
|
|
303
|
+
GCanvas serves two distinct use cases with different abstractions. Understanding when to use each is key to working effectively with the library.
|
|
304
|
+
</p>
|
|
305
|
+
|
|
306
|
+
<div class="comparison">
|
|
307
|
+
<div class="comparison-box">
|
|
308
|
+
<h4>Shapes (Drawing)</h4>
|
|
309
|
+
<ul>
|
|
310
|
+
<li>Direct canvas rendering</li>
|
|
311
|
+
<li>No game loop required</li>
|
|
312
|
+
<li>Call <code>render()</code> manually</li>
|
|
313
|
+
<li>Stateless between frames</li>
|
|
314
|
+
<li>Great for: generative art, static visuals, creative coding</li>
|
|
315
|
+
</ul>
|
|
316
|
+
</div>
|
|
317
|
+
<div class="comparison-box">
|
|
318
|
+
<h4>GameObjects (Pipeline)</h4>
|
|
319
|
+
<ul>
|
|
320
|
+
<li>Managed by Game pipeline</li>
|
|
321
|
+
<li>Automatic update/render cycle</li>
|
|
322
|
+
<li>Has <code>update(dt)</code> lifecycle</li>
|
|
323
|
+
<li>Maintains state between frames</li>
|
|
324
|
+
<li>Great for: games, animations, interactive apps</li>
|
|
325
|
+
</ul>
|
|
326
|
+
</div>
|
|
327
|
+
</div>
|
|
328
|
+
</section>
|
|
329
|
+
|
|
330
|
+
<section>
|
|
331
|
+
<h2>The Two Hierarchies</h2>
|
|
332
|
+
|
|
333
|
+
<div class="pipeline-diagram">
|
|
334
|
+
<div class="pipeline-row">
|
|
335
|
+
<span class="pipeline-label">Shapes:</span>
|
|
336
|
+
<div class="pipeline-box">Euclidian</div>
|
|
337
|
+
<span class="pipeline-arrow">→</span>
|
|
338
|
+
<div class="pipeline-box">Geometry2d</div>
|
|
339
|
+
<span class="pipeline-arrow">→</span>
|
|
340
|
+
<div class="pipeline-box">Renderable</div>
|
|
341
|
+
<span class="pipeline-arrow">→</span>
|
|
342
|
+
<div class="pipeline-box">Transformable</div>
|
|
343
|
+
<span class="pipeline-arrow">→</span>
|
|
344
|
+
<div class="pipeline-box">Shape</div>
|
|
345
|
+
</div>
|
|
346
|
+
<div class="pipeline-row">
|
|
347
|
+
<span class="pipeline-label">GameObjects:</span>
|
|
348
|
+
<div class="pipeline-box">GameObject</div>
|
|
349
|
+
<span class="pipeline-arrow">→</span>
|
|
350
|
+
<div class="pipeline-box">Scene</div>
|
|
351
|
+
<span class="pipeline-arrow">/</span>
|
|
352
|
+
<div class="pipeline-box">Sprite</div>
|
|
353
|
+
<span class="pipeline-arrow">/</span>
|
|
354
|
+
<div class="pipeline-box">Text</div>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="pipeline-row">
|
|
357
|
+
<span class="pipeline-label">Containers:</span>
|
|
358
|
+
<div class="pipeline-box">Group</div>
|
|
359
|
+
<span class="pipeline-arrow">→</span>
|
|
360
|
+
<span style="color: #666;">holds Shapes</span>
|
|
361
|
+
</div>
|
|
362
|
+
<div class="pipeline-row">
|
|
363
|
+
<span class="pipeline-label"></span>
|
|
364
|
+
<div class="pipeline-box">Scene</div>
|
|
365
|
+
<span class="pipeline-arrow">→</span>
|
|
366
|
+
<span style="color: #666;">holds GameObjects</span>
|
|
367
|
+
</div>
|
|
368
|
+
</div>
|
|
369
|
+
</section>
|
|
370
|
+
|
|
371
|
+
<section>
|
|
372
|
+
<h2>When to Use What</h2>
|
|
373
|
+
|
|
374
|
+
<table>
|
|
375
|
+
<thead>
|
|
376
|
+
<tr>
|
|
377
|
+
<th>Use Case</th>
|
|
378
|
+
<th>Use This</th>
|
|
379
|
+
<th>Why</th>
|
|
380
|
+
</tr>
|
|
381
|
+
</thead>
|
|
382
|
+
<tbody>
|
|
383
|
+
<tr>
|
|
384
|
+
<td>Static visualization</td>
|
|
385
|
+
<td><code>Shape</code> + <code>render()</code></td>
|
|
386
|
+
<td>No update loop needed</td>
|
|
387
|
+
</tr>
|
|
388
|
+
<tr>
|
|
389
|
+
<td>Generative art</td>
|
|
390
|
+
<td><code>Shape</code>, <code>Group</code></td>
|
|
391
|
+
<td>Direct control, no overhead</td>
|
|
392
|
+
</tr>
|
|
393
|
+
<tr>
|
|
394
|
+
<td>Game character</td>
|
|
395
|
+
<td><code>Sprite</code> (GameObject)</td>
|
|
396
|
+
<td>Needs update cycle for animation</td>
|
|
397
|
+
</tr>
|
|
398
|
+
<tr>
|
|
399
|
+
<td>UI elements</td>
|
|
400
|
+
<td><code>Text</code>, <code>Scene</code></td>
|
|
401
|
+
<td>Pipeline handles positioning</td>
|
|
402
|
+
</tr>
|
|
403
|
+
<tr>
|
|
404
|
+
<td>Complex scene</td>
|
|
405
|
+
<td><code>Scene</code> with children</td>
|
|
406
|
+
<td>Hierarchical transforms, lifecycle</td>
|
|
407
|
+
</tr>
|
|
408
|
+
<tr>
|
|
409
|
+
<td>Composite shape</td>
|
|
410
|
+
<td><code>Group</code></td>
|
|
411
|
+
<td>Transform multiple shapes together</td>
|
|
412
|
+
</tr>
|
|
413
|
+
</tbody>
|
|
414
|
+
</table>
|
|
415
|
+
</section>
|
|
416
|
+
|
|
417
|
+
<section>
|
|
418
|
+
<h2>Example: Shapes Only (No Game Loop)</h2>
|
|
419
|
+
<p>
|
|
420
|
+
You can use GCanvas purely for drawing without any game infrastructure:
|
|
421
|
+
</p>
|
|
422
|
+
|
|
423
|
+
<pre><code class="language-javascript">import { Circle, Rectangle, Group, Painter } from "gcanvas";
|
|
424
|
+
|
|
425
|
+
// Get canvas context
|
|
426
|
+
const canvas = document.getElementById("canvas");
|
|
427
|
+
const ctx = canvas.getContext("2d");
|
|
428
|
+
Painter.ctx = ctx;
|
|
429
|
+
|
|
430
|
+
// Create shapes
|
|
431
|
+
const circle = new Circle(50, { x: 100, y: 100, color: "#0f0" });
|
|
432
|
+
const rect = new Rectangle({ x: 200, y: 100, width: 80, height: 60, color: "#0ff" });
|
|
433
|
+
|
|
434
|
+
// Render directly - no game loop needed
|
|
435
|
+
circle.render();
|
|
436
|
+
rect.render();
|
|
437
|
+
|
|
438
|
+
// Group multiple shapes
|
|
439
|
+
const group = new Group({ x: 300, y: 100, rotation: Math.PI / 4 });
|
|
440
|
+
group.add(new Circle(20, { color: "#f0f" }));
|
|
441
|
+
group.add(new Rectangle({ y: 30, width: 40, height: 20, color: "#ff0" }));
|
|
442
|
+
group.render();</code></pre>
|
|
443
|
+
|
|
444
|
+
<div class="canvas-demo">
|
|
445
|
+
<canvas id="shapes-canvas"></canvas>
|
|
446
|
+
<div class="canvas-label">Shapes rendered directly</div>
|
|
447
|
+
</div>
|
|
448
|
+
|
|
449
|
+
<div class="note">
|
|
450
|
+
This is perfect for one-off drawings, generative art, or when you want full control over the render loop.
|
|
451
|
+
</div>
|
|
452
|
+
</section>
|
|
453
|
+
|
|
454
|
+
<section>
|
|
455
|
+
<h2>Example: GameObjects with Pipeline</h2>
|
|
456
|
+
<p>
|
|
457
|
+
When you need animation, input handling, and managed lifecycles:
|
|
458
|
+
</p>
|
|
459
|
+
|
|
460
|
+
<pre><code class="language-javascript">import { Game, Scene, Sprite, Text, Circle, Keys } from "gcanvas";
|
|
461
|
+
|
|
462
|
+
class MyGame extends Game {
|
|
463
|
+
init() {
|
|
464
|
+
super.init();
|
|
465
|
+
|
|
466
|
+
// Create a scene (GameObject container)
|
|
467
|
+
this.scene = new Scene(this, { anchor: "center" });
|
|
468
|
+
|
|
469
|
+
// Create a sprite with animation (GameObject)
|
|
470
|
+
this.player = new Sprite(this, { x: 0, y: 0, frameRate: 10 });
|
|
471
|
+
this.player.addFrame(new Circle(20, { color: "#0f0" }));
|
|
472
|
+
this.player.addFrame(new Circle(25, { color: "#0ff" }));
|
|
473
|
+
this.player.play();
|
|
474
|
+
|
|
475
|
+
// Add to scene
|
|
476
|
+
this.scene.add(this.player);
|
|
477
|
+
|
|
478
|
+
// Add scene to pipeline - now it's managed
|
|
479
|
+
this.pipeline.add(this.scene);
|
|
480
|
+
|
|
481
|
+
// Input handling
|
|
482
|
+
this.events.on(Keys.SPACE, () => this.player.pause());
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
update(dt) {
|
|
486
|
+
super.update(dt);
|
|
487
|
+
// Player sprite automatically updates via pipeline
|
|
488
|
+
}
|
|
489
|
+
}</code></pre>
|
|
490
|
+
|
|
491
|
+
<div class="canvas-demo">
|
|
492
|
+
<canvas id="gameobjects-canvas"></canvas>
|
|
493
|
+
<div class="canvas-label">Sprite animating via pipeline</div>
|
|
494
|
+
</div>
|
|
495
|
+
|
|
496
|
+
<div class="note">
|
|
497
|
+
GameObjects get their <code>update(dt)</code> called automatically by the pipeline each frame.
|
|
498
|
+
</div>
|
|
499
|
+
</section>
|
|
500
|
+
|
|
501
|
+
<section>
|
|
502
|
+
<h2>Bridging: Shape to GameObject</h2>
|
|
503
|
+
<p>
|
|
504
|
+
Sometimes you have a Shape (or Group of shapes) that you want to add to the pipeline. Use <code>ShapeGOFactory</code>:
|
|
505
|
+
</p>
|
|
506
|
+
|
|
507
|
+
<pre><code class="language-javascript">import { Game, Group, Circle, Rectangle, ShapeGOFactory } from "gcanvas";
|
|
508
|
+
|
|
509
|
+
class MyGame extends Game {
|
|
510
|
+
init() {
|
|
511
|
+
super.init();
|
|
512
|
+
|
|
513
|
+
// Create a Group of shapes
|
|
514
|
+
const avatar = new Group();
|
|
515
|
+
avatar.add(new Circle(30, { color: "#0f0" })); // head
|
|
516
|
+
avatar.add(new Rectangle({ y: 50, width: 40, height: 60, color: "#0f0" })); // body
|
|
517
|
+
|
|
518
|
+
// Wrap it as a GameObject so it can join the pipeline
|
|
519
|
+
const avatarGO = ShapeGOFactory.create(this, avatar, {
|
|
520
|
+
x: 100,
|
|
521
|
+
y: 100,
|
|
522
|
+
interactive: true // enables click/hover events
|
|
523
|
+
});
|
|
524
|
+
|
|
525
|
+
// Now it's a proper GameObject
|
|
526
|
+
this.pipeline.add(avatarGO);
|
|
527
|
+
}
|
|
528
|
+
}</code></pre>
|
|
529
|
+
|
|
530
|
+
<div class="canvas-demo">
|
|
531
|
+
<canvas id="bridging-canvas"></canvas>
|
|
532
|
+
<div class="canvas-label">Shape Group wrapped as GameObject</div>
|
|
533
|
+
</div>
|
|
534
|
+
|
|
535
|
+
<div class="warning">
|
|
536
|
+
<strong>Important:</strong> Never put GameObjects inside Groups. Group is a Shape container - it won't call <code>update()</code> on its children. Always use Scene for GameObjects.
|
|
537
|
+
</div>
|
|
538
|
+
</section>
|
|
539
|
+
|
|
540
|
+
<section>
|
|
541
|
+
<h2>Quick Reference</h2>
|
|
542
|
+
|
|
543
|
+
<table>
|
|
544
|
+
<thead>
|
|
545
|
+
<tr>
|
|
546
|
+
<th>Class</th>
|
|
547
|
+
<th>Type</th>
|
|
548
|
+
<th>Container</th>
|
|
549
|
+
<th>Has update()?</th>
|
|
550
|
+
</tr>
|
|
551
|
+
</thead>
|
|
552
|
+
<tbody>
|
|
553
|
+
<tr>
|
|
554
|
+
<td><code>Circle</code>, <code>Rectangle</code>, etc.</td>
|
|
555
|
+
<td>Shape</td>
|
|
556
|
+
<td>Group</td>
|
|
557
|
+
<td>No</td>
|
|
558
|
+
</tr>
|
|
559
|
+
<tr>
|
|
560
|
+
<td><code>Group</code></td>
|
|
561
|
+
<td>Shape container</td>
|
|
562
|
+
<td>Group</td>
|
|
563
|
+
<td>No</td>
|
|
564
|
+
</tr>
|
|
565
|
+
<tr>
|
|
566
|
+
<td><code>TextShape</code></td>
|
|
567
|
+
<td>Shape</td>
|
|
568
|
+
<td>Group</td>
|
|
569
|
+
<td>No</td>
|
|
570
|
+
</tr>
|
|
571
|
+
<tr>
|
|
572
|
+
<td><code>GameObject</code></td>
|
|
573
|
+
<td>Base GO</td>
|
|
574
|
+
<td>Scene / Pipeline</td>
|
|
575
|
+
<td>Yes</td>
|
|
576
|
+
</tr>
|
|
577
|
+
<tr>
|
|
578
|
+
<td><code>Scene</code></td>
|
|
579
|
+
<td>GO container</td>
|
|
580
|
+
<td>Scene / Pipeline</td>
|
|
581
|
+
<td>Yes</td>
|
|
582
|
+
</tr>
|
|
583
|
+
<tr>
|
|
584
|
+
<td><code>Sprite</code></td>
|
|
585
|
+
<td>Animated GO</td>
|
|
586
|
+
<td>Scene / Pipeline</td>
|
|
587
|
+
<td>Yes</td>
|
|
588
|
+
</tr>
|
|
589
|
+
<tr>
|
|
590
|
+
<td><code>Text</code></td>
|
|
591
|
+
<td>Text GO</td>
|
|
592
|
+
<td>Scene / Pipeline</td>
|
|
593
|
+
<td>Yes</td>
|
|
594
|
+
</tr>
|
|
595
|
+
</tbody>
|
|
596
|
+
</table>
|
|
597
|
+
</section>
|
|
598
|
+
|
|
599
|
+
<section>
|
|
600
|
+
<h2>TL;DR</h2>
|
|
601
|
+
<div class="comparison">
|
|
602
|
+
<div class="comparison-box">
|
|
603
|
+
<h4>Just Drawing?</h4>
|
|
604
|
+
<ul>
|
|
605
|
+
<li>Use <code>Shape</code>, <code>Group</code></li>
|
|
606
|
+
<li>Call <code>.render()</code> yourself</li>
|
|
607
|
+
<li>No Game class needed</li>
|
|
608
|
+
</ul>
|
|
609
|
+
</div>
|
|
610
|
+
<div class="comparison-box">
|
|
611
|
+
<h4>Building a Game?</h4>
|
|
612
|
+
<ul>
|
|
613
|
+
<li>Use <code>GameObject</code>, <code>Scene</code>, <code>Sprite</code></li>
|
|
614
|
+
<li>Add to <code>pipeline</code></li>
|
|
615
|
+
<li>Extend <code>Game</code> class</li>
|
|
616
|
+
</ul>
|
|
617
|
+
</div>
|
|
618
|
+
</div>
|
|
619
|
+
</section>
|
|
620
|
+
|
|
621
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
|
622
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
|
|
623
|
+
<script type="module" src="./js/gameobjects.js"></script>
|
|
624
|
+
</body>
|
|
625
|
+
|
|
626
|
+
</html>
|