利用 SpriteKit 在 2D 基础上更进一步

大家早上好 我是 Ross Dexter 我是 Apple 公司游戏技术团队的 一名工程师 欢迎大家来到 借助 SpriteKit 超越 2D 这个会议

那么在我们正式开始前 我想 快速地介绍一下什么是 SpriteKit 以及如何与 Apple 图形渲染相结合 SpriteKit 是 Apple 为游戏设计的 2D 图形框架 其设计的目的就是要实现 使用的灵活 快速与便捷 我们所有的平台都支持 SpriteKit 并且它有一个 Xcode 集成生命编辑器 使得编排和预览你们的 游戏内容既快速又便捷

SpriteKit 与 SceneKit 或 其它以游戏为导向的图形 框架处在同一层 且两者都在 Metal 的上层 传统上 它们都是 在不同的情景下单独 使用 SpriteKit 可以快速便捷地使用 2D SceneKit 已经准备充分可以使用 3D 引擎 而 Metal 让大家可以 直接使用设备的 渲染硬件 与其将它们三个 分开 我们认为现在就是 让 SpriteKit 打破其 2D 模具的 时候了

SpriteKit 功能十分强大 结合 SceneKit 和 Metal 来使用 SpriteKit 极具 吸引力 由于这两者在底层都使用 Metal 因此在 SceneKit 中 渲染 SpriteKit 的内容 或使用任意方式来把它送回 Metal 是轻而易举的 事情

许多 3D 游戏和 app 都使用 2D 的内容 并且 SpriteKit 提供了绝佳的方法来 创建和渲染那些 内容 除此之外 今年 Apple 正在推出 ARKit 其将 创造增强现实 app 的 所有难点都解决了 这一新框架的添加 提供了另一个原因来说明 为什么让 SpriteKit 走出 2D 并走进第三维度的 时候已经到来 今天 我们将向大家展示 如何实现这一点以及你们能取得

哪些成就 在这个会议中 我们将 涵盖如何在 ARKit 中渲染 SpriteKit 内容 从而将 SpriteKit 领入增强 现实的世界 接下来 我们会给大家展示如何 将 SpriteKit 场景放进 SceneKit 以及这将如何 改善你们的增强现实 app 最后 我们会向大家介绍 SKRenderer 这能够让大家 更好地操控 SpriteKit 更新和渲染器 好的 那就让我们一起来 看看如何同时使用 SpriteKit 和 ARKit

但首先 我们应当谈一谈 增强现实究竟是什么 增强现实将现实世界 的视图与计算机渲染 内容相结合 渲染内容与现实世界中的 位置相连接 因此 你们在移动设备的时候 视图会有所变化 但内容 似乎还留在原地 这就使你们可以从不同的 角度来检查内容 就好像这是 你们的设备面前的一个 实质性物体 这需要进行许多 复杂的追踪并且实施起来 是一个真正的挑战

多亏了 ARKit 所有艰巨的 工作都替你们完成了 当你们使用 ARKit 时它会利用 设备的照相机 加速度传感器以及其它硬件设备 来追踪它在现实世界 中的位置和方向 你们只需要给它提供 你们希望在 AR 中出现的 内容 ARKit 就会随着 设备的移动自动 更新内容的相应 定位 如果你们想更深入地了解 这一切究竟是怎么操作的 我 强烈推荐大家去看看 本周初举办的介绍 ARKit 的专题会议 ARKit 可以追踪并 更新内容的位置 通过使用锚点来 实现 正是锚点使得 AR 得以运作

锚点是对现实世界的特征 做出回应的 3D 点 这些特征由 ARKit 通过 观测和理解来检测出的 也就是使用你们的设备照相机 来感知和处理 你们周围的世界 创建锚点十分容易 你们可以通过 API 请求 ARKit 在任意时间检测一个锚点 或者你们可以利用设备的 位置和方位手动创建 一个锚点 那么我们如何让 ARKit 来处理 SpriteKit 的内容呢

设计 ARKit 是为了让它直接 与 SpriteKit 交互 ARKit 会要求你们的 SpriteKit 节点 附在锚点上 然后 就会随着设备的移动 自动定位 旋转并缩放 这些节点 这样就使得 SpriteKit 内容始终与锚点 相一致 看起来 就好像这些内容 扎根在现实世界

精灵是渲染出的 因此它们 始终面朝照相机 这样无论你们从哪个角度来 浏览它们 它们都总是面朝着 照相机 这个技术叫做 公告牌技术 通常在 早期的 3D 游戏中使用

大家可能对公告牌技术的 运作并不熟悉 那么就让我们 来快速看几个例子 看看可以 如何使用这项技术 它能让你们 在 3D 空间使用 2D 内容 那么假设 我们在 3D 空间中有 精灵位置还有一个观察 它的照相机

随着照相机离这个精灵 越来越近 这个精灵就变得 更大 你们在视图中可以看到 精灵占据了更大的空间 随着照相机越离越远 这个精灵就缩小了

下面我将旋转这个照相机 尽管照相机变换了 视角 但这个精灵在任何时候都 始终朝向照相机 无论我们从哪个角度去看 这一点都是一样的 这里 让我们在 3D 场景中 增加另一个精灵来看看 这将如何与多个 2D 物体一起运作 离照相机更远的精灵 被渲染在离照相机更近的 精灵之后 随着照相机的移动 离得 更远的精灵进入了视线之中

两个精灵都总是朝向 照相机 这个简单的技术 使得你们的 2D 精灵内容可以 在 3D 空间运作 既然我们已经向大家展示了 ARKit 和 SpriteKit 如何 在概念层面共同协作 下面让我们来谈谈 你们需要在 app 上执行的 实际对象 要同时使用 Arkit 和 SpriteKit 你们需要了解四个 重要的对象 即 ARSession ARAnchor ARSKView 以及 ARSKViewDelegate ARSession 是 ARKit 的核心 它负责处理所有的设备 追踪并合理安排 ARKit 与 SpriteKit 之间的 交互 它有方法可以添加并 清除你们在 app 中 所创建的锚点 要开始这个过程 你们只需调用 Run方法 然后 ARSession 便会开始追踪你们的设备 你们只需要向它提供 ARSession 配置 这可以 告诉 ARKit 应该使用 哪种增强现实技术 因此 用 SpriteKit 来操作时 你们只需要使用 AR 世界 追踪配置 这一配置提供了你们需要 ARKit 提供的所有 功能 ARKit 通过 ARAnchor 来定义 现实世界的特征 它代表了现实世界的 一个位置并且包含了 transform 数据以及一个 唯一的标识符

ARKit 将 ARAnchors 映射为 SKNodes 这是我们提供用于 渲染内容的 ARKit 通过 ARSKView 与 SpriteKit 进行交互 ARSKView 来源于 SKView 它创建并包含了 ARSession 这样你们就不需要 手动去进行创建 并且它有方法可以获得 相关的锚点和节点 因此 你们需要手动去追踪 哪个节点对应的是哪个 锚点 反过来也是一样 它同时还有 hitTest 方法 这是你们创建锚点的 主要方式 它需要你们设备屏幕上的 一个点并通过这个点射出 一条线 所以去找找现实世界中离你 最近的那个点 把 物体附在上面 最后 来看看 ARSKViewDelegate 这是来源于 SKViewDelegate 的一个协议 能够帮助你们 对会话控制中添加 更新 以及清除的锚点做出 反应

所有这些方法都是非强制性的 它们是同时使用 SpriteKit 和 ARKit 的关键 但我们一会儿再回到这个 点来 让我们先来用 SpriteKit 创建我们第一个 ARKit app

首先 我们要在 Xcode 里创建 一个新的 iOS 项目 你们将看到在 Xcode 9 里 有一个新的增强现实 app 模板供你们选择 你们选择了 app 模板之后 要开始使用 SpriteKit 就要选择它作为你们的 内容技术 那么现在全部就已经完成了 现在你们可以准备进入 增强现实世界了

对于 iOS app 来说 最后的项目看上去非常标准化 但让我们来看看对于 同时使用 SpriteKit 和 ARKit 十分重要的一些文档

首先是 Scene.sks 这是一个标准化的 SpriteKit 场景 你们在这里创建 和布置你们希望出现在 app 上的所有非 AR 内容 它看上去好像是对 AR 内容的叠加 因此 对于像 HUD 元素 帮助文本以及其它类似的内容 来说是有用的

拥有 Z-position 属性并且等于 或大于 0 的节点将 覆盖在 ARKit 添加到场景中的 所有 AR 内容上面 所有的节点都是由 拥有 Z-position 属性且 小于 0 的 ARKit 管理

接下来 看看 Scene.swift 这是 SpriteKit 场景的一个 相对应的源文件 就像在普通的 SpriteKit app 中那样 你们在这里加入代码来 管理你们的场景 Gameplay 和逻辑 并且这是一个利用 游戏开发工具多种特征的 好地方 最后 让我们来看看 ViewController.swift 视图控制器遵守 ARSKViewDelegate 并且它的 sceneView 属性是 ARSKView 的一个实例 其中 包含 ARSession

视图控制器类是 你们与 ARKit 交互的 主要方式 在模板中 控制器被 自动设置以通过 AR 世界 追踪配置在 ARSession 上 调用 run 这样你们就不需要自行 添加了 这也是你们执行 与你们相关的 ARSKView 代理方法的地方 下面让我们来谈谈 视图控制需要做出 反应的 ARKit 事件

第一个事件就是当新的 锚点被添加到 SKSession 时

出现这种情况时 ARKit 会请求 视图控制器提供你们 希望与锚点相关联的 SpriteKit 节点 那么这时我们就需要创建 AR 内容

第二个事件是 会话控制更新了已有的锚点 之时

当发生这一情况时 ARKit 会通知 视图控制器 那么你们就可以对 更新做出反应

第三个也就是最后一个事件是 当锚点从会话控制中被 移除之时

ARKit 会告知视图控制器 你们就可以对 app 进行 任何必要的清理了

ARSKViewDelegate 提供了 与每一个事件相关联的 方法 我们之前提到过 这些方法中的 每一个都是非强制性的 因此你们 只需执行对你们有用的 那些方法 让我们再回顾一下 首先是锚节点 方法 当新的锚点被添加进控制会话时 就会调用这个方法 ARKit 将这个方法 返回的节点映射为 输入的锚点 如果你们想要为锚点创建 一个自定义节点 那么就应该执行 这个方法 如果不执行这个 方法 那么一个默认的空 SKNode 就会 自动为你们创建 这个方法返回的 节点将被 ARKit 移动 旋转和缩放从而 与锚点相匹配 所以如果你们尝试对 transform 进行任何变动 当设备移动时 这些变动可能 会被 ARKit 复写 分配给这个节点的 任何子节点的 transform 都不会 被修改 知道这一点是 很有用的 我们将在下一个方法中 更多地谈论这点

同时要知道 ARKit 会自动在场景图中 添加节点 这样你们就不需要 自行添加了 接下来 我们介绍 didAdd 锚节点 在 SKNode 映射到锚点之后 可调用这一方法 因此是在 执行了之前的锚节点 方法之后

如果你们执行了锚节点 方法 那么这儿输入的 节点将会是从那儿 返回的那个节点 如果你们没执行这个方法 那么 就会有一个默认的空节点 正如我们在上一张幻灯片 所说的那样 映射到锚点的那个 节点会让变形的 修改后的 ARKit 随着设备的移动 紧跟着那个锚点 这样的话 如果你们想要修改 内容的 transform 你们就应该在此处将它们作为子节点 添加 因为 ARKit 不会对它们

进行修改 接下来 看看 willUpdate 锚节点以及 didUpdtae 锚 节点 这两个方法是在节点更新了 给定的锚点数据之前 以及之后来调用

正如它们的名字所显示的那样 willUpdate 锚节点在更新 之前调用 而 didUpdate 锚 节点则是在更新之后 调用 当设备移动以及视图变化时 会发生这一情况

这些节点的位置 旋转以及 或者缩放取决于 调用这些方法之间存在的 变化

最后 来看看 didRemove 锚 节点 调用这个锚节点是在节点 从场景图中清除时 当锚点的轨迹从 ARSession 被清除时会发生这一 情况

好了 以上便是 关于 API 的重要内容 下面让我们来看看代码吧 让我们来谈一谈创建 锚点 这里 我们来看看 touchesBegan 事件的处理器 当设备报告了一个 touch 我们在 ARSKView 中就能获得 touch 的位置 然后我们把 touch 的位置 提供给 ARSKView 的 hitTest 方法 这个方法会向现实世界 射出一道光线来寻找 我们可以将之变为锚点的 特征点

它会按从近到远的顺序 返回一道由所有的 hits 组成的光线 我们看到最近的这个 hit 然后 使用这个 worldTransform 来创建一个 ARAnchor 然后我们 再添加到会话控制中 这就是全部内容了 创建锚点简直简单到 不行 那么既然我们已经在会话控制中 添加了新的锚点 会话 控制将请求视图 控制器提供给我们 想要附在上面的 SpriteKit 内容

