Question

因此，我正在尝试在Phaser中创建（非常）简单的进度栏（（最初是空的）），并将其调整大小/缩放为特定大小。

我不喜欢擦除和重画，因为我认为这会占用更多资源/效率不如简单补间。

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

我确实知道我们应该更改/设置锚点。正如我在this问题（和Phaser forums）中看到的那样，我尝试将其设置为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 );

这是我用来调整（填充）栏大小的代码（当前通过补间完成）：

function resizeProgressBar()
{
   game.add.tween(loadingProgressBar.scale).to( { x: 2.5}, 
   1000, Phaser.Easing.Quadratic.InOut, true);
}

这是显示问题的fiddle （单击画布以更新栏）。

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

我正在使用Phaser CE 2.11

Answer 1

我不确定progressBar的高度为什么会增加，为什么会移动，因为我对Phaser中的原始图形绘制功能还没有做很多事情。但是，我知道有些事情可能会有所帮助。

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

如果切换到使用基于Sprite的进度条，则可以缩放或设置width，具体取决于进度图形。

另一种选择是执行类似于this tutorial for progress bars in 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);
});

您可以根据自己的具体情况更改最后五行。

虽然这确实可以清除然后重新绘制矩形，但我个人没有看到这样做对性能造成很大的影响。至少对于旧版本的Phaser 2，使用Sprites而非Graphics似乎是可行的方法。当然，这还取决于您将显示这些进度条的频率和数量。

在相位器2中缩放形状而不移动

1 个答案: