从零开始的MMORPG游戏服务器(23) - Visualize Server(6) - 角色图标朝向问题修正

上节我们让玩家角色的指示图标以正确的位置显示在了网页中，但是当角色移动时，图标的方向并没有随着移动的方向更新，而是一直朝着一个固定的方向，一点都不好看。本节我们来解决这个问题。

基本思路

指示图标的箭头指向实际上就应该是角色的移动方向。我们在为图标更新位置时，实际上我们有两个位置：

• 图标当前位置
• 图标所要更新的下一个位置

这样的话我们可以得出一个计算方向的思路：用后一个位置减去前一个位置，得到一个位移向量，这个向量的方向就是图标应该指向的方向。

实现

在 PIXI.js 中，精灵的旋转只能通过角度或者弧度来指定，不支持方向向量指定，因此我们还需要将方向向量转换为角度或者弧度。

JS 的 atan2 函数可以将向量坐标转换为其与 x 轴正方向的夹角弧度。到这里，我们其实就可以使用 sprite.rotation 来设置其旋转角度的弧度值了。如果想要角度的话，只需要对其进行变换：

degrees=radians∗180πdegrees = \frac{radians * 180}{\pi}degrees=πradians∗180​

然后使用 sprite.angle 对其进行设置就行：

function getAngle(x, y) {
    var angle = Math.atan2(y, x);   //弧度
    var degrees = 180 * angle / Math.PI;  //角度

    return deg