Cocos2D: Updating positions for retina

Question

I've been working with a modified version of Cocos2D 0.99.5. Nothing has changed in this modified version as far as positions go, but when I enabled retina, the tmx maps display fine, but detected tiles, most likely using tileGIDAt and positions with ccp, as well as positioning sprites are way off. This is a known situation that I've done some research on, but don't know the easiest way to overcome it. I hope to edit just a few things in Cocos2D (using points instead of pixels when using retina) to solve this, but I haven't seen anything online that mentions this.

I saw some code divided an object's position by CC_CONTENT_SCALE_FACTOR

CGPoint objectPosition = [tmxLayer positionAt:objectTile];
if (CC_CONTENT_SCALE_FACTOR() == 2){
  objectPosition.x /= CC_CONTENT_SCALE_FACTOR();
  objectPosition.y /= CC_CONTENT_SCALE_FACTOR();
}

After checking out some methods in Cocos2D I really don't know where to use this. So what exact updates do I need to do and where do I need to put them?

Answer 1

I ran into the same problem, and here is what I found.

The problem has to do with points versus pixels and how Cocos2d handles them, which you alluded to in your question. As you know, a point on a non-retina display is the same as a retina display. The iPhone 3GS, which is non-retina, has a resolution of 320 x 480, and the center point of that screen is 160 x 240. The iPhone 4, which is retina, has a resolution of 640 x 960, but the center "point" of that screen is still 160 x 240.

Let us assume that your tmx map is made up of tiles that are 32 x 32 pixels. Let us further assume that you want to check a tile that your "hero" sprite is currently at. Finally, let us assume that your hero sprite's position is 192 x 288. To get the tile coordinate you would logically take the position of your sprite and divide both the x and y positions by your tile size of 32 (I am leaving out the Y coordinate flipping stuff). Rather than hard coding the value of 32, I assume you are getting this value by using something like the following code, where tileMap is your already loaded map:

tileMap.tileSize.width

So based on the 192 x 288 position, your hero is at tile 6 x 9 within your map. The problem is that on a retina display the 192 x 288 position is based on points, but your 32 x 32 tile is based on pixels. On the retina display, 32 x 32 pixels is really 16 x 16 in points. So in actuality, your hero sprite is not at tile 6 x 9 but rather at tile 12 x 18.

As such, an easy way to fix this is to check for a retina display, and if one exists then when trying to determine a specific tile coordinate you should divide the width and height of your tile by 2 to convert it into points.

This worked great for me, and I hope it helps you as well.