Skip to content

Commit cb85bbb

Browse files
reximrexim
committed
Introduce RaylibJs.startExports()
It enables you to supply not only wasm modules but anything that acts like a wasm module.
1 parent 248f120 commit cb85bbb

File tree

1 file changed

+39
-28
lines changed

1 file changed

+39
-28
lines changed

‎raylib.js

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ class RaylibJs {
3333

3434
#reset() {
3535
this.previous = undefined;
36-
this.wasm = undefined;
36+
this.exports = undefined;
3737
this.ctx = undefined;
3838
this.dt = undefined;
3939
this.targetFPS = 60;
@@ -54,8 +54,10 @@ class RaylibJs {
5454
this.quit = true;
5555
}
5656

57-
async start({ wasmPath, canvasId }) {
58-
if (this.wasm !== undefined) {
57+
async startExports({ exports, canvasId }) {
58+
console.log(exports);
59+
60+
if (this.exports !== undefined) {
5961
console.error("The game is already running. Please stop() it first.");
6062
return;
6163
}
@@ -66,9 +68,7 @@ class RaylibJs {
6668
throw new Error("Could not create 2d canvas context");
6769
}
6870

69-
this.wasm = await WebAssembly.instantiateStreaming(fetch(wasmPath), {
70-
env: make_environment(this)
71-
});
71+
this.exports = exports;
7272

7373
const keyDown = (e) => {
7474
this.currentPressedKeyState.add(glfwKeyMapping[e.code]);
@@ -87,7 +87,7 @@ class RaylibJs {
8787
window.addEventListener("wheel", wheelMove);
8888
window.addEventListener("mousemove", mouseMove);
8989

90-
this.wasm.instance.exports.main();
90+
this.exports.main();
9191
const next = (timestamp) => {
9292
if (this.quit) {
9393
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
@@ -106,10 +106,21 @@ class RaylibJs {
106106
});
107107
}
108108

109+
async start({ wasmPath, canvasId }) {
110+
let wasm = await WebAssembly.instantiateStreaming(fetch(wasmPath), {
111+
env: make_environment(this)
112+
});
113+
114+
this.startExports( {
115+
exports: wasm.instance.exports,
116+
canvasId,
117+
})
118+
}
119+
109120
InitWindow(width, height, title_ptr) {
110121
this.ctx.canvas.width = width;
111122
this.ctx.canvas.height = height;
112-
const buffer = this.wasm.instance.exports.memory.buffer;
123+
const buffer = this.exports.memory.buffer;
113124
document.title = cstr_by_ptr(buffer, title_ptr);
114125
}
115126

@@ -145,7 +156,7 @@ class RaylibJs {
145156
}
146157

147158
DrawCircleV(center_ptr, radius, color_ptr) {
148-
const buffer = this.wasm.instance.exports.memory.buffer;
159+
const buffer = this.exports.memory.buffer;
149160
const [x, y] = new Float32Array(buffer, center_ptr, 2);
150161
const [r, g, b, a] = new Uint8Array(buffer, color_ptr, 4);
151162
const color = color_hex_unpacked(r, g, b, a);
@@ -156,13 +167,13 @@ class RaylibJs {
156167
}
157168

158169
ClearBackground(color_ptr) {
159-
this.ctx.fillStyle = getColorFromMemory(this.wasm.instance.exports.memory.buffer, color_ptr);
170+
this.ctx.fillStyle = getColorFromMemory(this.exports.memory.buffer, color_ptr);
160171
this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
161172
}
162173

163174
// RLAPI void DrawText(const char *text, int posX, int posY, int fontSize, Color color); // Draw text (using default font)
164175
DrawText(text_ptr, posX, posY, fontSize, color_ptr) {
165-
const buffer = this.wasm.instance.exports.memory.buffer;
176+
const buffer = this.exports.memory.buffer;
166177
const text = cstr_by_ptr(buffer, text_ptr);
167178
const color = getColorFromMemory(buffer, color_ptr);
168179
fontSize *= this.#FONT_SCALE_MAGIC;
@@ -178,14 +189,14 @@ class RaylibJs {
178189

179190
// RLAPI void DrawRectangle(int posX, int posY, int width, int height, Color color); // Draw a color-filled rectangle
180191
DrawRectangle(posX, posY, width, height, color_ptr) {
181-
const buffer = this.wasm.instance.exports.memory.buffer;
192+
const buffer = this.exports.memory.buffer;
182193
const color = getColorFromMemory(buffer, color_ptr);
183194
this.ctx.fillStyle = color;
184195
this.ctx.fillRect(posX, posY, width, height);
185196
}
186197

187198
DrawRectangleV(position_ptr, size_ptr, color_ptr) {
188-
const buffer = this.wasm.instance.exports.memory.buffer;
199+
const buffer = this.exports.memory.buffer;
189200
const color = getColorFromMemory(buffer, color_ptr);
190201
const position = new Float32Array(buffer, position_ptr, 2);
191202
const size = new Float32Array(buffer, size_ptr, 2);
@@ -213,7 +224,7 @@ class RaylibJs {
213224

214225
TraceLog(logLevel, text_ptr, ... args) {
215226
// TODO: Implement printf style formatting for TraceLog
216-
const buffer = this.wasm.instance.exports.memory.buffer;
227+
const buffer = this.exports.memory.buffer;
217228
const text = cstr_by_ptr(buffer, text_ptr);
218229
switch(logLevel) {
219230
case LOG_ALL: console.log(`ALL: ${text} ${args}`); break;
@@ -232,34 +243,34 @@ class RaylibJs {
232243
const x = this.currentMousePosition.x - bcrect.left;
233244
const y = this.currentMousePosition.y - bcrect.top;
234245

235-
const buffer = this.wasm.instance.exports.memory.buffer;
246+
const buffer = this.exports.memory.buffer;
236247
new Float32Array(buffer, result_ptr, 2).set([x, y]);
237248
}
238249

239250
CheckCollisionPointRec(point_ptr, rec_ptr) {
240-
const buffer = this.wasm.instance.exports.memory.buffer;
251+
const buffer = this.exports.memory.buffer;
241252
const [x, y] = new Float32Array(buffer, point_ptr, 2);
242253
const [rx, ry, rw, rh] = new Float32Array(buffer, rec_ptr, 4);
243254
return ((x >= rx) && x <= (rx + rw) && (y >= ry) && y <= (ry + rh));
244255
}
245256

246257
Fade(result_ptr, color_ptr, alpha) {
247-
const buffer = this.wasm.instance.exports.memory.buffer;
258+
const buffer = this.exports.memory.buffer;
248259
const [r, g, b, _] = new Uint8Array(buffer, color_ptr, 4);
249260
const newA = Math.max(0, Math.min(255, 255.0*alpha));
250261
new Uint8Array(buffer, result_ptr, 4).set([r, g, b, newA]);
251262
}
252263

253264
DrawRectangleRec(rec_ptr, color_ptr) {
254-
const buffer = this.wasm.instance.exports.memory.buffer;
265+
const buffer = this.exports.memory.buffer;
255266
const [x, y, w, h] = new Float32Array(buffer, rec_ptr, 4);
256267
const color = getColorFromMemory(buffer, color_ptr);
257268
this.ctx.fillStyle = color;
258269
this.ctx.fillRect(x, y, w, h);
259270
}
260271

261272
DrawRectangleLinesEx(rec_ptr, lineThick, color_ptr) {
262-
const buffer = this.wasm.instance.exports.memory.buffer;
273+
const buffer = this.exports.memory.buffer;
263274
const [x, y, w, h] = new Float32Array(buffer, rec_ptr, 4);
264275
const color = getColorFromMemory(buffer, color_ptr);
265276
this.ctx.strokeStyle = color;
@@ -268,15 +279,15 @@ class RaylibJs {
268279
}
269280

270281
MeasureText(text_ptr, fontSize) {
271-
const buffer = this.wasm.instance.exports.memory.buffer;
282+
const buffer = this.exports.memory.buffer;
272283
const text = cstr_by_ptr(buffer, text_ptr);
273284
fontSize *= this.#FONT_SCALE_MAGIC;
274285
this.ctx.font = `${fontSize}px grixel`;
275286
return this.ctx.measureText(text).width;
276287
}
277288

278289
TextSubtext(text_ptr, position, length) {
279-
const buffer = this.wasm.instance.exports.memory.buffer;
290+
const buffer = this.exports.memory.buffer;
280291
const text = cstr_by_ptr(buffer, text_ptr);
281292
const subtext = text.substring(position, length);
282293

@@ -291,7 +302,7 @@ class RaylibJs {
291302

292303
// RLAPI Texture2D LoadTexture(const char *fileName);
293304
LoadTexture(result_ptr, filename_ptr) {
294-
const buffer = this.wasm.instance.exports.memory.buffer;
305+
const buffer = this.exports.memory.buffer;
295306
const filename = cstr_by_ptr(buffer, filename_ptr);
296307

297308
var result = new Uint32Array(buffer, result_ptr, 5)
@@ -311,7 +322,7 @@ class RaylibJs {
311322

312323
// RLAPI void DrawTexture(Texture2D texture, int posX, int posY, Color tint);
313324
DrawTexture(texture_ptr, posX, posY, color_ptr) {
314-
const buffer = this.wasm.instance.exports.memory.buffer;
325+
const buffer = this.exports.memory.buffer;
315326
const [id, width, height, mipmaps, format] = new Uint32Array(buffer, texture_ptr, 5);
316327
// // TODO: implement tinting for DrawTexture
317328
// const tint = getColorFromMemory(buffer, color_ptr);
@@ -321,7 +332,7 @@ class RaylibJs {
321332

322333
// TODO: codepoints are not implemented
323334
LoadFontEx(result_ptr, fileName_ptr/*, fontSize, codepoints, codepointCount*/) {
324-
const buffer = this.wasm.instance.exports.memory.buffer;
335+
const buffer = this.exports.memory.buffer;
325336
const fileName = cstr_by_ptr(buffer, fileName_ptr);
326337
// TODO: dynamically generate the name for the font
327338
// Support more than one custom font
@@ -334,7 +345,7 @@ class RaylibJs {
334345
SetTextureFilter() {}
335346

336347
MeasureTextEx(result_ptr, font, text_ptr, fontSize, spacing) {
337-
const buffer = this.wasm.instance.exports.memory.buffer;
348+
const buffer = this.exports.memory.buffer;
338349
const text = cstr_by_ptr(buffer, text_ptr);
339350
const result = new Float32Array(buffer, result_ptr, 2);
340351
this.ctx.font = fontSize+"px myfont";
@@ -344,7 +355,7 @@ class RaylibJs {
344355
}
345356

346357
DrawTextEx(font, text_ptr, position_ptr, fontSize, spacing, tint_ptr) {
347-
const buffer = this.wasm.instance.exports.memory.buffer;
358+
const buffer = this.exports.memory.buffer;
348359
const text = cstr_by_ptr(buffer, text_ptr);
349360
const [posX, posY] = new Float32Array(buffer, position_ptr, 2);
350361
const tint = getColorFromMemory(buffer, tint_ptr);
@@ -358,7 +369,7 @@ class RaylibJs {
358369
}
359370

360371
ColorFromHSV(result_ptr, hue, saturation, value) {
361-
const buffer = this.wasm.instance.exports.memory.buffer;
372+
const buffer = this.exports.memory.buffer;
362373
const result = new Uint8Array(buffer, result_ptr, 4);
363374

364375
// Red channel
@@ -389,7 +400,7 @@ class RaylibJs {
389400
}
390401

391402
raylib_js_set_entry(entry) {
392-
this.entryFunction = this.wasm.instance.exports.__indirect_function_table.get(entry);
403+
this.entryFunction = this.exports.__indirect_function_table.get(entry);
393404
}
394405
}
395406

0 commit comments

Comments
 (0)