Cocos Creator小游戏案例《棍子士兵》

作者: Thomas游戏圈 | 来源:发表于2020-06-19 11:49 被阅读0次

一、应用简介

二、场景搭建

新建空白标准项目，在资源管理器面板中新建文件夹res、scenes、scripts，将资源文件复制到res文件夹内。在层级管理器选中Canvas修改大小为宽度720，高度1280（背景图片设计的就是这个尺寸），勾选固定宽度，Ctrl+S保存场景到scenes文件夹内。如上图。点击链接加入群聊【unity/cocos交流二群】

将背景图片拖入，修改为bg。新建game_root空节点，在其内新建plat_root空节点，用于放平台，将平台图片拖入到plat_root节点内，修改为cur_plat，复制cur_plat节点修改成next_plat节点，修改其各自位置。

将资源管理器中res内的士兵素材拖到game_root节点内，修改Type为TILED（平铺），点击矩形变换工具，调整大小及锚点，点击移动工具，调整到平台plat_root节点下。（如上图所示操作）

如上图，将棍子素材拖入到层级管理器面板的player和plat_root节点之间。点击矩形变换工具，拖动棍子上的圆圈，调整锚点到棍子底部，届时棍子旋转要围绕此中心点旋转。修改此节点的Rotation属性值为-90，就可以看到棍子顺时针方向旋转了90度，变成了平放。点击移动工具，调整位置，棍子底部位置和士兵脚底重合（左下图）。

之后，再把棍子stick节点移动到plat_root节点之上，这样就会显示在平台层下面，看到的效果就像是棍子嵌入到平台去了，有点像没入雪中的感觉。（如右上图）

三、棍子生长与放平

全屏任意位置按下鼠标或触摸开始，棍子变长，松开鼠标或触摸结束，棍子旋转放平。

因为，要在全屏任意位置触摸导致棍子生长，所以需要将game_mgr.js用户脚本组件添加到Canvas上，且要在此脚本中获取棍子stick，故要在game_mgr.js中添加属性stick并在编辑器中绑定棍子节点stick。

编译，运行，在界面按下鼠标不放，棍子会不断生长，松开鼠标，棍子会向右旋转放平。

四、成功与失败的流程处理

【分析】：棍子放平后，通过代码控制角色运动，如果棍子放平后，棍子右端端点的位置位于下一个平台左右边缘点中间，则说明成功。否则失败！

成功后，士兵应该运动到下一个平台的右边缘，接着整个game_root节点往左边移动刚才士兵行走的距离（这也就是为什么最开始要将stick、player、plat_root全部放到game_root下面的原因），然后在通过预制体生成下一个平台，下一个平台的宽度随机，距离上一个平台的位置随机。

失败后，角色走到棍子的端点然后掉下去。如果棍子未接触到下一个平台，则棍子也旋转下去。游戏结束。

注意写方法名！不带()！

1. 判断游戏是否成功is_success()方法

因接下来，要控制士兵player运动，且要获取下一平台的左右边缘位置做判断，故在geme_mgr.js的properties中添加属性，同时在Canvas上将相应属性节点实例化。如下操作：

2. 失败流程处理check_failed()方法

编译，运行，发现bug，失败时棍子没有摆平，成功时，棍子会摆平，所以最大可能是失败对应的处理方法存在问题。浏览器中断点调试发现问题原因，代码报错没有执行完。

将报错的85行的player.y改成this.player.y即可。重写编译，运行，发现失败后，棍子放平，士兵走到棍子端点后，会掉下去。棍子也会往悬崖边掉。但是发现滚子嵌入到平台看不见了。

上图疑惑解析，如下图：

将下一平台的宽度调整为100，和前一平台的位置调近点，测试当棍子超出下一平台时，看士兵是否会掉下去，棍子是否还会往平台边缘掉，如下图，士兵掉下去，棍子不动，正常。

3. 成功流程处理check_success()方法

①士兵移动到下一平台的右边缘；②产生下一个新平台（销毁旧的第一个平台，cur_plat平台为现有next_plat，产生下一个平台next_plat，整个game_root节点往左移动刚才士兵行走的距离）。

因为要操作当前平台、下一平台，且要将生成下一平台放到plat_root节点上，同时要移动game_root节点。而生成下一平台需要使用预制体。故先制作一个平台预制体。然后在game_mgr.js中的properties中添加属性cur_plat、next_plat、plat_prefab、plat_root、game_root。并且在组件中实例化。