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

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

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

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

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

随你喜欢。

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

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

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