sprite_animation.c

Frame-based sprite animation using sprite sheets.

Frame-based sprite animation using sprite sheets.Sprite animation works by loading a sprite sheet (multiple frames arranged in a grid) and blitting one frame at a time. By cycling through frames over time, the sprite appears to animate. This example demonstrates the core technique: use a frame counter to calculate which horizontal slice of the sprite sheet to blit each iteration.

 
#include <banjo/app.h>
#include <banjo/main.h>
#include <banjo/bitmap.h>
#include <banjo/event.h>
#include <banjo/log.h>
#include <banjo/memory.h>
#include <banjo/system.h>
#include <banjo/window.h>
 
// This sprite sheet has 7 frames arranged horizontally, each 24x24 pixels.
// Frame layout: [0][1][2][3][4][5][6]
#define SPRITE_W 24
#define SPRITE_H 24
#define FRAMES 7
 
#define WINDOW_W 240
#define WINDOW_H 240
 
bj_window* window               = 0;
// Frame counter determines which frame to display (1-7).
size_t     frame_count          = 1;
bj_bitmap* bmp_rendering        = 0;
bj_bitmap* bmp_sprite_sheet     = 0;
 
// Animation render: blit the current frame from the sprite sheet
// (offset by frame_count) into a small bitmap, then stretch-blit that
// into the window's framebuffer. frame_count advances on a timer in
// step; we just paint whatever it currently points at.
static void on_draw(
    struct bj_window*        w,
    struct bj_render_target* target,
    const struct bj_rect*    dirty,
    void*                    user_data
) {
    (void)w; (void)dirty; (void)user_data;
 
    // The animation technique: blit ONE frame from the sprite sheet by
    // calculating the horizontal offset. Frame 1 starts at x=24, frame 2 at
    // x=48, etc. This shifts which 24x24 region gets copied from the sheet.
    bj_blit(bmp_sprite_sheet, &(bj_rect){
            .x = frame_count * SPRITE_W,  // Horizontal offset into sprite sheet
            .w = 24, .h = 24              // Size of one frame
        }, bmp_rendering, & (bj_rect){.x = 0, .y = 0},
        BJ_BLIT_OP_COPY
    );
 
    // Scale the small 24x24 frame to fill the 240x240 window for visibility.
    bj_blit_stretched(bmp_rendering, 0, bj_render_target_bitmap(target), 0, BJ_BLIT_OP_COPY);
}
 
static void* setup(struct bj_app* app, void* init_data) {
    (void)init_data;
 
    // Create a small off-screen bitmap to hold one animation frame.
    bmp_rendering = bj_create_bitmap(SPRITE_W, SPRITE_H, BJ_PIXEL_MODE_BGR24, 0);
    bj_set_bitmap_color(bmp_rendering, bj_make_bitmap_pixel(bmp_rendering, 0xFF, 0x00, 0x00), BJ_BITMAP_CLEAR_COLOR);
    bj_clear_bitmap(bmp_rendering);
 
    // Load the sprite sheet once. It stays in memory - we just blit different
    // regions from it each frame to create animation.
    bmp_sprite_sheet = bj_create_bitmap_from_file(BANJO_ASSETS_DIR"/bmp/gabe-idle-run.bmp", 0);
 
    if (!bj_begin(BJ_VIDEO_SYSTEM, 0)) {
        bj_quit_app(app, 1);
        return 0;
    }
 
    window = bj_bind_window("sprite sheet - Banjo", 0, 0, WINDOW_W, WINDOW_H, 0, 0);
 
    bj_set_key_callback(bj_close_on_escape, 0);
    bj_set_draw_callback(window, on_draw, 0);
    bj_invalidate_window(window);
    return 0;
}
 
static void step(struct bj_app* app, struct bj_tick_info tick, void* user_data) {
    (void)user_data;
 
    bj_dispatch_events();
 
    // Advance one sprite frame every 120 ms (about 8 FPS), timed from the
    // frame delta so the animation runs at the same speed whatever the
    // app's render rate is. tick.delta is the seconds elapsed since the
    // previous step.
    static double since_frame = 0.0;
    since_frame += tick.delta;
    if (since_frame >= 0.120) {
        since_frame -= 0.120;
        // Advance to the next frame and wrap around (1->2->...->7->1),
        // then request a fresh paint so banjo redraws with the new frame.
        if (++frame_count >= FRAMES) {
            frame_count = 1;
        }
        bj_invalidate_window(window);
    }
 
    if (bj_should_close_window(window)) {
        bj_quit_app(app, 0);
    }
}
 
static void teardown(struct bj_app* app, void* user_data) {
    (void)user_data;
    bj_unbind_window(window);
    bj_end();
 
    // Destroy the sprite sheet and off-screen buffer.
    bj_destroy_bitmap(bmp_sprite_sheet);
    bj_destroy_bitmap(bmp_rendering);
}
 
int main(int argc, char* argv[]) {
    (void)argc; (void)argv;
    return bj_run_app(setup, step, 0, teardown, 0);
}