diff --git a/build.sh b/build.sh index 60ccd66..589e615 100755 --- a/build.sh +++ b/build.sh @@ -10,6 +10,7 @@ clang -I./include/ -o build/core_input_keys ./examples/core_input_keys.c -L./lib clang -I./include/ -o build/shapes_colors_palette ./examples/shapes_colors_palette.c -L./lib/ -lraylib -lm clang -I./include/ -o build/game ./game.c -L./lib/ -lraylib -lm clang -I./include/ -o ./build/core_input_mouse_wheel ./examples/core_input_mouse_wheel.c -L./lib/ -lraylib -lm +clang -I./include/ -o ./build/textures_logo_raylib ./examples/textures_logo_raylib.c -L./lib/ -lraylib -lm clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/core_basic_window.wasm ./examples/core_basic_window.c -DPLATFORM_WEB clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/core_basic_screen_manager.wasm ./examples/core_basic_screen_manager.c -DPLATFORM_WEB @@ -17,3 +18,4 @@ clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/shapes_colors_palette.wasm ./examples/shapes_colors_palette.c -DPLATFORM_WEB clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/game.wasm game.c -DPLATFORM_WEB clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/core_input_mouse_wheel.wasm ./examples/core_input_mouse_wheel.c -DPLATFORM_WEB +clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/textures_logo_raylib.wasm ./examples/textures_logo_raylib.c -DPLATFORM_WEB diff --git a/examples/textures_logo_raylib.c b/examples/textures_logo_raylib.c new file mode 100644 index 0000000..f0b401c --- /dev/null +++ b/examples/textures_logo_raylib.c @@ -0,0 +1,70 @@ +/******************************************************************************************* +* +* raylib [textures] example - Texture loading and drawing +* +* Example originally created with raylib 1.0, last time updated with raylib 1.0 +* +* Example licensed under an unmodified zlib/libpng license, which is an OSI-certified, +* BSD-like license that allows static linking with closed source software +* +* Copyright (c) 2014-2024 Ramon Santamaria (@raysan5) +* +********************************************************************************************/ + +#include "raylib.h" + +void raylib_js_set_entry(void (*entry)(void)); + +const int screenWidth = 800; +const int screenHeight = 450; +Texture2D texture = {0}; + +void GameFrame() { + // Update + //---------------------------------------------------------------------------------- + // TODO: Update your variables here + //---------------------------------------------------------------------------------- + + // Draw + //---------------------------------------------------------------------------------- + BeginDrawing(); + + ClearBackground(RAYWHITE); + + DrawTexture(texture, screenWidth/2 - texture.width/2, screenHeight/2 - texture.height/2, WHITE); + + DrawText("this IS a texture!", 360, 370, 10, GRAY); + + EndDrawing(); +} + +//------------------------------------------------------------------------------------ +// Program main entry point +//------------------------------------------------------------------------------------ +int main(void) +{ + // Initialization + //-------------------------------------------------------------------------------------- + + InitWindow(screenWidth, screenHeight, "raylib [textures] example - texture loading and drawing"); + + // NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required) + texture = LoadTexture("resources/raylib_logo.png"); // Texture loading + //--------------------------------------------------------------------------------------- + +#ifdef PLATFORM_WEB + raylib_js_set_entry(GameFrame); +#else + // Main game loop + while (!WindowShouldClose()) // Detect window close button or ESC key + { + GameFrame(); + } + + // De-Initialization + //-------------------------------------------------------------------------------------- + CloseWindow(); // Close window and OpenGL context + //-------------------------------------------------------------------------------------- +#endif + return 0; +} diff --git a/index.html b/index.html index 5f29ff6..d3ed542 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,8 @@ const wasmPaths = { "tsoding": ["game",], "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel",], - "shapes": ["shapes_colors_palette"] + "shapes": ["shapes_colors_palette"], + "textures": ["textures_logo_raylib"] } const raylibExampleSelect = document.getElementById("raylib-example-select"); diff --git a/raylib.js b/raylib.js index 0f8da8f..9cf4cf8 100644 --- a/raylib.js +++ b/raylib.js @@ -32,6 +32,7 @@ class RaylibJs { this.currentPressedKeyState = new Set(); this.currentMouseWheelMoveState = 0; this.currentMousePosition = {x: 0, y: 0}; + this.images = []; this.quit = false; } @@ -235,6 +236,36 @@ class RaylibJs { return this.ctx.measureText(text).width; } + // RLAPI Texture2D LoadTexture(const char *fileName); + LoadTexture(result_ptr, filename_ptr) { + const buffer = this.wasm.instance.exports.memory.buffer; + const filename = cstr_by_ptr(buffer, filename_ptr); + + var result = new Uint32Array(buffer, result_ptr, 5) + var img = new Image(); + img.src = filename; + this.images.push(img); + + result[0] = this.images.indexOf(img); + // TODO: get the true width and height of the image + result[1] = 256; // width + result[2] = 256; // height + result[3] = 1; // mipmaps + result[4] = 7; // format PIXELFORMAT_UNCOMPRESSED_R8G8B8A8 + + return result; + } + + // RLAPI void DrawTexture(Texture2D texture, int posX, int posY, Color tint); + DrawTexture(texture_ptr, posX, posY, color_ptr) { + const buffer = this.wasm.instance.exports.memory.buffer; + const [id, width, height, mipmaps, format] = new Uint32Array(buffer, texture_ptr, 5); + // // TODO: implement tinting for DrawTexture + // const tint = getColorFromMemory(buffer, color_ptr); + + this.ctx.drawImage(this.images[id], posX, posY); + } + raylib_js_set_entry(entry) { this.entryFunction = this.wasm.instance.exports.__indirect_function_table.get(entry); } diff --git a/resources/raylib_logo.png b/resources/raylib_logo.png new file mode 100644 index 0000000..15bbaa2 Binary files /dev/null and b/resources/raylib_logo.png differ diff --git a/wasm/textures_logo_raylib.wasm b/wasm/textures_logo_raylib.wasm new file mode 100755 index 0000000..3f8a9bc Binary files /dev/null and b/wasm/textures_logo_raylib.wasm differ