Pixi sprites

Now that you have a renderer, you can start adding images to it. Anything you want to be made visible in the renderer has to be added to a special Pixi object called the stage. You can access this special stage object like this:

app.stage

The stage is a Pixi Container object. You can think of a container as a kind of empty box that will group together and store whatever you put inside it. The stage object is the root container for all the visible things in your scene. Whatever you put inside the stage will be rendered on the canvas. Right now the stage is empty, but soon we’re going to start putting things inside it. (You can read more about Pixi’s Container objects here).

(Important: because the stage is a Pixi Container it has the same properties and methods as any other Container object. But, although the stage has width and height properties, they don’t refer to the size of the rendering window. The stage’s width and height properties just tell you the area occupied by the things you put inside it - more on that ahead!)

So what do you put on the stage? Special image objects called sprites. Sprites are basically just images that you can control with code. You can control their position, size, and a host of other properties that are useful for making interactive and animated graphics. Learning to make and control sprites is really the most important thing about learning to use Pixi. If you know how to make sprites and add them to the stage, you’re just a small step away from starting to make games.

Pixi has a Sprite class that is a versatile way to make game sprites. There are three main ways to create them:

• From a single image file.
• From a sub-image on a tileset. A tileset is a single, big image that includes all the images you’ll need in your game.
• From a texture atlas (A JSON file that defines the size and position of an image on a tileset.)

You’re going to learn all three ways, but, before you do, let’s find out what you need to know about images before you can display them with Pixi.