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

最新推荐文章于 2021-11-05 17:51:34 发布
最新推荐文章于 2021-11-05 17:51:34 发布
阅读量236 收藏
点赞数
文章标签： iphone cocos2d xcode ios 游戏引擎
原文链接：https://mp.weixin.qq.com/s?__biz=MjM5ODAxNTM2NA==&mid=2659645694&idx=1&sn=92a46abfbde90c813eee9e3aba119bec&chksm=bda360158ad4e903de39ea1df962c028a829749279bb40748a0d803b640621c1dd4d60f67ae2&scene=27
版权

新款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。

e65957ac712babb5feb11ed44a733e9f.jpeg

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

1f4138e212f27323ac3c42d4924ed2e8.jpeg

开发者将会在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）

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

f9b84c7724f579e7411e265520cb55bb.jpeg

看到上图了么，如果是支持横竖屏旋转的普通应用，足足需要配置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`目录。

2614071cef63540b96a5d388d32c8d4b.png

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

43ac21625804a3257332b4ff017e451c.jpeg

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

38fdfe7ab7be6534612a999c1bb7583c.jpeg

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

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

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

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

86adf8f703164c2eb5da9bfc3217e499.jpeg

总结

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

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

其他

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

苹果论坛相关帖子 ：

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

苹果官方人员的回复是：

410cd93530350bf21043be6f181e30f5.png

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

5fc3664b10ea65f955f324d21f72d01a.gif

戳原文，布局文件详细修改方案！

Cocos 引擎
关注
cocos2dx iphoneX 游戏适配
pjdd123的博客
12-21 1万+
最近几天在研究游戏适配IphoneX机型的问题，现总结一下以防忘记： 之前想着通过采用网上一篇介绍cocos2dx 适配X的方法实现全屏，链接：https://mp.weixin.qq.com/s/2icxj1E8t2540Zr0j4aIZA，这样是解决了全屏的问题，但是因为齐刘海的问题，有些按钮都被遮挡住了，如果单独对这些遮挡的按钮进行位置操作的话，整个ui布局效果就会很差，而且针对每一个被遮
Cocos2d-x lua 屏幕适配
cangdu的专栏
01-05 5126
研究了两天屏幕适配，了解了Cocos提供的屏幕适配的方案有下面几种: 1, EXACT_FIT 使用这个选项，可以保证设计区域完全铺满屏幕，但是可能会出现界面被拉伸。 2, SHOW_ALL 按原始比例进行缩放，图片不变形，为了保证缩放后较长的边也能完全显示，较短的边剩下的位置会用黑边填充，居中显示。 3, NO_BORDER 这个和上面的SHOW_ALL相反，按原始比例进行缩放，图片
cocos2dx适配phonex
L的博客
11-05 298
1、引入Launch Screen Storyboard布局文件 2、如果需要获得安全页面展示(留出刘海区域，防止刘海遮挡) RootViewController.mm添加viewSafeAreaInsetsDidChange函数 - (void)viewSafeAreaInsetsDidChange { [super viewSafeAreaInsetsDidChange]; NSLog(@"viewSafeAreaInsetsDidChange %@",NSStringFr.
cocos2x-adaptation:cocos2dx 横版各种适配 iphoneX适配 齐刘海 凹凸屏
05-11
cocos2x-adaptation cocos2dx 适配 横版 iphoneX适配 iphoneX适配 apple官方参考: 使用的是cocos2dx 3.13版本以上，其他版本可以依照找个流程修改。 1.修改RootViewController.mm 增加ios11的新回调方法 - (void)viewSafeAreaInsetsDidChange { [super viewSafeAreaInsetsDidChange]; NSLog(@"viewSafeAreaInsetsDidChange %@",NSStringFromUIEdgeInsets(self.view.safeAreaInsets)); [self updateOrientation]; } bool changeViewFrame = false; - (void)update
iPhoneX 序列适配方案
无神的博客
09-23 683
和往常一样，苹果发布新产品，我们作为开发者都需要对系统和UI布局进行适配，今年也是一样。从去年发布的 iphoneX开始，iPhone 手机加入了刘海设计，而且针对于iphone的刘海，需要特殊的适配。今年新出的3款iphone都带有刘海，自然也不例外。 在iphonex以前iphone的顶部导航栏高度都是统一的64，底部导航栏是统一的49；从iphonex的刘海屏开始，出了一个SafeArea的...
cocos2d-x 2.0版本 自适应屏幕分辨率
12-04
在cocos2d-x 2.0版本中，对屏幕适配进行了优化，使得游戏能在不同分辨率和尺寸的设备上呈现出良好的视觉效果。本文将深入探讨cocos2d-x 2.0版本中实现自适应屏幕分辨率的关键技术和策略。 一、设计原则 1. **等...
cocos2dx游戏之适配iPhoneX屏幕
冷飞的博客
05-15 7532
       最近项目中有关于做iPhoneX屏幕适配问题，关键是这个项目已经做的差不多了，唯独iPhoneX屏幕没有适配，然后这个适配任务就落到我身上了，好了，话不多说，开始记录。。。       开始搞时在网上也查看了很多资料，但是由于第一次做iPhoneX的适配，很多东西也是先学。        首先第一步很重要找对你项目的启动图，也就是ios初次进入的屏幕加载图，一定要设置到 iPhone...
cocos2d-iphone-extensions-v0.1.3扩展库(修改版)
08-30
这个"**cocos2d-iphone-extensions-v0.1.3修改版**"是一个特定版本的Cocos2d-iPhone扩展库，它已经针对某些功能进行了优化和增强，特别是对于开场动画的全屏播放。 在原始的Cocos2d-iPhone框架中，开发者通常需要...
cocos2d-x iphone 移植到android,cocos2d-x项目从Win32移植到Android（全屏匹配）适配
weixin_42207707的博客
05-28 115
不小心看到了，留下备用,不敢保证这个正确，望大家多多尝试，over后给个结果……大家都知道，cocos2d-x可以在Win32和Mac下面开发，而我现在Win32下搭建Visual Studio 210开发的，Mac下可以使用Xcode + Eclipse ，两种环境应该差不多了。现在进入正题：我已经在Win32下开发好了一款1024*768的游戏，这是针对ipad开发的，比例是4：3.移植到ip...
cocos2d-x适配方案demo
03-18
自定义的两种cocos2d-x的适配方案。
cocos2d-x实现全屏
11-26
參考了一下NeHe 的教程, 在 cocos2d-x 2.0 上可以做點小手腳在 Windows 上全屏顯示! 參考了一下NeHe 的教程, 在 cocos2d-x 2.0 上可以做點小手腳在 Windows 上全屏顯示! 主要修改兩個檔案: CCEGLView.h CCEGLView.cpp 它們在工程里的位置是 libcocos2d->platform->win32 先打開 CCEGLView.h 在 public: 底下加上一個新功能: void setFullScreen(bool flag); 另外在 private: 里加上一個新變數: bool m_bFullScreen; 接下來是 CCEGLView.cpp: 在 Constructor 加上 m_bFullScreen 的初始值: CCEGLView::CCEGLView() : m_bCaptured(false) , m_hWnd(NULL) , m_hDC(NULL) , m_hRC(NULL) , m_lpfnAccelerometerKeyHook(NULL) , m_bFullScreen(false) 再加上我們的 setFullScreen(): void CCEGLView::setFullScreen(bool flag) { m_bFullScreen = flag; } 然後在 Create() 里, 把CreateWindowEx() 那段改成下邊這樣: /////////////// FULLSCREEN HACK - BEGIN DWORD dwExStyle = WS_EX_APPWINDOW | WS_EX_WINDOWEDGE; // Window Extended Style DWORD dwStyle = WS_CAPTION | WS_POPUPWINDOW | WS_MINIMIZEBOX; // Window Style if (m_bFullScreen) { DEVMODE dmScreenSettings; // Device Mode memset(&dmScreenSettings;,0,sizeof(dmScreenSettings)); // Makes Sure Memory's Cleared dmScreenSettings.dmSize=sizeof(dmScreenSettings); // Size Of The Devmode Structure dmScreenSettings.dmPelsWidth = w; // Selected Screen Width dmScreenSettings.dmPelsHeight = h; // Selected Screen Height dmScreenSettings.dmBitsPerPel = 32; // Selected Bits Per Pixel dmScreenSettings.dmFields=DM_BITSPERPEL|DM_PELSWIDTH|DM_PELSHEIGHT; // Try To Set Selected Mode And Get Results. NOTE: CDS_FULLSCREEN Gets Rid Of Start Bar. if (ChangeDisplaySettings(&dmScreenSettings;,CDS_FULLSCREEN)!=DISP_CHANGE_SUCCESSFUL) { // If The Mode Fails, Offer Two Options. Quit Or Use Windowed Mode. if (MessageBox(NULL, L"The Requested Fullscreen Mode Is Not Supported By\nYour Video Card. Use Windowed Mode Instead?",L"cocos2d-x",MB_YESNO|MB_ICONEXCLAMATION)==IDYES) { setFullScreen(false); // back to windowed mode } else { // Pop Up A Message Box Letting User Know The Program Is Closing. MessageBox(NULL,L"Program Will Now Close.",L"ERROR",MB_OK|MB_ICONSTOP); return FALSE; // Return FALSE } } else // yeah! we are in fullscreen { dwExStyle = WS_EX_APPWINDOW; dwStyle=WS_POPUP | WS_CLIPSIBLINGS | WS_CLIPCHILDREN; //ShowCursor(FALSE); RECT rect; rect.left=(long)0; // Set Left Value To 0 rect.right=(long)w; // Set Right Value To Requested Width rect.top=(long)0; // Set Top Value To 0 rect.bottom=(long)h; // Set Bottom Value To Requested Height AdjustWindowRectEx(&rect;, dwStyle, FALSE, dwExStyle); // Adjust To True Requested Size } } /////////////// FULLSCREEN HACK - END // create window m_hWnd = CreateWindowEx( dwExStyle, // Extended Style For The Window kWindowClassName, // Class Name wszBuf, // Window Title dwStyle, // Defined Window Style 0, 0, // Window Position 0, // Window Width 0, // Window Height NULL, // No Parent Window NULL, // No Menu hInstance, // Instance NULL ); CC_BREAK_IF(! m_hWnd); 基本上這樣已搞定. 最後在我們自己項目的 main.cpp 里選擇全屏即可: AppDelegate app; CCEGLView& eglView = CCEGLView::sharedOpenGLView(); eglView.setFullScreen(true); eglView.setViewName("Hello Tests"); eglView.setFrameSize(1920, 1080); 要注意事項: - eglView.setFullScreen(true) 一定要在 eglView.setViewName("xxx") 前面. - eglView.setFrameSize(1920, 1080) 設定的大小, 一定要是顯卡可以支持的. - 不能再用CCDirector::sharedDirector()->enableRetinaDisplay(true)
[cocos2d-x 2.0.4][iOS7]不能全屏问题
kingsollyu的专栏
01-07 1491
本篇文章由：http://www.sollyu.com/cocos2d-x-2-0-4-ios7-cannot-be-full-screen-problem/ 说明 ▼ 症状如下图 解决 打开你工程的.plist配置文件，然后添加View controller-based status bar appearance并且值为NO ▼ 如图 完成 ▼ 再次
cocos2dx 屏幕适配解决方案，包含刘海屏处理
u012861978的专栏
07-31 5837
首先要理解visibleSize和frameSize的意义： frameSize: local director = cc.Director:getInstance() local view =director:getOpenGLView() local frameSize =view:getFrameSize() local w,h =frameSize.width,frameS...
Cocos2d-x适配IOS屏幕的问题
mergerly的专栏
12-10 1988
由于删除了Cocos2d-x默认生成的Resource目录里面的引用，导致CCSize frameSize = pEGLView->getFrameSize();总是960 * 640 ,然后上下两边多长两个黑边（竖直模式下），如果是横版模式，那么就是左右多出两个黑边，不在显示区域内。原因是删除了引用资源，导致工程属性里面的General->Launch Images里面的Iphone Kind，
cocos2d-x-lua的屏幕适配
sylalak123的博客
06-26 1783
cocos2d-x-Lua使用cocos-code-IDE创建的工程没有屏幕适配的代码，可以简单的使用下面的代码来实现屏幕的适配： local director = cc.Director:getInstance() local glview = director:getOpenGLView() if nil == glview then
Cocos2d-x在Win32下全屏
只有偏执狂才能生存
03-13 3866
网上搜到下面的参考资料，但可能因为Cocos2d-x版本不同，已经不好按这种方式修改了。于是自己想到了解决办法。 参考资料： http://download.csdn.net/detail/chenzhizs/4813602
Cocos2d-X 屏幕适配的实现方法
u011269801的专栏
09-09 657
1、屏幕适配 CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionExactFit);
cocos2d-x多分辨率适配方案：setDesignResolutionSize(完美）
FE攻城狮
04-09 6776
cocos2d-x是一个优秀的跨平台游戏引擎，当然跨平台超容易遇到的分辨率适配问题，cocos2d-x也提供了超好用的解决方案。 官方的多分辨率适配wiki页面在这里：http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support 当然这是E文的教程，而且有些细节官方也没有说清楚，下面就开始我自己的一些见解了。
cocos2d-x：跨平台的游戏开发引擎
cocos2d-x家族包括了不同语言版本的引擎，如cocos2d-iphone（针对iOS）、cocos2d-python、cocos2d-android和cocos2d-js等。cocos2d-x的成功在于它被广泛应用于许多知名游戏中，例如Zombie Farm、Mega Jump和Train ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值