highdpi demo
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.
//! raylib [core] example - highdpi demo
//!
//! Zig-API translation of examples/core/core_highdpi_demo.c (raylib 6.2).
//! Example contributed by Jonathan Marler (@marler8997) and reviewed by Ramon Santamaria (@raysan5)
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2025 Jonathan Marler (@marler8997)
const rl = @import("raylib");
pub fn main() void {
// Initialization
const screen_width = 800;
const screen_height = 450;
rl.setConfigFlags(.{ .window_highdpi = true, .window_resizable = true });
rl.initWindow(screen_width, screen_height, "raylib [core] example - highdpi demo");
defer rl.closeWindow(); // Close window and OpenGL context
rl.setWindowMinSize(450, 450);
const logical_grid_desc_y = 120;
const logical_grid_label_y = logical_grid_desc_y + 30;
const logical_grid_top = logical_grid_label_y + 30;
const logical_grid_bottom = logical_grid_top + 80;
const pixel_grid_top = logical_grid_bottom - 20;
const pixel_grid_bottom = pixel_grid_top + 80;
const pixel_grid_label_y = pixel_grid_bottom + 30;
const pixel_grid_desc_y = pixel_grid_label_y + 30;
const cell_size = 50;
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
const monitor_count = rl.getMonitorCount();
if (monitor_count > 1 and rl.isKeyPressed(.n)) {
rl.setWindowMonitor(@mod(rl.getCurrentMonitor() + 1, monitor_count));
}
const current_monitor = rl.getCurrentMonitor();
const dpi_scale = rl.getWindowScaleDPI();
const cell_size_px = @as(f32, cell_size) / dpi_scale.x;
// Draw
rl.beginDrawing();
defer rl.endDrawing();
rl.clearBackground(.ray_white);
const window_center = @divTrunc(rl.getScreenWidth(), 2);
drawTextCenter(rl.textFormat("Dpi Scale: {d:.6}", .{dpi_scale.x}), window_center, 30, 40, .dark_gray);
drawTextCenter(rl.textFormat("Monitor: {d}/{d} ([N] next monitor)", .{ current_monitor + 1, monitor_count }), window_center, 70, 20, .light_gray);
drawTextCenter(rl.textFormat("Window is {d} \"logical points\" wide", .{rl.getScreenWidth()}), window_center, logical_grid_desc_y, 20, .orange);
var odd = true;
var i: i32 = cell_size;
while (i < rl.getScreenWidth()) : ({
i += cell_size;
odd = !odd;
}) {
if (odd) rl.drawRectangle(i, logical_grid_top, cell_size, logical_grid_bottom - logical_grid_top, .orange);
drawTextCenter(rl.textFormat("{d}", .{i}), i, logical_grid_label_y, 10, .light_gray);
rl.drawLine(i, logical_grid_label_y + 10, i, logical_grid_bottom, .gray);
}
odd = true;
const min_text_space = 30;
var last_text_x: i32 = -min_text_space;
i = cell_size;
while (i < rl.getRenderWidth()) : ({
i += cell_size;
odd = !odd;
}) {
const x: i32 = @intFromFloat(@as(f32, @floatFromInt(i)) / dpi_scale.x);
if (odd) rl.drawRectangle(x, pixel_grid_top, @intFromFloat(cell_size_px), pixel_grid_bottom - pixel_grid_top, .{ .r = 0, .g = 121, .b = 241, .a = 100 });
rl.drawLine(x, pixel_grid_top, x, pixel_grid_label_y - 10, .gray);
if (x - last_text_x >= min_text_space) {
drawTextCenter(rl.textFormat("{d}", .{i}), x, pixel_grid_label_y, 10, .light_gray);
last_text_x = x;
}
}
drawTextCenter(rl.textFormat("Window is {d} \"physical pixels\" wide", .{rl.getRenderWidth()}), window_center, pixel_grid_desc_y, 20, .blue);
const text = "Can you see this?";
const size = rl.measureTextEx(rl.getFontDefault(), text, 20, 3);
const pos: rl.Vector2 = .{
.x = @as(f32, @floatFromInt(rl.getScreenWidth())) - size.x - 5,
.y = @as(f32, @floatFromInt(rl.getScreenHeight())) - size.y - 5,
};
rl.drawTextEx(rl.getFontDefault(), text, pos, 20, 3, .light_gray);
}
}
fn drawTextCenter(text: [:0]const u8, x: i32, y: i32, font_size: i32, color: rl.Color) void {
const size = rl.measureTextEx(rl.getFontDefault(), text, @floatFromInt(font_size), 3);
const pos: rl.Vector2 = .{
.x = @as(f32, @floatFromInt(x)) - size.x / 2,
.y = @as(f32, @floatFromInt(y)) - size.y / 2,
};
rl.drawTextEx(rl.getFontDefault(), text, pos, @floatFromInt(font_size), 3, color);
}/*******************************************************************************************
*
* raylib [core] example - highdpi demo
*
* Example complexity rating: [★★☆☆] 2/4
*
* Example originally created with raylib 5.0, last time updated with raylib 5.5
*
* Example contributed by Jonathan Marler (@marler8997) and reviewed by Ramon Santamaria (@raysan5)
*
* 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) 2025 Jonathan Marler (@marler8997)
*
********************************************************************************************/
#include "raylib.h"
//------------------------------------------------------------------------------------
// Module Functions Declaration
//------------------------------------------------------------------------------------
static void DrawTextCenter(const char *text, int x, int y, int fontSize, Color color);
//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
// Initialization
//--------------------------------------------------------------------------------------
const int screenWidth = 800;
const int screenHeight = 450;
SetConfigFlags(FLAG_WINDOW_HIGHDPI | FLAG_WINDOW_RESIZABLE);
InitWindow(screenWidth, screenHeight, "raylib [core] example - highdpi demo");
SetWindowMinSize(450, 450);
int logicalGridDescY = 120;
int logicalGridLabelY = logicalGridDescY + 30;
int logicalGridTop = logicalGridLabelY + 30;
int logicalGridBottom = logicalGridTop + 80;
int pixelGridTop = logicalGridBottom - 20;
int pixelGridBottom = pixelGridTop + 80;
int pixelGridLabelY = pixelGridBottom + 30;
int pixelGridDescY = pixelGridLabelY + 30;
int cellSize = 50;
float cellSizePx = (float)cellSize;
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
//----------------------------------------------------------------------------------
int monitorCount = GetMonitorCount();
if ((monitorCount > 1) && IsKeyPressed(KEY_N))
{
SetWindowMonitor((GetCurrentMonitor() + 1)%monitorCount);
}
int currentMonitor = GetCurrentMonitor();
Vector2 dpiScale = GetWindowScaleDPI();
cellSizePx = ((float)cellSize)/dpiScale.x;
//----------------------------------------------------------------------------------
// Draw
//----------------------------------------------------------------------------------
BeginDrawing();
ClearBackground(RAYWHITE);
int windowCenter = GetScreenWidth()/2;
DrawTextCenter(TextFormat("Dpi Scale: %f", dpiScale.x), windowCenter, 30, 40, DARKGRAY);
DrawTextCenter(TextFormat("Monitor: %d/%d ([N] next monitor)", currentMonitor+1, monitorCount), windowCenter, 70, 20, LIGHTGRAY);
DrawTextCenter(TextFormat("Window is %d \"logical points\" wide", GetScreenWidth()), windowCenter, logicalGridDescY, 20, ORANGE);
bool odd = true;
for (int i = cellSize; i < GetScreenWidth(); i += cellSize, odd = !odd)
{
if (odd) DrawRectangle(i, logicalGridTop, cellSize, logicalGridBottom-logicalGridTop, ORANGE);
DrawTextCenter(TextFormat("%d", i), i, logicalGridLabelY, 10, LIGHTGRAY);
DrawLine(i, logicalGridLabelY + 10, i, logicalGridBottom, GRAY);
}
odd = true;
const int minTextSpace = 30;
int lastTextX = -minTextSpace;
for (int i = cellSize; i < GetRenderWidth(); i += cellSize, odd = !odd)
{
int x = (int)(((float)i)/dpiScale.x);
if (odd) DrawRectangle(x, pixelGridTop, (int)cellSizePx, pixelGridBottom - pixelGridTop, CLITERAL(Color){ 0, 121, 241, 100 });
DrawLine(x, pixelGridTop, (int)(((float)i)/dpiScale.x), pixelGridLabelY - 10, GRAY);
if ((x - lastTextX) >= minTextSpace)
{
DrawTextCenter(TextFormat("%d", i), x, pixelGridLabelY, 10, LIGHTGRAY);
lastTextX = x;
}
}
DrawTextCenter(TextFormat("Window is %d \"physical pixels\" wide", GetRenderWidth()), windowCenter, pixelGridDescY, 20, BLUE);
const char *text = "Can you see this?";
Vector2 size = MeasureTextEx(GetFontDefault(), text, 20, 3);
Vector2 pos = (Vector2){ GetScreenWidth() - size.x - 5, GetScreenHeight() - size.y - 5 };
DrawTextEx(GetFontDefault(), text, pos, 20, 3, LIGHTGRAY);
EndDrawing();
//----------------------------------------------------------------------------------
}
// De-Initialization
//--------------------------------------------------------------------------------------
CloseWindow(); // Close window and OpenGL context
//--------------------------------------------------------------------------------------
return 0;
}
//------------------------------------------------------------------------------------
// Module Functions Definition
//------------------------------------------------------------------------------------
static void DrawTextCenter(const char *text, int x, int y, int fontSize, Color color)
{
Vector2 size = MeasureTextEx(GetFontDefault(), text, (float)fontSize, 3);
Vector2 pos = (Vector2){ x - size.x/2, y - size.y/2 };
DrawTextEx(GetFontDefault(), text, pos, (float)fontSize, 3, color);
}From raylib 6.2. The original on GitHub.