Our ImageComponent can now render images, but they always appear at their original size, defined by the dimensions of the image file our AssetManager loads into the surface.

We want more control over the size of our entities. Specifically, we want to control the size in two different ways:

Image Size - In an ideal world, all of our art assets would be perfectly sized in relation to each other. If a dragon is twice the size of our player, our dragon image would be twice the size of the player image. We're rarely this lucky so, within our ImageComponent, we need the ability to intervene and specify what size each individual images should be rendered at.
Entity Size - We want some entities to be physically larger than others - even entities of the same type. The size of an entity also effects the size of that entity's ImageComponents renderat, but it has wider implications too. Larger entities also have larger bounding boxes for physics calculations. If our entities had audio, larger entities might be louder, and so on. The overall size of an entity will be defined within it's TransformComponent.

We'll implement both of these in this lesson!

Starting Point

In the previous lesson, we successfully integrated our ImageComponent with an AssetManager, rendered images using SDL_BlitSurface(), handled coordinate transformations, and added offsets for precise positioning.

Here's the ImageComponent code we finished with:

Image Width and Height

Let's allow the ImageComponent to have a desired rendering width and height, independent of the underlying SDL_Surface dimensions. We'll add Width and Height members (as floats, for potential fractional scaling later) and corresponding getter/setter methods.

By default, if these aren't set, we'll fall back to the image's natural dimensions. We use std::optional<float> to represent this "maybe set" state. std::optional holds either a value of the specified type (float) or no value (std::nullopt).

Nullable Values, `std::optional` and Monadic Operations

A comprehensive guide to using std::optional to represent values that may or may not be present.

View Related Lesson

First, include the <optional> header and add the members and methods to ImageComponent.h:

1// ImageComponent.h
2// ...
3#include <optional> 
4
5class ImageComponent : public Component {
6 public:
7  // ...
8
9  // New Getters/Setters for Width/Height
10  void SetWidth(float NewWidth);   
11  void SetHeight(float NewHeight); 
12  void ResetWidth();              
13  void ResetHeight();             
14  float GetWidth() const;         
15  float GetHeight() const;        
16
17private:
18  // ...
19  std::optional<float> Width{std::nullopt};  
20  std::optional<float> Height{std::nullopt}; 
21};

Now, implement these in ImageComponent.cpp. The setters simply assign the provided value. ResetWidth/ResetHeight set the optional back to std::nullopt.

The getters check if a value has been explicitly set using the value_or() method on std::optional. This method returns the optional value if it has one, or the value we provide as an argument otherwise:

1// ImageComponent.cpp
2// ...
3#include <optional> 
4
5// ...
6
7void ImageComponent::SetWidth(float NewWidth) {
8  Width = NewWidth;
9}
10
11void ImageComponent::SetHeight(float NewHeight) {
12  Height = NewHeight;
13}
14
15void ImageComponent::ResetWidth() {
16  Width = std::nullopt;
17}
18
19void ImageComponent::ResetHeight() {
20  Height = std::nullopt;
21}
22
23float ImageComponent::GetWidth() const {
24  // If Width has a value, return it.
25  // Otherwise, return surface width.
26  return Width.value_or(GetSurfaceWidth());
27}
28
29float ImageComponent::GetHeight() const {
30  // If Height has a value, return it.
31  // Otherwise, return surface height.
32  return Height.value_or(GetSurfaceHeight());
33}
34
35// ...

Now our component knows its target rendering size. Next, we need to handle how the image fits into that size.

Alternatives to `std::optional`

The std::optional utility was added to the standard library in C++17, so should be available to most projects.

If we don't want to use std::optional, we can simply adopt another convention to represent the absence of a specific width or height. Using 0 or -1 would likely work:

1// ImageComponent.h
2// ...
3#include <optional> 
4
5class ImageComponent : public Component {
6  // ...
7
8private:
9  // ...
10  std::optional<float> Width{std::nullopt};  
11  std::optional<float> Height{std::nullopt}; 
12  // Use -1.0 to indicate 'not set'
13  float Width{-1.0f};  
14  float Height{-1.0f}; 
15};

1// ImageComponent.cpp
2// ...
3#include <optional> 
4
5// ...
6
7void ImageComponent::SetWidth(float NewWidth) {
8  // Add validation if desired (e.g., disallow negative)
9  Width = NewWidth;
10}
11
12void ImageComponent::SetHeight(float NewHeight) {
13  // Add validation if desired (e.g., disallow negative)
14  Height = NewHeight;
15}
16
17void ImageComponent::ResetWidth() {
18  Width = -1.0; // Set back to sentinel value
19}
20
21void ImageComponent::ResetHeight() {
22  Height = -1.0; // Set back to sentinel value
23}
24
25float ImageComponent::GetWidth() const {
26  // Before: Using std::optional
27  return Width.value_or(GetSurfaceWidth());
28
29  // After: Using sentinel value
30  if (Width >= 0.0f) { 
31    return Width; 
32  } else { 
33    return GetSurfaceWidth(); 
34  } 
35}
36
37float ImageComponent::GetHeight() const {
38  // Before: Using std::optional
39  return Height.value_or(GetSurfaceHeight());
40
41  // After: Using sentinel value
42  if (Height >= 0.0f) { 
43    return Height; 
44  } else { 
45    return GetSurfaceHeight(); 
46  } 
47}
48
49// ...

Scaling Modes

When the target width and height - GetWidth(), GetHeight() - don't match the image's natural aspect ratio, how should we render it?

We could stretch it, fit it entirely within the bounds while preserving aspect ratio, or cover the bounds completely, potentially cropping parts of the image. We'll implement four common scaling modes:

None: Render the image at its natural size, ignoring any requested Width / Height. This is our current behavior, but we'll formalize it through the same system that our other scaling modes will use.
Fill: Stretch the image to completely fill the target width and height. If the Width / Height in our ImageComponent has a different aspect ratio from our image, this will cause our image to be stretched. This is a sensible default as it tends to be most intuitive - if someone specifies they want the image rendered at a specific width and height, the image will be stretched to fit that specification.
Contain: Scale the image as large as possible while preserving its aspect ratio, ensuring the entire image fits within the target width and height. This prevents the image being deformed but, if the image has a different aspect ratio to the requested Width / Height, it won't fill the entire space.
Cover: Scale the image as small as possible while preserving its aspect ratio, ensuring the image completely covers the target width and height without deformation. However, if the image has a different aspect ratio to the requested Width / Height, parts of the image will be cropped.

Illustration comparing image scaling modes

To manage these, let's define an enum class in ImageComponent.h:

1// ImageComponent.h
2// ...
3
4enum class ScalingMode {
5  None, Fill, Contain, Cover
6};
7
8class ImageComponent : public Component {
9 public:
10  // ...
11
12  void SetScalingMode(ScalingMode Mode); 
13
14private:
15  // ...
16  //  Default to None
17  ScalingMode ScaleMode{ScalingMode::Fill}; 
18};

And implement the simple setter in ImageComponent.cpp:

1// ImageComponent.cpp
2// ...
3
4void ImageComponent::SetScalingMode(ScalingMode Mode) {
5  ScaleMode = Mode;
6}
7
8// ...

Now, our component can track which scaling mode to use. The real work happens in the Render() function.

Using `SDL_BlitScaled()`

To implement these scaling modes, SDL_BlitSurface() isn't sufficient as it doesn't handle resizing. We need its more powerful sibling: SDL_BlitScaled().

SDL_BlitScaled() works similarly but takes destination width and height into account, scaling the source rectangle to fit the destination rectangle. Here is its signature:

1int SDL_BlitScaled(
2  SDL_Surface*    src,
3  const SDL_Rect* srcrect,
4  SDL_Surface*    dst,
5  SDL_Rect*       dstrect
6);

src: The source surface (our ImageSurface).
srcrect: The portion of the source to copy (nullptr for the whole surface, or a specific SDL_Rect).
dst: The destination surface (the window).
dstrect: The target area on the destination surface. SDL_BlitScaled() will scale the content from srcrect to fit exactly into dstrect.

The core idea for implementing our scaling modes will be calculating the correct srcrect and dstrect based on the ScaleMode, the image dimensions, and the target Width/Height.

Helper Function for Blit Rectangles

Calculating the source and destination rectangles for each scaling mode within the Render() function will make it very cluttered. Let's create a helper function to encapsulate this logic.

We'll define a simple struct to hold the pair of rectangles, possibly in an anonymous namespace as it's only needed locally, within this same file:

1// ImageComponent.cpp
2// ...
3
4namespace {
5struct BlitInfo {
6  SDL_Rect SourceRect;
7  SDL_Rect DestRect;
8};
9}
10
11// ...

To calculate the source and destination rectangle, we'll need the following information:

The ScalingMode we want to use
The natural size of our image (ie, the size of the SDL_Surface returned from our AssetManager. We'll call this SurfaceW and SurfaceH.
The position we want the image to have on the target surface. We'll call these values TargetX and TargetY
The size we want the image to be on the target surface. We'll call these values TargetW and TargetH

Let's set it up a helper function that receives this information, and returns the required BlitInfo:

1// ImageComponent.cpp
2// ...
3
4namespace {
5struct BlitInfo {/*...*/};
10
11// Helper function to calculate source and
12// destination rectangles
13BlitInfo CalculateBlitInfo(
14  ScalingMode Mode,
15  // Natural surface dimensions
16  int SurfaceW, int SurfaceH,
17  // Target top-left screen position
18  float TargetX,  float TargetY,
19  // Target rendering dimensions
20  float TargetW, float TargetH
21) {
22  BlitInfo Info;
23
24  // Default to rendering the whole image
25  Info.SourceRect = {
26    0, 0, SurfaceW, SurfaceH
27  };
28
29  // We will implement the logic for each
30  // scaling mode here later...
31  Info.DestRect = Utilities::Round({
32    TargetX, TargetY, TargetW, TargetH
33  });
34
35  return Info;
36}
37}
38
39// ...

Now, let's refactor ImageComponent::Render() to gather all the information that CalculateBlitInfo() requires, and pass it along to generate our source and destination rectangles.

We'll also switch from using SDL_BlitSurface() to SDL_BlitScaled() to support our future scaling modes:

1// ImageComponent.cpp
2// ...
3
4void ImageComponent::Render(SDL_Surface*) {/*...*/}
26
27void ImageComponent::Render(
28  SDL_Surface* Surface
29) {
30  if (!ImageSurface) return;
31  
32  auto [TargetX, TargetY]{
33    GetOwnerScreenSpacePosition() + Offset
34  };
35  float TargetW{GetWidth()};
36  float TargetH{GetHeight()};
37
38  int SurfaceW{GetSurfaceWidth()};
39  int SurfaceH{GetSurfaceHeight()};
40
41  BlitInfo Info{CalculateBlitInfo(
42    ScaleMode,
43    SurfaceW, SurfaceH,
44    TargetX, TargetY,
45    TargetW, TargetH
46  )};
47
48  if (SDL_BlitScaled(
49    ImageSurface.get(),
50    &Info.SourceRect,
51    Surface,
52    &Info.DestRect
53  ) < 0) {
54    std::cerr << "Error: Blit failed: "
55      << SDL_GetError() << '\n';
56  }
57}
58
59// ...

Our Render() function is now much more flexible. Additionally, it doesn't need to get any more complicated to support different scaling modes. All the complexity of scaling is delegated to CalculateBlitInfo().

Let's implement the logic for each mode inside that helper.

Scaling Mode: `None`

In None mode, we want to render the image at its natural size. The TargetW and TargetH are ignored for the size of the blit, but we might use them to center the image if the target area is larger. For simplicity here, we'll just render at the natural size at the TargetX, TargetY, exactly as we were before:

1// ImageComponent.cpp
2// ...
3
4namespace {
5struct BlitInfo {/*...*/};
10
11BlitInfo CalculateBlitInfo(
12  ScalingMode Mode,
13  int SurfaceW, int SurfaceH,
14  float TargetX,  float TargetY,
15  float TargetW, float TargetH
16) {
17  BlitInfo Info;
18  Info.SourceRect = {
19    0, 0, SurfaceW, SurfaceH
20  };
21
22  if (Mode == ScalingMode::None) {
23    // Render at natural image size
24    // and at the target position
25    Info.DestRect = Utilities::Round({
26      TargetX,
27      TargetY,
28      static_cast<float>(SurfaceW),
29      static_cast<float>(SurfaceH)
30    });
31    return Info;
32  }
33
34  // Handle other modes later...
35  return Info;
36}
37}
38
39// ...

Scaling Mode: `Fill`

The Fill mode is the simplest: stretch the source image to exactly match the target dimensions, ignoring aspect ratio. SDL_BlitScaled() does this by default if you provide the full source rect and the target destination rect.

1// ImageComponent.cpp
2// ... 
3
4namespace {
5struct BlitInfo {/*...*/};
10
11BlitInfo CalculateBlitInfo(
12  ScalingMode Mode,
13  int SurfaceW, int SurfaceH,
14  float TargetX,  float TargetY,
15  float TargetW, float TargetH
16) {
17  BlitInfo Info;
18  Info.SourceRect = {
19    0, 0, SurfaceW, SurfaceH
20  };
21  
22  if (Mode == ScalingMode::None) {/*...*/}
32
33  if (Mode == ScalingMode::Fill) {
34    // Stretch source to fill the exact
35    // target dimensions
36    Info.DestRect = Utilities::Round({
37      TargetX, TargetY, TargetW, TargetH
38    });
39    return Info;
40  }
41
42  // Handle other modes later...
43  return Info;
44}
45}
46// ...

Scaling Mode: `Contain`

To implement Contain, we need to figure out the largest possible size the image can be while fitting inside the TargetW and TargetH dimensions, without distorting the image's aspect ratio.

First, we calculate the scaling factor needed to fit the width (TargetW / SurfaceW) and the scaling factor needed to fit the height (TargetH / SurfaceH).

To ensure the entire image fits within the target bounds, we must use the smaller of these two scaling factors. If we used the larger one, one dimension would fit, but the other would exceed the target boundary. std::min() gives us this smaller scale.

We apply this Scale to the original SurfaceW and SurfaceH to get the final dimensions for our DestRect. The SourceRect remains the entire original image surface, as we want to draw the whole image, just scaled down. The DestRect position is set to TargetX, TargetY.

1// ImageComponent.cpp
2// ... 
3
4namespace {
5struct BlitInfo {/*...*/};
10
11BlitInfo CalculateBlitInfo(
12  ScalingMode Mode,
13  int SurfaceW, int SurfaceH,
14  float TargetX,  float TargetY,
15  float TargetW, float TargetH
16) {
17  BlitInfo Info;
18  Info.SourceRect = {
19    0, 0, SurfaceW, SurfaceH
20  };
21  
22  if (Mode == ScalingMode::None) {/*...*/}
32
33  if (Mode == ScalingMode::Fill) {/*...*/}
40
41  if (Mode == ScalingMode::Contain) {
42    float Scale{std::min(
43      TargetW / SurfaceW,
44      TargetH / SurfaceH
45    )};
46    
47    Info.DestRect = Utilities::Round({
48      TargetX, TargetY,
49      SurfaceW * Scale,
50      SurfaceH * Scale
51    });
52
53    return Info;
54  }
55
56  // Handle remaining mode next...
57  return Info;
58}
59}
60// ...

Scaling Mode: `Cover`

For Cover mode, we want the image to preserve its aspect ratio but scale up just enough to completely fill the TargetW and TargetH. This might mean some parts of the image are cropped.

Similar to Contain, we calculate the horizontal (TargetW / SurfaceW) and vertical (TargetH / SurfaceH) scaling factors. However, this time, we need the image to be at least as large as the target bounds in both dimensions. Therefore, we choose the larger of the two scaling factors using std::max().

Using this larger Scale, the scaled image will perfectly match the target bounds in one dimension but potentially exceed them in the other. To handle this, we don't change the DestRect (it stays as the full TargetW, TargetH), but instead, we adjust the SourceRect.

1// ImageComponent.cpp
2// ...
3
4namespace {
5struct BlitInfo {/*...*/};
10
11BlitInfo CalculateBlitInfo(
12  ScalingMode Mode,
13  int SurfaceW, int SurfaceH,
14  float TargetX,  float TargetY,
15  float TargetW, float TargetH
16) {
17  BlitInfo Info;
18  Info.SourceRect = {
19    0, 0, SurfaceW, SurfaceH
20  };
21
22  if (Mode == ScalingMode::None) {/*...*/}
32
33  if (Mode == ScalingMode::Fill) {/*...*/}
40
41  if (Mode == ScalingMode::Contain) {/*...*/}
56
57  if (Mode == ScalingMode::Cover) {
58    float Scale{std::max(
59      TargetW / SurfaceW,
60      TargetH / SurfaceH
61    )};
62    
63    if (Scale * SurfaceW > TargetW) {
64      float ClipW{TargetW / Scale};
65      Info.SourceRect = Utilities::Round({
66        0, 0,
67        ClipW,
68        static_cast<float>(SurfaceH)
69      });
70      } else if (Scale * SurfaceH > TargetH) {
71        float ClipH{TargetH / Scale};
72        Info.SourceRect = Utilities::Round({
73          0, 0,
74          static_cast<float>(SurfaceW),
75          ClipH
76        });
77      }
78      Info.DestRect = Utilities::Round({
79        TargetX,
80        TargetY,
81        TargetW,
82        TargetH
83      });
84      return Info;
85    }
86
87  std::cerr << "Error: Unknown Scaling Mode\n";
88  return Info;
89}
90}
91
92// ...

We now have all four scaling modes implemented!

Entity Scaling

Our images can now scale based on the ImageComponent's Width, Height, and ScaleMode. But what if we want to scale the entire entity - affecting not just its visuals but potentially its collision bounds, audio volume, or other properties?

This is distinct from the ImageComponent's scaling. For instance, scaling an entity might make its character model larger and increase its physics footprint, while ImageComponent scaling only affects how that model is drawn within its component bounds.

Updating the Transform Component

Let's add a uniform scaling factor to TransformComponent.

1// TransformComponent.h
2// ...
3
4class TransformComponent : public Component {
5 public:
6  // ...
7  float GetScale() const { return Scale; }
8  void SetScale(float NewScale) {
9    Scale = NewScale;
10  }
11  
12 private:
13  // ...
14  float Scale{1.0};
15};

Updating the `Component` Class

To make this scale easier to access from an entity's components, let's add a GetOwnerScale() helper function to the Component base class:

1// Component.h
2// ...
3
4class Component {
5 public:
6  // ...
7  float GetOwnerScale() const;
8  // ...
9};

1// Component.cpp
2// ...
3
4float Component::GetOwnerScale() const {
5  TransformComponent* Transform{
6    GetOwner()->GetTransformComponent()};
7  if (!Transform) {
8    std::cerr << "Error: attempted to get scale"
9      " of an entity with no transform component\n";
10    return 1.0;
11  }
12  return Transform->GetScale();
13}

Updating the Image Component

Now, ImageComponent::Render needs to account for the entity's scale. We should apply the TransformComponent's scale to the ImageComponent's target dimensions before calculating the blit information.

1// ImageComponent.cpp
2// ...
3
4void ImageComponent::Render(
5  SDL_Surface* Surface
6) {
7  if (!ImageSurface) return;
8  
9  auto [TargetX, TargetY]{
10    GetOwnerScreenSpacePosition() + Offset};
11    
12  // Before
13  float TargetW{GetWidth()};
14  float TargetH{GetHeight()};
15  
16  // After
17  float TargetW{GetWidth() * GetOwnerScale()};
18  float TargetH{GetHeight() * GetOwnerScale()};
19  
39}
40
41// ...

Now, setting the TransformComponent's scale will uniformly scale the visual representation provided by the ImageComponent.

Let's test this in Scene.h. We'll make the player smaller through the transform component, and we'll specify the size we want the enemy to be rendered at using its ImageComponent.

We'll set the scaling mode to Cover so the image component will respect both the size we specified and the image's aspect ratio, but will crop the image:

1// Scene.h
2// ...
3
4class Scene {
5 public:
6  Scene() {
7    EntityPtr& Player{Entities.emplace_back(
8      std::make_unique<Entity>(*this))};
9    Player->AddTransformComponent()
10      ->SetPosition({2, 2});
11    Player->GetTransformComponent()
12      ->SetScale(0.75);  
13    Player->AddImageComponent("player.png");
14
15    EntityPtr& Enemy{Entities.emplace_back(
16      std::make_unique<Entity>(*this))};
17    Enemy->AddTransformComponent()
18      ->SetPosition({8, 5});
19    Enemy->GetTransformComponent()
20      ->SetScale(1.25);  
21    ImageComponent* EnemyImage{
22      Enemy->AddImageComponent("dragon.png")};
23    EnemyImage->SetWidth(150); 
24    EnemyImage->SetHeight(150);
25    EnemyImage->SetScalingMode(ScalingMode::Cover);  
26  }
27
28  // ...
29};

Running this should show our player scaled down to 75% of his previous size, and our dragon cropped to a 150x150 pixel area, and then scaled up by 25%.

In this case, the requested 150x150 pixel size has a different aspect ratio to our original dragon image so. Because we've set the Cover scaling mode, our dragon image gets scaled just enough to cover the 150x150 pixel area, and excess pixels get cropped:

Screenshot of our scene showing entity scaling

API Improvement: Chaining Setters

When we see a repeating pattern in how our components are used, such as a lot of setters being called in sequence, we should consider improving our API to make that process easier.

A common technique is to have our setters return a reference or pointer to the object they're updating, through the this pointer:

1// ImageComponent.h
2// ...
3
4class ImageComponent : public Component {
5 public:
6  // Before:
7  void SetScalingMode(ScalingMode Mode) {
8    ScaleMode = Mode;
9  };
10  
11  // After:
12  ImageComponent* SetScalingMode(ScalingMode Mode) {
13    ScaleMode = Mode;
14    return this;
15  };
16  
17  // Other setters updated in the same way
18};

Our ImageComponent can still be used as it was previously:

1ImageComponent* EnemyImage{
2  Enemy->AddImageComponent(
3    "dragon.png")};
4
5EnemyImage->SetWidth(250);
6EnemyImage->SetHeight(150);
7EnemyImage->SetScalingMode(ScalingMode::Cover);

However, it can now also be used like this, which many people will prefer:

1Enemy->AddImageComponent("dragon.png")}
2  ->SetWidth(250);
3  ->SetHeight(150);
4  ->SetScalingMode(ScalingMode::Cover);

Non-Uniform Scaling

We're using a single float for uniform scaling (scaling equally in X and Y) in our TransformComponent. Sometimes, non-uniform scaling (stretching more horizontally than vertically, or vice-versa) is needed.

To implement this, you could replace the float Scale with a Vec2 Scale{1.0, 1.0} in TransformComponent.

1// TransformComponent.h
2// ...
3
4class TransformComponent : public Component {
5 public:
6  // ...
7  Vec2 GetScale() const { return Scale; }
8  Vec2 SetScale(Vec2 NewScale) {
9    Scale = NewScale;
10  }
11  
12 private:
13  // ...
14  Vec2 Scale{1.0, 1.0};
15};

Then, anywhere else that depends on scale, we'd handle those two components appropriately. In ImageComponent::Render(), for example:

1// ImageComponent.cpp
2// ...
3
4void ImageComponent::Render(
5  SDL_Surface* Surface
6) {
7  // ...
8  // Before:
9  float Scale{GetOwnerScale()};
10  float TargetW{GetWidth() * Scale};
11  float TargetH{GetHeight() * Scale};
12  
13  // After:
14  auto [sx, sy]{GetOwnerScale()};
15  float TargetW{GetWidth() * sx};
16  float TargetH{GetHeight() * sy};
17  // ...
18}

In this course, we'll stick with uniform scales for our entities to keep things simple.

Drawing Debug Helpers

Finally, let's update our debug drawing to help us visualize what is going on with our images.

Our current DrawDebugHelpers() function just draws a small square at the entity's origin. Let's update it to visualize the scaling we've implemented. We'll draw draw two rectangles:

The image's natural bounds (at its original size, affected by entity scale).
The image's rendered bounds (after applying Width, Height, and ScaleMode, also affected by entity scale).

Since SDL surfaces don't have a built-in rectangle outline function, we'll create a small helper function for this. We introduced a technique for doing this in our earlier lesson on bounding boxes:

Bounding Boxes

Discover bounding boxes: what they are, why we use them, and how to create them

View Related Lesson

We'll use the same technique (and essentially the same code) from that lesson, drawing our rectangular outline as four thin rectangles - one for each edge. Other components may need the ability to draw these outlines too, so let's add that code to our Utilities.h header:

1// Utilities.h
2// ...
3#pragma once
4#include <SDL.h>
5
6namespace Utilities{
7  // ...
8  inline void DrawRectOutline(
9    SDL_Surface* Surface,
10    const SDL_Rect& Rect,
11    Uint32 Color,
12    int Thickness = 3
13  ) {
14    SDL_Rect Top{
15      Rect.x,
16      Rect.y,
17      Rect.w,
18      Thickness
19    };
20    SDL_FillRect(Surface, &Top, Color);
21
22    SDL_Rect Bottom{
23      Rect.x,
24      Rect.y + Rect.h - Thickness,
25      Rect.w,
26      Thickness
27    };
28    SDL_FillRect(Surface, &Bottom, Color);
29
30    int SideHeight{Rect.h - 2 * Thickness};
31    SDL_Rect Left{
32      Rect.x,
33      Rect.y + Thickness,
34      Thickness,
35      SideHeight
36    };
37    SDL_FillRect(Surface, &Left, Color);
38
39    SDL_Rect Right{
40      Rect.x + Rect.w - Thickness,
41      Rect.y + Thickness,
42      Thickness,
43      SideHeight
44    };
45    SDL_FillRect(Surface, &Right, Color);
46  }
47}

Then, within DrawDebugHelpers(), we'll combine the helper functions and techniques we covered in this lesson to draw our two rectangles:

1// ImageComponent.cpp
2// ...
3
4void ImageComponent::DrawDebugHelpers(
5  SDL_Surface* Surface
6) {
7  using Utilities::DrawRectOutline;
8  if (!ImageSurface) return;
9
10  // Gather our position and dimensions for
11  // the CalculateBlitInfo() function,
12  // similar to what we did in Render()
13  auto [TargetX, TargetY]{
14    GetOwnerScreenSpacePosition() + Offset
15  };
16  float OwnerScale{GetOwnerScale()};
17  float TargetW{GetWidth() * OwnerScale};
18  float TargetH{GetHeight() * OwnerScale};
19  int SurfaceW{GetSurfaceWidth()};
20  int SurfaceH{GetSurfaceHeight()};
21
22  // 1. Draw Natural Bounds (Green Outline)
23  SDL_Rect NaturalBounds{
24    Utilities::Round({
25      TargetX, TargetY,
26      SurfaceW * OwnerScale,
27      SurfaceH * OwnerScale
28    })};
29    
30  DrawRectOutline(
31    Surface, NaturalBounds,
32    SDL_MapRGB(Surface->format, 0, 255, 0)
33  );
34
35  // 2. Draw Rendered Bounds (Red Outline)
36  BlitInfo Info{CalculateBlitInfo(
37    ScaleMode,
38    SurfaceW, SurfaceH,
39    TargetX, TargetY,
40    TargetW, TargetH
41  )};
42
43  DrawRectOutline(
44    Surface, Info.DestRect,
45    SDL_MapRGB(Surface->format, 255, 0, 0)
46  );
47
48  // Continue to draw the position
49  // marker from before (Blue Square)
50  SDL_Rect DebugRect{Utilities::Round({
51    TargetX - 5, TargetY - 5, 10, 10
52  })};
53  
54  SDL_FillRect(
55    Surface, &DebugRect,
56    SDL_MapRGB(Surface->format, 0, 0, 255)
57  );
58}

