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:

    SDL_GetWindowSurface(Game::getInstance()->getPrimaryWindow())->w / 2 - 101 / 2,
    SDL_GetWindowSurface(Game::getInstance()->getPrimaryWindow())->h / 2 - 171 /2,

I get the following result: Single Texture

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++) {
            SDL_GetWindowSurface(Game::getInstance()->getPrimaryWindow())->w / 2 - i * 101,
            SDL_GetWindowSurface(Game::getInstance()->getPrimaryWindow())->h / 2 - 171 / 2,

which produces the following result: Double Texture

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?


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

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: Final Result

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


1 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++ )
            rowOriginX + (column * c_imageWidth),
            rowOriginY + (row * c_imageHeight),
  • \$\begingroup\$ Hi, thank's that works great... Apart from one small thing... The images have some white space at the top. I've updated the OP to what I'm hoping to achieve and (I know I'm supposed to be good at maths for game design) maths isn't my forte and I suck at it. That being said, I've tried tweaking your example a little bit and no matter what I do, the images starts pushing themselves towards the bottom (see OP)? \$\endgroup\$ Apr 3, 2015 at 16:26
  • \$\begingroup\$ Edit: The more rows I add the less it stays central just as a side note :L \$\endgroup\$ Apr 3, 2015 at 16:40

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .