SceneKit教程04 - 用场景编辑器添加动作

你的游戏现在看起来很棒但完全不会动, 这一节你会学习sceneKit中的action来使你的node运动起来, 来创建一个动态的3D环境.

接下来, 你要在游戏开始时先让我们的小猪像罗志祥一样跳舞! :] 然后你要添加手势和动作来让他在场景中跳来跳去收集金币, 并蛇形走位的过马路. 你还要让往返的车流动起来, 最后, 让我们金闪闪的硬币旋转并上下弹跳.

action可以让你控制node的position位置, scale大小, rotation角度, 和opacity透明度. 举个例子, 玩家向左滑动时, 猪先生应该向左跳动一格. 这些基本运动可以通过sequence(有序的)或groups(并行的)方式来添加多个action来实现.

具体实现方面, 你可以直接在scene editor里选中需要添加action的node, 拖动Object Library里的action到下方的第二个editor; 或者直接用代码, 创建一个SCNAction, 然后通过node的runAction(_:)方法来实现.

直接来实战. Xcode有个隐藏的Secondary Editor, 看下图:

下面我们让猪先生背后的阳光转起来.

首先确保你选中的是MrPig.scnassets/SplashScene.scn -> Rays

1 找到Rotate Action并拖动到Action Editor里.
2 在Attributes Inspector确保Action中的数值如图所示. Start Time = 0确保你看到的时候就已经开始转动了. Duration = 30 即这个action要运行30秒. Euler的z为360, 代表着30秒结束时, 绕着z轴转动了360°.
3 右键点击你创建的action, 选择create loop, 并点击∞(无限). 这样你的阳光就会一直转动下去. (点击∞过后不要点击x, x代表着不要循环而不是仅仅关闭这个小弹窗)

image.png

完成! 慢慢拖动你的时间光标来查看你刚添加的action

你需要添加的另外一个简单的小动画是需要让金币一直旋转的同时一边上下跳动, 以便于让Mr.pig发现.

首先, 选中MrPig.scnassets/Coin.scn, 然后确保Coin被选中, 打开Action Editor, 拖动2个Move Action到editor, 然后拖动一个Rotate Action到他们的下面.

选中第一个Move Action, 在Attributes Inspector设置为这样:

选中第二个Move Action, 设置为这样:

这会让硬币上下运动.

然后选中Rotate Action, 只需设置Euler.y为360.

最后, 我们想让金币这样永远的转下去, 长按command键选中3个Action, 右键选择Create Loop, 并点击∞. 完成!

你可以点击Scene Editor中间的Play按钮来预览你的动画.

接下来是有趣的部分: 舞蹈挑战! 陈独秀你坐下, 并不是让你自己跳. :] 我们接下来想在splash scene中让我们的小猪秀出他可爱的小尾巴.

我们要到MrPig.scnassets/SplashScreen.scn中添加Action给Mr.Pig reference, 而不是直接修改MrPig.scn, 不然进入游戏后小猪在game scene中仍会一直跳舞.

下面正式开始, 放松, 这比你想象中要简单很多:

拖动Rotate Action, 修改Duration为0.25, 并再复制6个.
将第1, 3, 5个Rotate Action的Euler Angles的x设置为30

将第2, 4, 6个Rotate Action的Euler Angles的x设置为-30
然后你想要一个帅气的转身, 将最后一个Rotate Action的Euler Angles的y设置为180
选中所有的Action -> Create Loop -> ∞ 来让我们的小猪一直跳下去.

Command + R来欣赏一下帅气的舞蹈 :]

Dancing Pig

现在你的Splash Scene看起来足够吸引人了, 有个旋转的光线和活力十足跳舞的小猪.下一节我们用代码来实现更多的动作

1 准备工作、创建项目、Splash Scene
2 过场动画 Transition
3 搭建游戏场景 Game Scene
4 用场景编辑器添加动作
5 用代码添加动作