SpriteKit游戏开发点滴［4］ 适配屏幕的技巧

适配屏幕的技巧

多屏幕分辨率可真是开发者的死对头啊！常言道：你若屏幕分辨多，我就自挂东南枝～

不过对于游戏开发而言，一旦理解了适配屏幕的原理，便可无敌于众多的屏幕分辨率了。

在开始游戏开发时，我们预设一个“原始屏幕“，在原始屏幕上绘制各种游戏元素；

当实际将游戏部署到不同分辨率的设备上时，再将“原始屏幕”绘（ying）制（she）到实际屏幕上去。

在映射到实际屏幕的过程中，如果“实际屏幕”的长宽比和“原始屏幕”的不同，就要考虑如何调整进行适配。

比如“原始屏幕”是这样：



最懒的方案是，将“原始屏幕”直接忽略原始比例，按照实际屏幕的比例进行缩放，将“原始屏幕”变形但是完整地绘制到设备屏幕上。这种偷懒方式会影响一般玩家的游戏体验，不推荐使用。

比较省事又有效果的方案是，将“原始屏幕”按原始比例缩放到实际设备刚好能完全显示的大小，然后居中绘制到设备屏幕上，此时有可能因为“原始屏幕”在映射过程中与“实际屏幕”存在空隙（用黑色填充）。

似乎看上去第二种方案已经很有效了，但是对于强（chu）迫（nv）症（zuo）玩家来说，屏幕上突出的黑边是无法容忍的。

那么比较推荐的方案是第三种——将“原始屏幕”按原始比例缩放到能够完整填充满整个设备屏幕（虽然有部分内容会因为超出屏幕而不能展现给玩家）。也就是说，使用不同设备的玩家在进行同一个游戏的时候看到的画面内容会有所区别。（例如下图中左数图3，图4）

如何设置三种屏幕映射的具体内容参见博客SpriteKit游戏开发点滴(3) 屏幕大小模式


  

  

  


如果选择第三种方案来对不同屏幕进行适配，我们就需要注意一个问题——游戏的有效区域。因为持有瘦长设备（iPhone5/5S）的玩家能够看见的游戏区域比持有宽胖设备（iPad/iPhone4/4S）的区域小，所以游戏的有效区域应该是所有设备的玩家所能见到的最小的游戏区域。所以只要制作的时候注意将游戏元素放置在有效区域（限制玩家的操作在有效区域内）即可。

对于苹果的设备而言：



我们应该以最宽胖的比例（2048*1536）为“原始屏幕”，而以最瘦长的比例（2048*1152）为“有效区域”来进行适配。（也就是说，应该保证原始屏幕边界的192（(1536-1152)/2）像素内是操作无效的）

具体的实现代码很简单：在GameViewController.swift中：（注意，竖直的屏幕是1536*2048，水平的屏幕是2048*1536）

class GameViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
let scene = GameScene(size:CGSize(width: 1536, height: 2048))
let skView = self.view as SKView
scene.scaleMode = .AspectFill

skView.presentScene(scene)
}
}

计算游戏有效区域的方法：
func initPlayableRect()
{
let tempWidth = size.height / 16.0 * 9.0
let tempMargin = (size.width - tempWidth) / 2
playableRect = CGRect(x: tempMargin, y: 0, width: tempWidth, height: size.height)
}
下面是这两天自己正在写的小游戏，红线部分是游戏有效区域，这是三种不同分辨率的屏幕适配结果：


  

  

以上