diff --git a/build.zig b/build.zig index e0e25b6..11bf69c 100644 --- a/build.zig +++ b/build.zig @@ -314,6 +314,11 @@ pub fn build(b: *std.Build) !void { .path = "examples/text/font_loading.zig", .desc = "Demonstrates how to load fonts", }, + .{ + .name = "font_sdf", + .path = "examples/text/font_sdf.zig", + .desc = "Demonstrates rending a sdf font", + }, .{ .name = "text_format_text", .path = "examples/text/text_format_text.zig", diff --git a/examples/text/font_sdf.zig b/examples/text/font_sdf.zig new file mode 100644 index 0000000..e6bcd4c --- /dev/null +++ b/examples/text/font_sdf.zig @@ -0,0 +1,132 @@ +//!******************************************************************************************* +//! +//! raylib-zig port of the [text] example - Font SDF loading +//! https://github.com/raysan5/raylib/blob/master/examples/text/text_font_sdf.c +//! +//! Example complexity rating: [★★★☆] 3/4 +//! +//! Example originally created with raylib 1.3, last time updated with raylib 4.0 +//! +//! Translated to raylib-zig by Timothy Fiss (@TheFissk) +//! +//! 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) 2015-2025 Ramon Santamaria (@raysan5) +//! +//!******************************************************************************************* + +const std = @import("std"); +const rl = @import("raylib"); + +//------------------------------------------------------------------------------------ +// Program main entry point +//------------------------------------------------------------------------------------ +pub fn main() anyerror!void { + // Initialization + //-------------------------------------------------------------------------------------- + const screen_width = 800; + const screen_height = 450; + + rl.initWindow(screen_width, screen_height, "raylib [text] example - SDF fonts"); + defer rl.closeWindow(); + + // NOTE: Textures/Fonts MUST be loaded after Window initialization (OpenGL context is required) + + const msg = "Signed Distance Fields"; + + // Loading file to memory + const font_default = try rl.loadFontEx("examples/text/resources/anonymous_pro_bold.ttf", 16, null); + defer font_default.unload(); + var font_sdf: rl.Font = font_default; + defer font_sdf.unload(); + { + // SDF font generation from TTF font + const file_data = try rl.loadFileData("examples/text/resources/anonymous_pro_bold.ttf"); + defer rl.unloadFileData(file_data); // Free memory from loaded file + + font_sdf = .{ + .baseSize = 16, + .glyphCount = 95, + .glyphPadding = 0, + .glyphs = @ptrCast(try rl.loadFontData(@ptrCast(file_data), 16, null, .sdf)), + .texture = undefined, + .recs = undefined, + }; + const atlas_image, const atlas_recs = try rl.genImageFontAtlas(font_sdf.glyphs[0..@intCast(font_sdf.glyphCount)], font_sdf.baseSize, 0, 1); + defer atlas_image.unload(); + font_sdf.texture = try rl.loadTextureFromImage(atlas_image); + font_sdf.recs = @ptrCast(atlas_recs); + } + + // Load SDF required shader (we use default vertex shader) + const shader = try rl.loadShader(null, "examples/text/resources/shaders/glsl330/sdf.fs"); + defer rl.unloadShader(shader); + rl.setTextureFilter(font_sdf.texture, .bilinear); // Required for SDF font + + var font_position = rl.Vector2{ .x = 40, .y = @as(f32, @floatFromInt(screen_height)) / 2.0 - 50 }; + var text_size = rl.Vector2{ .x = 0.0, .y = 0.0 }; + var font_size: f32 = 16.0; + var current_font: i32 = 0; // 0 - fontDefault, 1 - fontSDF + + 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 + { + // Update + //---------------------------------------------------------------------------------- + font_size += rl.getMouseWheelMove() * 8.0; + + if (font_size < 6) font_size = 6; + + if (rl.isKeyDown(.space)) { + current_font = 1; + } else { + current_font = 0; + } + + if (current_font == 0) { + text_size = rl.measureTextEx(font_default, msg, font_size, 0); + } else { + text_size = rl.measureTextEx(font_sdf, msg, font_size, 0); + } + + font_position.x = @as(f32, @floatFromInt(rl.getScreenWidth())) / 2 - text_size.x / 2; + font_position.y = @as(f32, @floatFromInt(rl.getScreenHeight())) / 2 - text_size.y / 2 + 80; + //---------------------------------------------------------------------------------- + + // Draw + //---------------------------------------------------------------------------------- + rl.beginDrawing(); + defer rl.endDrawing(); + + rl.clearBackground(.ray_white); + + if (current_font == 1) { + // NOTE: SDF fonts require a custom SDf shader to compute fragment color + rl.beginShaderMode(shader); // Activate SDF font shader + rl.drawTextEx(font_sdf, msg, font_position, font_size, 0, .black); + rl.endShaderMode(); // Activate our default shader for next drawings + + rl.drawTexture(font_sdf.texture, 10, 10, .black); + } else { + rl.drawTextEx(font_default, msg, font_position, font_size, 0, .black); + rl.drawTexture(font_default.texture, 10, 10, .black); + } + + if (current_font == 1) { + rl.drawText("SDF!", 320, 20, 80, .red); + } else { + rl.drawText("default font", 315, 40, 30, .gray); + } + + rl.drawText("FONT SIZE: 16.0", rl.getScreenWidth() - 240, 20, 20, .dark_gray); + rl.drawText(rl.textFormat("RENDER SIZE: %02.02f", .{font_size}), rl.getScreenWidth() - 240, 50, 20, .dark_gray); + rl.drawText("Use MOUSE WHEEL to SCALE TEXT!", rl.getScreenWidth() - 240, 90, 10, .dark_gray); + rl.drawText("HOLD SPACE to USE SDF FONT VERSION!", 340, rl.getScreenHeight() - 30, 20, .maroon); + + //---------------------------------------------------------------------------------- + } +} diff --git a/examples/text/resources/shaders/glsl100/alpha_discard.fs b/examples/text/resources/shaders/glsl100/alpha_discard.fs new file mode 100644 index 0000000..15aacf5 --- /dev/null +++ b/examples/text/resources/shaders/glsl100/alpha_discard.fs @@ -0,0 +1,20 @@ +#version 100 + +precision mediump float; + +// Input vertex attributes (from vertex shader) +varying vec2 fragTexCoord; +varying vec4 fragColor; + +// Input uniform values +uniform sampler2D texture0; +uniform vec4 colDiffuse; + +void main() +{ + vec4 texelColor = texture2D(texture0, fragTexCoord); + + if (texelColor.a == 0.0) discard; + + gl_FragColor = texelColor*fragColor*colDiffuse; +} diff --git a/examples/text/resources/shaders/glsl100/sdf.fs b/examples/text/resources/shaders/glsl100/sdf.fs new file mode 100644 index 0000000..74c4823 --- /dev/null +++ b/examples/text/resources/shaders/glsl100/sdf.fs @@ -0,0 +1,25 @@ +#version 100 + +precision mediump float; + +// Input vertex attributes (from vertex shader) +varying vec2 fragTexCoord; +varying vec4 fragColor; + +// Input uniform values +uniform sampler2D texture0; +uniform vec4 colDiffuse; + +// NOTE: Add your custom variables here +const float smoothing = 1.0/16.0; + +void main() +{ + // Texel color fetching from texture sampler + // NOTE: Calculate alpha using signed distance field (SDF) + float distance = texture2D(texture0, fragTexCoord).a; + float alpha = smoothstep(0.5 - smoothing, 0.5 + smoothing, distance); + + // Calculate final fragment color + gl_FragColor = vec4(fragColor.rgb, fragColor.a*alpha); +} diff --git a/examples/text/resources/shaders/glsl330/sdf.fs b/examples/text/resources/shaders/glsl330/sdf.fs new file mode 100644 index 0000000..782e712 --- /dev/null +++ b/examples/text/resources/shaders/glsl330/sdf.fs @@ -0,0 +1,26 @@ +#version 330 + +// Input vertex attributes (from vertex shader) +in vec2 fragTexCoord; +in vec4 fragColor; + +// Input uniform values +uniform sampler2D texture0; +uniform vec4 colDiffuse; + +// Output fragment color +out vec4 finalColor; + +// NOTE: Add your custom variables here + +void main() +{ + // Texel color fetching from texture sampler + // NOTE: Calculate alpha using signed distance field (SDF) + float distanceFromOutline = texture(texture0, fragTexCoord).a - 0.5; + float distanceChangePerFragment = length(vec2(dFdx(distanceFromOutline), dFdy(distanceFromOutline))); + float alpha = smoothstep(-distanceChangePerFragment, distanceChangePerFragment, distanceFromOutline); + + // Calculate final fragment color + finalColor = vec4(fragColor.rgb, fragColor.a*alpha); +}