要做到这一点 我们要执行 ARSKView 代理 didAdd 锚节点方法 我们还没有执行锚 节点 因此就为我们创建了一个 默认的空节点 这就是传递到 这一方法的内容

那么现在我们只需要 创建我们想要附在锚点 上面的内容 然后再

把它作为输入这个方法的节点的 子节点添加进去

ARKit 会自动更新 这一节点使之在设备 移动时跟随着这个锚点 这样你们就不需要再做任何 别的事了 那么既然我们已经向大家展示了 如何通过 SpriteKit 来使用 ARKit API 就让我们进入 增强现实的内容

我们先来打开这里的 app 我们可以看到我们现在正在 进行视频透传 我们可以在屏幕上看到我们 可爱的观众 你们现在可都是名人啦

下面让我们在增强现实中 放入一些内容 我在点击屏幕的同时 我把内容放在了离我也就半米远 的面前 在这里 我刚用表情符号 添加了 SKLabelNode 有趣的是 你们可以仅通过使用 标签来使用 SpriteKit app 里的表情符号 只需把它们粘贴到这里 你们可以看到它们现在都 悬浮在 3D 空间中 当我四处移动照相机的时候

它们也移动 但相对位置 不变 只是把它们放在空间里 没什么意思 我也可以把它们放在 平面上

它会检测与平面 的交集 通过使用我们 刚刚谈到的 HitTest 方法来检测 然后它会在检测到的 桌子平面上放入 表情符号 但放置表情符号也 没什么意思 因此现在我们要转换成 爆炸模式 然后我们就 可以让我们的表情符号爆炸 这样 才稍微有点意思

同时 我们要注意我们 此处左下角的文本 以及我们在摧毁表情符号时 这些表情翻转的 方式 因为这一点 过一会儿会变得 有意义 所以你们可以看到要快速创建 一个 app 并使用 SpriteKit 内容来进入增强现实 是多么容易 这只是大家现在可以使用 Xcode 9 创建的 app 模板稍微调整后的一个 版本

这就是拥有 ARKit 的 SpriteKit 那么大家可以看到当把 ARKit 和 SpriteKit 结合起来使用 的时候 进入增强现实是 多么容易 我之前提到过 我们还有 一些其它的 SpriteKit 功能 其中一些在我刚刚 进行的快速演示中 出现过了

所以希望大家有注意到 在演示 app 动画里 屏幕下方的文本 这是通过一个单一的 SKLabelNode 实现的 这是 因为它们现在支持属性 字串符

属性字串符使大家可以 指定字符串中每一个字符 的属性 这样大家就可以 把不同的颜色和字体 混合在同一个 标签中 它使用了 NSAttributedString 你们唯一需要做的就是 设置 SKLabelNodes 新的 attributedText 属性

在我们的增强现实 app 里的表情符号直到现在 才可以以不可思议的方式旋转 这都要归功于新的 SKTransformNode

SKNode 已经具备了 Z 旋转的能力 但是 SKTransformNode 为大家 新增了围绕 X 轴和 Y 轴 旋转的能力 使得 SpriteKit 内容可以进行 全 3D 旋转 这些旋转也同样适用于 所有的子节点

SKTransformNode 使用了 正交投影 因此没有对你们的 节点进行任何透视 倾斜 你们可以通过 X Y 以及 Z 旋转属性来指定你们的 旋转 或者你们可以使用 专门的 getter 和 setter 函数来 获得欧拉角 旋转矩阵 和四元数 最后 在终端的部分 SpriteKit 与 Xcode 的 视图调试器完全 兼容 它显示了整个场景 图并给大家提供了整洁的 场景 3D 爆炸视图 这能够提供极大的帮助 当 你们想要去调试排版 内容排版的问题时 这同时也让大家可以检查 所有的节点属性 这样 在 app 暂停的那一个瞬间 你们就可以看到场景中的 所有事物的状态 这真的是一个非常棒的 新功能 所有请大家去看看 Xcode 9 会议关于调试的内容 以了解更多信息

我们已经给大家展示了使用 ARKit 以及 SpriteKit 来 创建增强现实的 app 是多么快速和便捷 ARKit 为大家处理了 增强现实中所有困难的 部分 而 SpriteKit 则让 渲染内容变成小菜一碟

