微信号:CocosEngine

介绍:Cocos引擎官方账号,第一时间为您送上引擎动态、精品教程、达人专访等干货,还会定期举办有奖活动喔!

亲证!Cocos2d-x全屏适配iPhone X

2017-09-26 00:00 C姐

新款iphone发布会


北京时间9月13号凌晨,苹果发布了三款新iPhone, 分别为iPhone 8、iPhone 8 Plus和iPhone X。其中iPhone 8和iPhone 8 Plus的分辨率与前几代保持一致,分别为750x1334与1242x2208,且它们都是矩形屏幕,因此开发者无需针对这两款新iPhone做特殊的适配工作。但作为苹果的第一款全面屏手机iPhone X却剪了个漂亮的刘海,并且拥有更修长的身型,分辨率更改为1125×2436,游戏如果不做修改便无法全屏适配到iPhone X。



C姐相信咱们的开发者小伙伴里头不乏土豪。但是即便你买得起iphone X,如果Cocos的游戏不做任何适配,就直接安装,后果将会导致运行后出现上下或者左右两大黑边,游戏体验会大打特打折扣。



开发者将会在Xcode的Console里看到如下警告信息:


```

js-tests iOS[79809:3252326] [LayoutConstraints] Unable to simultaneously satisfy constraints.

Probably at least one of the constraints in the following list is one you don't want. 

Try this: 

(1) look at each constraint and try to figure out which you don't expect; 

(2) find the code that added the unwanted constraint or constraints and fix it. 

(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 

```

如何全屏适配iphone X


首先,需要了解iOS启动画面的配置原理,从第一代iPhone开始到现在的iPhone X,苹果提供了三套启动画面的配置方法,按时间周期分别为`Static Launch Images`、`Images Asset Catalog`和`Launch Screen Storyboard`。


多张静态图片(Static Launch Images)


早期苹果可能也没想到当今的iOS设备会出现如此多的分辨率,当时只考虑了`Static Launch Images`这种方式,在Info.plist中配置一下UILaunchImages就够了。


```

...

...

<key>UILaunchImages</key>

<array>

<dict>

<key>UILaunchImageMinimumOSVersion</key>

<string>8.0</string>

<key>UILaunchImageName</key>

<string>Default</string>

<key>UILaunchImageOrientation</key>

<string>Portrait</string>

<key>UILaunchImageSize</key>

<string>{320, 480}</string>

</dict>

<dict>

<key>UILaunchImageMinimumOSVersion</key>

<string>8.0</string>

<key>UILaunchImageName</key>

<string>Default</string>

<key>UILaunchImageOrientation</key>

<string>Landscape</string>

<key>UILaunchImageSize</key>

<string>{320, 480}</string>

</dict>

...

...

```

Cocos2d-x从1.0版本开始到最新的3.15版本,也一直都是使用这种方式来适配不同的分辨率。通过提供目标设备分辨率的启动图片并配置在Info.plist中,使游戏在目标设备上能够全屏显示。


这样做的弊端:


* 每出一款新分辨率的iOS设备,需要重新配置这个Info.plist,并提供新的启动图片

* 由于上一点,游戏需要重新适配,并出新包,提交AppStore审核

* 人工修改文本文件,容易出错

* 新添加的启动图片会增加游戏包体


可视化资源管理(Images Asset Catalog)


苹果似乎意识到多张静态图片配置启动画面的弊端,继而推出了可视化配置启动画面的方式。开发者只要将不同设备分辨率的全屏图片拖动到对应的区域即可。



看到上图了么,如果是支持横竖屏旋转的普通应用,足足需要配置22张图片啊。游戏由于只有竖屏或者横屏模式,图片数量可以减半,但至少也需要11张之多。


此方法解决了人工修改Info.plist的麻烦,而且如果设置了错误分辨率的图片,Xcode打包的时候会提示出错。


但是此方法还是没法适配未来可能出现的新分辨率的设备,即针对新分辨率设备需要重新出包,也没解决包体增大的问题。


强烈推荐

布局文件(Launch Screen Storyboard))


从Xcode6开始,苹果添加了一种使用Storyboard布局文件的方法设置启动画面。这种方法完美解决以上两种配置方法暴露的问题。


要将Cocos2d-x工程如何修改为使用Storyboard启动画面,只需要简单几个步骤:


* 拷贝[LaunchScreen.storyboard](https://raw.githubusercontent.com/cocos2d/cocos2d-x/v3/tests/cpp-empty-test/proj.ios/LaunchScreen.storyboard)和[LaunchScreenBackground.png](https://github.com/cocos2d/cocos2d-x/raw/v3/tests/cpp-empty-test/proj.ios/LaunchScreenBackground.png)到`proj.ios`或者`ios`目录。



* 添加LaunchScreen.storyboard和LaunchScreenBackground.png进Xcode工程, 并确认在`Build Phases` -> `Copy Bundle Resource`存在这两个文件。



* 工程配置中General -> App Icons and Launch Images中设置Launch Screen File为LaunchScreen。



* 删除Info.plist中无用的UILaunchImages字段

* 删除无用的旧的启动图片,Default.png, Default@2x.png, Default-568h@2x.png等


具体的修改可以戳「阅读原文」进入Github参考。


修改完,编译运行程序,在iPhone X模拟器中就能够看到游戏已经完美实现全屏了。



总结


Storyboard设置启动画面具备更强大的扩展性,目前引擎的示例中只是添加一张图片放到全屏的UIImageView中,开发者可以根据对启动画面的需求,修改storyboard,添加UILabel等其他iOS系统控件,实现更加丰富的布局效果。


虽然Cocos2d-x优先支持iphone X全屏适配,但Cocos Creator随后就到。小伙伴们敬请期待!

其他


最近社区有小伙伴反馈:xcode9模拟器运行自身应用时很流畅,但在运行Cocos项目时却巨卡无比。是的,我们也发现了这个问题,而且坑爹的是,这是苹果自己弄出来的BUG,我们在引擎层面无力修复。


苹果论坛相关帖子 :

forums.developer.apple.com/message/259528#259528


苹果官方人员的回复是:


也就是说,iOS 11、tvOS 11、watchOS 4的模拟器里面,在OpenGLES.framework是有BUG的,导致性能很低。所以只能坐等苹果修复咯。修复之前,先把自己的iphone升级到iOS 11做真机调试吧。


戳原文,布局文件详细修改方案!

 
COCOS 更多文章 「超级幻影猫2」专访:原汁原味和全新制造并不冲突 首款上线XBOX ONE的Cocos游戏! 知乎话题:Cocos Creator的现状如何? 五节JavaScript免费课程大放送! 全新玩法机制,获得苹果畅销榜单推荐的Cocos游戏「超进化物语」
猜您喜欢 【译文】《Apache Flink官方文档》 Apache Flink介绍 毕业了,也许你最需要仅仅是一份儿靠谱的工作...... Machine Learning-线性回归算法分析 ZStack架构探秘(五): 超强查询能力 一个程序员这辈子需要挣多少钱才能维系一个家庭?