cocoscreator 适配iPhoneX

2018-11-22  本文已影响305人  o0下一站生活0o

在引擎根目录中打开boot.js
C:\CocosCreator\resources\static\preview-templates\boot.js
打开该文件, 添加相应分辨率大小.

// init device resolutions
var devices = [
    { name: 'IPhone X', width: 375, height: 812, ratio: 3 },
];

或者横屏的:
{ name: 'IPhone X', width: 812, height: 375, ratio: 3 },

这样在引擎中可以适配iPhone x的大小了
打开预览可以发现在左上角多了IPhone X 预览的分辨率项.

Mac里的地址
/Applications/CocosCreator.app/Contents/Resources/static/preview-templates/boot.js

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

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

3.对iphoneX的适配
iphoneX的屏幕大小:24361125
屏幕大致比例:18
9
我们自己的游戏使用的屏幕大小:1334750
屏幕大致比例: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

上一篇下一篇

猜你喜欢

热点阅读