Resolution in game developing iPhone game with cocos2d

Table of Contents

IOS family

Resolution in Cocos2d-iphone

Resolution in Cocos2d-x・ Design resolution・ Resolution policy・ Content scale factor・ Resolution policy advice

IOS familyType Screen size (pixel)

iPhone 480, 320

iPhone Retina 960, 640

iPhone 5 1136, 640

iPad 1024, 768

iPad Retina 2048, 1536

Cocos2d-iphone

IOS family

Resolution in Cocos2d-iphone

Resolution in Cocos2d-x・ Design resolution・ Resolution policy・ Content scale factor・ Resolution policy advice

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

One image for all devices?

For example:image size: (1136, 640) For iPhone 5

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];

Center aligned

Is it available for iPhone 3GS?

NO!

If set sprite.scale = 0.5f;

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 3GSiPad

256MB Around 90MB

Around 70MB

iPhone 4/4SiPad 2

512MB Around 300MB

Around 250MB

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)

Table of Contents

IOS family

Resolution in Cocos2d-iphone

Resolution in Cocos2d-x・ Design resolution・ Resolution policy・ Content scale factor・ Resolution policy advice

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!

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.

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.

Resolution Policy in cocos2d-x 2

kResolutionExactFitIn x axis, scale = scale_xIn y axis, scale = scale_y

kResolutionNoBorderscale = max(scale_x, scale_y)

kResolutionShowAllscale = min(scale_x, scale_y)

Content Scale factor

CCDirector::sharedDirector() ->setContentScaleFactor(scaleFactor)

Scale factor define the ratio of image size to resolution size.

Example

Image: (1136, 640) -> For iPhone 5

Target Device: iPad (1024, 768)Resolution size(Point size): (480, 320)

scaleFactor = 1024.0 / 480 = 2.13Policy: kResolutionExactFit

1136

768

1024

721

(1136 / scaleFactor , 640 / scaleFactor )

( (1136 / scaleFactor ) * (1024.0 / 480), (640 / scaleFactor ) * (768.0 / 320) )->(1136, 721)

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.

Resolution Policy Advice 2

kResolutionNoBorderIt 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.

Resolution Policy Advice 3

kResolutionShowAll

The whole point size is available in the screen.Will have black belt in horizontal or vertical direction

Thank you!