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

待我称王封你为后i 2022-08-03 14:58 147阅读 0赞

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

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

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

模式包括：

![复制代码][copycode.gif]

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,
        // 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,
        // 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,
        // The application takes the width of the design resolution size and modifies the height 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_WIDTH:4,
    
        UNKNOWN:5
    };

![复制代码][copycode.gif]

参考官方说明： 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_game_20130513_6180.html]

[http://www.cocoachina.com/cocos/20140516/8451.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可以获取屏幕尺寸

源引：http://www.cnblogs.com/kenkofox/p/3951210.html

[copycode.gif]: /images/20220731/8d028d2758034c739103268dd40f9ae7.png
[http_www.cocoachina.com_game_20130513_6180.html]: http://www.cocoachina.com/game/20130513/6180.html
[http_www.cocoachina.com_cocos_20140516_8451.html]: http://www.cocoachina.com/cocos/20140516/8451.html