nova64 0.2.4 → 0.2.6

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.
Files changed (140) hide show
  1. package/README.md +25 -8
  2. package/bin/nova64.js +165 -0
  3. package/dist/assets/console-CY_kygm3.js +14 -0
  4. package/dist/assets/console-CY_kygm3.js.map +1 -0
  5. package/dist/assets/main-l0sNRNKZ.js.map +1 -0
  6. package/dist/assets/sky/studio/nx.png +0 -0
  7. package/dist/assets/sky/studio/ny.png +0 -0
  8. package/dist/assets/sky/studio/nz.png +0 -0
  9. package/dist/assets/sky/studio/px.png +0 -0
  10. package/dist/assets/sky/studio/py.png +0 -0
  11. package/dist/assets/sky/studio/pz.png +0 -0
  12. package/dist/assets/vanilla-Dcuy32gi.js +2 -0
  13. package/dist/assets/vanilla-Dcuy32gi.js.map +1 -0
  14. package/dist/console.html +899 -0
  15. package/dist/docs/BENCHMARK.md +77 -0
  16. package/dist/docs/CHEATSHEET.md +255 -0
  17. package/dist/docs/EFFECTS_API_GUIDE.md +577 -0
  18. package/dist/docs/EFFECTS_QUICK_REFERENCE.md +331 -0
  19. package/dist/docs/FONT_CHARACTER_REFERENCE.md +219 -0
  20. package/dist/docs/FREE_GLB_ASSETS.md +330 -0
  21. package/dist/docs/FULLSCREEN_BUTTON_FEATURE.md +296 -0
  22. package/dist/docs/GAMEPAD_SUPPORT.md +348 -0
  23. package/dist/docs/GAME_IMPROVEMENTS.md +278 -0
  24. package/dist/docs/GAME_QUALITY_STATUS.md +300 -0
  25. package/dist/docs/MIGRATION_GUIDE.md +553 -0
  26. package/dist/docs/NOVA64_3D_API.md +356 -0
  27. package/dist/docs/NOVA64_API_REFERENCE.md +1406 -0
  28. package/dist/docs/NOVA64_UI_API.md +503 -0
  29. package/dist/docs/UI_SYSTEM_SUMMARY.md +445 -0
  30. package/dist/docs/VOXEL_ENGINE_GUIDE.md +662 -0
  31. package/dist/docs/VOXEL_QUICK_REFERENCE.md +386 -0
  32. package/dist/docs/api-3d.html +750 -0
  33. package/dist/docs/api-effects.html +385 -0
  34. package/dist/docs/api-improvements.md +121 -0
  35. package/dist/docs/api-skybox.html +407 -0
  36. package/dist/docs/api-sprites.html +321 -0
  37. package/dist/docs/api-voxel.html +337 -0
  38. package/dist/docs/api.html +543 -0
  39. package/dist/docs/assets.html +306 -0
  40. package/dist/docs/audio.html +340 -0
  41. package/dist/docs/blogs.html +286 -0
  42. package/dist/docs/collision.html +316 -0
  43. package/dist/docs/console.html +247 -0
  44. package/dist/docs/editor.html +297 -0
  45. package/dist/docs/font.html +247 -0
  46. package/dist/docs/framebuffer.html +247 -0
  47. package/dist/docs/fullscreen-button.html +297 -0
  48. package/dist/docs/gpu-systems.html +247 -0
  49. package/dist/docs/index.html +580 -0
  50. package/dist/docs/input.html +491 -0
  51. package/dist/docs/physics.html +311 -0
  52. package/dist/docs/screens.html +311 -0
  53. package/dist/docs/storage.html +311 -0
  54. package/dist/docs/textinput.html +332 -0
  55. package/dist/docs/ui.html +488 -0
  56. package/dist/examples/3d-advanced/code.js +695 -0
  57. package/dist/examples/adventure-comic-3d/code.js +342 -0
  58. package/dist/examples/audio-lab/code.js +150 -0
  59. package/dist/examples/boids-flocking/code.js +270 -0
  60. package/dist/examples/crystal-cathedral-3d/code.js +706 -0
  61. package/dist/examples/cyberpunk-city-3d/code.js +1383 -0
  62. package/dist/examples/demoscene/README.md +192 -0
  63. package/dist/examples/demoscene/code.js +1081 -0
  64. package/dist/examples/demoscene/meta.json +21 -0
  65. package/dist/examples/dungeon-crawler-3d/code.js +1117 -0
  66. package/dist/examples/f-zero-nova-3d/code.js +865 -0
  67. package/dist/examples/f-zero-nova-3d/code_old.js +1555 -0
  68. package/dist/examples/fps-demo-3d/code.js +744 -0
  69. package/dist/examples/game-of-life-3d/code.js +338 -0
  70. package/dist/examples/generative-art/code.js +632 -0
  71. package/dist/examples/hello-3d/code.js +325 -0
  72. package/dist/examples/hello-skybox/code.js +183 -0
  73. package/dist/examples/hello-world/code.js +19 -0
  74. package/dist/examples/input-showcase/code.js +109 -0
  75. package/dist/examples/instancing-demo/code.js +315 -0
  76. package/dist/examples/minecraft-demo/code.js +387 -0
  77. package/dist/examples/model-viewer-3d/code.js +114 -0
  78. package/dist/examples/mystical-realm-3d/code.js +1203 -0
  79. package/dist/examples/nature-explorer-3d/code.js +1318 -0
  80. package/dist/examples/particles-demo/code.js +522 -0
  81. package/dist/examples/pbr-showcase/code.js +140 -0
  82. package/dist/examples/physics-demo-3d/code.js +948 -0
  83. package/dist/examples/screen-demo/code.js +267 -0
  84. package/dist/examples/shooter-demo-3d/code.js +1286 -0
  85. package/dist/examples/space-combat-3d/IMPLEMENTATION_SUMMARY.md +109 -0
  86. package/dist/examples/space-combat-3d/README.md +135 -0
  87. package/dist/examples/space-combat-3d/code.js +1332 -0
  88. package/dist/examples/space-harrier-3d/code.js +923 -0
  89. package/dist/examples/star-fox-nova-3d/code.js +1116 -0
  90. package/dist/examples/star-fox-nova-3d/code_backup.js +410 -0
  91. package/dist/examples/star-fox-nova-3d/code_broken.js +1821 -0
  92. package/dist/examples/storage-quest/code.js +209 -0
  93. package/dist/examples/strider-demo-3d/IMPROVEMENT_OPTIONS.md +285 -0
  94. package/dist/examples/strider-demo-3d/cache-test.html +132 -0
  95. package/dist/examples/strider-demo-3d/code-fixed.js +582 -0
  96. package/dist/examples/strider-demo-3d/code-old.js +1537 -0
  97. package/dist/examples/strider-demo-3d/code.js +1462 -0
  98. package/dist/examples/strider-demo-3d/code.js.bak2 +1169 -0
  99. package/dist/examples/strider-demo-3d/fix-game.sh +53 -0
  100. package/dist/examples/super-plumber-64/README.md +128 -0
  101. package/dist/examples/super-plumber-64/code.js +1185 -0
  102. package/dist/examples/super-plumber-64/index.html +88 -0
  103. package/dist/examples/test-2d-overlay/code.js +32 -0
  104. package/dist/examples/test-font/code.js +51 -0
  105. package/dist/examples/test-minimal/code.js +21 -0
  106. package/dist/examples/ui-demo/code.js +306 -0
  107. package/dist/examples/wing-commander-space/README.md +180 -0
  108. package/dist/examples/wing-commander-space/code.js +1285 -0
  109. package/dist/examples/wizardry-3d/CHANGELOG.md +366 -0
  110. package/dist/examples/wizardry-3d/code.js +3928 -0
  111. package/dist/index.html +666 -0
  112. package/dist/os9-shell/assets/index-DIHfrTaW.css +1 -0
  113. package/dist/os9-shell/assets/index-KchE_ngx.js +483 -0
  114. package/dist/os9-shell/assets/index-KchE_ngx.js.map +1 -0
  115. package/dist/os9-shell/index.html +23 -0
  116. package/dist/os9-shell/nova-icon.svg +12 -0
  117. package/index.html +6 -1
  118. package/package.json +37 -32
  119. package/public/assets/sky/studio/nx.png +0 -0
  120. package/public/assets/sky/studio/ny.png +0 -0
  121. package/public/assets/sky/studio/nz.png +0 -0
  122. package/public/assets/sky/studio/px.png +0 -0
  123. package/public/assets/sky/studio/py.png +0 -0
  124. package/public/assets/sky/studio/pz.png +0 -0
  125. package/public/os9-shell/assets/index-KchE_ngx.js +483 -0
  126. package/public/os9-shell/assets/index-KchE_ngx.js.map +1 -0
  127. package/public/os9-shell/index.html +10 -1
  128. package/runtime/api-2d.js +301 -21
  129. package/runtime/api-3d/pbr.js +45 -1
  130. package/runtime/api-3d.js +1 -0
  131. package/runtime/api-effects.js +90 -3
  132. package/runtime/api-gameutils.js +476 -0
  133. package/runtime/api-generative.js +610 -0
  134. package/runtime/api-skybox.js +54 -0
  135. package/runtime/api-voxel.js +139 -28
  136. package/runtime/gpu-threejs.js +13 -9
  137. package/runtime/ui.js +2 -2
  138. package/src/main.js +24 -1
  139. package/public/os9-shell/assets/index-B1Uvacma.js +0 -32825
  140. package/public/os9-shell/assets/index-B1Uvacma.js.map +0 -1
