Cropping and Positioning Images

Centering an Image in SDL2

How do I move an image to the center of the screen using SDL2?

Abstract art representing computer programming

To center an image on the screen using SDL2, we need to calculate the appropriate x and y coordinates for our destination rectangle. Here's how we can do it:

Get the dimensions of the window and the image.
Calculate the center coordinates.
Update the destination rectangle with these coordinates.

Let's see this in action:

1#include <SDL.h>
2
3#include <iostream>
4
5class Image {
6public:
7  Image(const char* file) : surface{
8    SDL_LoadBMP(file)} {
9    if (!surface) {
10      std::cerr << "Failed to load image: " <<
11        SDL_GetError() << '\n';
12    }
13  }
14
15  void RenderCentered(
16    SDL_Surface* destSurface) {
17    if (!surface || !destSurface) return;
18
19    int windowWidth = destSurface->w;
20    int windowHeight = destSurface->h;
21    int imageWidth = surface->w;
22    int imageHeight = surface->h;
23
24    // Calculate center position
25    int x = (windowWidth - imageWidth) / 2;
26    int y = (windowHeight - imageHeight) / 2;
27
28    SDL_Rect destRect{
29      x, y, imageWidth, imageHeight};
30
31    SDL_BlitSurface(surface, nullptr,
32                    destSurface, &destRect);
33  }
34
35private:
36  SDL_Surface* surface;
37};
38
39int main() {
40  SDL_Init(SDL_INIT_VIDEO);
41
42  SDL_Window* window =
43    SDL_CreateWindow("Centered Image",
44                     SDL_WINDOWPOS_UNDEFINED,
45                     SDL_WINDOWPOS_UNDEFINED,
46                     640, 480, 0);
47  SDL_Surface* screenSurface =
48    SDL_GetWindowSurface(window);
49
50  Image img{"example.bmp"};
51  img.RenderCentered(screenSurface);
52
53  SDL_UpdateWindowSurface(window);
54
55  SDL_Delay(3000); // Display for 3 seconds
56
57  SDL_DestroyWindow(window);
58  SDL_Quit();
59
60  return 0;
61}

In this example, we've created an Image class with a RenderCentered() method. This method calculates the center position based on the window size and image size, then uses these coordinates in the destination rectangle for SDL_BlitSurface().

The key lines are:

1int x = (windowWidth - imageWidth) / 2;
2int y = (windowHeight - imageHeight) / 2;

These calculate the top-left corner coordinates that will place the image at the center of the screen.

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().

This Question is from the Lesson: