Positioning and Rendering Entities

Currently, all of our entities are positioned at $(0, 0)$, the default value of our TransformComponent's Position vector.

We need a way to change this. Let's add a setter:

1#pragma once
2#include "Vec2.h"
3#include "Component.h"
4
5class TransformComponent : public Component {
6public:
7  using Component::Component;
8
9  Vec2 GetPosition() const {
10    return Position;
11  }
12
13  void SetPosition(const Vec2& NewPosition) { 
14    Position = NewPosition; 
15  } 
16  
17  void Move(const Vec2& Movement) {
18    Position += Movement;
19  }
20
21private:
22  Vec2 Position{0, 0};
23};

Now, back in Scene.h, let's use this to position two entities in our scene. We'll define their positions using screen coordinates, where (0,0) is the top-left of the window.

We'll also give them each an ImageComponent, which we'll render later in the lesson:

1// ...
2
3class Scene {
4 public:
5  Scene() {
6    std::string BasePath{SDL_GetBasePath()};
7
8    EntityPtr& Player{Entities.emplace_back(
9      std::make_unique<Entity>(*this))};
10    Player->AddTransformComponent()
11          ->SetPosition({100, 240});  
12    Player->AddImageComponent(BasePath + "player.png");
13
14    EntityPtr& Enemy{Entities.emplace_back(
15      std::make_unique<Entity>(*this))};
16    Enemy->AddTransformComponent()
17         ->SetPosition({250, 20});  
18    Enemy->AddImageComponent(BasePath + "dragon.png");
19  }
20  // ...
21};

API Improvements

We expect to be accessing the entity's position frequently within our components, so let's add a helper function to the Component base class to make this friendlier.

We'll add GetOwnerPosition(), which retrieves the position from the owner's TransformComponent.

Any of our components can now use this simpler API:

1// Conceptual Example
2class SomeComponent : public Component {
3  void SomeFunction() {
4    // Before
5    GetOwner()->GetTransformComponent()->GetPosition(); 
6
7    // After
8    GetOwnerPosition();
9  }
10};

It's often useful to "see" the invisible data in our game world, like the exact point our TransformComponent represents. We can achieve this using debug helpers: temporary graphics rendered only for developers. Let's create a way for components to draw their own debug information.

To set this up, we'll add a virtual function to our Component base class, including an SDL_Surface* argument specifying where the helpers should be drawn:

1// ...
2
3class Component {
4 public:
5  // ...
6  virtual void DrawDebugHelpers(
7    SDL_Surface* Surface) {}
8  // ...
9};

If our build has enabled debug helpers through a preprocessor flag, our Entity will call this new DrawDebugHelpers() on all of its components. We typically draw debug helpers after everything else has rendered, as this ensures the helpers are drawn on top of the objects in our scene.

1// ...
2
3#define DRAW_DEBUG_HELPERS 
4
5class Entity {
6public:
7  // ...
8  virtual void Render(SDL_Surface* Surface) {
9    for (ComponentPtr& C : Components) {
10      C->Render(Surface);
11    }
12    #ifdef DRAW_DEBUG_HELPERS
13    for (ComponentPtr& C : Components) {
14      C->DrawDebugHelpers(Surface);
15    }
16    #endif
17  }
18  // ...
19};

Rendering Entity Positions

Our positions are stored as float values in our Vec2 struct, but SDL rendering functions require integer coordinates.

Let's add a function to convert SDL_FRect objects (which use floats) to SDL_Rect objects (which use integers) by rounding the values. We'll define this function in a new Utilities header file and namespace so we can easily include it wherever it is needed:

1#pragma once
2#include <SDL3/SDL.h>
3#include <cmath>
4
5namespace Utilities{
6inline SDL_Rect Round(const SDL_FRect& R) {
7  return {
8    static_cast<int>(std::round(R.x)),
9    static_cast<int>(std::round(R.y)),
10    static_cast<int>(std::round(R.w)),
11    static_cast<int>(std::round(R.h)),
12  };
13}
14}

Let's now combine GetPosition() and Utilities::Round() to override the DrawDebugHelpers() function in our TransformComponent. We'll have it draw a 20 x 20 pixel square, centered at its position:

1#pragma once
2#include <SDL3/SDL.h> // for SDL_Surface 
3#include "Utilities.h" // for Round 
4#include "Vec2.h"
5#include "Component.h"
6
7class TransformComponent : public Component {
8public:
9  // ...
10
11  void DrawDebugHelpers(SDL_Surface* S) override {
12    auto [x, y]{GetPosition()};
13    SDL_Rect Square{Utilities::Round({
14      x - 10, y - 10, 20, 20
15    })};
16    SDL_FillSurfaceRect(S, &Square, SDL_MapRGB(
17      SDL_GetPixelFormatDetails(S->format),
18      nullptr, 255, 0, 0));
19  }
20
21private:
22  Vec2 Position{0, 0};
23};

