Cocos2d-JS screen adaptation (NO-BORDER mode)

Cocos2d-JS screen adaptation (NO-BORDER mode)

It has been nearly a year since the previous blog. I did not write anything because I have been too busy. I also don't know what to write or whether I want to play a game project, but I switched from a mobile game to an Html5 game, continue to use Cocos2d, with the language changed to JS.

Not much of the old, this simple talk about the adaptation of the Cocos2d-JS problem, on a project (mobile phone QQ space play it "a little cute", welcome to try ^_^) not considering the resolution adaptation problem, the 640*960 method is directly used for development. Basically, adaptation issues are not considered.

The current project needs to consider the white-edged screen problem. Today, I have been studying it for a long time. This is because the NO_BORDER mode needs to calculate the screen size, which also solves the screen adaptation problem.

 

Then in the Code on the adaptation layer of the location and size of the calculation, if you still write according to the code of this blog, may not get the desired effect, because the Cocos2d-JS is a bit different.

Now let's reconsider the NO_BORDER mode principle.

In the code, NO_BORDER is interpreted as Theentire application fills the specified area, without distortion but possiblywith some cropping, while maintaining the original aspect ratio of theapplication. (translation is: the program will be full of the entire area, and the cropping will not change the original aspect ratio)

 

As shown in: on iPhone 4S (my current mobile phone), if the design height and width are 1280*720 (the design height and width are passed through cc. view. setDesignResolutionSize function setting), then what is the height and width displayed on the screen? The height and width are also the size we need to set for the adaptation layer.

It's not 960*640 or 1280*720.

In NO_BORDER mode, the cell phone screen size is used as the camera size and the height and width are designed as the object (stage). In this example, the camera needs to be enlarged, the screen height can be 720 pixels displayed.

After adding an image to the image, you can sense that the adaptive layer must be 960.0 X (720.0/640.0) and 720.0 X (/) in width.

Under rational analysis, the size of the adaptation layer is quickly calculated. For the code, see the dockUI function.

NO_BORDER is suitable for scenarios with large differences in resolution and relatively independent UI, so the effect is ideal.

 

Var _ LayoutUtil = cc. class. extend ({// UI Layer dockUI: function (panelUI) {panelUI. setAnchorPoint (0.5, 0.5); var size = cc. view. getFrameSize (); var wsize = cc. director. getWinSize (); var rw = wsize. width/size. width; var rh = wsize. height/size. height; panelUI. setPosition (wsize. width/2, wsize. height/2); if (rw> rh) {panelUI. setContentSize (cc. size (size. width * rh, size. height * rh);} else {panelUI. setContentSize (cc. size (size. width * rw, size. height * rw) ;}}, // The default value of the anchor is 0.5/*** docked on the left, distance from the left side to intervalX pixels * @ param {CCNode} node * @ param {int} intervalX margin * @ return {null} None */dockLeft: function (node, intervalX, isCenter) {intervalX = intervalX | 0; var parent = node. getParent (); var pos = node. getPosition (); var size = node. getContentSize (); if (isCenter) {node. setPosition (size. width/2 + intervalX, node. getParent (). getContentSize (). height/2);} else {node. setPosition (size. width/2 + intervalX, pos. y) ;}},/*** dock to the right, distance from the right side to intervalX pixels * @ param {CCNode} node * @ param {int} intervalX margin * @ return {null} None */dockRight: function (node, intervalX, isCenter) {intervalX = intervalX | 0; var parent = node. getParent (); var psize = parent. getContentSize (); var pos = node. getPosition (); var size = node. getContentSize (); if (isCenter) {node. setPosition (psize. width-size. width/2-intervalX, node. getParent (). getContentSize (). height/2);} else {node. setPosition (psize. width-size. width/2-intervalX, pos. y) ;}},/*** dock on top, intervalY pixels away from top margin * @ param {CCNode} node * @ param {int} intervalX margin * @ return {null} None */dockTop: function (node, intervalY, isCenter) {intervalY = intervalY | 0; var parent = node. getParent (); var psize = parent. getContentSize (); var pos = node. getPosition (); var size = node. getContentSize (); if (isCenter) {node. setPosition (node. getParent (). getContentSize (). width/2, psize. height-size. height/2-intervalY);} else {node. setPosition (pos. x, psize. height-size. height/2-intervalY) ;},/*** dock to the bottom, intervalY pixels at the bottom margin * @ param {CCNode} node * @ param {int} intervalX margin * @ return {null} None */dockBottom: function (node, intervalY, isCenter) {intervalY = intervalY | 0; var parent = node. getParent (); var pos = node. getPosition (); var size = node. getContentSize (); if (isCenter) {node. setPosition (node. getParent (). getContentSize (). width/2, size. height/2 + intervalY);} else {node. setPosition (pos. x, size. height/2 + intervalY) ;},/*** dock in center * @ param {CCNode} node * @ return {null} None */dockCenter: function (node) {var parent = node. getParent (); var size = parent. getContentSize (); node. setPosition (size. width/2, size. height/2) ;},}); var LayoutUtil = new _ LayoutUtil ();