Image Scaling and Aspect Ratios

In the previous examples, we can see the SDL_BlitSurfaceScaled() algorithm will squash and stretch our images to make them fill the destination rectangle. This deformation may not be desired. Instead, we might want to respect the relative proportions of the original image, or the proportions of the SourceRectangle if it's smaller.

These proportions are often called the aspect ratio, which is the image's width divided by its height.

Width and height are typically integers, but aspect ratios are floating-point numbers, so we should cast at least one of the operands to a float before performing the division:

1float SourceRatio{SourceRectangle.w
2  / static_cast<float>(SourceRectangle.h)
3};

Let's move our DestinationRectangle initialization to a function so we can check our aspect ratios:

1// ...
2class Image {
3public:
4  Image(const std::string& File)
5  : ImageSurface{SDL_LoadBMP(File.c_str())} {
6    if (!ImageSurface) {
7      std::cout << "Failed to load image: "
8        << File << ":\n  " << SDL_GetError() << '\n';
9    } else {
10      SourceRectangle = {
11        0, 0, ImageSurface->w, ImageSurface->h
12      };
13      SetDestinationRectangle({0, 0, 600, 300});
14    }
15  }
16
17  void SetDestinationRectangle(
18    SDL_Rect Destination
19  ) {
20    float SourceRatio{SourceRectangle.w
21      / static_cast<float>(SourceRectangle.h)
22    };
23    float DestinationRatio{Destination.w
24      / static_cast<float>(Destination.h)
25    };
26
27    DestinationRectangle = Destination;
28
29    // Non-functional code for logging
30    std::cout << "\n[Aspect Ratio] Source: "
31      << SourceRatio
32      << ", Destination: " << DestinationRatio;
33  }
34  // ...
35private:
36  SDL_Surface* ImageSurface{nullptr};
37  SDL_Rect SourceRectangle{};
38  SDL_Rect DestinationRectangle{};
39};

1[Aspect Ratio] Source: 1.77778, Destination: 2

When the aspect ratios of our source and destination rectangles are different, as they are here, our image will be deformed if rendered using SDL_BlitSurfaceScaled().

To prevent deformation, we should ensure our DestinationRectangle has the same aspect ratio as our SourceRectangle.

We'll rename our function parameter to be Requested, indicating it might not be the settings we end up using. If the aspect ratio of the SDL_Rect passed to SetDestinationRectangle is wrong, we'll use different values.

We'll also rename our SourceRatio to Target, indicating it contains the value we'd like the aspect ratio of our rectangle to be.

The simplest way to ensure a rectangle has a specific aspect ratio is to choose one of its dimensions (width, in this example) and set it to a value that gives us the target ratio:

1// ...
2class Image {
3public:
4  //...
5  void SetDestinationRectangle(
6    SDL_Rect Requested
7  ) {
8    float TargetRatio{SourceRectangle.w
9      / static_cast<float>(SourceRectangle.h)
10    };
11    float RequestedRatio{Requested.w
12      / static_cast<float>(Requested.h)
13    };
14
15    DestinationRectangle = Requested;
16
17    DestinationRectangle.w = static_cast<int>(
18      Requested.h * TargetRatio
19    );
20
21    // Non-functional code for logging
22    float AppliedRatio{DestinationRectangle.w /
23      static_cast<float>(DestinationRectangle.h)};
24
25    std::cout << "\n[Aspect Ratio] Requested: "
26      << RequestedRatio
27      << ", Target:" << TargetRatio
28      << ", Applied: " << AppliedRatio;
29  }
30  // ...
31};

1[Aspect Ratio] Requested: 2, Target:1.77778, Applied: 1.77667

The highlighted logic may be confusing here. It uses the equation:

This comes from the definition of aspect ratio:

If we multiply both sides of this equation by $\text{Height}$, we get:

So, if we know the height and aspect ratio, we multiply them together to get the width.

Scaling to Fit

We can improve this implementation slightly. By restricting our resizing option to only one dimension (the width, in the previous example) we don't know if hitting the target aspect ratio requires us to make the rectangle smaller or larger.

In most scenarios, we don't want to render an image larger than was requested. Therefore, to hit a target ratio, we should only reduce a dimension. If the rectangle's aspect ratio is too large (that is, the rectangle is "too landscape"), we want to reduce its width.

However, if the aspect ratio is too small (that is, the rectangle is "too portrait"), we don't want to increase its width. Instead, we want to reduce its height.

Let's add an if statement to figure out what strategy we need:

1// ...
2class Image {
3public:
4  //...
5  void SetDestinationRectangle(
6    SDL_Rect Requested
7  ) {
8    float TargetRatio{SourceRectangle.w
9      / static_cast<float>(SourceRectangle.h)
10    };
11    float RequestedRatio{Requested.w
12      / static_cast<float>(Requested.h)
13    };
14
15    DestinationRectangle = Requested;
16
17    if (RequestedRatio < TargetRatio) {
18      // Reduce height
19      DestinationRectangle.h = static_cast<int>(
20        Requested.w / TargetRatio
21      );
22    } else {
23      // Reduce width as before
24      DestinationRectangle.w = static_cast<int>(
25        Requested.h * TargetRatio
26      );
27    }
28
29    // Non-functional code for logging
30    float AppliedRatio{DestinationRectangle.w /
31      static_cast<float>(DestinationRectangle.h)};
32
33    std::cout << "\n[Aspect Ratio] Requested: "
34      << RequestedRatio
35      << ", Target:" << TargetRatio
36      << ", Applied: " << AppliedRatio;
37  }
38  // ...
39};

1[Aspect Ratio] Requested: 2, Target:1.77778, Applied: 1.77667

In this implementation, if the requested rectangle's aspect ratio is smaller than the target, that means it is "too portrait". Our previous implementation would address this by increasing the width, but now, we reduce the height instead.

The equation to calculate the height comes from the same process as before. We already worked out that:

Dividing both sides of the equation by $\text{Aspect Ratio}$, we get:

Later in this course, we'll create a more complex Image class that will allow external code to configure Image objects with many more options.

Here are the final versions of our files after applying the scaling and aspect ratio logic from this lesson.

We've covered several concepts in this lesson:

• Using SDL_BlitSurfaceScaled() for scaling images up or down during the blitting process.
• Selecting a scaling algorithm, like SDL_SCALEMODE_LINEAR for smooth scaling.
• Calculating and maintaining aspect ratios.
• Preventing image deformation during scaling.

Later in this section, we'll expand our Image class to give external code access to these new capabilities. However, before we do that, we'll introduce SDL_image, which allows us to load more advanced image formats than the basic bitmaps we've been using so far.

This will include image formats that include transparency information, so we'll also learn how our blitting operations can use that data. This will allow us to blend our surface colors together in more advanced ways.