diff --git a/build.sh b/build.sh index 86c8ecb..60ccd66 100755 --- a/build.sh +++ b/build.sh @@ -7,11 +7,13 @@ mkdir -p build/ clang -I./include/ -o build/core_basic_window ./examples/core_basic_window.c -L./lib/ -lraylib -lm clang -I./include/ -o build/core_basic_screen_manager ./examples/core_basic_screen_manager.c -L./lib/ -lraylib -lm clang -I./include/ -o build/core_input_keys ./examples/core_input_keys.c -L./lib/ -lraylib -lm +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 --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 diff --git a/examples/shapes_colors_palette.c b/examples/shapes_colors_palette.c new file mode 100644 index 0000000..3cd0e00 --- /dev/null +++ b/examples/shapes_colors_palette.c @@ -0,0 +1,117 @@ +/******************************************************************************************* +* +* raylib [shapes] example - Colors palette +* +* Example originally created with raylib 1.0, last time updated with raylib 2.5 +* +* 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" +#define MAX_COLORS_COUNT 21 // Number of colors available + +void raylib_js_set_entry(void (*entry)(void)); + +Color colors[MAX_COLORS_COUNT] = { + DARKGRAY, MAROON, ORANGE, DARKGREEN, DARKBLUE, DARKPURPLE, DARKBROWN, + GRAY, RED, GOLD, LIME, BLUE, VIOLET, BROWN, LIGHTGRAY, PINK, YELLOW, + GREEN, SKYBLUE, PURPLE, BEIGE }; + +const char *colorNames[MAX_COLORS_COUNT] = { + "DARKGRAY", "MAROON", "ORANGE", "DARKGREEN", "DARKBLUE", "DARKPURPLE", + "DARKBROWN", "GRAY", "RED", "GOLD", "LIME", "BLUE", "VIOLET", "BROWN", + "LIGHTGRAY", "PINK", "YELLOW", "GREEN", "SKYBLUE", "PURPLE", "BEIGE" }; + +Rectangle colorsRecs[MAX_COLORS_COUNT] = { 0 }; // Rectangles array + +int colorState[MAX_COLORS_COUNT] = { 0 }; // Color state: 0-DEFAULT, 1-MOUSE_HOVER + +Vector2 mousePoint = { 0.0f, 0.0f }; + + +void GameFrame() +{ + // Update + //---------------------------------------------------------------------------------- + mousePoint = GetMousePosition(); + + for (int i = 0; i < MAX_COLORS_COUNT; i++) + { + if (CheckCollisionPointRec(mousePoint, colorsRecs[i])) colorState[i] = 1; + else colorState[i] = 0; + } + //---------------------------------------------------------------------------------- + + // Draw + //---------------------------------------------------------------------------------- + BeginDrawing(); + + ClearBackground(RAYWHITE); + + DrawText("raylib colors palette", 28, 42, 20, BLACK); + DrawText("press SPACE to see all colors", GetScreenWidth() - 180, GetScreenHeight() - 40, 10, GRAY); + + for (int i = 0; i < MAX_COLORS_COUNT; i++) // Draw all rectangles + { + DrawRectangleRec(colorsRecs[i], Fade(colors[i], colorState[i]? 0.6f : 1.0f)); + + if (IsKeyDown(KEY_SPACE) || colorState[i]) + { + DrawRectangle((int)colorsRecs[i].x, (int)(colorsRecs[i].y + colorsRecs[i].height - 26), (int)colorsRecs[i].width, 20, BLACK); + DrawRectangleLinesEx(colorsRecs[i], 6, Fade(BLACK, 0.3f)); + DrawText(colorNames[i], (int)(colorsRecs[i].x + colorsRecs[i].width - MeasureText(colorNames[i], 10) - 12), + (int)(colorsRecs[i].y + colorsRecs[i].height - 20), 10, colors[i]); + } + } + + EndDrawing(); + //---------------------------------------------------------------------------------- +} + + +//------------------------------------------------------------------------------------ +// Program main entry point +//------------------------------------------------------------------------------------ +int main(void) +{ + // Initialization + //-------------------------------------------------------------------------------------- + const int screenWidth = 800; + const int screenHeight = 450; + + InitWindow(screenWidth, screenHeight, "raylib [shapes] example - colors palette"); + + + // Fills colorsRecs data (for every rectangle) + for (int i = 0; i < MAX_COLORS_COUNT; i++) + { + colorsRecs[i].x = 20.0f + 100.0f *(i%7) + 10.0f *(i%7); + colorsRecs[i].y = 80.0f + 100.0f *(i/7) + 10.0f *(i/7); + colorsRecs[i].width = 100.0f; + colorsRecs[i].height = 100.0f; + } + + + + 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; +} \ No newline at end of file diff --git a/index.html b/index.html index ddb9ae0..678026e 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ transform: translate(-50%, -50%); border: 1px solid black } - + #raylib-example-select { display: block; max-width: 8rem; @@ -46,8 +46,9 @@ const wasmPaths = { "tsoding": ["game",], "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel",], + "shapes": ["shapes_colors_palette"] } - + const raylibExampleSelect = document.getElementById("raylib-example-select"); for (const exampleCategory in wasmPaths){ @@ -57,7 +58,7 @@ } raylibExampleSelect.innerHTML += "" } - + const { protocol } = window.location; const isHosted = protocol !== "file:"; let raylibJs = undefined; @@ -86,7 +87,7 @@ `; }); } - + } startRaylib("game"); diff --git a/raylib.js b/raylib.js index e1007ba..0f8da8f 100644 --- a/raylib.js +++ b/raylib.js @@ -12,6 +12,15 @@ function make_environment(env) { } class RaylibJs { + // TODO: We stole the font from the website + // (https://raylib.com/) and it's slightly different than + // the one that is "baked" into Raylib library itself. To + // account for the differences we scale the size with a + // magical factor. + // + // It would be nice to have a better approach... + #FONT_SCALE_MAGIC = 0.65; + #reset() { this.previous = undefined; this.wasm = undefined; @@ -22,6 +31,7 @@ class RaylibJs { this.prevPressedKeyState = new Set(); this.currentPressedKeyState = new Set(); this.currentMouseWheelMoveState = 0; + this.currentMousePosition = {x: 0, y: 0}; this.quit = false; } @@ -58,10 +68,13 @@ class RaylibJs { const wheelMove = (e) => { this.currentMouseWheelMoveState = Math.sign(-e.deltaY); }; - + const mouseMove = (e) => { + this.currentMousePosition = {x: e.clientX, y: e.clientY}; + }; window.addEventListener("keydown", keyDown); window.addEventListener("keyup", keyUp); window.addEventListener("wheel", wheelMove); + window.addEventListener("mousemove", mouseMove); this.wasm.instance.exports.main(); const next = (timestamp) => { @@ -141,14 +154,7 @@ class RaylibJs { const buffer = this.wasm.instance.exports.memory.buffer; const text = cstr_by_ptr(buffer, text_ptr); const color = getColorFromMemory(buffer, color_ptr); - // TODO: We stole the font from the website - // (https://raylib.com/) and it's slightly different than - // the one that is "baked" into Raylib library itself. To - // account for the differences we scale the size with a - // magical factor. - // - // It would be nice to have a better approach... - fontSize *= 0.65; + fontSize *= this.#FONT_SCALE_MAGIC; 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`; @@ -181,6 +187,54 @@ class RaylibJs { return args[0]; } + GetMousePosition(result_ptr) { + const bcrect = this.ctx.canvas.getBoundingClientRect(); + const x = this.currentMousePosition.x - bcrect.left; + const y = this.currentMousePosition.y - bcrect.top; + + const buffer = this.wasm.instance.exports.memory.buffer; + new Float32Array(buffer, result_ptr, 2).set([x, y]); + } + + CheckCollisionPointRec(point_ptr, rec_ptr) { + const buffer = this.wasm.instance.exports.memory.buffer; + const [x, y] = new Float32Array(buffer, point_ptr, 2); + const [rx, ry, rw, rh] = new Float32Array(buffer, rec_ptr, 4); + return ((x >= rx) && x <= (rx + rw) && (y >= ry) && y <= (ry + rh)); + } + + Fade(result_ptr, color_ptr, alpha) { + const buffer = this.wasm.instance.exports.memory.buffer; + const [r, g, b, _] = new Uint8Array(buffer, color_ptr, 4); + const newA = Math.max(0, Math.min(255, 255.0*alpha)); + new Uint8Array(buffer, result_ptr, 4).set([r, g, b, newA]); + } + + DrawRectangleRec(rec_ptr, color_ptr) { + const buffer = this.wasm.instance.exports.memory.buffer; + const [x, y, w, h] = new Float32Array(buffer, rec_ptr, 4); + const color = getColorFromMemory(buffer, color_ptr); + this.ctx.fillStyle = color; + this.ctx.fillRect(x, y, w, h); + } + + DrawRectangleLinesEx(rec_ptr, lineThick, color_ptr) { + const buffer = this.wasm.instance.exports.memory.buffer; + const [x, y, w, h] = new Float32Array(buffer, rec_ptr, 4); + const color = getColorFromMemory(buffer, color_ptr); + this.ctx.strokeStyle = color; + this.ctx.lineWidth = lineThick; + this.ctx.strokeRect(x + lineThick/2, y + lineThick/2, w - lineThick, h - lineThick); + } + + MeasureText(text_ptr, fontSize) { + const buffer = this.wasm.instance.exports.memory.buffer; + const text = cstr_by_ptr(buffer, text_ptr); + fontSize *= this.#FONT_SCALE_MAGIC; + this.ctx.font = `${fontSize}px grixel`; + return this.ctx.measureText(text).width; + } + raylib_js_set_entry(entry) { this.entryFunction = this.wasm.instance.exports.__indirect_function_table.get(entry); } diff --git a/wasm/shapes_colors_palette.wasm b/wasm/shapes_colors_palette.wasm new file mode 100755 index 0000000..71a4f9a Binary files /dev/null and b/wasm/shapes_colors_palette.wasm differ