Loading and Displaying Images

Efficient Parallax Scrolling

What's the most efficient way to implement parallax scrolling using multiple image layers?

Abstract art representing computer programming

Implementing efficient parallax scrolling with multiple image layers in SDL2 involves carefully managing image rendering and movement. Here's an approach that balances performance and visual quality:

Parallax Layer Class

First, let's create a ParallaxLayer class to manage each layer:

1#include <SDL.h>
2#include <string>
3#include <vector>
4
5class ParallaxLayer {
6public:
7  ParallaxLayer(SDL_Renderer* renderer,
8                const std::string& imagePath,
9                float scrollSpeed)
10    : ScrollSpeed{scrollSpeed}, Offset{0} {
11    SDL_Surface* surface = SDL_LoadBMP(
12      imagePath.c_str());
13    Texture = SDL_CreateTextureFromSurface(
14      renderer, surface);
15    SDL_FreeSurface(surface);
16    SDL_QueryTexture(Texture, nullptr, nullptr,
17                     &Width, &Height);
18  }
19
20  void Update(float deltaTime) {
21    Offset += ScrollSpeed * deltaTime;
22    if (Offset > Width) Offset -= Width;
23    if (Offset < 0) Offset += Width;
24  }
25
26  void Render(SDL_Renderer* renderer,
27              int screenWidth,
28              int screenHeight) {
29    int x = static_cast<int>(-Offset);
30    while (x < screenWidth) {
31      SDL_Rect destRect{
32        x, 0, Width, screenHeight};
33      SDL_RenderCopy(renderer, Texture, nullptr,
34                     &destRect);
35      x += Width;
36    }
37  }
38
39  ~ParallaxLayer() {
40    SDL_DestroyTexture(Texture);
41  }
42
43private:
44  SDL_Texture* Texture;
45  int Width, Height;
46  float ScrollSpeed;
47  float Offset;
48};

Main Implementation

Now, let's use this class to create a parallax effect:

1#include <SDL.h>
2
3#include <chrono>
4#include <vector>
5
6int main(int argc, char* argv[]) {
7  SDL_Init(SDL_INIT_VIDEO);
8  SDL_Window* window =
9    SDL_CreateWindow("Parallax Scrolling",
10                     SDL_WINDOWPOS_UNDEFINED,
11                     SDL_WINDOWPOS_UNDEFINED,
12                     800, 600, 0);
13  SDL_Renderer* renderer =
14    SDL_CreateRenderer(window, -1,
15                       SDL_RENDERER_ACCELERATED);
16
17  std::vector<ParallaxLayer> layers;
18  layers.emplace_back(renderer,
19                      "background.bmp", 10);
20  layers.emplace_back(renderer, "midground.bmp",
21                      30);
22  layers.emplace_back(renderer,
23                      "foreground.bmp", 60);
24
25  bool quit = false;
26  SDL_Event e;
27  auto lastTime =
28    std::chrono::high_resolution_clock::now();
29
30  while (!quit) {
31    while (SDL_PollEvent(&e) != 0) {
32      if (e.type == SDL_QUIT) quit = true;
33    }
34
35    auto currentTime =
36      std::chrono::high_resolution_clock::now();
37    float deltaTime =
38      std::chrono::duration<float>(
39        currentTime - lastTime).count();
40    lastTime = currentTime;
41
42    for (auto& layer : layers) {
43      layer.Update(deltaTime);
44    }
45
46    SDL_SetRenderDrawColor(renderer, 0, 0, 0,
47                           255);
48    SDL_RenderClear(renderer);
49
50    for (auto& layer : layers) {
51      layer.Render(renderer, 800, 600);
52    }
53
54    SDL_RenderPresent(renderer);
55  }
56
57  SDL_DestroyRenderer(renderer);
58  SDL_DestroyWindow(window);
59  SDL_Quit();
60  return 0;
61}

This implementation is efficient because:

It uses SDL's hardware-accelerated rendering with SDL_Renderer and SDL_Texture.
Each layer is rendered only twice at most per frame, regardless of scroll speed.
The Update() method uses time-based movement, ensuring smooth scrolling on different devices.

To further optimize: