移动精灵

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

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

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

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() {
  2. //Call this `gameLoop` function on the next screen refresh
  3. //(which happens 60 times per second)
  4. requestAnimationFrame(gameLoop);
  5. //Move the cat
  6. cat.x += 1;
  7. }
  8. //Start the loop
  9. 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;
  9. //Create a Pixi Application
  10. let app = new Application({
  11. width: 256,
  12. height: 256,
  13. antialias: true,
  14. transparent: false,
  15. resolution: 1
  16. }
  17. );
  18. //Add the canvas that Pixi automatically created for you to the HTML document
  19. document.body.appendChild(app.view);
  20. loader
  21. .add("images/cat.png")
  22. .load(setup);
  23. //Define any variables that are used in more than one function
  24. let cat;
  25. function setup() {
  26. //Create the `cat` sprite
  27. cat = new Sprite(resources["images/cat.png"].texture);
  28. cat.y = 96;
  29. app.stage.addChild(cat);
  30. //Start the game loop
  31. app.ticker.add(delta => gameLoop(delta));
  32. }
  33. function gameLoop(delta){
  34. //Move the cat 1 pixel
  35. cat.x += 1;
  36. //Optionally use the `delta` value
  37. //cat.x += 1 + delta;
  38. }

(注意 cat 变量需要在setupgameLoop函数之外定义,然后你可以在全局中任何地方都能获取到它们)

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