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
・C...
IOS family
Type Screen size (pixel)
iPhone 480, 320
iPhone Retina 960, 640
iPhone 5 1136, 640
iPad 1024, 768
iPad Retina 2...
Cocos2d-iphone
IOS family
Resolution in Cocos2d-iphone
Resolution in Cocos2d-x
・Design resolution
・Resolution policy
・Cont...
Resolution in cocos2d-
iPhone
Type Screen size
(pixel)
Point size in
cocos2d
(point)
Scale
factor
iPhone 480, 320 480, 320...
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 = [[CC...
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 g...
Is it available for iPad?
Size of iPhone retina: (960, 640)
Size of iPad: (1024, 768)
Answer: NO!
Reason: Coordinator is d...
Table of Contents
IOS family
Resolution in Cocos2d-iphone
Resolution in Cocos2d-x
・Design resolution
・Resolution policy
・C...
Resolution in cocos2d-x
Type Screen size
(pixel)
Point size in
cocos2d
(point)
Scale
factor
iPhone 480, 320 ? ?
iPhone
Ret...
Design resolution size
CCEGLView::sharedOpenGLView() ->
setDesignResolutionSize(width, height, policy)
(width, height) is ...
Resolution Policy in
cocos2d-x 1
scale_x = device_screen_size.width /
point_size.width
scale_y = device_screen_size.height...
Resolution Policy in
cocos2d-x 2
kResolutionExactFit
In x axis, scale = scale_x
In y axis, scale = scale_y
kResolutionNoBo...
Content Scale factor
CCDirector::sharedDirector() ->
setContentScaleFactor(scaleFactor)
Scale factor define the ratio of i...
Example
Image: (1136, 640)
-> For iPhone 5
Target
Device: iPad (1024, 768)
Resolution size(Point size): (480, 320)
scaleFactor = 1024.0 / 480 = 2.13
Policy: kResolutionExactFit
1136
768
1024
721
(1136 / scaleFactor ,
640 / scaleFactor )
...
Resolution Policy Advice 1
kResolutionExactFix
The whole point size is available in the
screen.
The whole image will be sh...
Resolution Policy Advice 2
kResolutionNoBorder
It is full screen. There is no black belt.
But not the whole point size is ...
Resolution Policy Advice 3
kResolutionShowAll
The whole point size is available in the screen.
Will have black belt in hor...
Thank you!
Upcoming SlideShare
Loading in …5
×

Resolution in cocos2d family

3,511 views

Published on

The resolution solution for different devices whiling developing with cocos2d-iphone and cocos2d-x.

Published in: Technology, Travel
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,511
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Resolution in cocos2d family

  1. 1. Resolution in game developing iPhone game with cocos2d
  2. 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. 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. 4. Cocos2d-iphone IOS family Resolution in Cocos2d-iphone Resolution in Cocos2d-x ・Design resolution ・Resolution policy ・Content scale factor ・Resolution policy advice
  5. 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. 6. One image for all devices? For example: image size: (1136, 640)  For iPhone 5
  7. 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. 8. Center aligned
  9. 9. Is it available for iPhone 3GS? NO!
  10. 10. If set sprite.scale = 0.5f;
  11. 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. 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. 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. 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. 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. 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. 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. 18. Content Scale factor CCDirector::sharedDirector() -> setContentScaleFactor(scaleFactor) Scale factor define the ratio of image size to resolution size.
  19. 19. Example Image: (1136, 640) -> For iPhone 5 Target Device: iPad (1024, 768) Resolution size(Point size): (480, 320)
  20. 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. 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. 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. 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. 24. Thank you!

×