font spritefont

★☆☆☆by Ramon Santamaria (@raysan5)

There is no browser build of this example yet.

Is it the same as C?

Desktop:verified The Zig version renders a final frame that is byte-identical to the C example.
Browser:not checked yet The browser comparison does not cover this example yet.

ZigC (original)

//! raylib [text] example - font spritefont
//!
//! NOTE: Sprite fonts should be generated following this conventions:
//!   - Characters must be ordered starting with character 32 (Space)
//!   - Every character must be contained within the same Rectangle height
//!   - Every character and every line must be separated by the same distance (margin/padding)
//!   - Rectangles must be defined by a MAGENTA color background
//!
//! Following those constraints, a font can be provided just by an image,
//! this is quite handy to avoid additional font descriptor files (like BMFonts use)
//!
//! Zig-API translation of examples/text/text_font_spritefont.c (raylib 6.2).
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2014-2025 Ramon Santamaria (@raysan5)

const rl = @import("raylib");

pub fn main() !void {
    // Initialization
    const screen_width = 800;
    const screen_height = 450;

    rl.initWindow(screen_width, screen_height, "raylib [text] example - font spritefont");
    defer rl.closeWindow(); // Close window and OpenGL context

    const msg1 = "THIS IS A custom SPRITE FONT...";
    const msg2 = "...and this is ANOTHER CUSTOM font...";
    const msg3 = "...and a THIRD one! GREAT! :D";

    // NOTE: Textures/Fonts MUST be loaded after Window initialization (OpenGL context is required)
    const font1 = try rl.loadFont("resources/custom_mecha.png"); // Font loading
    defer rl.unloadFont(font1);
    const font2 = try rl.loadFont("resources/custom_alagard.png"); // Font loading
    defer rl.unloadFont(font2);
    const font3 = try rl.loadFont("resources/custom_jupiter_crash.png"); // Font loading
    defer rl.unloadFont(font3);

    const font_position1: rl.Vector2 = .{
        .x = screen_width / 2.0 - rl.measureTextEx(font1, msg1, @floatFromInt(font1.baseSize), -3).x / 2,
        .y = screen_height / 2.0 - @as(f32, @floatFromInt(font1.baseSize)) / 2.0 - 80.0,
    };

    const font_position2: rl.Vector2 = .{
        .x = screen_width / 2.0 - rl.measureTextEx(font2, msg2, @floatFromInt(font2.baseSize), -2.0).x / 2.0,
        .y = screen_height / 2.0 - @as(f32, @floatFromInt(font2.baseSize)) / 2.0 - 10.0,
    };

    const font_position3: rl.Vector2 = .{
        .x = screen_width / 2.0 - rl.measureTextEx(font3, msg3, @floatFromInt(font3.baseSize), 2.0).x / 2.0,
        .y = screen_height / 2.0 - @as(f32, @floatFromInt(font3.baseSize)) / 2.0 + 50.0,
    };

    rl.setTargetFPS(60); // Set our game to run at 60 frames-per-second

    // Main game loop
    while (!rl.windowShouldClose()) { // Detect window close button or ESC key
        // Draw
        rl.beginDrawing();
        defer rl.endDrawing();

        rl.clearBackground(.ray_white);

        rl.drawTextEx(font1, msg1, font_position1, @floatFromInt(font1.baseSize), -3, .white);
        rl.drawTextEx(font2, msg2, font_position2, @floatFromInt(font2.baseSize), -2, .white);
        rl.drawTextEx(font3, msg3, font_position3, @floatFromInt(font3.baseSize), 2, .white);
    }
}

/*******************************************************************************************
*
*   raylib [text] example - font spritefont
*
*   Example complexity rating: [★☆☆☆] 1/4
*
*   NOTE: Sprite fonts should be generated following this conventions:
*
*     - Characters must be ordered starting with character 32 (Space)
*     - Every character must be contained within the same Rectangle height
*     - Every character and every line must be separated by the same distance (margin/padding)
*     - Rectangles must be defined by a MAGENTA color background
*
*   Following those constraints, a font can be provided just by an image,
*   this is quite handy to avoid additional font descriptor files (like BMFonts use)
*
*   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-2025 Ramon Santamaria (@raysan5)
*
********************************************************************************************/

#include "raylib.h"

//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
    // Initialization
    //--------------------------------------------------------------------------------------
    const int screenWidth = 800;
    const int screenHeight = 450;

    InitWindow(screenWidth, screenHeight, "raylib [text] example - font spritefont");

    const char msg1[50] = "THIS IS A custom SPRITE FONT...";
    const char msg2[50] = "...and this is ANOTHER CUSTOM font...";
    const char msg3[50] = "...and a THIRD one! GREAT! :D";

    // NOTE: Textures/Fonts MUST be loaded after Window initialization (OpenGL context is required)
    Font font1 = LoadFont("resources/custom_mecha.png");          // Font loading
    Font font2 = LoadFont("resources/custom_alagard.png");        // Font loading
    Font font3 = LoadFont("resources/custom_jupiter_crash.png");  // Font loading

    Vector2 fontPosition1 = { screenWidth/2.0f - MeasureTextEx(font1, msg1, (float)font1.baseSize, -3).x/2,
                              screenHeight/2.0f - font1.baseSize/2.0f - 80.0f };

    Vector2 fontPosition2 = { screenWidth/2.0f - MeasureTextEx(font2, msg2, (float)font2.baseSize, -2.0f).x/2.0f,
                              screenHeight/2.0f - font2.baseSize/2.0f - 10.0f };

    Vector2 fontPosition3 = { screenWidth/2.0f - MeasureTextEx(font3, msg3, (float)font3.baseSize, 2.0f).x/2.0f,
                              screenHeight/2.0f - font3.baseSize/2.0f + 50.0f };

    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
    //--------------------------------------------------------------------------------------

    // Main game loop
    while (!WindowShouldClose())    // Detect window close button or ESC key
    {
        // Update
        //----------------------------------------------------------------------------------
        // TODO: Update variables here...
        //----------------------------------------------------------------------------------

        // Draw
        //----------------------------------------------------------------------------------
        BeginDrawing();

            ClearBackground(RAYWHITE);

            DrawTextEx(font1, msg1, fontPosition1, (float)font1.baseSize, -3, WHITE);
            DrawTextEx(font2, msg2, fontPosition2, (float)font2.baseSize, -2, WHITE);
            DrawTextEx(font3, msg3, fontPosition3, (float)font3.baseSize, 2, WHITE);

        EndDrawing();
        //----------------------------------------------------------------------------------
    }

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadFont(font1);      // Font unloading
    UnloadFont(font2);      // Font unloading
    UnloadFont(font3);      // Font unloading

    CloseWindow();          // Close window and OpenGL context
    //--------------------------------------------------------------------------------------

    return 0;
}

From raylib 6.2. The original on GitHub.