开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

本系列代码仓库：Stargazers · dyzdyz010/ex_mmo_cluster (github.com)

上节我们说到，玩家角色的位置已经能够显示在网页上了，但是位置是错位的，因此本节我们来分析产生这个问题的原因，并解决这个问题。

经过比对，PIXI.js 的坐标轴方向与我截图的坐标方向是一致的，x 轴从左到右，y 轴从上到下，即坐标原点为左上角。

那就剩下一个问题：实际场景尺寸与场景截图的尺寸比例问题。

在网页中，场景的范围实际上就是我们对场景截图的范围，这个范围也就是图片的分辨率。

在 PIXI.js 中，图片的大小实际上就是精灵的尺寸：

console.log(bg.width, bg.height)

这样一来，我们既有了真正场景的尺寸（从UE中得到），也有了网页中场景的尺寸，我们只需要对他们做一个映射，其实就是得到一个两者之间的比例：

ratio = bg.width / 3000.0

这里 3000.0 就是 UE 中场景的宽度。

有了比例之后，我们就可以把角色在真实场景中的坐标转换为浏览器中场景的坐标了：

clist.forEach(character => {
    if (players[character.cid] == null) {
        let sprite = PIXI.Sprite.from('/images/arrow_64.png')
        scene.addChild(sprite)

		// 应用比例
        sprite.position.set(character.location.x * ratio, character.location.y * ratio)
        sprite.scale.set(0.5)
        players[character.cid] = sprite
    } else {
		// 应用比例
        players[character.cid].position.set(character.location.x * ratio, character.location.y * ratio)
    }
});

我们在设置精灵坐标时，对坐标进行了变换，这样一来网页中玩家角色在场景中的位置就是正确的了：

虽然还有些误差，但是问题不大，截图可能歪了点。

下一步

可以从图中看到，我用了一个 小箭头 来表示玩家角色，从直觉出发的话，箭头的指向应该和角色的朝向保持一致，但是现在并没有相关的逻辑，所以箭头总是朝左的。下一步我们将实现这部分逻辑，让网页中的角色状态看起来更完善。