SDL2: Unable to get center of screen when drawing more than one texture?

Question

so I've been trying for the last four hours to get this to work and although I can get to the center of the screen when printing one texture using:

TextureManager::getInstance()->drawTexture("block_brown",
    SDL_GetWindowSurface(Game::getInstance()->getPrimaryWindow())->w / 2 - 101 / 2,
    SDL_GetWindowSurface(Game::getInstance()->getPrimaryWindow())->h / 2 - 171 /2,
    101,
    171,
    Game::getInstance()->getPrimaryRenderer(),
    SDL_FLIP_NONE);

I get the following result:

I can keep the center of up to two textures in a row and after that it gets out of hand and I completely lose it. I'm using the following for the two:

for (int i = 0; i < 2; i++) {
    for int j = 0; j < 2; i++) {
        TextureManager::getInstance()->drawTexture("block_brown",
            SDL_GetWindowSurface(Game::getInstance()->getPrimaryWindow())->w / 2 - i * 101,
            SDL_GetWindowSurface(Game::getInstance()->getPrimaryWindow())->h / 2 - 171 / 2,
            101,
            171,
            Game::getInstance()->getPrimaryRenderer(),
            SDL_FLIP_NONE);

which produces the following result:

As you can see, it looks to be in the center of the window, but if I try to add more than two in a row or more than one in a column, I then have to start fighting it to keep it in the center.

So my question is, how would one manage to get the textures to stay central, no matter how many I add?

EDIT:

This is the final result I'm ultimately looking for:

When I start trying to add layers I then have to start fighting it again to keep it central?

This the result I'm having right now:

The more I think about this, the more I think I'm going completely the wrong way and doing it completely wrong.

Answer 1

There's nothing to do with SDL in this; it's just a maths question.

General strategy for centering a group of objects: Get the full size of the group and center that, instead of trying to position each element separately.

Off the top of my head, here's some extremely simple pseudocode for this specific situation:

// First, a few constants, giving semantic names in order to remove some
// repeated magic numbers in the code.
const int c_imageWidth = 101;
const int c_imageHeight = 171;

// Set these to whatever values you want, to control how many rows and
// columns get drawn.
int rows = <number of rows you want>;
int columns = <number of columns you want>;

// Now, let's figure out how large the complete set of images are.
int fullWidthOfARowOfImages = columns * c_imageWidth;
int fullHeightOfAColumnOfImages = rows * c_imageHeight;

// And to make the centering maths easier to read, let's define a 
// few named variables telling us the half-dimensions of the full set.
int rowHalfWidth = fullWidthOfARowOfImages / 2;
int columnHalfHeight = fullHeightOfAColumnOfImages / 2;

// find the center of the screen, assuming that the coordinate system
// used by our rendering is orthographic, and precisely matches the 
// window's own coordinate system.
int screenCenterX = Game::getInstance()->getPrimaryWindow())->w / 2;
int screenCenterY = Game::getInstance()->getPrimaryWindow())->h / 2;

// now let's define a centered 'origin' for where we're going to start 
// drawing our rows and columns of images, such that the whole group will
// end up centered.  
int rowOriginX = screenCenterX - rowHalfWidth;
int rowOriginY = screenCenterY - rowHalfHeight;

for ( int row = 0; row < rows; row++ )
{
    for ( int column = 0; column < columns; column++ )
    {
        TextureManager::getInstance()->drawTexture("block_brown",
            rowOriginX + (column * c_imageWidth),
            rowOriginY + (row * c_imageHeight),
            c_imageWidth,
            c_imageHeight,
            Game::getInstance()->getPrimaryRenderer(),
            SDL_FLIP_NONE);
    }
}