基于SpriteKit的游戏，如何添加界面

使用UIKit开发界面

众所周知，SpriteKit并不提供各种UI常见的组件，连基本的Button都没有，唯一有的文本显示组件Label还不支持多行。那么到底该用什么来为基于SpriteKit的游戏开发界面呢？可以肯定的回答：用UIKit。大家都这么想了，可是具体该怎么做，却不是很清楚。

 

如何把UIKit界面元素嵌入场景界面

遇到的第一个问题是，如何把UIKit组件加入到场景中。UIKit的基本组件是UIView,添加函数是addSubView。而场景的基本组件是SKNode,添加函数为addChild。所以两个系统的元素并不能直接实现互嵌。

 

唯一的连接点在于SKView。场景是显示在SKView上的，而SKView是UIView的子类。

所以，虽然我们的UI不能直接加在场景中，但是可以加在场景所在的SKView（scene.view）中。不过这样的实现，UI和场景上的东西，在Z轴上是截然分开的。但通常来说，UI层本身就应该是在场景之上的，所以不会有什么问题。

 

对于不同场景有不同的UI的情况，切换场景的同时，需要写代码去改变显示的UI界面。

 

另一个问题就是，UI中元素的位置应该与场景中的某个位置相关，而UI和场景是使用不同的坐标系，需要对坐标进行转换。场景类的convertPointFromView和convertPointToView两个函数可以完成这个工作。

 

如何让UI界面实现和场景界面一样的适配模式

IOS有多种设备，所以开发游戏都需要做屏幕适配。常见的一种做法是，场景有一个设计分辨率，内部开发的所有坐标和尺寸都以设计分辨率为准。然后通过设置场景的适配模式（.AspectFit,/.AspectFill），缩放场景来适配屏幕。

由于UI并不是加在场景上的，场景的适配模式并不会对UI起效，如何让UI和场景用统一的方式适配呢？

以.AspectFit为例：

原理：以和场景一致的UI设计分辨率制作UI,然后根据选择的适配模式，对UI进行整体缩放。

1. 添加一个UIView（root）到SKView中作为所有UI的根节点，采用场景设计分辨率对应的UI设计分辨率(见注1)作为该视图的大小。
2. 设置root视图的中心为SKView的中心
3. 获取当前屏幕的尺寸，分别计算从设计分辨率缩放到屏幕尺寸，x,y轴的需要的缩放因子。选择较小的一个，作为UI的缩放因子。
4. 利用root视图的transform属性，对root按选定的缩放因子进行缩放

注：

1. UI和场景的坐标系的单位不一样。UI的单位是点，场景的单位是像素。根据不同的设备，点与像素的比例可能是1x，2x或3x。UI的设计分辨率要用场景的设计分辨率，除去选定设备的比例因子。比如采用iPhone6作为设计标准，它是2x的设备，场景的设计分辨率为像素分辨率750*1334(px)，UI的设计分辨率应该为375*667(pt)。

2. 场景的skview本身并不能作为这个方法中的根视图。因为skview的缩放中心并不在视图的中心位置。会导致缩放后，UI并不在屏幕的中间。