Cocos2d 3.0 screen adaptation

1. Solution

 

The solution is provided directly, and then explained slowly. Of course, this solution is not completely perfect.

 

 

[CPP]View plaincopy

1. // For horizontal screen games:
2. Glview-> setdesignresolutionsize (960,640, resolutionpolicy: fixed_height );
3. // Display a 960x640 background
4. Auto visiblesize = Director: getinstance ()-> getvisiblesize ();
5. Auto BG = sprite: Create ("bg.png ");
6. This-> addchild (BG );
7. BG-> setposition (visiblesize. width/2, visiblesize. Height/2 );
8. // BG-> setposition (visiblesize. width/2,320); // equivalent to the preceding
9. BG-> setscalex( visiblesize. width/960 );
11. // An genie is displayed in the upper-right corner.
12. Auto SPR = sprite: Create ("test.png ");
13. This-> addchild (SPR );
14. SPR-> setposition (visiblesize. Width-50, visiblesize. Height-50 );
15. // Because it is a fixed height, visiblesize. height is always 640, so the following statement is also acceptable.
16. // SPR-> setposition (visiblesize. Width-50,590 );
19. // For a portrait game:
20. Glview-> setdesignresolutionsize (640,960, resolutionpolicy: fixed_width );

 

All art plots follow the 960x640 specifications.

 

2. Start testing various adaptation methods

 

The screen adaptation should actually start with opengles. I skipped it here. If you are interested, read this article to learn about 2D Development Using OpenGL ES in Android (drawing the first triangle outside the article)"

Glview-> setdesignresolutionsize (960,640); the third parameter is ignored first. What does setdesignresolutionsize mean? Is to setFixed AreaProgram layout and art design. Then, you can use opengles to project to a specific mobile phone screen, regardless of the specific mobile phone screen size. For example, if the screen resolution of a mobile phone is 480x320, opengles automatically doubles the screen resolution for projection. The mobile phone screen resolution is 1920x1280, and opengles will automatically zoom in twice for projection. There is no need to change both the program and the Art: a set of program coordinates and a set of art resources.

