预览效果

具体内容

■ 这一期，主要讲解游戏过程中，通过触摸滑动，控制人物的运动方向，以及游戏过程中，人物运动区域的控制。如下图，人物通过滑动控制运动方向，即是往哪个方向滑动，人物就往哪个方向移动。人物只限定在下图蓝色边界内运动。

■ 游戏运动区域使用一张背景图，精灵修改成 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)。

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

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