Moving Sprites

You now know how to display sprites, but how do you make them move? That’s easy: create a looping function using Pixi’s ticker This is called a game loop. Any code you put inside the game loop will update 60 times per second. Here’s some code you could write to make the cat sprite move to the right at a rate of 1 pixel per frame.

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

If you run this bit of code, you’ll see the sprite gradually move to the right side of the stage.

Moving sprites

That’s because each time the gameLoop runs, it adds 1 to the cat’s x position.

  1. cat.x += 1;

Any function you add to Pixi’s ticker will be called 60 times per second. You can see that the function is provided a delta argument - what’s that?

The delta value represents the amount of fractional lag between frames. You can optionally add it to the cat’s position, to make the cat’s animation independent of the frame rate. Here’s how:

  1. cat.x += 1 + delta;

Whether or not you choose to add this delta value is largely an aestheic choice. And the effect will only really be noticeable if your animation is struggling to keep up with a consistent 60 frames per second display rate (which might happen, for example, if it’s running on a slow device). The rest of the examples in this tutorial won’t use this delta value, but feel free to use it in your own work if you wish.

You don’t have to use Pixi’s ticker to create a game loop. If you prefer, just use requestAnimationFrame, like this:

  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();

It entirely up to you which style you prefer.

And that’s really all there is to it! Just change any sprite property by small increments inside the loop, and they’ll animate over time. If you want the sprite to animate in the opposite direction (to the left), just give it a negative value, like -1.

You’ll find this code in the movingSprites.html file - here’s the complete code:

  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. }

(Notice that the cat variable needs to be defined outside the setup and gameLoop functions so that you can access it inside both of them.)

You can animate a sprite’s scale, rotation, or size - whatever! You’ll see many more examples of how to animate sprites ahead.