Во время работы над Keridwen, доступной игрой-головоломкой на JavaScript, мне нужно было получить абсолютную позицию игрового объекта в Phaser 3. То есть у меня была большая прокручиваемая сцена, и мне нужно было знать, где игровой объект отрисовывался относительно верхний левый угол холста.

Просматривая документы Phaser, я не смог найти API, который дал бы мне эту информацию, поэтому я решил попробовать рассчитать позицию самостоятельно. После нескольких часов проб и ошибок я, наконец, смог это сделать.

Мои первоначальные попытки вычисления позиции включали попытку использовать положение прокрутки основных камер для смещения положения в мире объектов. Однако это не сработало, и стало очень сложно пытаться учесть, когда камера переставала двигаться на краях мира.

В итоге я просто просмотрел все свойства камеры и наткнулся на свойство worldView. Это свойство является текущим прямоугольником мира, который просматривает камера. Важно отметить, что позиции x и y определяют верхний левый угол холста.

Используя это, все, что нам нужно сделать, это вычесть положение игровых объектов в мире из положения камеры в мире, и мы получим положение игровых объектов относительно верхнего левого угла экрана. Если ваша камера имеет зум, нам также потребуется умножить окончательный результат на зум камеры.

function getRelativePositionToCanvas(gameObject, camera) {
  return {
    x: (gameObj.x - camera.worldView.x) * camera.zoom,
    y: (gameObj.y - camera.worldView.y) * camera.zoom
  }
}

Первоначально опубликовано на https://stevenklambert.com 28 февраля 2021 г.