textures_logo_raylib example

build.sh

@@ -10,10 +10,12 @@ 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
 clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/core_input_keys.wasm ./examples/core_input_keys.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/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

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;
+}

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");

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);
+    async 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);
+        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);
+        // const tint = getColorFromMemory(buffer, color_ptr);
+
+        if(this.images[id]) {
+            this.ctx.drawImage(this.images[id], posX, posY);
+        }
+    }
+
     raylib_js_set_entry(entry) {
         this.entryFunction = this.wasm.instance.exports.__indirect_function_table.get(entry);
     }