本篇文章转载自公众号【一枚小工】，作者：一枚小工

本篇文章为大家带来 Cocos Creator 飞刀大乱斗开发系列教程。

one 1

主页下方列表选项如何实现

预览效果

一、具体内容

游戏开始后，加载所有现有的英雄列表，这一功能的实现，如下图部分。

列表使用 ScrollView 实现，横向滚动，设置好上下左右的边距、选项之间的间距，内容部分使用 Layout 来做自动排版，最终列表显示内容，如上图所示即可。

重点是列表中的英雄预制体。预制体一共有三种状态：已解锁、使用中、未解锁。具体显示效果如下图所示。游戏中存储每一级英雄的状态，根据状态数据，绘制英雄列表显示。

二、状态的显示控制

如上所述，一共有三种状态，理论上，游戏开始时，只有第一关是解锁的，后面的关卡根据游戏的进行，不断的开启。预制的状态由一个变量控制，不同值表示不同状态。

预制节点下，留有不同状态的根节点，根据英雄不同的状态，控制不同状态的节点显示以达到状态变化的效果。

三、英雄武器显示控制

武器和英雄，都依托在一个精灵上，对应的纹理，使用纹理数据存储即可，为了方便，会按照等级顺序存储，这样方便取出等级纹理图片。

四、英雄选择控制

因为在游戏过程中，一次只能使用一个英雄，所以使用中状态的英雄，永远只会有一个。而且，未解锁的英雄，是无法使用的，点击也需要做特别处理。

如上图代码，在选择的时候，需要判断新选择的是否和之前的一样，这种不需要做处理；如果获取到新选择的英雄未解锁，目前是没有做其他任何处理的。

添加英雄的时候，需要给每个预制体注册一个回调函数，预制体点击的时候，会调用注册的函数，为了获取点击的节点，需要把预制体本身节点传递出来。

五、加载英雄列表

游戏一开始，根据英雄列表数据，绘制英雄列表，数据单机的，存储在内存。存储的数据包括：各等级的英雄名称，状态信息，后续游戏过程中，触发某些条件，再更新对应数据，重新绘制列表即可，如果有需要，也可以存储起来，目前是用来学习的 demo，就暂时用全局变量存储。

two 2

主页中间人物效果的实现

预览效果

一、具体内容

也就是在下方列表选择不同人物，上方显示不同的人物，播放不同的效果，即下图的效果实现，此部分也是采用预制 Prefab 进行实现。

二、英雄 Hero 预制组成

英雄预制 Hero 主要四部分组成：旋转的光、大小变化的光球、英雄本身、英雄的武器。这四部分，都会根据英雄的不同等级，动态的更换对应的纹理即可，游戏过程中，使用的动画，无须变化。

使用到的几个精灵，都需要根据不同等级，进行纹理的更换，于是就封装了一个通用的方法，传入精灵节点和纹理所在路径，使用 cc.loader 动态加载纹理，加载成功以后，直接显示出来。

三、动画的显示

光旋转效果，只需要做旋转动画即可。在动画中，加入旋转角度，就可以简单的实现。显示的效果好不好，可以预览观察，直到调整到合适的旋转节奏就行。

武器旋转效果，和旋转的光，是用的同一种节奏进行的，所以本实例中，旋转的武器和旋转的光，都是使用上图效果中的同一个动画。播放时，设置成循环播放就可以实现不断的播放效果了。

放大缩小光球，也和上面动画效果差不多，只是动画选择的是 scale 属性，不断的进行放大缩小就行，也是一样，加入循环播放的控制。

以上所有动画，在游戏中是同时进行播放的，最后看起来的效果就如同最开始的预览一样，球和武器一起旋转，同时光球不断的放大缩小。

四、武器添加

这里将的武器添加，是指初始化时，根据不同等级的英雄，默认添加添加到英雄周围旋转的飞刀，都是一次性添加的，没有动态添加几把的效果，这个后期会讲到。

英雄上所有的武器，共用一个根节点，根节点作为容器，管理所有武器。这么做的好处是，多个武器需要做动画时，只需要按照规则把武器添加好，对根节点做动画即可。添加的方式是，以中心点为圆点，根据武器数，计算出每把武器之间的角度，然后算出每把武器的 x 坐标值和 y 坐标值。

假设武器锚点离中心点的偏移量是 Offset，角度是 angle，那么就容易算出武器的横坐标 x = Offset * sin(angle)，同理，可算出武器的纵坐标 y = Offset * cos(angle)。按照这个原理，就可以实现武器按照角度分布，添加到武器根节点上。计算过程中，需要注意角度和弧度的转换，不同版本的 Cocos Creator 设置角度的 API 可能有差异，这个看官方文档就行。

