How do I create a simple slideshow effect by changing the source rectangle?

Question

Ryan McCombe · Accepted Answer

Creating a slideshow effect by changing the source rectangle is a great way to display different parts of a larger image sequentially.

This technique is often used in games for animations or in applications for image galleries. Here's how you can implement a simple slideshow effect in SDL2:

1#include <SDL.h>
2
3#include <iostream>
4#include <vector>
5
6class Slideshow {
7public:
8  Slideshow(const char* file, int frameWidth,
9            int frameHeight)
10    : surface{SDL_LoadBMP(file)},
11      frameWidth{frameWidth},
12      frameHeight{frameHeight},
13      currentFrame{0} {
14    if (!surface) {
15      std::cerr << "Failed to load image: " <<
16        SDL_GetError() << '\n';
17      return;
18    }
19
20    // Calculate number of frames
21    int cols = surface->w / frameWidth;
22    int rows = surface->h / frameHeight;
23    totalFrames = cols * rows;
24
25    // Prepare frame rectangles
26    for (int y = 0; y < rows; ++y) {
27      for (int x = 0; x < cols; ++x) {
28        frames.push_back(
29          SDL_Rect{
30            x * frameWidth, y * frameHeight,
31            frameWidth, frameHeight});
32      }
33    }
34  }
35
36  void Render(SDL_Surface* destSurface, int x,
37              int y) {
38    if (!surface || !destSurface || frames.
39      empty()) return;
40
41    SDL_Rect destRect{
42      x, y, frameWidth, frameHeight};
43    SDL_BlitSurface(surface,
44                    &frames[currentFrame],
45                    destSurface, &destRect);
46  }
47
48  void NextFrame() {
49    currentFrame = (currentFrame + 1) %
50      totalFrames;
51  }
52
53  ~Slideshow() {
54    if (surface) SDL_FreeSurface(surface);
55  }
56
57private:
58  SDL_Surface* surface;
59  int frameWidth, frameHeight;
60  std::vector<SDL_Rect> frames;
61  int currentFrame;
62  int totalFrames;
63};
64
65int main() {
66  SDL_Init(SDL_INIT_VIDEO);
67
68  SDL_Window* window =
69    SDL_CreateWindow("Slideshow Effect",
70                     SDL_WINDOWPOS_UNDEFINED,
71                     SDL_WINDOWPOS_UNDEFINED,
72                     640, 480, 0);
73  SDL_Surface* screenSurface =
74    SDL_GetWindowSurface(window);
75
76  // Assume we have a sprite sheet "slideshow.bmp"
77  // with 4x4 frames, each 100x100 pixels
78  Slideshow show{"slideshow.bmp", 100, 100};
79
80  for (int i = 0; i < 64; ++i) {
81    // Show each frame twice
82    SDL_FillRect(screenSurface, nullptr,
83                 SDL_MapRGB(
84                   screenSurface->format, 255,
85                   255, 255));
86
87    show.Render(screenSurface, 270, 190);
88    // Center in 640x480 window
89    show.NextFrame();
90
91    SDL_UpdateWindowSurface(window);
92    SDL_Delay(500);
93    // 500ms delay between frames
94  }
95
96  SDL_DestroyWindow(window);
97  SDL_Quit();
98
99  return 0;
100}

This example introduces a Slideshow class that manages a sprite sheet (a single image containing multiple frames) and allows you to cycle through the frames. Here's how it works:

The constructor takes the filename of the sprite sheet and the dimensions of each frame. It calculates the total number of frames and prepares SDL_Rect structures for each frame.
The Render() method blits the current frame to the destination surface.
The NextFrame() method advances to the next frame, wrapping around to the first frame after the last one.
In the main() function, we create a loop that renders each frame, advances to the next frame, and adds a delay to control the speed of the slideshow.

The key to this slideshow effect is changing the source rectangle (frames[currentFrame]) in the SDL_BlitSurface() call. By changing which part of the source image we're blitting, we create the illusion of a changing image or animation.

This technique is versatile and can be used for various purposes:

Character animations in games
Slideshows for photo galleries
Animated UI elements
Sprite-based particle systems

Remember to handle potential errors, such as failing to load the image. Also, in a real application, you might want to add more controls like pausing, reversing, or jumping to a specific frame.

Cropping and Positioning Images

Creating a Slideshow Effect in SDL2

Cropping and Positioning Images

Game Development with SDL2

Questions & Answers