Now, when debug helpers are enabled, you'll see a green rectangle showing where the image would be if rendered at its natural size (but scaled by the entity's transform), and a red rectangle showing the final bounds calculated by CalculateBlitInfo().

These rendered bounds reflect the chosen ScaleMode, Width, and Height. This helps visualize how ScalingMode::Contain might leave gaps or how ScalingMode::Cover clips the source.

Screenshot of our scene showing entity scaling with debug helpers

Complete Code

Our completed ImageComponent and Utilities header, including all of the updates we made in this lesson, is provided below:

We also made smaller changes to the Component and TransformComponent classes. We've provided these below, with our changes highlighted:

Summary

In this lesson, we completed the ImageComponent by adding scaling capabilities. It now supports setting a target Width and Height.

Using SDL_BlitScaled() and a ScalingMode enum, we provided options for handling image aspect ratios within those dimensions. We also added entity-level scaling through our TransformComponent, and updated our ImageComponent to respect that scaling

Key takeaways:

std::optional is useful for representing properties that might not be explicitly set, allowing fallback to default behavior (like using natural image dimensions).
SDL_BlitScaled() allows rendering a source rectangle to a destination rectangle of a different size, performing the scaling.
Different scaling strategies (None, Fill, Contain, Cover) are needed to handle aspect ratio mismatches between the source image and target render area.
Helper functions (like CalculateBlitInfo) help keeping rendering code clean when implementing complex logic like scaling modes.
Entity-level scaling (TransformComponent::Scale) should be considered when rendering, but it may have additional effects too, such as changing the physical bounding boxes once we implement collisions.
Drawing debug helpers that visualize the final render bounds aids in understanding and debugging scaling behavior.

