先上效果图

在Creator编辑器中布局UI

上图是操作流程图

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多行的代码，花了一个多小时写的可能结构不太好，请见谅。欢迎各种批评指正，谢谢。

onLoad函数

这个函数只做了一件事，就是在Canvas节点上注册了一个TOUCH_END事件，且执行了该事件的回调函数

目的是确定主角下一步的移动方向

就是在鼠标或者手指抬起的时候，判断点击屏幕的位置(x, y)距离屏幕中心点的最远距离为主角下一步的移动方向

start函数

这个函数做了如下事情

1. 处理地图，把不需要的图层隐藏
2. 设置主角缩到原始大小的0.4倍
3. 设置主角初始动作
4. 设置主角初始坐标
5. 保存每个地图格子的宽高像素值，用于后面计算移动

moveCheck函数

这个函数的目的是判断下一个格子是否可以走

有两种条件不可移动

• 在移动中
• 下个坐标格是阻挡

阻挡是在Tield Map Editor(地图编辑器)里增加了Terrain图层，用图块集里的图块填满整张地图，图块集里的每一个图块给一个TerrainID的属性，如果TerrainID是999表示阻挡，如下图。

moveBegin函数

这个函数目的是根据方向计算下个目标格子的坐标，且播放移动动画，当动画播放一定帧数后执行moveEnd函数

这里用了一个计时器，每20ms执行一次 执行25次 每次移动 nextPos / 25 的像素坐标，计数器执行完自动删除。

moveEnd函数

这个函数就是用来在移动结束之后恢复待机动画的

setMovePos函数

这个函数只调用了一次，就是在start函数里调用，计算了主角的坐标和地图的坐标

setMovePosDelt函数

这个函数就是根据传入的增量移动，设置主角坐标，设置地图坐标

结语

经过这一通的操作，最终实现开头动画的效果

因为时间仓促代码确实没好好整理，也可能有BUG

欢迎交流指正

谢谢