Cocos2d-x 2.x screen Adaptation basics

At first I overlooked the problem of screen adaptation, and now I find out how important it is. The basic concept is understood through practice, and the strategy of screen adaptation is built on it, there are many, but I have not studied it seriously. This is just a comb for the basics of screen adaptation.

For screen fitting, there is a base unit: pixels. Pixels make up the resolution, and the resolution should not be interpreted as a size . So here does not say the size, only to say the resolution, not to say long and wide, only to say horizontal.

　　1.FrameSize

　　This is best understood, is the resolution of the device, different phones have different resolutions. In fact, development on the PC also has a device resolution, that is the window resolution set in the Main.cpp, this window should be understood as the device. So it's not necessary to simulate a screen adaptation strategy on your phone, which is enough for PC simulations. Pass:

Cceglview::sharedopenglview ()->getframesize ();

You can get the resolution of the device, which is the basis for screen adaptation. Note that the device resolution must be dynamically transformed, and different values can be obtained depending on the device.

　　2.winSize

　　Many tutorials have described it as a design resolution, which may be appropriate, but I don't think it's a good idea. I call it the game resolution . It's like a canvas that must be attached to an artboard, which is the device screen. If you do not set it manually, the default value is the same as the device resolution set at the entrance of the program. So, developed on the PC, by default, the game resolution and window resolution is consistent, but due to different platform program entrance inconsistent (not the engine entrance), put on the mobile phone will appear ill-equipped. Game resolution and device resolution are different concepts and are not the same.

We need to manually set the Winsize and manually set the Winsize, which is called screen adaptation . Detailed in the following article.

　　3.visibleSize

I still think that the other tutorials have a vague description of it. I call it the visible game resolution . What is the visible game resolution? Like a large canvas, larger than the attached artboard, will go out some cloth, anyway, this canvas is the game resolution. But only the part of the canvas inside the artboard can be counted as the visible game resolution (for example, in fact, Visiblesize is more than framesize). Visiblesize is the winsize that appears in the Framesize. on this point of concept, my description is still not very precise. But as long as you understand winsize, Visiblesize is a subset of Winsize.

Next, you can analyze the screen adaptation options provided by the engine.

Interestingly, the engine placed the set game resolution (Winsize) and the adaptation parameters in an interface: Peglview->setdesignresolutionsize (float width, float height, Resolutionpolicy resolutionpolicy)

The adaptation parameter has 5 available values, ShowAll, Noborder, Exactfit did not change the game resolution, just by a ratio to get a new resolution, I call it the actual game resolution, which is presented to the player's real game resolution . Although it must be consistent with the device resolution in principle, it is still different. The remaining two parameters are Fixedheight and fixedwidth, which are used to modify the game resolution, that is, to change the winsize, to ensure that the winsize of the horizontal and vertical proportions of the vertical ratio of framesize. I made a chart to show the effect.

　　

		Horizontal (pixels)	Vertical (pixels)	Effect
Device Resolution (FRAMESIZE)		640	960
Game Resolution (Winsize)		720	1200
Ratio (equipment/games)		0.888888889	0.8
Actual resolution (Winsize)	ShowAll	576	960	Calculates the actual resolution according to the small ratio, black edges appear around (Figure 1)
	Noborder	640	1067	Calculates the actual resolution based on the large ratio, up and down the screen (Figure 2)
	Exactfit	640	960	Appear stretched
	Fixedheight	640	960	Change the width of the winsize to 800 according to the Framesize's longitudinal ratio
	FixedWidth	640	960	Change the winsize height to 1080 according to the Framesize's longitudinal ratio

Give two more illustrations:

ShowAll:

Noborder:

The red box represents the actual resolution, which is the real game resolution. As you can see in the Noborder strategy, the actual resolution of the vertical axis reached 1067 pixels, larger than the device resolution of the longitudinal axis of 960 pixels, so went out of the part. Also visiblesize is less than winsize, which equals 960 divided by the large ratio, which equals 1080. Although we are not good at observing Winsize and visiblesize, but it is clear that they exist, the actual resolution is the epitome of winsize.

At this point, the engine's screen adaptation base was roughly collated. But there are so many devices on the screen, the adaptation method is definitely a lot. Now the practice is insufficient, can only be left to summarize later!

Finally, we will record a method of modifying the screen in the Android development environment:

In the Androidmanifest.xml file, locate android:screenorientation, "landscape" for horizontal display, "Portrait" for Portrait display.

Cocos2d-x 2.x screen Adaptation basics