Graphics 如何在Phaser.js中高效地绘制线图

我想画多个正弦曲线，但我想有效地这样做，以便我可以动画他们的运动。以下是我尝试过的，但看起来并不顺利：

var游戏，DemoState；
//创建游戏状态
函数DemoState（）{}
DemoState.prototype.create=函数（）{
var graphics=game.add.graphics（10,10）；
window.graphics=图形；
window.startTime=game.time.time；
}
DemoState.prototype.update=函数（）{
var graphics=window.graphics；
graphics.clear（）；
对于（var j=0；j<6；j++）{
图形。线条样式（3，0xffffff，1）；
对于（变量i=0；i<2360；i++）{
var x=i/10.0+（game.time.time-window.startTime）/50.0；
变量y=数学sin（x）*40；
图形.线性图（10+i，100*（j+1）-y）；
}  
}
};
//游戏引导器
window.onload=函数（）{
游戏=新的Phaser.game（24001200，Phaser.AUTO，“Phaser演示”）；
//将游戏状态添加到状态管理器
game.state.add（'demo'，DemoState）；
//然后开始比赛
game.state.start（'demo'）；
};

---

在Phaser中绘制线图的最佳方法是什么？

在浏览代码之后，我建议您在

update（）

中重新编写代码。For循环通常是不允许的，因为

update（）

将在每个帧之前执行一次（两个嵌套循环会使事情更加复杂）

---

一个更好的方法是设置一个tween（或一组tween），而不是tween（例如精灵的位置），您可以tween一个数值；在

create（）

中创建并启动tween，然后在

update（）

中轮询值，即使我使用tween，我不需要在

update（）

中循环以实际绘制所有线条吗？这种方法如何消除在

update（）

中对

循环的
需求？是的，您可以，但是您将在
update（）
之外有一个变量，您将使用tween设置该变量的值，然后在
update（）
循环中读取该值。根据我所知，Tweens是计算随时间变化的值的最有效（或唯一最有效）的方法之一，无论该值是什么-颜色、角度、位置或其他任何东西。这里有一个简单的例子，从0度到90度之间的夹角，然后向后-。您可以使用类似的内容，只需使用
update（）
中的值，方法与示例中
render（）
中使用的方法相同。对，但这只能解决代码中的以下行：
var x=i/10.0+（game.time.time-window.startTime）/50.0。我仍然需要使用多重for循环来实际绘制线条，这仍然很慢，对吗？
var game, DemoState;

//create the game state
function DemoState() {}

DemoState.prototype.create = function() {
  var graphics = game.add.graphics(10, 10);
  window.graphics = graphics;

  window.startTime = game.time.time;
}

DemoState.prototype.update = function(){
  var graphics = window.graphics;
  graphics.clear();

  for (var j = 0; j < 6; j++) {
    graphics.lineStyle(3, 0xffffff, 1);

    for (var i = 0; i < 2360; i++) {
      var x = i / 10.0 + (game.time.time - window.startTime) / 50.0;
      var y = Math.sin(x) * 40;

      graphics.lineTo(10 + i, 100 * (j + 1) - y);
    }  
  }
};

// Game Bootstrapper
window.onload = function () {
  game = new Phaser.Game(2400, 1200, Phaser.AUTO, 'phaser-demo');
  // add the game state to the state manager
  game.state.add('demo', DemoState);
  // and start the game
  game.state.start('demo');
};