我们还介绍了 SpriteKit 的新功能 为大家 提供了更大的灵活性来 开发 app 并给大家 提供调试 SpriteKit 内容的 新选项 但可能大家还有一些遗留的 问题 如果我们并不想要 公告牌精灵呢 如果我们希望通过透视 来使我们的 SpriteKit 内容 生效呢 如果我们想在增强现实中把 2D 和 3D 的内容混在一起呢 如果我们想把 SpriteKit 带入 3D 世界呢

答案就是要把 SceneKit SpriteKit 以及 ARKit 这三者 全部结合起来 SceneKit 是 SpriteKit 的 3D 版本 这是已经可以使用的 带有自己的 Xcode 集成现场 编辑器的 3D引擎

大家可能还有所不知的是 你们可以使用 SpriteKit 场景 作为 SceneKit 中几何图形的 材料 这使得你们可以用复杂的 3D 变换和透视效果 来渲染 SpriteKit 内容

此外 你们可以轻松地将 2D 的 SpriteKit 内容与 3D 的 ScenenKit 内容混合在同样的 背景中 就像 SpriteKit 那样 SceneKit 也同样与 ARKit 相结合在 增强现实 app 中 使用 SceneKit 创建一个项目 这跟 SpriteKit 是一样的 只是把内容技术 改成 SceneKit 就可以了 这个 API 的设计与大家在 SpriteKit 中所使用的 API 非常类似 仅有少数几个对象的名称 有所不同 ARSKView 变成了 ARSCNView 而 ARSKViewDelegate 变成了 ARSCNViewDelegate 在 SpriteKit 中 模板会为 大家创建 ARSCNView 同时 视图控制器遵守 ARSCNViewDelegate 现在 为了节约时间 也因为 API 非常类似 所以在这里我们就不再 介绍剩余的内容了 那么下面 我们想在 SceneKit 的场景中渲染 SpriteKit 的内容 通常 在 SpriteKit 中 你们有 场景并且你们把它设置在 SKView 上 然后 SKView 与 UIKit 或 Mac OS 的 AppKit 共同把你们的 内容放到屏幕上 为了使你们的内容在 SceneKit 里渲染 处理的方式 略有不同 现在不用将场景设置在 视图上 而是设置在 你们希望出现 SpriteKit 内容的几何图形的 材料属性上 然后这个材料与 SceneKit 一起来渲染 SpriteKit 的内容 然后 纹理将之映射在 与材料相关联的几何图形中 下面 让我们来看几个 在 SceneKit 几何图形中渲染 SpriteKit 内容的例子 这里 我们有一个基本的 SpriteKit 场景 那么这个就是当我们在 SceneKit 的平面渲染这个场景 时会看到的

我们还可以把 SpriteKit 的 场景应用到立方体甚至是 球体中 你们可以把它当成 普通纹理那样来使用 而 SpriteKit 随着 SpriteKit 场景的更新 你们的纹理会 随之一同更新

那么现在 我想快速地向大家 展示用 SceneKit 来使用 SpriteKit 是多么容易

首先 在 SceneKit 中获取 一个你们想要使用的 SpriteKit 场景 接下来 创建你们想要 用来渲染 SpriteKit 场景的 几何图形 这里我们创建了一个简单的 平面

然后你们只需要把 SpriteKit 场景设置为平面 材料中漫反射属性的 内容 这会导致 SceneKit 将 SpriteKit 的场景渲染成一个 纹理然后再把它应用到 几何图形上 在这儿我们把材料 设置成双面的 这就使得 SpriteKit 的场景 在平面的两侧 同时出现 接下来我们就只需为这个平面 创建一个 SceneKit 节点 然后 把它添加到 SceneKit 场景中 现在这个平面将出现在 这个场景中并带有你们 在上面映射的 SpriteKit 场景 纹理的内容

那么下面我想给大家做一个演示 看看你们在使用 SpriteKit 和 SceneKit 时结合 ARKit 可以做些什么

好的

在这里我有一个在 ARKit 发布的样本代码基础上 建立的演示 你们可以在关于这一内容的 网站上找到 那么现在我在检测 一个平面 如果我点击屏幕 那么它就会在这里的世界 为我们创建一个 SpriteKit 场景 你们可以看到这是一个全 动态的 SpriteKit 场景 你们可以看到这些树在活动 事实上 我可以直接 跟它进行交互 让我们真正地来 让我们稍微放大一点 由于我们处在 3D 空间中 我们可以 做所有酷炫的事情 我们可以把它移来移去 我们 可以旋转 我们还可以缩放 把它稍微变大点 所以现在我可以直接同 这个场景交互了 我可以控制这儿的 设备 我可以移动我的 这个小人 让它四处跳动

