首页 > 代码库 > 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, // 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};
参考官方说明： 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 屏幕适配方案 分辨率适应
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。