COCOS2D-JS 3.0 screen adaptation solution resolution adaptation

First introduce an API and the corresponding parameters:

Cc.view.setDesignResolutionSize (1024x768, 768, CC.) Resolutionpolicy.fixed_width);

This sets the target size and display mode of the game production.

Patterns include:

Cc. Resolutionpolicy = {    //The entire application is visible on the specified area without trying to preserve the original aspect ratio.    //Distortion can occur, and the application may appear stretched or compressed.exact_fit:0,    //the entire application fills the specified area, without distortion and possibly with some cropping,    //While maintaining the original aspect ratio of the application.No_border:1,    //The entire application is visible in the specified area without distortion while maintaining the original    //aspect ratio of the application. Borders can appear on both sides of the application.Show_all:2,    //The application takes the height of the design resolution size and modifies the width of the internal    //Canvas So it fits the aspect ratio of the device    //No distortion'll occur however you must make sure your application works on different    //aspect ratiosFixed_height:3,    //The application takes the width of the design resolution size and modifies the height of the internal    //Canvas So it fits the aspect ratio of the device    //No distortion'll occur however you must make sure your application works on different    //aspect ratiosFixed_width:4, UNKNOWN:5};

Reference Official Note: Http://www.cocos2d-x.org/wiki/Multi_resolution_support

Exact_fit will stretch the game, fill the entire screen, the simplest and most brutal;
Show_all to maintain the original proportion of the game, let one side full screen, the other side black edge;
No_border and Show_all similar, but let the short side of the screen, the other side beyond the screen, do not display black edge, part of the screen outside, unable to display;
Fixed_width and Fixed_height are both upgraded versions of No_border, which specify that side is full of screens and the other side is out of the screen.

It is recommended to use Fixed_width and fixed_height, for other usage please refer to:

http://www.cocoachina.com/game/20130513/6180.htmlhttp://www.cocoachina.com/cocos/20140516/8451. HTML These two scenarios fit the UI along the edge of the screen, while the game screen is centered, while the game background can be clipped (shown in part). through the above article, we know Winsize,visiblesize,designsize (own design size). So within these two scenarios, winsize and visiblesize are consistent, cc.director.getWinSize () and cc.director.getVisibleSize () get the same data. taking Fixed_width as an examplein the layout process, it is possible to write the absolute coordinate values directly according to the design draft, because Cc.director.getVisibleSize (). Width is our design breadth, cocos2d by zooming will make the landscape just fill the screen;and portrait, use Cc.director.getVisibleSize (). Height to layout.  Y=0 said just at the edge of the screen, in the fixed_width scenario, unlike No_border will have Visibleorigin, there is no need to consider this value, because always 0,cocos2d automatically put y=0 in this visibleorigin position. the top of the screen uses Cc.director.getVisibleSize (). height-20 a similar way to layout. The 20 here will also be smaller with the compression ratio of the entire picture.  For example, the design of the width of 1024x768, but actually put into the 725*225 area to run, then cc.director.getVisibleSize () obtained is (1024, 315) around. In fact, this size is not a real screen size, but it can be laid out according to this value.   Screen SizeIn addition cc.view.getFrameSize can get screen size

COCOS2D-JS 3.0 screen adaptation solution resolution adaptation