跳过它还有点难呢 好了 我们可以四处跳动 与它进行实时的交互 就跟普通的在 3D 中渲染的 SpriteKi 场景一样 但只是让它呆在 平面上没什么意思 我们应该做些稍微更 有趣的事情 让它更 3D 一点 所以如果我点击这里的 按钮 这个场景就会向上 弹起

如果我再点击一下 它就会 在这里分出不同的 几层 因此我们实际上不止有 一个 SpriteKit 场景 在这里我们实际上有三个 SpriteKit 场景 这里的每一层 都有一个 前面有一个 中间和后面各有一个

这就给大家展示了 你们在使用 SpriteKit 和 SceneKit 时结合 ARKit 可以做些什么 但可能 你们开始觉得有点 受到级别的限制了 或许我们想要自己的这个 小人走出来去自己 开启一场探险 它可以进入真实的 世界 这个按钮看着让人相当 想按下去

太棒啦

那么这就让大家明白了 在 3D 背景里同时使用 SpriteKit SceneKit ARKit 可以做些什么了

大家可以看到 结合 SceneKit 使用 SpriteKit 可以实现 全 3D 变换和透视 这又让大家可以做些 很酷的事情 它让大家可以把 2D 和 3D 的 内容混合在同一个背景中 并且与 ARKit 完全 兼容 同时它在普通的 3D app 中也可以很好地操作 刚才我们已经谈到了如何 使用 ARKit 和 SceneKit 下面 我们向大家介绍 SpriteKit 的另一个新功能 SKRenderer

让我们来稍微看看 SpriteKit 在底层是怎么运行的 我们在上一个板块中 已经提到了 使用普通的 SpriteKit 渲染 你们有 自己的场景并把它设置在 SKView 上 然后再同 UIKit 和 AppKit 一起来把你们的 内容放在屏幕上

SKView 会为你们处理 所有的更新和渲染

这一点的好处是它使得 用 SpriteKit 来起步 非常容易 但如果你们想要在一个 3D 背景里渲染 SpriteKit 内容呢 解决方法就像我给大家展示的那样 结合 SceneKit 来使用 SpriteKit 不用把场景设置在 视图上 你们可以把它用作 SceneKit 的材料 并且这能让大家做一切 酷炫的事情 但当 SpriteKit 的更新和 渲染仍不受你们操控 时

如果你们想要更多的控制呢 或许你们想要按照具体的固定的 时间步骤来更新或是不加 渲染地更新或是不加 更新的渲染又或是更新一次 渲染两次 每次都从不同的 视角进行

如果我们想要直接和 Metal 一起使用呢 那就进入 SKRenderer

你们可以使用 SKRenderer 而不是 SKView 来更多地操控 SpriteKit 就像 SKView 要使用 SKRenderer 你们只需要把你们的 场景设置在 渲染器上 但与 SKView 不同的是 SKRenderer 让你们来决定 SpriteKit 什么时候进行更新 和渲染 它让大家可以直接通过 Metal 运作 然后你们就可以 把 SpriteKit 渲染成 一个纹理然后 随心所欲地使用了 这正是 SceneKit 能够在 3D 背景中有效 渲染 SpriteKit 内容的方式 它在底层使用了 SKRenderer

使用 SKRenderer 一共有 四个步骤 初始化 设置场景 更新以及 渲染

初始化只出现一次 在一开始就要进行场景设置 如果要转换新的场景则要 再次设置 而更新和 渲染在 app 的每一帧都要 重复进行 让我们来看看每一个步骤 的代码 第一步 初始化 要将 SKRenderer 初始化 你们只需要向它提供 一个 Metal 设备 第二步 设置场景 这与 SKView 的做法是 完全相同的 只需要 把场景设置在 SKRenderer 的场景 属性上

第三步 更新 这同样非常简单 你们 只需要输入

currentTime 第四步 渲染 这可以通过调用渲染 方法来完成 具体方式 有两种 你们想采用哪种方式 取决于你们想 怎样结合 Metal 来使用你们的 SpriteKit 内容 两个方法都要求大家指定 你们想要渲染的 视口 也就是 CGrect 定义了在渲染目标里 SpriteKit 将要绘制的 区域 两种方法都有 Metal 渲染通过描述符 这 描述了你们希望 SpriteKit 内容绘制的 渲染目标 第一个方法让你们可以 指定 SpriteKit 来创建 渲染命令的 命令缓冲区

调用这一方法的一个 很好的案例是如果你们没有 直接把 SpriteKit 内容与 其它的 Metal 内容混合在 同一个渲染目标里 如果你们想把一个 SpriteKit 场景渲染成纹理 然后再通过一些 3D 几何图形 进行应用 就像我们给大家 做的第二个演示那样 那么 你们可能会想要调用这个 方法

第二个方法给了大家更多的 粒度 让大家可以 决定 SpriteKit 的渲染命令 将在哪个渲染命令编码器 上进行编码 如果你们想直接 把 SpriteKit 和 Metal 的内容混在 相同的渲染目标中 那么这种方式 是适用的 所以你们想要和 SpriteKit 内容一道渲染一些 2D 的 Metal 内容 或许你们想要 在 Metal 场景上叠加 SpriteKit 来显示 HUD 元素 通过使用相同的渲染命令 及编码器 你们可以大大地提高 效率 超过你们使用 第一个方法的效率 好了 这就是 API 的内容了 让我们来快速做一个演示 看看如何在 3D 中用 Metal 进行 SpriteKit 渲染

在这里，我们有一个 Metal 的 3D 场景 你们看 在这儿我们有明亮 的光线还有一些阴影 我们还有这台非常吸引人的 街机 上面还带有 漂亮的 SpriteKit 框架 标识

让我们朝着它走过去“插入游戏币” 听上去也相当吸引人 我有个硬币 让我们把它插进去 你们看 我们就得到了一个 在这个 3D Metal 场景上渲染的 SpriteKit 场景 看 我们在使用 SKRenderer 将 SpriteKit 渲染成一个 纹理 然后我们 再把它映射到这里的 街机前 接下来我们只需要把一个 CRT 着色器应用到 Metal 中 以获得这种复古学院派的外观 实际上 我可以随心所欲地从 任意角度移动 我还可以 像这样跟它交互 这稍微有点歪 但或许这让大家 回想起了曾经跟朋友 一起玩街机的时候 你们都互相挤在一起 来玩游戏 你们可以从任意角度来 视图 你们可以从远处 来视图 它会向你们显示出 一些你们结合 Metal 使用 SpriteKid 能做的 一些东西 它让你们可以在 3D 中使用 然后你们可以随意处理 这个纹理

以上就是 SpriteKit 和 Metal 一起操作的内容

SKRenderer 让大家能够对 SpriteKit 进行前所未有的 操控 它让你们可以决定 具体什么时候更新和 渲染 并且通过直接 与 Metal 交互 你们可以把 渲染的 SpriteKit 内容用在任何 你们觉得合适的地方

今天大家已经看到了 SpriteKit 对 2D 和 3D 都适用 它也能够同诸如 SceneKit 和 Metal 这样的其它图形框架 一起使用 并且 SpriteKit 与 ARKit 紧密 结合 因此创建 增强现实 app 变得极其简单 我们介绍了新的特征 给大家提供了前所未有的操控性 让大家可以在视图调试器 中来浏览 SpriteKit 内容 还让你们可以 直接控制何时及 以何种方式来结合新的 SKRenderer 进行 SpriteKit 的更新 和渲染 今天 我们展示了 SpriteKit 的全新面貌 我们 希望这能给大家带来一些 启发 去思索如何以 你们意想不到的方式 来进行使用

关于这场会议的更多信息及 视频 请访问 developer.apple.com/wwdc17/609 这个网站 也请关注其它相关的 会议 在今天的发布会上 我们仅 涉及到了 Metal 的小部分内容 如果你们想要了解更多 请关注 Metal 2 介绍这一 会议 我强烈建议大家观看 “ARKit 介绍”来了解 关于操作的详细 信息 如果我们对 SceneKit 的 快速讲解引起了大家的兴趣 你们可以看看今年的 主要会议

“用 Xcode 9 调试”这个专会议 上也有很多精彩的内容 比如在 SpriteKit 上用新的视图 调试器进行调试 比如非常强大的 无线调试 所以我建议大家 也去看看这场

感谢大家 希望大家愉快地度过 接下来的会议