Image and Entity Scaling

Starting Point

Image Width and Height

Nullable Values, `std::optional` and Monadic Operations

Scaling Modes

Using `SDL_BlitScaled()`

Helper Function for Blit Rectangles

Scaling Mode: `None`

Scaling Mode: `Fill`

Scaling Mode: `Contain`

Scaling Mode: `Cover`

Entity Scaling

Updating the Transform Component

Updating the `Component` Class

Updating the Image Component

Drawing Debug Helpers

Bounding Boxes

Complete Code

Summary

Creating a Physics Component

Game Development with SDL2

Image and Entity Scaling

Starting Point

Image Width and Height

Nullable Values, std::optional and Monadic Operations

Scaling Modes

Using SDL_BlitScaled()

Helper Function for Blit Rectangles

Scaling Mode: None

Scaling Mode: Fill

Scaling Mode: Contain

Scaling Mode: Cover

Entity Scaling

Updating the Transform Component

Updating the Component Class

Updating the Image Component

Drawing Debug Helpers

Bounding Boxes

Complete Code

Summary

Creating a Physics Component

Nullable Values, `std::optional` and Monadic Operations

Using `SDL_BlitScaled()`

Scaling Mode: `None`

Scaling Mode: `Fill`

Scaling Mode: `Contain`

Scaling Mode: `Cover`

Updating the `Component` Class