Cocos2D iOS tour: How to Write a hamster game (2): HD support in Cocos2D

Cocos2D iOS tour: How to Write a hamster game (2): HD support in Cocos2D

 

High-Definition display and Cocos2D

Well, there is good news-the latest version of Cocos2D includes full support for HD screens. You can simply do it in steps 1-2-3 below!

Enable HD support when the CCDirector enableRetinaDisplay method is called. if you use the cocos2D Project template, you only need to remove the comment in the line in app delegate. add the hd genie to your app, but not the "@ 2x" suffix, but the "-hd" suffix for cocos2D. when you load the genie, the normal image will be used on the normal screen, and the Cocos2D on the high-definition screen will automatically load the high-definition image for you. now you can use vertices in Cocos2D instead of pixels to locate them. note that some APIs (but not many) must be processed in pixels-in this case, their names will contain pixel words, otherwise they will always be processed in one way.

In general, the easiest thing to do is to make a picture with the highest resolution (for example, the size of 2X under the HD screen), and then you can simply scale down the image to the appropriate size of the iphone.

You may wonder why you have to work hard to create two different images-why not always call a large image and program it to scale it down? Well, loading textures to the memory is the memory of the app, So if you load HD images on the SD screen, it will waste a lot of memory.

But don't worry-you don't need to always scale the image in Photoshop. TexturePacker actually has the feature of scaling the given image, which is used on our Cocos2D journey.

IPad, iPhone, and screen aspect ratio

The above makes processing on the HD screen easier, but what should we do on the iPad?

Well, this will bring us a very annoying question: how to make it work on both iphone and ipad-compare the screen aspect ratio of these devices!

The iPhone's resolution is 960x640-aspect ratio, and the ipad's resolution is 1.5x768 (the original author wrote that the HD ipad was not yet born. the aspect ratio is 1.33.

This means that if you re-use an image that fills the entire background on the ipad (768x1024) on the iphone, it may not be fully adapted. if you scale down the image by the iphone width (multiplied by 0.9375), you will get 720x960, so the additional part will be cropped!

This is annoying because not only the background image, but also the aspect ratio of the screen makes cross-device compatibility difficult.

Here are some solutions, which are listed here (you can also post your own solutions in the comments ):

Draw a playable area in the center of the iPhone (640x960) screen ). this will include a little extra in the border-you can use the background to hide it, and players may not even notice it. this allows you to easily reuse materials and convert coordinates on different devices. this method is used in this series of blog posts. you can use a ratio similar to the aspect ratio on the iphone. If you restrict "main content" to on the ipad screen, this will bring a 42-pixel border to each side of your ipad screen. if you can adjust the content to adapt to the 684x1024 rectangle, you can also reduce the image size for other devices. you can prepare different images for iPhone, iPad, and HD devices. Their coordinate systems are also different. this will have the maximum elasticity, but it will also increase the size of the app file

For these problems-Cocos2D does not currently have any help methods to automatically load images with the "-hd" suffix on the ipad (the new version of Cocos2D can already select a suitable image for the ipad. pig), and convert the coordinate system. everything depends on you!