移动精灵

现在你知道了如何展示精灵，但是让它们移动呢？很简单：使用Pixi的ticker。这被称为 游戏循环 。任何在游戏循环里的代码都会1秒更新60次。你可以用下面的代码让 cat 精灵以每帧1像素的速率移动。

  2. function setup() {
  4.   //Start the game loop by adding the `gameLoop` function to
  5.   //Pixi's `ticker` and providing it with a `delta` argument.
  6.   app.ticker.add(delta => gameLoop(delta));
  7. }
  9. function gameLoop(delta){
  11.   //Move the cat 1 pixel
  12.   cat.x += 1;
  13. }

如果你运行了上面的代码，你会看到精灵逐步地移动到舞台的一边。

Moving sprites

因为每当开始 游戏循环 的时候，都会为这只猫增加1像素的x轴位移。

  1. cat.x += 1;

每一个你放进Pixi的ticker的函数都会每秒被执行60次。你可以看见函数里面提供了一个delta的内容，他是什么呢？

delta的值代表帧的部分的延迟。你可以把它添加到cat的位置，让cat的速度和帧率无关。下面是代码:

  1. cat.x += 1 + delta;

是否加进去这个delta的值其实是一种审美的选择。它往往只在你的动画没法跟上60帧的速率时候出现（比如你的游戏运行在很老旧的机器上）。教程里面不会用到delta变量，但是如果你想用就尽情的用吧。

你也没必要非得用Pixi的ticker来创建游戏循环。如果你喜欢，也可以用requestAnimationFrame像这样创建：

  1. function gameLoop() {
  3.   //Call this `gameLoop` function on the next screen refresh
  4.   //(which happens 60 times per second)
  5.   requestAnimationFrame(gameLoop);
  7.   //Move the cat
  8.   cat.x += 1;
  9. }
  11. //Start the loop
  12. gameLoop();

随你喜欢。

这就是移动的全部。只要在循环中改变精灵的一点点属性，它们就会开始相应的动画。如果你想让它往相反的方向移动，只要给它一个负值，像 -1。

你能在 movingSprites.html 文件中找到这段代码 - 这是全部的代码：

  1. //Aliases
  2. let Application = PIXI.Application,
  3.     Container = PIXI.Container,
  4.     loader = PIXI.loader,
  5.     resources = PIXI.loader.resources,
  6.     TextureCache = PIXI.utils.TextureCache,
  7.     Sprite = PIXI.Sprite,
  8.     Rectangle = PIXI.Rectangle;
  10. //Create a Pixi Application
  11. let app = new Application({
  12.     width: 256,
  13.     height: 256,                       
  14.     antialias: true,
  15.     transparent: false,
  16.     resolution: 1
  17.   }
  18. );
  20. //Add the canvas that Pixi automatically created for you to the HTML document
  21. document.body.appendChild(app.view);
  23. loader
  24.   .add("images/cat.png")
  25.   .load(setup);
  27. //Define any variables that are used in more than one function
  28. let cat;
  30. function setup() {
  32.   //Create the `cat` sprite
  33.   cat = new Sprite(resources["images/cat.png"].texture);
  34.   cat.y = 96;
  35.   app.stage.addChild(cat);
  37.   //Start the game loop
  38.   app.ticker.add(delta => gameLoop(delta));
  39. }
  41. function gameLoop(delta){
  43.   //Move the cat 1 pixel
  44.   cat.x += 1;
  46.   //Optionally use the `delta` value
  47.   //cat.x += 1 + delta;
  48. }

（注意 cat 变量需要在setup 和 gameLoop函数之外定义，然后你可以在全局中任何地方都能获取到它们）

你可以让精灵的位置，角度或者大小动起来 - 什么都可以！你会在下面看到更多精灵动画的例子。