image channel

★★☆☆by Bruno Cabral (@brccabral)

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 [textures] example - image channel
//!
//! NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
//!
//! Zig-API translation of examples/textures/textures_image_channel.c (raylib 6.2).
//! Example contributed by Bruno Cabral (@brccabral) and reviewed by Ramon Santamaria (@raysan5)
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2024-2025 Bruno Cabral (@brccabral) and 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 [textures] example - image channel");
    defer rl.closeWindow(); // Close window and OpenGL context

    const fudesumi_image = try rl.loadImage("resources/fudesumi.png");

    var image_alpha = rl.imageFromChannel(fudesumi_image, 3);
    rl.imageAlphaMask(&image_alpha, image_alpha);

    var image_red = rl.imageFromChannel(fudesumi_image, 0);
    rl.imageAlphaMask(&image_red, image_alpha);

    var image_green = rl.imageFromChannel(fudesumi_image, 1);
    rl.imageAlphaMask(&image_green, image_alpha);

    var image_blue = rl.imageFromChannel(fudesumi_image, 2);
    rl.imageAlphaMask(&image_blue, image_alpha);

    const background_image = rl.genImageChecked(screen_width, screen_height, screen_width / 20, screen_height / 20, .orange, .yellow);

    const fudesumi_texture = try rl.loadTextureFromImage(fudesumi_image);
    defer rl.unloadTexture(fudesumi_texture);
    const texture_alpha = try rl.loadTextureFromImage(image_alpha);
    defer rl.unloadTexture(texture_alpha);
    const texture_red = try rl.loadTextureFromImage(image_red);
    defer rl.unloadTexture(texture_red);
    const texture_green = try rl.loadTextureFromImage(image_green);
    defer rl.unloadTexture(texture_green);
    const texture_blue = try rl.loadTextureFromImage(image_blue);
    defer rl.unloadTexture(texture_blue);
    const background_texture = try rl.loadTextureFromImage(background_image);
    defer rl.unloadTexture(background_texture);

    rl.unloadImage(fudesumi_image);
    rl.unloadImage(image_alpha);
    rl.unloadImage(image_red);
    rl.unloadImage(image_green);
    rl.unloadImage(image_blue);
    rl.unloadImage(background_image);

    const fudesumi_width: f32 = @floatFromInt(fudesumi_image.width);
    const fudesumi_height: f32 = @floatFromInt(fudesumi_image.height);
    const fudesumi_rec: rl.Rectangle = .{ .x = 0, .y = 0, .width = fudesumi_width, .height = fudesumi_height };

    const fudesumi_pos: rl.Rectangle = .{ .x = 50, .y = 10, .width = fudesumi_width * 0.8, .height = fudesumi_height * 0.8 };
    const half_width = fudesumi_pos.width / 2.0;
    const half_height = fudesumi_pos.height / 2.0;
    const red_pos: rl.Rectangle = .{ .x = 410, .y = 10, .width = half_width, .height = half_height };
    const green_pos: rl.Rectangle = .{ .x = 600, .y = 10, .width = half_width, .height = half_height };
    const blue_pos: rl.Rectangle = .{ .x = 410, .y = 230, .width = half_width, .height = half_height };
    const alpha_pos: rl.Rectangle = .{ .x = 600, .y = 230, .width = half_width, .height = half_height };

    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
        // Nothing to update...

        // Draw
        rl.beginDrawing();
        defer rl.endDrawing();

        const origin: rl.Vector2 = .{ .x = 0, .y = 0 };
        rl.drawTexture(background_texture, 0, 0, .white);
        rl.drawTexturePro(fudesumi_texture, fudesumi_rec, fudesumi_pos, origin, 0, .white);

        rl.drawTexturePro(texture_red, fudesumi_rec, red_pos, origin, 0, .red);
        rl.drawTexturePro(texture_green, fudesumi_rec, green_pos, origin, 0, .green);
        rl.drawTexturePro(texture_blue, fudesumi_rec, blue_pos, origin, 0, .blue);
        rl.drawTexturePro(texture_alpha, fudesumi_rec, alpha_pos, origin, 0, .white);
    }
}

