1.1 新建场景SCENE — 宇宙大战 SPACE BATTLE SpriteKit游戏视频教程

宇宙大战 SPACE BATTLE (一)SpriteKit游戏视频教程 1/2 — 新建场景SCENE、精灵节点、PARTICLE粒子及背景音乐

Watch on YouTuBe:https://www.youtube.com/watch?v=q8PktYuhCQk&t=1415s

VIP视频限时免费 — 学习如何设置游戏启动画面、直接使用可见即所得进行场景编辑 Scene Edit及如何在场景Scene添加各个SpriteNode精灵节点、学会创建背景音乐与导入Particle粒子节点

游戏屏幕适配要点:

我们开发一个App的时候, 通常希望它在 iPhone, iPad, Mac上同时能运行, 尤其是游戏。

这样就需要我们考虑不同设备不同的分辨率,但处理起来比较麻烦,比如说,按照官方的做法,我们需要提供诸如 ifiero@1x,ifiero@2x,ifiero@3x, 这样不同尺寸的图片,那如何简便的适配设备不同的分辨率呢,我们的做法是, 固定一个大小, 向下兼容不同的设备。

即场景中的所有图片, 都按照屏幕大小为 2048 * 1536 来绘制。 也就是说, 我们的背景图的大小是 2048 * 1536, 其他图片也是依照这个比例来绘制。

为什么这样做呢?

我们知道 2048 * 1536 是iPad Retina 的分辨率。也是我们需要适配的设备里面分辨率最高的。 所以我们在游戏中都选择了这个大小,让它来兼容分辨率低的设备。 2048 * 1536 在iPad Retina上是完美显示的。 那在其他设备上呢? 这里就要依靠 AspectFill来进行缩放了,代码如下:


 if let scene = GameScene(fileNamed: "GameScene") {
                scene.size = CGSize(width: 2048, height: 1536)
                scene.scaleMode = .aspectFill /// 缩放
                view.presentScene(scene)
 }

橙色整体区域表示我们场景的真实大小。 黑色线框内的区域表示场景展示在设备上的真实大小。
iPad Retina:橙色区域和黑色线框内的区域是完美吻合的,也就是说在设备上能完整显示。
iPhone6/7/8/Plus:黑色线框内的区域是2048 * 1152,这边要注意的是,超出黑色框的内容看不见,设计游戏时,尽量不要把精灵的Position位置放在位于不可见的区域。

不同尺寸的iPhone的屏幕尺寸比例

设备 屏幕比例 屏幕比值
iPad Retina 4 / 3 1.33
iPhone 6/7/8 16 / 9 1.77
iPhone 6/7/8 Plus 16 / 9 1.77
iPhone X 2.16

iPhoneX的Safe Area为触发交互行为的区域

打赏

2 comments

Leave a Reply