I have received a question regarding the tile size and board offset calculations in Chapter 1, Thanks For the Memory Game, from Creating Games with cocos2d for iPhone 2. These calculations are not taken apart and explained within the text. Although they are similar to the tile spacing, which is explained, I will cover the “why” here. I will focus on the width calculations; the height calculations work the same way, except with height instead of width. (Due to the nature of publishing, we can’t always it every detail into the text, so some small details like this were omitted from the published version.)
The first formula is:
tileWidth = ((boardWidth - (boardColumns * padWidth)) / boardColumns) - padWidth;
Okay, this is pretty dense at first glance. For clarity, let’s review what the variables mean. boardWidth is the total number of points available for the board of tiles to be drawn. boardColumns is the number of columns of tiles we need to display in that area. padWidth is the number of points of spacing we want between our tiles.
We begin with the total boardWidth. From this we subtract (boardColumns * padWidth). Multiplied together, this is the total amount of space we need for the number of columns we want to represent, since each tile will have a padding area after it. When we subtracted that result from the boardWidth, we know that we need to fit our tiles in the remaining space available. The next step is to divide the remaining space by the number of columns we need. Finally, we subtract the padWidth at the end because we have actually include one padding space too many, since we don’t need the padding after the final tile.
Example:
If we have a total boardWidth of 400, boardColumns of 5, and a padWidth of 10, the calculation looks like this:
tileWidth = ((400 - (5 * 10)) / 5) - 10
tileWidth = ((400 – (50)) / 5) - 10
tileWidth = ((350) / 5) - 10
tileWidth = (70) - 10
tileWidth = 60
We can check this result by seeing if the tiles fit in the boardWidth. 5 (boardColumns) * 70 (tileWidth + padWidth) = 350 This means we have 350 width accounted for, with a leftover space of 50. This is where the next formula comes into play.
The second formula is:
boardOffsetX = (boardWidth - ((tileSize.width + padWidth) * boardColumns)) / 2;
I’ve cheated a bit here, as most of this formula is almost exactly what we did to validate the result of the last equation. Skipping the boardWidth for now, we calculate the total size of a tile plus padding, multiply that times the number of requested columns. This gives us the total width (in points) that is taken up by the tiles and the spacing. We subtract that from the boardWidth to see that we have 50 points extra left. We divide that by 2 to see how much of this “leftover space” should be on the left side of the board. This means that even if we do not use the exact amount of screen space we have designated for the board (the boardWidth variable), we can add this boardOffsetX to every tile position so that the complete board of tiles is perfectly centered in our playing area.
Going back to the test equation from the first formula, we already saw that we had a leftover space of 50. This means that once we divide it by 2, then the boardOffsetX would be 25. If you plug in other values into the formula, you will see that this works reliably for any sensible tile size. (Sensible, as in the tiles + padding must be smaller than the total boardWidth, but that should be obvious!)
If you have questions, feel free to drop me a line at paul@trollcavegames.com
