《太极秀TaijiShoot》是一款用Cocos Creator开发的中国风浓厚的射击类休闲游戏。原型出自2016年的Global Game Jam，凭借创意十足的玩法和操作简单但过关难的关卡设计，给人留下了极其深刻的印象：
太极秀视频
本系列教程将带领大家从零开始将太极秀做出来，让大家熟悉Creator的一些基本用法的同时顺便推广一下我们的游戏（嘿嘿嘿）。该教程会将太极秀开发过程的每一个步骤都详细列出，特别适合对Creator使用还不够熟悉的新手，老鸟们可以无视。如果您对教程有什么建议（或者希望交个朋友），欢迎加微信：gamhunter
这是《太极秀》系列教程的第三篇，如果您没看过之前的教程，建议从头看起：
Creator图文教程——《太极秀》（一）
Creator图文教程——《太极秀》（二）
这篇教程我们要实现以下动图中两个太极的效果：两个太极在自转的同时绕着太极秀logo公转，快公转一圈的时候两个太极快速旋转后自动打开，露出闯关模式和创造模式两个按钮。当在公转的过程中点击任意一个太极时，两个太极都会停止公转，被点击的太极会快速旋转后打开，露出按钮：
首先，我们把所需要的节点，以及这些节点的层级关系和初始位置先弄好。在层级管理器中的Canvas下新建一个空节点，并重命名为taijiMenu，然后在taijiMenu下新建空节点，并重命名为levelModeTaiji。接着在levelModeTaiji节点下新建空节点，并重命名为Mask。我们要实现菜单按钮逐渐展开的效果，需要用到遮罩（Mask）。接着将组成太极的两张阴阳鱼图片拖到levelModeTaiji节点下，并调整图片的位置（position）属性，使其形成一个太极的形状，然后选择Mask节点，添加组件→添加渲染组件→Mask。将Mask的Sizes属性设置为0，60。
接下来做太极公转结束和公转过程中被点击时的动画。
首先，在资源管理器的Animations文件夹下新建动画剪辑，并重命名为Taiji_open，然后将其挂载在levelModeTaiji节点上（挂载过程前面已经做过很多遍了，不再详述）。
然后开始编辑动画，我们要实现太极快速旋转两圈后展开，遮罩随着太极同时展开的效果。
太极快速旋转两圈：在动画编辑器里选择levelModeTaiji节点，增加rotation属性，然后做相应的调整（前面做荷花和蜻蜓的时候已经做过，不再详述）。
阴阳鱼展开：在动画编辑器里选择taijiFish_black（taijiFish_white）节点，增加position属性，然后做相应的调整。
遮罩随太极同时展开：在动画编辑器里选择Mask节点，增加width属性，然后做相应调整。
最后调整一下动画播放速度，关闭动画编辑器并保存。到这里太极的旋转后展开动画便完成了。
我们总共要做两个太极，另一个直接复制就好。
选择层级管理器里的levelModeTaiji节点，点击鼠标右键→复制节点，将新复制的节点重命名为createModeTaiji。
然后将资源管理器中正常状态的闯关模式和创造模式图片分别拖到levelModeTaiji和createModeTaiji节点下的Mask节点里。
最后调整一下两个太极的位置。
接下来实现两个太极自转的同时绕着太极秀logo公转的效果。
新建动画剪辑并重命名为Taiji_circle，然后将其挂载到taijiMenu节点上，并勾选Play On Load属性。
然后编辑两个太极一边自转一边公转的动画：
接着，实现在动画播放过程中的合适位置展开太极。
在太极公转路径的合适位置添加帧事件，填入的函数名为openTaiji。
然后在资源管理器的Scripts文件夹下新建JavaScript脚本，并重命名为TaijiMenu。双击打开TaijiMenu脚本，写入三个函数：openLevelModeTaiji（展开闯关模式太极）、openCreateModeTaiji（展开创造模式太极）、openTaiji（展开两个太极）。代码如下：
保存后将TaijiMenu脚本挂载到taijiMenu节点上：
接下来实现当两个太极在公转的过程中点击其中一个太极，两个太极停止自转和公转，被点击的太极旋转后展开的效果，这里要用到Button（按钮）组件。
在层级管理器中选择levelModeTaiji（或者createModeTaiji）节点，然后在属性管理器中增加组件→增加UI组件→Button，接着点击Button组件Click Events属性栏右边上部的三角形按钮，增加点击事件。然后将层级管理器中的taijiMenu节点拉到Target属性栏里，Component属性栏选择TaijiMenu，Handler属性栏选择openLevelModeTaiji（openCreateModeTaiji）。最后千万要记得调整levelModeTaiji（createModeTaiji）节点的Size属性，这样才能点到太极。
保存场景，菜单界面到这里差不多就完成了。
这时还存在一个问题：如果再次点击展开后的太极，它会再次执行展开的动画。这不是我们想要的，所以我们要让两个太极在展开后无法被点击。
首先选择levelModeTaiji（或者CreateModeTaiji）节点，然后打开动画编辑器，
选择动画编辑器里的levelModeTaiji（或者CreateModeTaiji）节点，增加cc.Button.enabled（按钮可用性）属性，在第一帧和第二帧上添加关键帧，将第二帧的属性检查器中Button组件前面的勾去掉。保存动画，再次预览游戏，发现实现了我们要的效果：
最后，我们要实现从Story界面到Menu界面的跳转。
我们让Story场景中文字动画执行完，再过5秒钟跳转到Menu界面。
打开Story场景，选择StoryLabel节点，然后打开动画编辑器，在该动画的最后一帧添加帧事件，帧事件调用的函数名为loadMenuScene。
保存，然后新建JavaScript脚本，并重命名为Story。写入以下代码：
保存，选择StoryLabel节点，添加组件→添加用户脚本组件→Story。
保存，预览游戏。大功告成！