We should now see red squares representing the position of the player and enemy entities we added to our Scene.

In the previous section, we successfully loaded our images into SDL_Surfaces within our AssetManager, and our ImageComponent instances have a shared pointer to those surfaces. Now, let's use them to render our images to the screen!

The SDL function we need is SDL_BlitSurface().

Let's delete our placeholder Render() implementation in ImageComponent.cpp and implement the real logic.

We can get the coordinates we need using our GetOwnerPosition() function and the Round helper. Only the x and y values of our destination rectangle are relevant for SDL_BlitSurface(), so we'll just set w and h to 0:

1// ...
2#include "Utilities.h"
3
4// ...
5
6void ImageComponent::Render(
7  SDL_Surface* Surface
8) {
9  if (!ImageSurface) return;
10
11  auto [x, y]{GetOwnerPosition()};
12  SDL_Rect Destination{
13    Utilities::Round({x, y, 0, 0})
14  };
15
16  if (!SDL_BlitSurface(
17    ImageSurface.get(),
18    nullptr,
19    Surface,
20    &Destination
21  )) {
22    std::cerr << "Error: Blit failed: "
23      << SDL_GetError() << '\n';
24  }
25}
26
27// ...

Let's compile and run our project, and confirm that everything is working.

Drawing our images at the entity's exact position works, but often we want the entity's TransformComponent position to represent its center instead of its top-left corner. Or maybe an entity has multiple ImageComponents that need to be positioned relative to each other.

To solve this, we need a way to draw the image with an offset relative to the entity's main position.

Let's add a Vec2 Offset member to ImageComponent and a SetOffset() method:

1// ...
2#include "Vec2.h" 
3
4class ImageComponent : public Component {
5 public:
6  // ...
7
8  void SetOffset(const Vec2& NewOffset) { 
9    Offset = NewOffset; 
10  } 
11
12private:
13  // ...
14  Vec2 Offset{0, 0}; // Default to no offset 
15};

Next, we need to use this offset when rendering. We'll modify ImageComponent::Render() to add the offset to the owner's position:

1// ...
2
3void ImageComponent::Render(
4  SDL_Surface* Surface
5) {
6  if (!ImageSurface) return;
7
8  auto [x, y]{
9    // Before:
10    GetOwnerPosition() 
11    // After:
12    GetOwnerPosition() + Offset 
13  };
14
Remaining Code Unchanged|Show
28}
29
30// ...

Drawing Debug Helpers

Let's add debug helpers to our ImageComponent class too. We'll draw a small blue rectangle at the image's rendering position (including the offset).

We'll override the DrawDebugHelpers() function in our header file, and implement it in our source file:

With our offset set to {0, 0}, we should see our TransformComponent (red) and ImageComponent (blue) rendering their debug squares in the same position.

Calculating offsets often requires knowing the dimensions of the image being drawn (e.g., to find its center). Let's add helper methods GetSurfaceWidth() and GetSurfaceHeight() to ImageComponent.

Now let's update Scene.h to center the player's image. We'll use SetOffset along with our new dimension getters.

1// ...
2
3class Scene {
4 public:
5  Scene() {
6    std::string BasePath{SDL_GetBasePath()};
7
8    EntityPtr& Player{Entities.emplace_back(
9      std::make_unique<Entity>(*this))};
10    Player->AddTransformComponent()
11          ->SetPosition({100, 240});
12
13    ImageComponent* PlayerImage{
14      Player->AddImageComponent(BasePath + "player.png")
15    };
16
17    PlayerImage->SetOffset({
18      PlayerImage->GetSurfaceWidth() * -0.5f,
19      PlayerImage->GetSurfaceHeight() * -0.5f
20    });
21
22    EntityPtr& Enemy{Entities.emplace_back(
23      std::make_unique<Entity>(*this))};
24    Enemy->AddTransformComponent()
25         ->SetPosition({250, 20});
26    Enemy->AddImageComponent(BasePath + "dragon.png");
27  }
28  // ...
29};

This will make the player image appear centered on its TransformComponent's position. The dragon will still be drawn from its top-left.

Below are the complete versions of the files we modified in this lesson.

We connected our image data to the screen. We set up positioning for our entities, implemented rendering logic in ImageComponent using SDL_BlitSurface, and added offset support to allow precise image placement (like centering).

We also created debug helpers to visualize positions and added helper functions to Component and Utilities to streamline coordinate management.

Key Takeaways:

• TransformComponent holds the entity's primary position.
• Components use GetOwnerPosition() to access this position easily.
• ImageComponent uses SDL_BlitSurface() to draw its shared SDL_Surface to the screen.
• Utilities::Round converts floating-point positions (Vec2) to integer rectangles (SDL_Rect) for SDL rendering.
• Offsets in ImageComponent allow images to be positioned relative to the entity's origin (e.g., centering).
• Debug helpers are essential for verifying that logical positions match visual output.