时间戳

首页 > 解决方案 > 为什么我的 Phaser3 精灵渲染在错误的位置？

javascript - 为什么我的 Phaser3 精灵渲染在错误的位置？

问题描述

我正在尝试在 Electron 中使用 Phaser 进行感觉非常基本的绘图，但得到的结果毫无意义。形状出现了，但在错误的位置。

我正在尝试在左上角绘制一个 100 像素的正方形。这是我场景create方法中的所有代码：

// note: Phaser.config has { width: 400, height: 200 }

let debugGraphics = new Phaser.GameObjects.Graphics(this, { x: 0, y: 0 })
debugGraphics.lineStyle(1, 0x33ff33, 1)
debugGraphics.fillStyle(0xff0000, 1)

let squarePoints = [
  { x: 1, y: 1 },
  { x: 101, y: 1 },
  { x: 101, y: 101 },
  { x: 1, y: 101 } 
]

debugGraphics.strokePoints(squarePoints, true, true)
debugGraphics.fillPoints(squarePoints, true, true)
debugGraphics.generateTexture('square')

/*
  If these numbers are any lower, the square renders
  partially outside the visible area. At 199, 99 the
  1px border disappears along the left and top edges.
*/

this.add.sprite(200, 100, 'square')

问题是最后一行：如果我将精灵放在0, 0，场景呈现空白。只是出于一种预感，我才想尝试一些值，直到某些东西变得可见。

我对 Phaser 坐标系的理解是原点在左上角，x 向右增加，y 向下增加。因此，任何放置在0, 0, 的东西都应该至少有四分之一可见（取决于它的锚点是它的中心还是左上角）。我所看到的似乎与对该系统的任何合理解释不一致。

我还注意到，如果我在Phaser 配置中更改画布尺寸，对象会移动，我必须将放置坐标更改为300, 150-- 恰好是游戏尺寸的一半。这似乎同样是错误的。

我没有对游戏的坐标系应用任何类型的变换。整个“游戏”是一个最小的配置对象，然后是create上面的代码。我究竟做错了什么？我可以打开一个设置来强制 Phaser 停止愚蠢吗？

更新：我创建了一个最小的复制回购来证明这个问题。

我还重新标记了它以包括 Electron，因为这似乎是一个相关因素。我准备相信这段代码在浏览器中运行良好，而在 Electron 中运行不佳。我正在寻找可以在 Electron 中解决此问题的方法。

另见这个演示，它似乎再次证明了 Phaser 的坐标系是热垃圾。

标签： javascriptelectronphaser-framework

解决方案

推荐阅读