Javascript 缩放Phaser 2中的形状而不移动它

因此，我试图在Phaser中创建一个（非常）简单的进度条（最初是空的），并将其调整到特定的大小

我不喜欢擦除和重画，因为我认为这比简单的tweening更耗费资源/效率更低

每当我缩放其宽度时，它都会坚持向右移动——它也会更新其X坐标

我确实知道我们应该改变/设置锚。我尝试将其设置为0.5（中间）、0（左，上）和1.0（下，右），正如我在问题中看到的（和中看到的），但无论我设置了什么值，进度条也总是移动（并且总是移动到相同的位置）

这是我的密码：

//Fill
var graphs = game.add.graphics(0, 0);
graphs.lineStyle(2, 0xFF0000, 1);
graphs.beginFill(0xFF0000, 1);

progressBar = graphs.drawRect(100, 50, 1, 20);
progressBar.anchor.setTo(0.5, 0.5);

//Outline
graphs = game.add.graphics(0, 0);

graphs.lineStyle(2, 0xFFFFFF, 1);

progressBarOutline = graphs.drawRect(100, 50, 100, 20);
progressBarOutline.anchor.setTo(0.5, 0.5);

//Resize it whenever the user presses the game area
game.input.onDown.add( resizeProgressBar, this );

下面是我调用的调整（填充）栏大小的代码（目前通过tween完成）：

这里有一个显示问题的（单击画布更新栏）

这不会那么复杂。我忘了什么吗？还是我应该自己计算新的x位置

---

我正在使用Phaser CE 2.11

我不知道为什么进程条的高度在增长，也不知道它为什么在移动，因为我没有在Phaser中对原始图形绘制功能做太多的工作。然而，我确实知道一些事情可能会有所帮助

链接到的问题和进度条之间的区别在于，您使用的是原始图形，而不是精灵

如果切换到使用基于精灵的进度条，则可以缩放或设置

宽度

，具体取决于进度图形的外观

另一个选择是做类似的事情。相关位定义进度条，然后创建进度条：

var progressBar = this.add.graphics();
/// ...
this.load.on('progress', function (value) {
    progressBar.clear();
    progressBar.fillStyle(0xffffff, 1);
    progressBar.fillRect(250, 280, 300 * value, 30);
});

您可以根据您的特殊情况更改最后五行

---

虽然这样做可以清除然后重新绘制矩形，但我个人还没有看到过这样做会带来多大的性能冲击。至少在Phaser2的旧版本中，使用精灵而不是图形似乎是一条可行之路。当然，这还取决于您显示进度条的频率和数量。

您好，詹姆斯，谢谢您的回复。是的，我可以确认使用精灵确实有效，或者删除/重画矩形以产生填充条的错觉。我想避免这两种选择（精灵和重画），因为我认为它们在内存/处理上会有点重（但似乎我别无选择）。至于Phaser3，我想在那里做这个，但是文档不是很完整，因此我仍然在Phaser2。是的，我会说在进度条上使用一个精灵。从我所看到的情况来看，除非你在屏幕上有很多这样的内容，否则可能还有其他方面会对你的表现产生更大的影响。我也很慢地切换到Phaser 3，但一旦有了对精灵分组的支持，我就跳上了船。每一个版本都在编写文档，虽然不容易导航（IMO），但是labs.phaser.io。我可能也会跳到phaser 3。谢谢你的反馈

var progressBar = this.add.graphics();
/// ...
this.load.on('progress', function (value) {
    progressBar.clear();
    progressBar.fillStyle(0xffffff, 1);
    progressBar.fillRect(250, 280, 300 * value, 30);
});