Merge pull request #29 from jkisor/text_writing_anim

text_writing_anim 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/text_writing_anim ./examples/text_writing_anim.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/text_writing_anim.wasm ./examples/text_writing_anim.c -DPLATFORM_WEB

examples/text_writing_anim.c

@@ -0,0 +1,73 @@
+/*******************************************************************************************
+*
+*   raylib [text] example - Text Writing Animation
+*
+*   Example originally created with raylib 1.4, last time updated with raylib 1.4
+*
+*   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) 2016-2024 Ramon Santamaria (@raysan5)
+*
+********************************************************************************************/
+
+#include "raylib.h"
+
+void raylib_js_set_entry(void (*entry)(void));
+
+const int screenWidth = 800;
+const int screenHeight = 450;
+
+const char message[128] = "This sample illustrates a text writing\nanimation effect! Check it out! ;)";
+int framesCounter = 0;
+
+void GameFrame() {
+    // Update
+    //----------------------------------------------------------------------------------
+    if (IsKeyDown(KEY_SPACE)) framesCounter += 8;
+    else framesCounter++;
+
+    if (IsKeyPressed(KEY_ENTER)) framesCounter = 0;
+    //----------------------------------------------------------------------------------
+
+    // Draw
+    //----------------------------------------------------------------------------------
+    BeginDrawing();
+
+        ClearBackground(RAYWHITE);
+
+        DrawText(TextSubtext(message, 0, framesCounter/10), 210, 160, 20, MAROON);
+
+        DrawText("PRESS [ENTER] to RESTART!", 240, 260, 20, LIGHTGRAY);
+        DrawText("PRESS [SPACE] to SPEED UP!", 239, 300, 20, LIGHTGRAY);
+
+    EndDrawing();
+    //----------------------------------------------------------------------------------
+}
+
+//------------------------------------------------------------------------------------
+// Program main entry point
+//------------------------------------------------------------------------------------
+int main(void)
+{
+    InitWindow(screenWidth, screenHeight, "raylib [text] example - text writing anim");
+
+    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
+    //--------------------------------------------------------------------------------------
+
+#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

@@ -69,7 +69,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"],
+            "text": ["text_writing_anim"]
         }
         const defaultWasm = Object.values(wasmPaths)[0];
 

raylib.js

@@ -158,7 +158,11 @@ class RaylibJs {
         this.ctx.fillStyle = color;
         // TODO: since the default font is part of Raylib the css that defines it should be located in raylib.js and not in index.html
         this.ctx.font = `${fontSize}px grixel`;
-        this.ctx.fillText(text, posX, posY + fontSize);
+
+        const lines = text.split('\n');
+        for (var i = 0; i < lines.length; i++) {
+            this.ctx.fillText(lines[i], posX, posY + (i * fontSize));
+        }
     }
 
     // RLAPI void DrawRectangle(int posX, int posY, int width, int height, Color color);                        // Draw a color-filled rectangle
@@ -235,6 +239,20 @@ class RaylibJs {
         return this.ctx.measureText(text).width;
     }
 
+    TextSubtext(text_ptr, position, length) {
+        const buffer = this.wasm.instance.exports.memory.buffer;
+        const text = cstr_by_ptr(buffer, text_ptr);
+        const subtext = text.substring(position, length);
+
+        var bytes = new Uint8Array(buffer, 0, subtext.length+1);
+        for(var i = 0; i < subtext.length; i++) {
+            bytes[i] = subtext.charCodeAt(i);
+        }
+        bytes[subtext.length] = 0;
+
+        return bytes;
+    }
+
     raylib_js_set_entry(entry) {
         this.entryFunction = this.wasm.instance.exports.__indirect_function_table.get(entry);
     }