cocos-creator使用记录11_适配

1.cocos creator的适配
在你的每个场景的Canvas的属性检查器中，勾选FitWidth。
然后在Canvas下挂接的bg图片添加一个Widget组件，勾选上left、right、top、bottom。这样背景图片
会随Canvas的大小进行缩放。但由于我们选的是FitWidth，当遇到如iphone x这种屏幕比较长的手机时，
会看到屏幕上下都有黑边。
若不希望在非16*9屏幕上看到黑边，可以一开始就让美术做一张比画布大的bg图片，比如画布是750*1334，
bg图片大小可以为750*2000。然后在Widget中取消勾选left、right、top、bottom，勾选居中的2个选项。


2.测试适配
cocos creator中以模拟器运行你的项目，在弹出窗口点击鼠标右键，在弹出菜单中选择视图，
挨个试一遍其中的手机分辨率。
同样的，可以在微信开发者工具中测试手机分辨率。


3.对iphoneX的适配
iphoneX的屏幕大小：2436*1125
屏幕大致比例：18*9
我们自己的游戏使用的屏幕大小：1334*750
屏幕大致比例：16*9


主域项目需要显示子域画布的脚本---------
properties: {
//子域画布
    subDomainCanvas: cc.Sprite,
},
onLoad: function() {
//屏幕比例
//项目是按1334*750开发的，即16/9的屏幕长宽比，超过这个比例的手机，根据画布适宜宽的选择，主域显示没问题，
//子域画布出现了高度方向上的缩小(iphoneX上)，这里要有针对性地做出补偿
if(cc.director.getWinSize().height / cc.director.getWinSize().width - 16 / 9 > 0.1){ 
this.node.getChildByName("subDomainCanvas").scaleY = cc.director.getWinSize().height / 1334;
}
},


注意：subDomainCanvas是一个Sprite控件，位置为于屏幕中间，其大小应该是750*1334，不要对其使用Widget组件，否则
设置不了其缩放。
子域项目中的Canvas应该和主域的Canvas都选择FitWidth。
在使用微信开发者工具测试时，选择iphoneX作为模拟器，发现如下
cc.director.getWinSize().width=750 
cc.director.getWinSize().height=1624