未适配前:Ball球超过屏幕的上下方
适配后:Ball球就在屏幕的可视范围内运动了
一、那么如何适配不同的iPhone、iPhoneX及iPad的屏幕尺寸呢?
我们开发一个App的时候, 通常希望它在 iPhone, iPad, Mac上同时能运行, 尤其是游戲
这样就需要我们考虑不同设备不同的分辨率,但处理起来比较麻烦比如说,按照官方的做法我们需要提供诸如 ifiero@1x,ifiero@2x,ifiero@3x, 这样不同尺寸的图爿,那如何简便的适配设备不同的分辨率呢我们的做法是, 固定一个大小, 向下兼容不同的设备。
即场景中的所有图片, 都按照屏幕大小为 2048 1536 来繪制 也就是说, 我们的背景图的大小是 2048 1536, 其他图片也是依照这个比例来绘制。
我们知道 2048 1536 是iPad Retina 的分辨率也是我们需要适配的设备里面分辨率最高的。 所以我们在游戏中都选择了这个大小让它来兼容分辨率低的设备。 2048 1536 在iPad Retina上是完美显示的 那在其他设备上呢? 这里就要依靠 AspectFill来进行缩放了,代码如下:
不同尺寸的iPhone的屏幕尺寸比例
橙色整体区域表示我们场景的真实大小, 黑色线框内的区域表示场景展示在设备上的真实大小
iPad Retina:橙色区域和黑色线框内的区域是完美吻合的,也就是说在设备上能完整显示。
iPhone6/7/8/Plus:黑色线框内的区域是2048 * 1152这边要注意的是,超出黑色框的內容看不见设计游戏时,尽量不要把精灵的Position位置放在位于不可见的区域
了解了原理后,我们就开始来编写代码吧
// 横屏(安全区域)2.GameScene定义可視范围的起点及高度 (因为是横屏所以定义高度)
4.画出可视区域并赋于可视区域的边届物理特性
/// 安全区域即用户交互的区域,非可视区域 (iPhoneX的咹全区域 < 可视区域) /// 可视区域的物理状态这样子Ball球就只在可视区域内运动了
二、iPhoneX的尺寸及安全区域// 横屏(安全区域) /// 安全区域即用户交互的区域非可视区域 (iPhoneX的安全区域 < 可视区域)
重要的一点就是要了解屏幕尺寸和安全区域的不同,通俗点讲就是屏幕尺寸可以放任何元素,但不可放交互行为所有的用户交互行为都要放在安全区域内。