Implementing a Scrolling Background in Raylib

Published: January 10, 2025 · Tags: Game Development, Raylib, C++

Introduction

In 2D games, a scrolling background is a simple but powerful technique to create a sense of motion. This post documents a minimal and practical approach to implementing a looping background in Raylib using C++.

Problem Statement

A static background makes movement feel artificial. The challenge is to move a background texture continuously while ensuring it loops seamlessly without visible jumps or artifacts.

Approach

The approach relies on maintaining a horizontal offset that is updated every frame. Two copies of the same texture are drawn side by side. When one leaves the screen, its position is reset.

Implementation


float bgX = 0.0f;
float scrollSpeed = 100.0f;

void UpdateBackground(float delta) {
    bgX -= scrollSpeed * delta;
    if (bgX <= -background.width) {
        bgX = 0;
    }
}

void DrawBackground() {
    DrawTexture(background, bgX, 0, WHITE);
    DrawTexture(background, bgX + background.width, 0, WHITE);
}

Observations

Using two textures avoids conditional branching during draw
Frame-rate independence is crucial for smooth scrolling
Large textures should be GPU-friendly to avoid stutter

Common Pitfalls

Using integer positions instead of floats
Not accounting for delta time
Improper texture sizing causing seams

Conclusion

A scrolling background is a small system with a big perceptual impact. Keeping the logic minimal and deterministic ensures smooth visuals and predictable behavior.