使用速度属性

为了给你更多的灵活性,这里有两个 速度属性vxvy去控制精灵的运动速度。 vx被用来设置精灵在x轴(水平)的速度和方向。vy被用来设置精灵在y轴(垂直)的速度和方向。 他们可以直接更新速度变量并且给精灵设定这些速度值。这是一个用来让你更方便的更新交互式动画的额外的模块。

第一步是给你的精灵创建vxvy属性,然后给他们初始值。

  1. cat.vx = 0;
  2. cat.vy = 0;

vxvy设置为0表示精灵静止。

接下来,在游戏循环中,更新vxvy为你想让精灵移动的速度值。然后把这些值赋给精灵的xy属性。下面的代码讲明了你如何利用该技术让cat能够每帧向右下方移动一个像素:

  1. function setup() {
  2. //Create the `cat` sprite
  3. cat = new Sprite(resources["images/cat.png"].texture);
  4. cat.y = 96;
  5. cat.vx = 0;
  6. cat.vy = 0;
  7. app.stage.addChild(cat);
  8. //Start the game loop
  9. app.ticker.add(delta => gameLoop(delta));
  10. }
  11. function gameLoop(delta){
  12. //Update the cat's velocity
  13. cat.vx = 1;
  14. cat.vy = 1;
  15. //Apply the velocity values to the cat's
  16. //position to make it move
  17. cat.x += cat.vx;
  18. cat.y += cat.vy;
  19. }

当你运行这段代码,猫会每帧向右下方移动一个像素::

Moving sprites

如果你想让猫往不同的方向移动怎么办?可以把它的 vx 赋值为 -1让猫向左移动。可以把它的 vy 赋值为 -1让猫向上移动。为了让猫移动的更快一点,把值设的更大一点,像3, 5, -2, 或者 -4。

你会在前面看到如何通过利用vxvy的速度值来模块化精灵的速度,它对游戏的键盘和鼠标控制系统很有帮助,而且更容易实现物理模拟。