cocos2d-js 3.0 屏幕适配方案分辨率适应

cocos2d-js 3.0 屏幕适配方案分辨率适应

首先介绍一个api和相应的参数：

cc.view.setDesignResolutionSize(1024,768,cc.ResolutionPolicy.FIXED_WIDTH);

这里设置游戏制作的目标尺寸和显示的模式。

模式包括：

cc.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.
    EXACT_FIT:0, The entire application fills the specified area,without distortion but possibly with some cropping,
     while maintaining the original aspect ratio of the application.
    NO_BORDER:1,0); line-height:1.5!important"> 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.
    SHOW_ALL:2,0); line-height:1.5!important"> 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
    FIXED_HEIGHT:3,0); line-height:1.5!important"> The application takes the width of the design resolution size and modifies the height of the internal
     aspect ratios
    FIXED_WIDTH:4,UNKNOWN:5
};

参考官方说明：http://www.cocos2d-x.org/wiki/Multi_resolution_support

EXACT_FIT会拉伸游戏，充满整个屏幕，最简单最粗暴；
SHOW_ALL保持游戏原比例，让一边占满屏幕，另外一侧黑边；
NO_BORDER跟SHOW_ALL类似，但让短边占满屏幕，另外一侧超出屏幕，不显示黑边，一部分画面在屏幕外，无法显示；
FIXED_WIDTH和FIXED_HEIGHT都是NO_BORDER的升级版，指定那一侧充满屏幕，另外一侧超出屏幕。

这里建议使用FIXED_WIDTH和FIXED_HEIGHT，其他用法请参考：

http://www.cocoachina.com/game/20130513/6180.html

http://www.cocoachina.com/cocos/20140516/8451.html

这两个方案适合UI沿着屏幕边缘布局，而游戏画面居中，游戏背景则可以裁剪（显示一部分）的情况。

通过上边的文章，我们知道winSize，visibleSize，designSize（自己的设计尺寸）。

无论什么方案，winSize和visibleSize是一致的，cc.director.getWinSize()和cc.director.getVisibleSize()获取到一样的数据。

以FIXED_WIDTH为例

布局过程中，横向就按照设计稿直接写死绝对坐标值都可以，因为cc.director.getVisibleSize().width就是我们的设计宽度，cocos2d通过缩放会让横向刚好占满屏幕；

而纵向，就利用cc.director.getVisibleSize().height来布局。

y=0表示刚好在屏幕边缘，在FIXED_WIDTH方案中，不像NO_BORDER会有visibleOrigin，这里不需要考虑这个值，因为总是0，cocos2d自动把y=0放到这个visibleOrigin位置了。

而屏幕上方则使用cc.director.getVisibleSize().height - 20类似的方式来布局。

这里的20也会随着整个画面的压缩比例而变小。

例如设计宽高为1024*768，但实际放到725*225的区域运行，那么cc.director.getVisibleSize()获取到的是（1024， 315）左右。实际上这个尺寸并不是真实屏幕尺寸，但可以按照这个数值进行布局。

屏幕尺寸

另外cc.view.getFrameSize可以获取屏幕尺寸

cocos2d-js 3.0 屏幕适配方案 分辨率适应

猜你在找的Cocos2d-x相关文章

cocos2d-js 3.0 屏幕适配方案分辨率适应