How can I display the same image multiple times in different positions on the screen?

Question

Ryan McCombe · Accepted Answer

Displaying the same image multiple times in different positions on the screen is a common requirement in many applications, especially games.

In SDL2, we can achieve this by using the same source surface or texture and blitting it to different positions on the destination surface. Here's how you can do it:

1#include <SDL.h>
2
3#include <iostream>
4#include <vector>
5
6class Image {
7public:
8  Image(const char* file) : surface{
9    SDL_LoadBMP(file)} {
10    if (!surface) {
11      std::cerr << "Failed to load image: " <<
12        SDL_GetError() << '\n';
13    }
14  }
15
16  void RenderMultiple(SDL_Surface* destSurface,
17                      const std::vector<
18                        SDL_Point>& positions) {
19    if (!surface || !destSurface) return;
20
21    SDL_Rect srcRect{
22      0, 0, surface->w, surface->h};
23
24    for (const auto& pos : positions) {
25      SDL_Rect destRect{
26        pos.x, pos.y, surface->w, surface->h};
27      SDL_BlitSurface(surface, &srcRect,
28                      destSurface, &destRect);
29    }
30  }
31
32  ~Image() {
33    if (surface) SDL_FreeSurface(surface);
34  }
35
36private:
37  SDL_Surface* surface;
38};
39
40int main() {
41  SDL_Init(SDL_INIT_VIDEO);
42
43  SDL_Window* window =
44    SDL_CreateWindow("Multiple Images",
45                     SDL_WINDOWPOS_UNDEFINED,
46                     SDL_WINDOWPOS_UNDEFINED,
47                     640, 480, 0);
48  SDL_Surface* screenSurface =
49    SDL_GetWindowSurface(window);
50
51  Image img{"example.bmp"};
52
53  // Define positions for multiple instances of the image
54  std::vector<SDL_Point> positions = {
55    {50, 50}, // Top-left
56    {500, 50}, // Top-right
57    {50, 350}, // Bottom-left
58    {500, 350}, // Bottom-right
59    {275, 200} // Center
60  };
61
62  img.RenderMultiple(screenSurface, positions);
63
64  SDL_UpdateWindowSurface(window);
65
66  SDL_Delay(3000); // Display for 3 seconds
67
68  SDL_DestroyWindow(window);
69  SDL_Quit();
70
71  return 0;
72}

In this example, we've added a RenderMultiple() method to our Image class. This method takes a vector of SDL_Point structures, each representing a position where we want to render the image.

The key part is the loop inside RenderMultiple():

1for (const auto& pos : positions) {
2  SDL_Rect destRect{
3    pos.x, pos.y, surface->w, surface->h};
4  SDL_BlitSurface(
5    surface, &srcRect, destSurface, &destRect);
6}

This loop iterates through all the positions and blits the image to each one.

In the main() function, we define a vector of positions where we want our image to appear:

1std::vector<SDL_Point> positions = {
2  {50, 50}, // Top-left
3  {500, 50}, // Top-right
4  {50, 350}, // Bottom-left
5  {500, 350}, // Bottom-right
6  {275, 200} // Center
7};

Then we call RenderMultiple() with these positions.

This approach is efficient because we only load the image once, but we can display it in multiple locations. It's particularly useful for things like:

Tiled backgrounds
Repeated UI elements
Particle systems
Multiple instances of the same game object

Remember to handle potential errors, such as failing to load the image or create the window. Also, in a real application, you'd typically render in a loop rather than using SDL_Delay().

Cropping and Positioning Images

Rendering Multiple Instances of an Image in SDL2

Cropping and Positioning Images

Game Development with SDL2

Questions & Answers