logo raylib anim
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:verified In headless Chrome, the Zig version gives a final frame byte-identical to the C example built for the web.
//! raylib [shapes] example - logo raylib anim
//!
//! Zig-API translation of examples/shapes/shapes_logo_raylib_anim.c (raylib 6.2).
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2014-2025 Ramon Santamaria (@raysan5)
const rl = @import("raylib");
/// Animation states (state machine).
const State = enum {
blinking, // Small box blinking
top_left_bars, // Top and left bars growing
bottom_right_bars, // Bottom and right bars growing
letters, // Letters appearing (one by one)
replay, // Reset and replay
};
pub fn main() void {
// Initialization
const screen_width = 800;
const screen_height = 450;
rl.initWindow(screen_width, screen_height, "raylib [shapes] example - logo raylib anim");
defer rl.closeWindow(); // Close window and OpenGL context
const logo_position_x = screen_width / 2 - 128;
const logo_position_y = screen_height / 2 - 128;
var frames_counter: i32 = 0;
var letters_count: i32 = 0;
var top_side_rec_width: i32 = 16;
var left_side_rec_height: i32 = 16;
var bottom_side_rec_width: i32 = 16;
var right_side_rec_height: i32 = 16;
var state: State = .blinking; // Tracking animation states (State Machine)
var alpha: f32 = 1.0; // Useful for fading
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
switch (state) {
.blinking => {
frames_counter += 1;
if (frames_counter == 120) {
state = .top_left_bars;
frames_counter = 0; // Reset counter... will be used later...
}
},
.top_left_bars => {
top_side_rec_width += 4;
left_side_rec_height += 4;
if (top_side_rec_width == 256) state = .bottom_right_bars;
},
.bottom_right_bars => {
bottom_side_rec_width += 4;
right_side_rec_height += 4;
if (bottom_side_rec_width == 256) state = .letters;
},
.letters => {
frames_counter += 1;
if (frames_counter >= 12) { // Every 12 frames, one more letter!
letters_count += 1;
frames_counter = 0;
}
if (letters_count >= 10) { // When all letters have appeared, just fade out everything
alpha -= 0.02;
if (alpha <= 0.0) {
alpha = 0.0;
state = .replay;
}
}
},
.replay => {
if (rl.isKeyPressed(.r)) {
frames_counter = 0;
letters_count = 0;
top_side_rec_width = 16;
left_side_rec_height = 16;
bottom_side_rec_width = 16;
right_side_rec_height = 16;
alpha = 1.0;
state = .blinking; // Return to State 0
}
},
}
// Draw
rl.beginDrawing();
defer rl.endDrawing();
rl.clearBackground(.ray_white);
switch (state) {
.blinking => {
if (@mod(@divTrunc(frames_counter, 15), 2) == 1) rl.drawRectangle(logo_position_x, logo_position_y, 16, 16, .black);
},
.top_left_bars => {
rl.drawRectangle(logo_position_x, logo_position_y, top_side_rec_width, 16, .black);
rl.drawRectangle(logo_position_x, logo_position_y, 16, left_side_rec_height, .black);
},
.bottom_right_bars => {
rl.drawRectangle(logo_position_x, logo_position_y, top_side_rec_width, 16, .black);
rl.drawRectangle(logo_position_x, logo_position_y, 16, left_side_rec_height, .black);
rl.drawRectangle(logo_position_x + 240, logo_position_y, 16, right_side_rec_height, .black);
rl.drawRectangle(logo_position_x, logo_position_y + 240, bottom_side_rec_width, 16, .black);
},
.letters => {
const black = rl.fade(.black, alpha);
rl.drawRectangle(logo_position_x, logo_position_y, top_side_rec_width, 16, black);
rl.drawRectangle(logo_position_x, logo_position_y + 16, 16, left_side_rec_height - 32, black);
rl.drawRectangle(logo_position_x + 240, logo_position_y + 16, 16, right_side_rec_height - 32, black);
rl.drawRectangle(logo_position_x, logo_position_y + 240, bottom_side_rec_width, 16, black);
const center_x = @divTrunc(rl.getScreenWidth(), 2);
const center_y = @divTrunc(rl.getScreenHeight(), 2);
rl.drawRectangle(center_x - 112, center_y - 112, 224, 224, rl.fade(.ray_white, alpha));
rl.drawText(rl.textSubtext("raylib", 0, letters_count), center_x - 44, center_y + 48, 50, black);
},
.replay => rl.drawText("[R] REPLAY", 340, 200, 20, .gray),
}
}
}/*******************************************************************************************
*
* raylib [shapes] example - logo raylib anim
*
* Example complexity rating: [★★☆☆] 2/4
*
* Example originally created with raylib 2.5, last time updated with raylib 4.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 [shapes] example - logo raylib anim");
int logoPositionX = screenWidth/2 - 128;
int logoPositionY = screenHeight/2 - 128;
int framesCounter = 0;
int lettersCount = 0;
int topSideRecWidth = 16;
int leftSideRecHeight = 16;
int bottomSideRecWidth = 16;
int rightSideRecHeight = 16;
int state = 0; // Tracking animation states (State Machine)
float alpha = 1.0f; // Useful for fading
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
//----------------------------------------------------------------------------------
if (state == 0) // State 0: Small box blinking
{
framesCounter++;
if (framesCounter == 120)
{
state = 1;
framesCounter = 0; // Reset counter... will be used later...
}
}
else if (state == 1) // State 1: Top and left bars growing
{
topSideRecWidth += 4;
leftSideRecHeight += 4;
if (topSideRecWidth == 256) state = 2;
}
else if (state == 2) // State 2: Bottom and right bars growing
{
bottomSideRecWidth += 4;
rightSideRecHeight += 4;
if (bottomSideRecWidth == 256) state = 3;
}
else if (state == 3) // State 3: Letters appearing (one by one)
{
framesCounter++;
if (framesCounter/12) // Every 12 frames, one more letter!
{
lettersCount++;
framesCounter = 0;
}
if (lettersCount >= 10) // When all letters have appeared, just fade out everything
{
alpha -= 0.02f;
if (alpha <= 0.0f)
{
alpha = 0.0f;
state = 4;
}
}
}
else if (state == 4) // State 4: Reset and Replay
{
if (IsKeyPressed(KEY_R))
{
framesCounter = 0;
lettersCount = 0;
topSideRecWidth = 16;
leftSideRecHeight = 16;
bottomSideRecWidth = 16;
rightSideRecHeight = 16;
alpha = 1.0f;
state = 0; // Return to State 0
}
}
//----------------------------------------------------------------------------------
// Draw
//----------------------------------------------------------------------------------
BeginDrawing();
ClearBackground(RAYWHITE);
if (state == 0)
{
if ((framesCounter/15)%2) DrawRectangle(logoPositionX, logoPositionY, 16, 16, BLACK);
}
else if (state == 1)
{
DrawRectangle(logoPositionX, logoPositionY, topSideRecWidth, 16, BLACK);
DrawRectangle(logoPositionX, logoPositionY, 16, leftSideRecHeight, BLACK);
}
else if (state == 2)
{
DrawRectangle(logoPositionX, logoPositionY, topSideRecWidth, 16, BLACK);
DrawRectangle(logoPositionX, logoPositionY, 16, leftSideRecHeight, BLACK);
DrawRectangle(logoPositionX + 240, logoPositionY, 16, rightSideRecHeight, BLACK);
DrawRectangle(logoPositionX, logoPositionY + 240, bottomSideRecWidth, 16, BLACK);
}
else if (state == 3)
{
DrawRectangle(logoPositionX, logoPositionY, topSideRecWidth, 16, Fade(BLACK, alpha));
DrawRectangle(logoPositionX, logoPositionY + 16, 16, leftSideRecHeight - 32, Fade(BLACK, alpha));
DrawRectangle(logoPositionX + 240, logoPositionY + 16, 16, rightSideRecHeight - 32, Fade(BLACK, alpha));
DrawRectangle(logoPositionX, logoPositionY + 240, bottomSideRecWidth, 16, Fade(BLACK, alpha));
DrawRectangle(GetScreenWidth()/2 - 112, GetScreenHeight()/2 - 112, 224, 224, Fade(RAYWHITE, alpha));
DrawText(TextSubtext("raylib", 0, lettersCount), GetScreenWidth()/2 - 44, GetScreenHeight()/2 + 48, 50, Fade(BLACK, alpha));
}
else if (state == 4)
{
DrawText("[R] REPLAY", 340, 200, 20, GRAY);
}
EndDrawing();
//----------------------------------------------------------------------------------
}
// De-Initialization
//--------------------------------------------------------------------------------------
CloseWindow(); // Close window and OpenGL context
//--------------------------------------------------------------------------------------
return 0;
}From raylib 6.2. The original on GitHub.