五、选中未选中处理

这里，有添加一个额外处理，正常情况下，人物使用的纹理和选中使用的纹理，是有差异的，这个功能，主要是用在后期的游戏中的，目前只需要关注有这个功能即可。这个实现，也很简单，就是监听触摸事件，触摸开始更换一个纹理，触摸结束，再还原回来就行。

英雄有两种状态，进攻状态和防御状态，按下时是进攻，松开以后是防御状态。攻击状态下，武器会扩大攻击范围，武器有一定的倾斜度。防御状态下，武器笔直向外，离英雄更近。只需要单独的做每个武器做动画，修改武器的位置和偏移角度，计算方法类似上面的添加武器。

three 3

触摸滑动，控制人物的运动方向，以及游戏过程中，人物运动区域的控制

一、具体内容

人物通过滑动控制运动方向，即是往哪个方向滑动，人物就往哪个方向移动。人物只限定在下图蓝色边界内运动。

二、边界的实现

游戏运动区域使用一张背景图，精灵修改成 TILED 模式，根据需要，可以修改背景的大小，改变整个游戏的区域，边界使用一张边界纹理，同样使用 TILED 模式，进行翻转、修改大小、调整位置，以达到上述界面效果。

所有玩家的人物，都放到背景下的一个铺满父节点的根节点上。之所以没有直接放到背景节点上，是为了便于管理所有玩家的人物角色。

人物上下左右边界的最大最小值，可以在界面上拖动人物，获取最佳可见的位置信息，在脚本内，记录下来，后面控制人物运动时，作为临界值使用。

三、触摸时间监听

游戏过程中，人物是在游戏区域内，全图可以运动的，所以事件的监听，需要放到大地图上，如本案例，就可以挂在到背景图或人物根节点上，我选择的是挂载到背景节点上。

需要监听 TOUCH_START、TOUCH_MOVE、TOUCH_END、TOUCH_CANCEL 四个事件，考虑到移动过程中，移动幅度的大小会影响游戏体验，我这里控制了一个变化值，当上一次到下一次的变化值超过 5 时，才按照偏移量计算运动的方向。

如上图，会保留一个变量存储上一次的位置，当移动的偏移量达到预设值 5 时，修改人物的运动方向，更新下一次的起始变量。人物的运动方向，计算变化的向量和 (0,1) 向量的夹角即可。

使用 Vec2 的 signAngle 能很方便的计算出两个向量的角度（弧度），人物的运动方向，就是根据这个弧度进行控制。

四、运动方向控制

游戏过程中，手指按下屏幕，人物处于进攻状态，松开手指，人物处于防守状态，防守状态下的人物，是不能移动的。在计算人物移动位置时，就需要人物在进攻状态下，才可以生效。下图左边是防守状态，右边是进攻状态。

位置的计算，也是根据上一步中设置的变化角度，计算下一步的运动位置，在人物的 update 函数内，动态更新人物的下一个位置。假设变化的偏移量是 offset，变化的角度是 angle（弧度表示），节点当前的位置是（x，y），下一步的位置（next_x，next_y）计算就是：

next_x = x + offset * sin(angle);

next_y = y + offset * cos(angle);

再判断 next_x 和 next_y 的合法性，如果验证通过，人物的下一个位置就是(next_x, next_y)。

五、边界的控制

上一步中，计算完人物的下个位置，需要判断是否超过上下左右的边界，在超过时，调整位置，最后直接更新人物位置即可。

游戏一开始，根据配置，加载多个人物到人物的根节点上，记录下玩家自己的节点，人物的运动逻辑，按照上述步骤控制，就可以实现屏幕中多个人物同时游戏的效果。

以上就是本次的分享，

如有问题或新的想法欢迎留言嗷~

更多笔记和源码欢迎关注作者的个人公众号哦~

 

如果您在使用 Cocos Creator 2D/3D 的过程中

get 了独到的开发心得、见解或是方法

欢迎分享出来

帮助更多开发者们解决技术问题

让游戏开发更简单~

期待您与我们联系~

更多精彩

Cocos 荣获金茶奖 2019 最佳游戏服务企业

Cocos Creator | 自由/约束的绳索效果

Cocos Creator 通用框架设计——资源管理

Cocos Creator v2.2.2 正式发布

来啊，斗图啊！Cocos 官方定制表情包来啦~

- end -