Cocos2d-x for iOS platform real machine test some of the attention

Source: Internet
Author: User

Below is a simple record of some of the notes you encounter in recent cocos2d-x projects on iOS platform real machine testing and simulator testing (using ipod ):


1. Image Size

Pictures are basically used in the game, so pay special attention to the size of images when using images.

Note: Generally, when designing an image, the image size should be designed to be twice the size of the image we need. (Why, which is explained below)

For example:

We need a 50*50 image for Sprite display. That is to say, the size displayed on the screen (whether it is a simulator or a real machine) is 50*50. What is the size of the image we designed? That's right. It's 100*100. When testing in the simulator, we should set the scale to 0.5 so that the required size can be displayed in the simulator; in the real machine test, you don't need to set the scale of the image. You can directly use the 100*100 image to correctly display the desired 50*50 size image.

Why?

In the debug message, we can see:

① If it is a simulator, cocos2d: Surface Size: 320x480

② If it is a real machine, cocos2d: Surface Size: 640x960


That's right. This is because of the screen resolution problem. Here I am using an iPhone simulator.


If your simulator uses the following retina, the screen resolution is 640*960.



2. Coordinate Position

As mentioned above, the image size problem is caused by different resolutions of the simulator and the real machine. In fact, there is also a problem-the size of coordinates.

Because we generally design programs based on the screen size of 320*480, the corresponding Location Coordinate settings are also equivalent to the size of 320*480. So because the screen of the actual real machine is 640*960, If we debug it in the simulator of 320*480 and put the program directly in the real machine, the positions of images and so on are disordered. Why? Because the coordinates are halved. The solution is also very simple, that is, multiply the x-axis and Y-axis coordinate data of all coordinate points by 2.


Conclusion: the root cause of the above problem is that the resolution of the simulator we use is different from that of the real machine. The simulator is 320*480, and the real machine is 640*960. As my personal habit is to design a program under the simulator of 320*480, all of them need to perform some additional processing (in fact, it is also very simple) on the image size and coordinate point size ). However, if it is too troublesome, you can use the iPhone (retina 3.5-inch) simulator. The simulator resolution is 640*960 the same as that of a real machine.

In short, as long as the image size and coordinate point size are always processed based on 640*960 of the real machine, when the program is transplanted to the real machine, there is no problem.


The following content is supplemented:

In fact, on the cocos2d-x screen resolution adaptation problem, there have been a lot of online blog is introduced, mainly for the Android platform of multi-resolution screen, however, the screen resolution is relatively fixed for iOS platforms.

So for multi-resolution screen adaptation, there is actually a method in cocos2dx to solve this problem --- setdesignresolutionsize.

This method calls applicationdidfinishlaunching () when the application starts ().


 /**     * Set the design resolution size.     * @param width Design resolution width.     * @param height Design resolution height.     * @param resolutionPolicy The resolution policy desired, you may choose:     *                         [1] kResolutionExactFit Fill screen by stretch-to-fit: if the design resolution ratio of width to height is different from the screen resolution ratio, your game view will be stretched.     *                         [2] kResolutionNoBorder Full screen without black border: if the design resolution ratio of width to height is different from the screen resolution ratio, two areas of your game view will be cut.     *                         [3] kResolutionShowAll  Full screen with black border: if the design resolution ratio of width to height is different from the screen resolution ratio, two black borders will be shown.     */    virtual void setDesignResolutionSize(float width, float height, ResolutionPolicy resolutionPolicy);


The third parameter can be:

enum ResolutionPolicy{    // The entire application is visible in the specified area without trying to preserve the original aspect ratio.    // Distortion can occur, and the application may appear stretched or compressed.    kResolutionExactFit,    // The entire application fills the specified area, without distortion but possibly with some cropping,    // while maintaining the original aspect ratio of the application.    kResolutionNoBorder,    // The entire application is visible in the specified area without distortion while maintaining the original    // aspect ratio of the application. Borders can appear on two sides of the application.    kResolutionShowAll,    // The application takes the height of the design resolution size and modifies the width of the internal    // canvas so that it fits the aspect ratio of the device    // no distortion will occur however you must make sure your application works on different    // aspect ratios    kResolutionFixedHeight,    // The application takes the width of the design resolution size and modifies the height of the internal    // canvas so that it fits the aspect ratio of the device    // no distortion will occur however you must make sure your application works on different    // aspect ratios    kResolutionFixedWidth,    kResolutionUnKnown,};

The solution for specific screen adaptation is not described here. You can refer to this article: Click to open the link.

The following describes how to set the image size and coordinate point size on the iOS platform I mentioned above.

As I have said before, the design program is generally based on 320*480, so we can use applicationdidfinishlaunching () in

Pdirector-> setopenglview (cceglview: Export dopenglview (); then add) Add the following two lines of code


CCSize designSize = CCSizeMake(320, 480);    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width, designSize.height, kResolutionShowAll);


In this way, the screen size of the real machine is set to 320*480.

The size of the real machine obtained through ccdirector: shareddirector ()-> getwinsize () is also 320*480.

When we set coordinates in the program, the coordinates of the real machine and the simulator are the same. However, if you are using a doubled image, you need to scale the image by 0.5. The advantage of doing so is that when the simulator and the real machine are debugging the same, there will be no picture size or coordinate point size inconsistency.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.