江苏龙网

  1. 首页 > 人文 > >

自学 Cocos JS 之 让小公举走起来

先上效果图
自学 Cocos JS 之 让小公举走起来文章插图
在Creator编辑器中布局UI
自学 Cocos JS 之 让小公举走起来文章插图
上图是操作流程图

  1. 新建场景Checkpoint
  2. 在场景中增加地图空节点map
  3. map节点添加TiledMap组件
  4. 把资源包中的地图文件拖到TiledMap组件上
  5. 在场景中添加主角空节点hero
  6. hero节点添加DragonBones组件
  7. 把资源包中的主角的骨架文件和贴图集文件分别拖到对应的位置上
  8. 把hero节点拖到map节点里
  9. 设置地图的锚点是(0, 0)
  10. 将Player脚本拖到Canvas里
  11. 把map节点和hero节点分别拖到脚本对应的变量上
至此UI布局结束 ， 现在讲讲里面的逻辑
  • hero节点拖到map节点里是为了让hero和map在同一坐标系里
  • map的锚点设置成(0, 0)是为了方便坐标计算
Player脚本概述这个是今天的重头戏 ， 约200多行的代码 ， 花了一个多小时写的可能结构不太好 ， 请见谅 。 欢迎各种批评指正 ， 谢谢 。
自学 Cocos JS 之 让小公举走起来文章插图
onLoad函数
自学 Cocos JS 之 让小公举走起来文章插图
这个函数只做了一件事 ， 就是在Canvas节点上注册了一个TOUCH_END事件 ， 且执行了该事件的回调函数
目的是确定主角下一步的移动方向
就是在鼠标或者手指抬起的时候 ， 判断点击屏幕的位置(x, y)距离屏幕中心点的最远距离为主角下一步的移动方向
start函数
自学 Cocos JS 之 让小公举走起来文章插图
这个函数做了如下事情
  1. 处理地图 ， 把不需要的图层隐藏
  2. 设置主角缩到原始大小的0.4倍
  3. 设置主角初始动作
  4. 设置主角初始坐标
  5. 保存每个地图格子的宽高像素值 ， 用于后面计算移动
moveCheck函数
自学 Cocos JS 之 让小公举走起来文章插图
这个函数的目的是判断下一个格子是否可以走
有两种条件不可移动
  • 在移动中
  • 下个坐标格是阻挡
阻挡是在Tield Map Editor(地图编辑器)里增加了Terrain图层 ， 用图块集里的图块填满整张地图 ， 图块集里的每一个图块给一个TerrainID的属性 ， 如果TerrainID是999表示阻挡 ， 如下图 。
自学 Cocos JS 之 让小公举走起来文章插图
moveBegin函数
自学 Cocos JS 之 让小公举走起来文章插图
自学 Cocos JS 之 让小公举走起来文章插图
这个函数目的是根据方向计算下个目标格子的坐标 ， 且播放移动动画 ， 当动画播放一定帧数后执行moveEnd函数
这里用了一个计时器 ， 每20ms执行一次 执行25次 每次移动 nextPos / 25 的像素坐标 ， 计数器执行完自动删除 。
moveEnd函数
自学 Cocos JS 之 让小公举走起来文章插图
这个函数就是用来在移动结束之后恢复待机动画的
setMovePos函数
自学 Cocos JS 之 让小公举走起来文章插图
这个函数只调用了一次 ， 就是在start函数里调用 ， 计算了主角的坐标和地图的坐标


推荐阅读


上一篇：千元机并没有你想的那么不堪，这几款早已烂大街，有你在用的吗？

下一篇：「新品情报站」最近钻石天线厂家出了几款天线周边配套有点鸡肋