iOS开发- 游戏屏幕适配(SpriteKit)

Dear 丶 2022-08-06 04:30 265阅读 0赞

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

这样就需要我们考虑不同设备不同的分辨率，处理起来比较麻烦。

比如说，按照官方的做法，我们需要提供诸如 xx.png, xx@2x.png, xx@3x.png, xx~iPad.png, and xx~iPad@2x.png 这样不同的图片,

另外还有在程序中写大量 if (...)\{...\} else if \{...\}这样的代码来区分不同的设备, 想想就觉得烦。

尤其是像我这样的个体开发者... 弄那么多套图片. 简直要命。

所以我的做法是, 固定一个大小, 来兼容不同的设备。

这里, 我把我需要的图片, 都按照屏幕大小为 2048 \* 1536 来绘制。 也就是说, 我们的背景图的大小是 2048 \* 1536， 其他图片也是依照这个比例来绘制。

然后，加载每个场景的时候, 都设置场景大小为 2048 \* 1536，并且显示方式为 AspectFill。

如下, 默认的SpriteKit项目, 做简单的修改: (GameViewController.swift)

//
    //  GameViewController.swift
    //  ZombieConga
    //
    //  Created by Colin on 14/12/21.
    //  Copyright (c) 2014年 icephone. All rights reserved.
    //
    
    import UIKit
    import SpriteKit
    
    class GameViewController: UIViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
            
            let myScene = GameScene(size:CGSize(width: 2048, height: 1536))
            myScene.scaleMode = .AspectFill
    
            let myView = self.view as SKView
            myView.showsFPS = true
            myView.showsNodeCount = true
            myView.ignoresSiblingOrder = true
            myView.presentScene(myScene)
        }
        
        override func prefersStatusBarHidden() -> Bool {
            return true
        }
    }

为什么这样做呢?

我们知道. 2048 \* 1536 是iPad Retina 的分辨率。也是我们需要适配的设备里面分辨率最高的。 所以我选择了这个大小。让它来兼容分辨率低的设备。（不会导致图片失真, 当然，造成不必要的开销是在所难免的，但是相对为每个设备准备一套图片还是更加优秀的）

也就是说， 2048 \* 1536 在iPad Retina上是完美显示的。 那在其他设备上呢？ 这里就要依靠 AspectFill了。

简单看一下下面这张图:

![Center][]

橙色整体区域表示我们场景的真实大小。 黑色线框内的区域表示场景展示在设备上的真实大小。

看下iPad Retina。 他的橙色区域和 黑色线框内的区域是完美吻合的，也就是说在设备上能完整显示。

再看下iPhone4S。 它的真实分辨率应该是 960 \* 640 (这里是横屏显示)， 但是黑色线框内的区域确实2048 \* 1136，是原来的2.1倍。

这要归功于 AspectFill了。 接触过iOS开发的应该都知道, AspectFill是图片显示的一种模式。它保持纵横比缩放图片，图像可能不完全显示。（可以理解成两个方向一起放缩，当两个方向都达到屏幕大小时候，才停止放缩。这时候先达到屏幕大小的那个因为之后的继续放缩，会导致那个方向上的图像被截去。故显示不完全）

同理，iPhone6 的显示效果如图所示。

• iPad Retina \[4:3 or 1.33\]: Displayed as-is to fit the 2048x1536 screen size.  
• iPad Non-Retina \[4:3 or 1.33\]: Aspect fill will scale a 2048x1536 playable area by 0.5 to fit the 1024x768 screen size.  
• iPhone 4S \[3:2 or 1.5\]: Aspect fill will scale a 2048x1366 playable area by 0.47 to fit the 960x640 screen size.  
• iPhone 5 \[16:9 or 1.77\]: Aspect fill will scale a 2048x1152 playable area by 0.56 to fit the 1136x640 screen size.  
• iPhone 6 \[16:9 or 1.77\]: Aspect fill will scale a 2048x1152 playable area by 0.64 to fit the 1334x750 screen size.  
• iPhone 6 Plus \[16:9 or 1.77\]: Aspect fill will scale a 2048x1152 playable area by 0.93 to fit the 1920x1080 screen size.

总的来说, 使用这样的方法，相对来说让不同设备间的操作统一了（我们的操作都以场景大小 2048\*1536为准）。

但是从图片上也能很直观的看出，场景中有些区域是显示不完整的。 比如看iPhone6，如果把一个精灵放在 (0, 0)点， 那么就有可能看不到了，如果那个精灵不够大的话，因为（0，0）点不再设备屏幕显示区域内。

但是，相对与一般的逐个适配，我还是比较推崇上述做法。

[Center]: /images/20220806/fb8ba512e0cf4516883ce4d1c2fbe8e7.png