Resolution in cocos2d family

Click here to load reader

  • date post

    18-Jun-2015
  • Category

    Technology

  • view

    2.314
  • download

    2

Embed Size (px)

description

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

Transcript of Resolution in cocos2d family

  • 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. Dont 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!