Image Scaling and Aspect Ratios

In this lesson, we'll learn how to scale our images up and down during the blitting process. Here's what we'll cover:

• The SDL_BlitScaled() function, and how it differs from SDL_BlitSurface().
• What an aspect ratio is, why it matters, and how to calculate it.
• Using aspect ratios to prevent images being stretched and deformed during scaling.

We’ll be building upon the basic application loop and surface-blitting concepts we covered earlier in the course:

1#include <SDL.h>
2#include "Image.h"
3
4class Window {
5public:
6  Window() {
7    SDLWindow = SDL_CreateWindow(
8      "My Program", SDL_WINDOWPOS_UNDEFINED,
9      SDL_WINDOWPOS_UNDEFINED, 600, 300, 0);
10  }
11
12  void Render() {
13    SDL_FillRect(
14      GetSurface(), nullptr, SDL_MapRGB(
15        GetSurface()->format, 50, 50, 50
16      )
17    );
18  }
19
20  void Update() {
21    SDL_UpdateWindowSurface(SDLWindow);
22  }
23
24  SDL_Surface* GetSurface() {
25    return SDL_GetWindowSurface(SDLWindow);
26  }
27
28  ~Window() { SDL_DestroyWindow(SDLWindow); }
29  
30  Window(const Window&) = delete;
31  Window& operator=(const Window&) = delete;
32
33private:
34  SDL_Window* SDLWindow;
35};
36
37int main(int argc, char** argv) {
38  SDL_Init(SDL_INIT_VIDEO);
39  SDL_Event Event;
40  bool shouldQuit{false};
41
42  Window GameWindow;
43  Image ExampleImg{"example.bmp"};
44
45  while (!shouldQuit) {
46    while (SDL_PollEvent(&Event)) {
47      if (Event.type == SDL_QUIT) {
48        shouldQuit = true;
49      }
50    }
51    GameWindow.Render();
52    ExampleImg.Render(GameWindow.GetSurface());
53    GameWindow.Update();
54  }
55
56  SDL_Quit();
57  return 0;
58}

1#pragma once
2#include <SDL.h>
3
4#include <iostream>
5#include <string>
6
7class Image {
8public:
9  Image(std::string File) : ImageSurface{
10    SDL_LoadBMP(File.c_str())} {
11    if (!ImageSurface) {
12      std::cout << "Failed to load image: " <<
13        File << ":\n" << SDL_GetError();
14    }
15    SourceRectangle.w = ImageSurface->w;
16    SourceRectangle.h = ImageSurface->h;
17  }
18
19  void Render(SDL_Surface* DestinationSurface) {
20    SDL_BlitSurface(ImageSurface,
21                    &SourceRectangle,
22                    DestinationSurface,
23                    &DestinationRectangle);
24  }
25
26  ~Image() { SDL_FreeSurface(ImageSurface); }
27  Image(const Image&) = delete;
28  Image& operator=(const Image&) = delete;
29
30private:
31  SDL_Surface* ImageSurface{nullptr};
32  SDL_Rect SourceRectangle{0, 0, 0, 0};
33  SDL_Rect DestinationRectangle{0, 0, 0, 0};
34};

It relies on an image called example.bmp being in the same location as our executable. The image we’re using in these examples is available here.

Our program currently renders the following window:

SDL_BlitScaled()

Previously, we’ve been using the SDL_BlitSurface() function to copy color information from one surface to another. This performs a pixel-by-pixel copy - the image data on the destination surface will be the same size it was on the source surface.

If we want our image to appear larger or smaller on the destination surface, we can call SDL_BlitScaled() instead. It receives the same arguments in the same order as SDL_BlitSurface():

1// Image.h
2class Image {
3public:
4  // ...
5  void Render(SDL_Surface* DestinationSurface) {
6    SDL_BlitSurface(
7      ImageSurface, &SourceRectangle,
8      DestinationSurface, &DestinationRectangle
9    );
10  }
11  
12  // ...
13};

Unlike SDL_BlitSurface(), the SDL_BlitScaled() function does use the w and h properties of the destination rectangle. These values will define the size of the image on the destination surface.

We’ll build a more robust API for our Image class later in this chapter. For now, let’s update our DestinationRectangle to cover the entire window surface, which is 600x300 in our example:

1// Image.h
2class Image {
3  // ...
4
5private:
6  SDL_Surface* ImageSurface{nullptr};
7  SDL_Rect SourceRectangle{0, 0, 0, 0};
8  SDL_Rect DestinationRectangle{0, 0, 600, 300};
9};

Positioning and Missized Rectangles

As before, we can position the image within the output surface by setting the x and y values. Additionally, if any clipping occurs, SDL_BlitScaled() will update the w and h values of our DestinationRectangle with the dimensions that were actually used for the blit.

In this example, we move the image 50 pixels from the left edge, and 100 pixels from the top edge. We have not reduced the destination rectangle’s width and height, so it now extends beyond the bounds of the destination surface.

SDL_BlitScaled() positions our image accordingly, and updates our DestinationRectangle by reducing w and h to the correct values:

1// Image.h
2class Image {
3public:
4  // ...
5  void Render(SDL_Surface* DestinationSurface) {
6    SDL_BlitScaled(
7      ImageSurface, &SourceRectangle,
8      DestinationSurface, &DestinationRectangle
9    );
10    std::cout << "\nDestination Rectangle: "
11      << DestinationRectangle.w << 'x'
12      << DestinationRectangle.h;
13  }
14  // ...
15
16private:
17  // ...
18  SDL_Rect DestinationRectangle{50, 100, 600, 300};
19};

1Destination Rectangle: 550x200
2Destination Rectangle: 550x200
3Destination Rectangle: 550x200

Aspect Ratio

In the previous examples, we can see the SDL_BlitScaled() 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// Image.h
2#pragma once
3#include <SDL.h>
4
5#include <iostream>
6#include <string>
7
8class Image {
9public:
10  Image(std::string File) : ImageSurface{
11    SDL_LoadBMP(File.c_str())} {
12    if (!ImageSurface) {
13      std::cout << "Failed to load image: " <<
14        File << ":\n" << SDL_GetError();
15    }
16    SourceRectangle.w = ImageSurface->w;
17    SourceRectangle.h = ImageSurface->h;
18    SetDestinationRectangle({0, 0, 600, 300});
19  }
20
21  void SetDestinationRectangle(
22    SDL_Rect Destination
23  ) {
24    float SourceRatio{SourceRectangle.w
25      / static_cast<float>(SourceRectangle.h)
26    };
27    float DestinationRatio{Destination.w
28      / static_cast<float>(Destination.h)
29    };
30
31    DestinationRectangle = Destination;
32    
33    // Non-functional code for logging
34    std::cout << "\n[Aspect Ratio] Source: "
35      << SourceRatio
36      << ", Destination: " << DestinationRatio;
37  }
38  
39  // ...
40
41private:
42  SDL_Surface* ImageSurface{nullptr};
43  SDL_Rect SourceRectangle{0, 0, 0, 0};
44  SDL_Rect DestinationRectangle{0, 0, 0, 0};
45};

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

Preventing Deformation

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 most simple 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// Image.h
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    // Non-functional code for logging
21    float AppliedRatio{DestinationRectangle.w /
22      static_cast<float>(DestinationRectangle.h)};
23
24    std::cout << "\n[Aspect Ratio] Requested: "
25      << RequestedRatio
26      << ", Target:" << TargetRatio
27      << ", Applied: " << AppliedRatio;
28  }
29  // ...
30};

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 $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 it’s width.

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

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

1// Image.h
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    } else {
22      // Reduce width as before
23      DestinationRectangle.w = static_cast<int>(
24        Requested.h * TargetRatio);
25    }
26      
27    // Non-functional code for logging
28    float AppliedRatio{DestinationRectangle.w /
29      static_cast<float>(DestinationRectangle.h)};
30
31    std::cout << "\n[Aspect Ratio] Requested: "
32      << RequestedRatio
33      << ", Target:" << TargetRatio
34      << ", Applied: " << AppliedRatio;
35  }
36  // ...
37};

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 $Aspect Ratio$, we get:

Summary

We've covered several important concepts in this lesson:

• Using SDL_BlitScaled() for scaling images up or down during the blitting process
• 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.

Next Lesson

Introduction to SDL_Image

Learn to load, manipulate, and save various image formats using SDL_Image.

ContinueView Course