For example, for a background image, you only need a 960x640 image and it is OK to put it in the center of (480,320.

A genie assumes that it is to be placed in the upper right corner, and put it in the position (960,640. You do not need to consider visiblesize or anything in cocos2d.

 

In reality, the resolution of a mobile phone cannot be a multiple of 960x640. And we need to display it in full screen, so we have the third parameter to specify the specific projection method.

There are currently five resolutionpolicies for cocos2d:

 

[CPP]View plaincopy

1. Enum class resolutionpolicy
2. {
3. Exact_fit,
4. No_border,
5. Show_all,
6. Fixed_height,
7. Fixed_width
8. };

 

2.1 exact_fit

 

Exact_fit is completely projected to the full screen. This is the perfect thing for programs and fine arts, but it will be stretched.

 

 

The above is the original image of 960x540. I have added a reference object to the four corners. The total figure is an image.

Assume that the resolution of the target mobile phone is 1136X500 (the actual resolution does not exist). Using exact_fit is the following effect:

 

 

In fact, it is acceptable to stretch the background. The main problem is that the genie will also be stretched, and the stretching area is uncontrollable.

Exact_fit: applicable to small personal projects. A slight stretch does not affect the displayed game. However, large projects in the company are basically unavailable.

When using exact_fit, visiblesize is always 960x640 regardless of the Resolution of the mobile phone.

 

2.2 show_all

 

First explain show_all. It will not stretch, but there will be black edges on the left or right or up and down, without full screen.

1136x640

 

1024x768

 

Can show_all be used? Almost unusable. Although its visiblesize is also 960x640. However, the Black edge cannot be used by Apple. Black borders here cannot be covered with things.

 

2.3 no_border

 

As the name implies, no_border does not have a Black edge and maintains the aspect ratio. The result is that some of them are cropped out.

1136x640

 

When the resolution of the mobile phone is relatively long, it is not enough to go up or down, and will be cut off. Pay attention to the references under the background.

Visiblesize width: 960
Visiblesize Height: 540.8450927734375 // less than 640

 

1024x768

 

When the resolution of the iPad is relatively high, it is not enough and will be cut off. Pay attention to the reference on the left of the background.

Visiblesize width: 853.3333129882812 // less than 960
Visiblesize Height: 640

 

The use of no_border will cause constant changes to visible and will be dropped.

 

2.4 fixed_height

Fixed_height is similar to fixed_width. Fixed_height and fixed_width are available only in cocos2d. This solution is fixed in one direction and has a fixed proportion. This will lead to partial coverage or partial removal, and dynamic adaptation of the program is required.

1136x640

Figure 7

 

Visiblesize width: 1136 // changes according to the cell phone screen resolution

Visiblesize Height: 640 // The value is always 640

 

1024x768

Visiblesize width: 854 // changes according to the cell phone screen resolution

Visiblesize Height: 640 // The value is always 640

Figure 7 although the effect here seems to be the same as that of show_all, it is completely different. You can see the visiblesize. The Black edge here can be covered by manually stretching the background. Someone asked, isn't the stretching background the same as exact_fit? Different! Exact_fit is to stretch the entire area, and the genie placed in the scenario will also be stretched. Fixed_height will not stretch the genie.

The place where the genie is placed is exquisite. in the vertical direction, you can use the devil's number. 320 must be vertically centered.Horizontal considerationFor example, visiblesize should be taken into account to put a genie in the upper right corner.

Setposition (visiblesize. Width-50,640-50 );

Below is the simple Effect of stretching the background, plus a genie.

 

[JavaScript]View plaincopy

1. VaR visiblesize = cc. Director. getinstance (). getvisiblesize ();
2. VaR scalerate = visiblesize. width/960;
4. VaR BG = cc. Sprite. Create ("Res/bg.jpg ");
5. This. addchild (BG );
6. BG. setposition (visiblesize. width/2, visiblesize. Height/2 );
7. BG. setscalex (scalerate );
8. VaR sp = cc. Sprite. Create ("Res/menu1.png ");
9. This. addchild (SP );
10. Sp. setposition (100 * scalerate, 320 );

1136x640

1024x768

Other Android resolutions are not listed.

 

3. Talking about resource adaptation

 

We know that it is very difficult for you to adapt a set of images to 960x640,204 8x1536 or an iPhone 6 plus 1920x1080 in the future. The main problem is that if you are using a set of 960x640 images, you will not be clear at high resolution. If you are using a set of X images, run the comparison card on a low-resolution mobile phone. In the above example, the 960x640 resolution is used as the design resolution. You can consider increasing the resolution of the mobile phone to 1248x832 in the future.

 

Another problem is the aspect ratio of the screen. The iPad is 1024/768, that is, the proportion of 1.33 is lower than 960/640 of 1.5, while the screen aspect ratio of iPhone 5 and iPhone 6 has increased to 1.775. Add the android screen aspect ratio. We can consider using a ratio of 1.6 in the future. For example, 1248x780 is used as the design resolution. Then the iPad should be especially careful with special processing, horizontal, and individual UIS should be scaled out and adapted.

 

There are no best practices, or two sets of resources should be prepared, so the game package will be relatively large. At present, we usually prepare a set of low-resolution resources. In fact, it does not look too bad in terms of high resolution. Of course, if your game is an iPad game, you should consider it carefully.

 

3. You have prepared an EXE to play.

 

You can download the program and debug it yourself. Http://www.waitingfy.com/archives/1304#3exe

EXE can be opened at \ Runtime \ Win32 \ prebuiltruntimejs.exe win7, but XP cannot.

In config. JSON, init_cfg can be used to adjust the device resolution.

You can adjust the designresolutionsize and formula in Main. js.

App. js can be used to change the background and other locations. The project is cocos2d Js for convenient debugging, but the principle is the same.

More fun to understand.

 

Cocos2d 3.0 screen adaptation