/*******************************************************************************************
*
*   raylib [textures] example - image channel
*
*   NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
*
*   Example complexity rating: [★★☆☆] 2/4
*
*   Example originally created with raylib 5.5, last time updated with raylib 5.5
*
*   Example contributed by Bruno Cabral (@brccabral) 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) 2024-2025 Bruno Cabral (@brccabral) and 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 [textures] example - image channel");

    Image fudesumiImage = LoadImage("resources/fudesumi.png");

    Image imageAlpha = ImageFromChannel(fudesumiImage, 3);
    ImageAlphaMask(&imageAlpha, imageAlpha);

    Image imageRed = ImageFromChannel(fudesumiImage, 0);
    ImageAlphaMask(&imageRed, imageAlpha);

    Image imageGreen = ImageFromChannel(fudesumiImage, 1);
    ImageAlphaMask(&imageGreen, imageAlpha);

    Image imageBlue = ImageFromChannel(fudesumiImage, 2);
    ImageAlphaMask(&imageBlue, imageAlpha);

    Image backgroundImage = GenImageChecked(screenWidth, screenHeight, screenWidth/20, screenHeight/20, ORANGE, YELLOW);

    Texture2D fudesumiTexture = LoadTextureFromImage(fudesumiImage);
    Texture2D textureAlpha = LoadTextureFromImage(imageAlpha);
    Texture2D textureRed = LoadTextureFromImage(imageRed);
    Texture2D textureGreen = LoadTextureFromImage(imageGreen);
    Texture2D textureBlue = LoadTextureFromImage(imageBlue);
    Texture2D backgroundTexture = LoadTextureFromImage(backgroundImage);

    UnloadImage(fudesumiImage);
    UnloadImage(imageAlpha);
    UnloadImage(imageRed);
    UnloadImage(imageGreen);
    UnloadImage(imageBlue);
    UnloadImage(backgroundImage);

    Rectangle fudesumiRec = {0, 0, (float)fudesumiImage.width, (float)fudesumiImage.height};

    Rectangle fudesumiPos = {50, 10, fudesumiImage.width*0.8f, fudesumiImage.height*0.8f};
    Rectangle redPos = { 410, 10, fudesumiPos.width/2.0f, fudesumiPos.height/2.0f };
    Rectangle greenPos = { 600, 10, fudesumiPos.width/2.0f, fudesumiPos.height/2.0f };
    Rectangle bluePos = { 410, 230, fudesumiPos.width/2.0f, fudesumiPos.height/2.0f };
    Rectangle alphaPos = { 600, 230, fudesumiPos.width/2.0f, fudesumiPos.height/2.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
        //----------------------------------------------------------------------------------
        // Nothing to update...
        //----------------------------------------------------------------------------------

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

            DrawTexture(backgroundTexture, 0, 0, WHITE);
            DrawTexturePro(fudesumiTexture, fudesumiRec, fudesumiPos, (Vector2) {0, 0}, 0, WHITE);

            DrawTexturePro(textureRed, fudesumiRec, redPos, (Vector2) {0, 0}, 0, RED);
            DrawTexturePro(textureGreen, fudesumiRec, greenPos, (Vector2) {0, 0}, 0, GREEN);
            DrawTexturePro(textureBlue, fudesumiRec, bluePos, (Vector2) {0, 0}, 0, BLUE);
            DrawTexturePro(textureAlpha, fudesumiRec, alphaPos, (Vector2) {0, 0}, 0, WHITE);

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

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadTexture(backgroundTexture);
    UnloadTexture(fudesumiTexture);
    UnloadTexture(textureRed);
    UnloadTexture(textureGreen);
    UnloadTexture(textureBlue);
    UnloadTexture(textureAlpha);

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

    return 0;
}

From raylib 6.2. The original on GitHub.