package/dist/docs/api.html ADDED
@@ -0,0 +1,543 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>2D Drawing API - Nova64 Documentation</title>
7
+ <style>
8
+ :root {
9
+ --bg-primary: #0f1115;
10
+ --bg-secondary: #151822;
11
+ --bg-tertiary: #1a1d2e;
12
+ --text-primary: #dcdfe4;
13
+ --text-secondary: #99a1b3;
14
+ --accent-cyan: #00ffff;
15
+ --accent-magenta: #ff0080;
16
+ --accent-yellow: #ffff00;
17
+ --border: #2a324a;
18
+ --code-bg: #1a1d2e;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
+ background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1625 50%, var(--bg-primary) 100%);
30
+ background-attachment: fixed;
31
+ color: var(--text-primary);
32
+ line-height: 1.6;
33
+ }
34
+
35
+ .container {
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ padding: 20px;
39
+ }
40
+
41
+ header {
42
+ background: var(--bg-secondary);
43
+ border: 2px solid var(--accent-cyan);
44
+ border-radius: 12px;
45
+ padding: 30px;
46
+ margin-bottom: 30px;
47
+ box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
48
+ }
49
+
50
+ h1 {
51
+ color: var(--accent-cyan);
52
+ font-size: 2.5em;
53
+ text-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
54
+ margin-bottom: 10px;
55
+ }
56
+
57
+ .back-link {
58
+ display: inline-block;
59
+ color: var(--accent-cyan);
60
+ text-decoration: none;
61
+ margin-bottom: 15px;
62
+ transition: color 0.3s ease;
63
+ }
64
+
65
+ .back-link:hover {
66
+ color: #33ffff;
67
+ text-decoration: underline;
68
+ }
69
+
70
+ .subtitle {
71
+ color: var(--text-secondary);
72
+ font-size: 1.1em;
73
+ }
74
+
75
+ section {
76
+ background: var(--bg-secondary);
77
+ border-left: 4px solid var(--accent-cyan);
78
+ padding: 25px;
79
+ margin-bottom: 30px;
80
+ border-radius: 8px;
81
+ }
82
+
83
+ h2 {
84
+ color: var(--accent-magenta);
85
+ font-size: 2em;
86
+ margin-bottom: 15px;
87
+ text-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
88
+ }
89
+
90
+ h3 {
91
+ color: var(--accent-cyan);
92
+ font-size: 1.4em;
93
+ margin: 25px 0 15px 0;
94
+ }
95
+
96
+ .function {
97
+ background: var(--bg-tertiary);
98
+ border: 1px solid var(--border);
99
+ border-radius: 8px;
100
+ padding: 20px;
101
+ margin-bottom: 25px;
102
+ }
103
+
104
+ .function-sig {
105
+ font-family: 'Courier New', Courier, monospace;
106
+ font-size: 1.2em;
107
+ color: var(--accent-yellow);
108
+ margin-bottom: 15px;
109
+ padding: 10px;
110
+ background: var(--code-bg);
111
+ border-radius: 4px;
112
+ border-left: 3px solid var(--accent-yellow);
113
+ }
114
+
115
+ .param-list, .return-info {
116
+ margin: 15px 0;
117
+ }
118
+
119
+ .param {
120
+ padding: 8px 0;
121
+ border-bottom: 1px solid var(--border);
122
+ }
123
+
124
+ .param:last-child {
125
+ border-bottom: none;
126
+ }
127
+
128
+ .param-name {
129
+ color: var(--accent-cyan);
130
+ font-weight: bold;
131
+ font-family: 'Courier New', Courier, monospace;
132
+ }
133
+
134
+ .param-type {
135
+ color: var(--accent-magenta);
136
+ font-style: italic;
137
+ font-size: 0.9em;
138
+ }
139
+
140
+ .example {
141
+ background: var(--code-bg);
142
+ border: 1px solid var(--border);
143
+ border-radius: 8px;
144
+ padding: 20px;
145
+ margin: 15px 0;
146
+ overflow-x: auto;
147
+ }
148
+
149
+ .example-title {
150
+ color: var(--accent-yellow);
151
+ font-weight: bold;
152
+ margin-bottom: 10px;
153
+ }
154
+
155
+ pre {
156
+ margin: 0;
157
+ font-family: 'Courier New', Courier, monospace;
158
+ line-height: 1.5;
159
+ }
160
+
161
+ code {
162
+ color: var(--text-primary);
163
+ }
164
+
165
+ .keyword { color: #ff79c6; }
166
+ .function-name { color: #50fa7b; }
167
+ .number { color: #f1fa8c; }
168
+ .string { color: #f1fa8c; }
169
+ .comment { color: #6272a4; font-style: italic; }
170
+
171
+ .note {
172
+ background: var(--bg-tertiary);
173
+ border-left: 4px solid var(--accent-yellow);
174
+ padding: 15px;
175
+ margin: 15px 0;
176
+ border-radius: 4px;
177
+ }
178
+
179
+ .note-title {
180
+ color: var(--accent-yellow);
181
+ font-weight: bold;
182
+ margin-bottom: 10px;
183
+ }
184
+
185
+ table {
186
+ width: 100%;
187
+ border-collapse: collapse;
188
+ margin: 15px 0;
189
+ }
190
+
191
+ th, td {
192
+ padding: 12px;
193
+ text-align: left;
194
+ border: 1px solid var(--border);
195
+ }
196
+
197
+ th {
198
+ background: var(--bg-tertiary);
199
+ color: var(--accent-cyan);
200
+ font-weight: bold;
201
+ }
202
+
203
+ tr:nth-child(even) {
204
+ background: var(--bg-tertiary);
205
+ }
206
+
207
+ footer {
208
+ text-align: center;
209
+ padding: 30px 20px;
210
+ color: var(--text-secondary);
211
+ border-top: 1px solid var(--border);
212
+ margin-top: 40px;
213
+ }
214
+ </style>
215
+ </head>
216
+ <body>
217
+ <div class="container">
218
+ <a href="index.html" class="back-link">← Back to Documentation Index</a>
219
+
220
+ <header>
221
+ <h1>🎨 2D Drawing API</h1>
222
+ <p class="subtitle">Core 2D drawing functions for pixels, lines, rectangles, circles, and text rendering</p>
223
+ </header>
224
+
225
+ <section>
226
+ <h2>📋 Overview</h2>
227
+ <p>The 2D Drawing API provides fundamental drawing primitives for creating retro-style graphics. It includes pixel-perfect drawing, geometric shapes, a camera system, and a sophisticated 64-bit color system (RGBA64) for high-precision color values.</p>
228
+
229
+ <div class="note">
230
+ <div class="note-title">💡 Key Features</div>
231
+ <ul>
232
+ <li><strong>Pixel-perfect rendering</strong> - Direct pixel manipulation for retro aesthetics</li>
233
+ <li><strong>Camera system</strong> - Easy scrolling and viewport management</li>
234
+ <li><strong>RGBA64 color</strong> - 16-bit per channel for precise color control</li>
235
+ <li><strong>Shape primitives</strong> - Lines, rectangles, circles with fill/outline options</li>
236
+ <li><strong>Text rendering</strong> - Bitmap font system with scaling</li>
237
+ </ul>
238
+ </div>
239
+ </section>
240
+
241
+ <section>
242
+ <h2>🎨 Color System</h2>
243
+ <p>Nova64 uses a 64-bit color system (RGBA64) with 16 bits per channel for precise color representation. Use the helper functions to work with colors easily.</p>
244
+
245
+ <div class="function">
246
+ <div class="function-sig">rgba8(r, g, b, a = 255)</div>
247
+ <p>Creates a 64-bit color from 8-bit RGB values (0-255).</p>
248
+
249
+ <div class="param-list">
250
+ <div class="param">
251
+ <span class="param-name">r</span> <span class="param-type">number (0-255)</span> - Red component
252
+ </div>
253
+ <div class="param">
254
+ <span class="param-name">g</span> <span class="param-type">number (0-255)</span> - Green component
255
+ </div>
256
+ <div class="param">
257
+ <span class="param-name">b</span> <span class="param-type">number (0-255)</span> - Blue component
258
+ </div>
259
+ <div class="param">
260
+ <span class="param-name">a</span> <span class="param-type">number (0-255)</span> - Alpha (opacity), default: 255 (opaque)
261
+ </div>
262
+ </div>
263
+
264
+ <div class="return-info">
265
+ <strong>Returns:</strong> <span class="param-type">BigInt</span> - 64-bit color value
266
+ </div>
267
+
268
+ <div class="example">
269
+ <div class="example-title">Example:</div>
270
+ <pre><code><span class="keyword">const</span> red = <span class="function-name">rgba8</span>(<span class="number">255</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">255</span>);
271
+ <span class="keyword">const</span> transparentBlue = <span class="function-name">rgba8</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">255</span>, <span class="number">128</span>);
272
+ <span class="keyword">const</span> white = <span class="function-name">rgba8</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>);</code></pre>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="function">
277
+ <div class="function-sig">packRGBA64(r16, g16, b16, a16)</div>
278
+ <p>Creates a 64-bit color from 16-bit RGB values (0-65535). Advanced use only.</p>
279
+
280
+ <div class="param-list">
281
+ <div class="param">
282
+ <span class="param-name">r16</span> <span class="param-type">number (0-65535)</span> - Red component
283
+ </div>
284
+ <div class="param">
285
+ <span class="param-name">g16</span> <span class="param-type">number (0-65535)</span> - Green component
286
+ </div>
287
+ <div class="param">
288
+ <span class="param-name">b16</span> <span class="param-type">number (0-65535)</span> - Blue component
289
+ </div>
290
+ <div class="param">
291
+ <span class="param-name">a16</span> <span class="param-type">number (0-65535)</span> - Alpha component
292
+ </div>
293
+ </div>
294
+
295
+ <div class="return-info">
296
+ <strong>Returns:</strong> <span class="param-type">BigInt</span> - 64-bit color value
297
+ </div>
298
+ </div>
299
+ </section>
300
+
301
+ <section>
302
+ <h2>📷 Camera System</h2>
303
+ <p>The camera system allows you to scroll the viewport by offsetting all drawing coordinates automatically.</p>
304
+
305
+ <div class="function">
306
+ <div class="function-sig">setCamera(x, y)</div>
307
+ <p>Sets the camera offset for all subsequent drawing operations.</p>
308
+
309
+ <div class="param-list">
310
+ <div class="param">
311
+ <span class="param-name">x</span> <span class="param-type">number</span> - Camera X offset
312
+ </div>
313
+ <div class="param">
314
+ <span class="param-name">y</span> <span class="param-type">number</span> - Camera Y offset
315
+ </div>
316
+ </div>
317
+
318
+ <div class="example">
319
+ <div class="example-title">Example: Scrolling camera following a player</div>
320
+ <pre><code><span class="comment">// Follow player with centered camera</span>
321
+ <span class="keyword">function</span> <span class="function-name">update</span>() {
322
+ <span class="keyword">const</span> camX = player.x - <span class="number">320</span>; <span class="comment">// Center horizontally (640/2)</span>
323
+ <span class="keyword">const</span> camY = player.y - <span class="number">180</span>; <span class="comment">// Center vertically (360/2)</span>
324
+ <span class="function-name">setCamera</span>(camX, camY);
325
+ }</code></pre>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="function">
330
+ <div class="function-sig">getCamera()</div>
331
+ <p>Gets the current camera offset.</p>
332
+
333
+ <div class="return-info">
334
+ <strong>Returns:</strong> <span class="param-type">Object</span> - <code>{x: number, y: number}</code>
335
+ </div>
336
+ </div>
337
+ </section>
338
+
339
+ <section>
340
+ <h2>🖌️ Drawing Functions</h2>
341
+
342
+ <div class="function">
343
+ <div class="function-sig">cls(color)</div>
344
+ <p>Clears the screen with the specified color.</p>
345
+
346
+ <div class="param-list">
347
+ <div class="param">
348
+ <span class="param-name">color</span> <span class="param-type">BigInt</span> - Color to fill (use rgba8())
349
+ </div>
350
+ </div>
351
+
352
+ <div class="example">
353
+ <div class="example-title">Example:</div>
354
+ <pre><code><span class="keyword">function</span> <span class="function-name">draw</span>() {
355
+ <span class="function-name">cls</span>(<span class="function-name">rgba8</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">20</span>)); <span class="comment">// Dark blue background</span>
356
+ }</code></pre>
357
+ </div>
358
+ </div>
359
+
360
+ <div class="function">
361
+ <div class="function-sig">pset(x, y, color)</div>
362
+ <p>Draws a single pixel at the specified coordinates.</p>
363
+
364
+ <div class="param-list">
365
+ <div class="param">
366
+ <span class="param-name">x</span> <span class="param-type">number</span> - X coordinate
367
+ </div>
368
+ <div class="param">
369
+ <span class="param-name">y</span> <span class="param-type">number</span> - Y coordinate
370
+ </div>
371
+ <div class="param">
372
+ <span class="param-name">color</span> <span class="param-type">BigInt</span> - Pixel color
373
+ </div>
374
+ </div>
375
+
376
+ <div class="example">
377
+ <div class="example-title">Example: Draw random stars</div>
378
+ <pre><code><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < <span class="number">100</span>; i++) {
379
+ <span class="keyword">const</span> x = Math.<span class="function-name">random</span>() * <span class="number">640</span>;
380
+ <span class="keyword">const</span> y = Math.<span class="function-name">random</span>() * <span class="number">360</span>;
381
+ <span class="function-name">pset</span>(x, y, <span class="function-name">rgba8</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>));
382
+ }</code></pre>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="function">
387
+ <div class="function-sig">line(x0, y0, x1, y1, color)</div>
388
+ <p>Draws a line between two points using Bresenham's algorithm.</p>
389
+
390
+ <div class="param-list">
391
+ <div class="param">
392
+ <span class="param-name">x0, y0</span> <span class="param-type">number</span> - Start point coordinates
393
+ </div>
394
+ <div class="param">
395
+ <span class="param-name">x1, y1</span> <span class="param-type">number</span> - End point coordinates
396
+ </div>
397
+ <div class="param">
398
+ <span class="param-name">color</span> <span class="param-type">BigInt</span> - Line color
399
+ </div>
400
+ </div>
401
+
402
+ <div class="example">
403
+ <div class="example-title">Example: Draw a crosshair</div>
404
+ <pre><code><span class="keyword">const</span> centerX = <span class="number">320</span>, centerY = <span class="number">180</span>;
405
+ <span class="keyword">const</span> white = <span class="function-name">rgba8</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>);
406
+
407
+ <span class="function-name">line</span>(centerX - <span class="number">10</span>, centerY, centerX + <span class="number">10</span>, centerY, white);
408
+ <span class="function-name">line</span>(centerX, centerY - <span class="number">10</span>, centerX, centerY + <span class="number">10</span>, white);</code></pre>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="function">
413
+ <div class="function-sig">rect(x, y, w, h, color, fill = false)</div>
414
+ <p>Draws a rectangle (outline or filled).</p>
415
+
416
+ <div class="param-list">
417
+ <div class="param">
418
+ <span class="param-name">x, y</span> <span class="param-type">number</span> - Top-left corner position
419
+ </div>
420
+ <div class="param">
421
+ <span class="param-name">w, h</span> <span class="param-type">number</span> - Width and height
422
+ </div>
423
+ <div class="param">
424
+ <span class="param-name">color</span> <span class="param-type">BigInt</span> - Rectangle color
425
+ </div>
426
+ <div class="param">
427
+ <span class="param-name">fill</span> <span class="param-type">boolean</span> - If true, draws filled rectangle (default: false)
428
+ </div>
429
+ </div>
430
+
431
+ <div class="example">
432
+ <div class="example-title">Example:</div>
433
+ <pre><code><span class="comment">// Draw window with border</span>
434
+ <span class="keyword">const</span> blue = <span class="function-name">rgba8</span>(<span class="number">0</span>, <span class="number">100</span>, <span class="number">200</span>);
435
+ <span class="keyword">const</span> white = <span class="function-name">rgba8</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>);
436
+
437
+ <span class="function-name">rect</span>(<span class="number">100</span>, <span class="number">100</span>, <span class="number">200</span>, <span class="number">150</span>, blue, <span class="keyword">true</span>); <span class="comment">// Fill</span>
438
+ <span class="function-name">rect</span>(<span class="number">100</span>, <span class="number">100</span>, <span class="number">200</span>, <span class="number">150</span>, white, <span class="keyword">false</span>); <span class="comment">// Border</span></code></pre>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="function">
443
+ <div class="function-sig">rectfill(x, y, w, h, color)</div>
444
+ <p>Shortcut for drawing a filled rectangle (equivalent to <code>rect(x, y, w, h, color, true)</code>).</p>
445
+ </div>
446
+
447
+ <div class="function">
448
+ <div class="function-sig">circle(x, y, radius, color, fill = false)</div>
449
+ <p>Draws a circle using midpoint circle algorithm (Bresenham).</p>
450
+
451
+ <div class="param-list">
452
+ <div class="param">
453
+ <span class="param-name">x, y</span> <span class="param-type">number</span> - Center position
454
+ </div>
455
+ <div class="param">
456
+ <span class="param-name">radius</span> <span class="param-type">number</span> - Circle radius in pixels
457
+ </div>
458
+ <div class="param">
459
+ <span class="param-name">color</span> <span class="param-type">BigInt</span> - Circle color
460
+ </div>
461
+ <div class="param">
462
+ <span class="param-name">fill</span> <span class="param-type">boolean</span> - If true, draws filled circle (default: false)
463
+ </div>
464
+ </div>
465
+
466
+ <div class="example">
467
+ <div class="example-title">Example: Draw sun</div>
468
+ <pre><code><span class="keyword">const</span> yellow = <span class="function-name">rgba8</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">0</span>);
469
+ <span class="keyword">const</span> orange = <span class="function-name">rgba8</span>(<span class="number">255</span>, <span class="number">150</span>, <span class="number">0</span>);
470
+
471
+ <span class="function-name">circle</span>(<span class="number">100</span>, <span class="number">100</span>, <span class="number">30</span>, yellow, <span class="keyword">true</span>); <span class="comment">// Filled inner</span>
472
+ <span class="function-name">circle</span>(<span class="number">100</span>, <span class="number">100</span>, <span class="number">40</span>, orange, <span class="keyword">false</span>); <span class="comment">// Outline glow</span></code></pre>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="function">
477
+ <div class="function-sig">print(text, x, y, color = rgba8(255,255,255,255), scale = 1)</div>
478
+ <p>Draws text using the bitmap font system.</p>
479
+
480
+ <div class="param-list">
481
+ <div class="param">
482
+ <span class="param-name">text</span> <span class="param-type">string</span> - Text to display
483
+ </div>
484
+ <div class="param">
485
+ <span class="param-name">x, y</span> <span class="param-type">number</span> - Position
486
+ </div>
487
+ <div class="param">
488
+ <span class="param-name">color</span> <span class="param-type">BigInt</span> - Text color (default: white)
489
+ </div>
490
+ <div class="param">
491
+ <span class="param-name">scale</span> <span class="param-type">number</span> - Text scale multiplier (default: 1)
492
+ </div>
493
+ </div>
494
+
495
+ <div class="example">
496
+ <div class="example-title">Example: HUD display</div>
497
+ <pre><code><span class="keyword">const</span> white = <span class="function-name">rgba8</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>);
498
+ <span class="keyword">const</span> cyan = <span class="function-name">rgba8</span>(<span class="number">0</span>, <span class="number">255</span>, <span class="number">255</span>);
499
+
500
+ <span class="function-name">print</span>(<span class="string">"SCORE: "</span> + score, <span class="number">10</span>, <span class="number">10</span>, white);
501
+ <span class="function-name">print</span>(<span class="string">"GAME OVER"</span>, <span class="number">250</span>, <span class="number">180</span>, cyan, <span class="number">2</span>); <span class="comment">// 2x scale</span></code></pre>
502
+ </div>
503
+ </div>
504
+ </section>
505
+
506
+ <section>
507
+ <h2>💡 Usage Tips</h2>
508
+
509
+ <div class="note">
510
+ <div class="note-title">Performance</div>
511
+ <ul>
512
+ <li>Use <code>rectfill()</code> or <code>cls()</code> for large filled areas instead of many <code>pset()</code> calls</li>
513
+ <li>Cache color values (rgba8 returns) instead of recalculating each frame</li>
514
+ <li>Camera offset is applied to all coordinates automatically - no need for manual adjustment</li>
515
+ </ul>
516
+ </div>
517
+
518
+ <div class="note">
519
+ <div class="note-title">Common Patterns</div>
520
+ <ul>
521
+ <li><strong>HUD Elements:</strong> Set camera to (0, 0) before drawing UI to keep it fixed on screen</li>
522
+ <li><strong>Layering:</strong> Draw background first, then objects, then foreground/UI</li>
523
+ <li><strong>Alpha Transparency:</strong> Lower alpha values (< 255) create semi-transparent effects</li>
524
+ </ul>
525
+ </div>
526
+ </section>
527
+
528
+ <section>
529
+ <h2>📚 Related APIs</h2>
530
+ <ul>
531
+ <li><a href="api-sprites.html" style="color: var(--accent-cyan);">Sprite System</a> - For drawing sprites and animations</li>
532
+ <li><a href="input.html" style="color: var(--accent-cyan);">Input System</a> - For handling user input</li>
533
+ <li><a href="ui.html" style="color: var(--accent-cyan);">UI System</a> - For advanced text rendering and UI components</li>
534
+ <li><a href="font.html" style="color: var(--accent-cyan);">Font System</a> - Low-level bitmap font details</li>
535
+ </ul>
536
+ </section>
537
+
538
+ <footer>
539
+ <p>Nova64 Fantasy Console © 2025 | <a href="index.html" style="color: var(--accent-cyan);">Back to Documentation</a></p>
540
+ </footer>
541
+ </div>
542
+ </body>
543
+ </html>