This document discusses resolution handling in Cocos2d game development. It describes the different resolutions of iOS devices and how to handle scaling images to support different resolutions in Cocos2d-iPhone and Cocos2d-x. In Cocos2d-iPhone, images are scaled by a scale factor based on the device, while in Cocos2d-x developers can set the design resolution and use different resolution policies to scale images. The document provides advice on which resolution policies to use for different scaling needs.

1. Resolution in game
developing
iPhone game with cocos2d

2. Table of Contents
IOS family
Resolution in Cocos2d-iphone
Resolution in Cocos2d-x
・Design resolution
・Resolution policy
・Content scale factor
・Resolution policy advice

3. IOS family
Type Screen size (pixel)
iPhone 480, 320
iPhone Retina 960, 640
iPhone 5 1136, 640
iPad 1024, 768
iPad Retina 2048, 1536

4. Cocos2d-iphone
IOS family
Resolution in Cocos2d-iphone
Resolution in Cocos2d-x
・Design resolution
・Resolution policy
・Content scale factor
・Resolution policy advice

5. Resolution in cocos2d-
iPhone
Type Screen size
(pixel)
Point size in
cocos2d
(point)
Scale
factor
iPhone 480, 320 480, 320 1
iPhone
Retina
960, 640 480, 320 2
iPhone 5 1136, 640 568, 320 2
iPad 1024, 768 1024, 768 1
iPad
Retina
2048, 1536 1024, 768 2

6. One image for all devices?
For example:
image size: (1136, 640)  For iPhone 5

7. Is it available for iPhone retina?
YES!
CCSprite *sprite = [CCSprite
spriteWithFile:@"bg_town.png"];
CGSize winsize = [[CCDirector sharedDirector] winSize];
sprite.position = ccp(winsize.width / 2, winsize.height / 2);
[self addChild:sprite];

8. Center aligned

9. Is it available for iPhone 3GS?
NO!

10. If set sprite.scale = 0.5f;

11. So we can use this
solution?
NO!
Reason: MEMORY!
Device Installed
Memory
Available
Memory
Memory
Warning
Threshold
First generation
Second
generation
128MB Around 30MB Around 20MB
iPhone 3GS
iPad
256MB Around 90MB Around 70MB
iPhone 4/4S
iPad 2
512MB Around
300MB
Around
250MB

12. Is it available for iPad?
Size of iPhone retina: (960, 640)
Size of iPad: (1024, 768)
Answer: NO!
Reason: Coordinator is different!
Coordinator of iPhone retina: (480, 320)
Coordinator of iPad: (1024, 768)

13. Table of Contents
IOS family
Resolution in Cocos2d-iphone
Resolution in Cocos2d-x
・Design resolution
・Resolution policy
・Content scale factor
・Resolution policy advice

14. Resolution in cocos2d-x
Type Screen size
(pixel)
Point size in
cocos2d
(point)
Scale
factor
iPhone 480, 320 ? ?
iPhone
Retina
960, 640 ? ?
iPhone 5 1136, 640 ? ?
iPad 1024, 768 ? ?
iPad
Retina
2048, 1536 ? ?
You can set point size and scale factor freely!

15. Design resolution size
CCEGLView::sharedOpenGLView() ->
setDesignResolutionSize(width, height, policy)
(width, height) is design resolution, i.e. point size.
policy defines the relationship between point size
and device screen size.

16. Resolution Policy in
cocos2d-x 1
scale_x = device_screen_size.width /
point_size.width
scale_y = device_screen_size.height /
point_size.height
scale: The scale ratio to scale image from
point size.

17. Resolution Policy in
cocos2d-x 2
kResolutionExactFit
In x axis, scale = scale_x
In y axis, scale = scale_y
kResolutionNoBorder
scale = max(scale_x, scale_y)
kResolutionShowAll
scale = min(scale_x, scale_y)

18. Content Scale factor
CCDirector::sharedDirector() ->
setContentScaleFactor(scaleFactor)
Scale factor define the ratio of image size to
resolution size.

19. Example
Image: (1136, 640)
-> For iPhone 5
Target
Device: iPad (1024, 768)
Resolution size(Point size): (480, 320)

20. scaleFactor = 1024.0 / 480 = 2.13
Policy: kResolutionExactFit
1136
768
1024
721
(1136 / scaleFactor ,
640 / scaleFactor )
( (1136 / scaleFactor ) * (1024.0 / 48
(640 / scaleFactor ) * (768.0 / 320) )
->
(1136, 721)

21. Resolution Policy Advice 1
kResolutionExactFix
The whole point size is available in the
screen.
The whole image will be shown in the
screen, but may appear stretched or
compressed.
Don’t choose this.

22. Resolution Policy Advice 2
kResolutionNoBorder
It is full screen. There is no black belt.
But not the whole point size is available in the
screen.
CCSize visibleOrigin =
CCDirector::sharedDirector()->getVisibleOrigin();
CCSize visibleSize =
CCDirector::sharedDirector()->getVisibleSize();
From visibleOrigin and visibleSize, you get the
rect that can be display in the screen.

23. Resolution Policy Advice 3
kResolutionShowAll
The whole point size is available in the screen.
Will have black belt in horizontal or vertical
direction

24. Thank you!