Sprites & textures – PIXI.js

Sprites and textures are part of a staple diet for any game. Pixi provides us with a sprite class right out of the box and has properties such as x and y positions, anchor, rotation, tint, alpha and many, many more. Though there are cases where you may want a blank sprite, 99 times our of 100 you will give it a texture.

An excerpt from their documentation – “A texture stores the information that represents an image or part of an image.”

We can create a sprite without giving it a texture by just instantiating the sprite class.

let sprite:PIXI.Sprite = new PIXI.Sprite();

Creating Textures

There are a few ways to create a texture, so lets go ahead and take a look.

// creating a texture from a webGL canvas
let texture:PIXI.Texture = PIXI.Texture.fromCanvas(canvas);
let sprite:PIXI.Sprite = new PIXI.Sprite(texture);
// create a texture from a frame (atlas / spritesheet)
let texture:PIXI.Texture = PIXI.Texture.fromFrame('frameName');
let sprite:PIXI.Sprite = new PIXI.Sprite(texture);
// create a texture from an image url
let texture:PIXI.Texture = PIXI.Texture.fromImage('public/assets/car.png);
let sprite:PIXI.Sprite = new PIXI.Sprite(texture);

Side note, you can also create a texture from video’s, but we’ll go into more detail at a later point.

The two you’ll most likely use are fromFrame and fromImage. This just does a xmlhttp request to fetch the asset from a web server. When using a requestFrameAnimation or PIXI.Ticker, the sprite will be drawn to the canvas only after the texture has been loaded.

You can also pass the texture directly to the Sprite class constructor to save on a line of code, and temporary memory, though the let keyword ensures that the garbage collector runs as soon as possible due to tight scoping.

let sprite:PIXI.Sprite = new PIXI.Sprite(PIXI.Texture.fromImage('public/assets/car.png));

You can store your texture as a global reference and use it multiple times, which can be very handy and save load on your GPU by not requesting to generate a new texture, even if it already exists in cache.

let dogTexture:PIXI.Texture = PIXI.Texture.fromImage('public/assets/car.png);
let dog1:PIXI.Sprite = new PIXI.Sprite(dogTexture);
let dog2:PIXI.Sprite = new PIXI.Sprite(dogTexture);
let dog3:PIXI.Sprite = new PIXI.Sprite(dogTexture);

Changing Textures

It is possible to change a sprites texture on the fly. It is as simple as passing the new texture to the setter function. Of course this also works with caching textures; as it can be very beneficial to create a texture map class to hold references, but that’s more project specific and we’ll cover that at a later date.

let car:PIXI.Sprite = new PIXI.Sprite(PIXI.Texture.fromImage('public/assets/car1.png));
car.texture = PIXI.Texture.fromImage('public/assets/car2.png)

Sprite Manipulation

Now we’ve covered creating sprites, loading and applying textures, lets dive into actual sprite manipulation. The properties you are most likely to use are probably going to be:

• x, y
• alpha
• anchor
• texture (already covered)
• scale
• tint
• rotation
• cacheAsBitmap

For more details and a full breakdown of every property on the sprite class, just take a peak at the pixi documentation here (http://pixijs.download/release/docs/PIXI.Sprite.html)

X and Y positions are fairly self explanatory, they simply dictate where on the screen the sprite is positioned. If the sprite is of a group, then it’s X and Y are relative to it’s parent. I’ll cover this when we cover groups / containers.

sprite.x = 15;
sprite.y = 50;

Alpha is the transparency of the object. 1 being fully visible, and 0 being fully transparent.

sprite.alpha = 0.78;

Anchor is an offset to the sprites position. 0, 0 is position top left, and 1, 1 is position bottom right. Typically, you will have an anchor of 0.5, 0.5 meaning the sprite’s position is actually at it’s centre. To set it, you need to create a new pixi point, an object of x and y values and pass it to the anchor setter.

sprite.anchor = new PIXI.Point(0,5 0,5);

Scale refers to squashing the texture whereby you can scale the texture in either x, or y.. making it wider or narrower in one or both directions. You set the property on this as you would with the anchor property.

sprite.scale = new PIXI.Point(1.2 1.2);

Tint is the sprites colour which can be especially useful if you create your assets in white, you can colour them how ever you wish in the game. Simply pass a hex number to the property to change it’s colour. As a warning, if your sprite is blue, and you apply a hex colour, you won’t get the colour you’re expecting.

As a bonus, here’s a great resource for picking colours for apps and games. (insert link here).

sprite.tint = 0xf22059;

Rotation is again, self explanatory however it is not dealt in degrees, rather in radians. You can just apply your property directly like so.

sprite.rotation = 1.2765;
// convert radians to degrees
let radians = degrees * (pi/180);
// convert degrees to radians
let degrees = radians * (180/pi)

Bitmap Caching Sprites

Cache as bitmap is a very useful property for increasing performance. When using it you signal the renderer that you don’t need to update any of it’s properties and as such skips the update transform function and skips straight to the composition (drawing to the canvas). This property is simply a boolean value and can be changed on the fly.

sprite.cacheAsBitmap = true;

If you’re thinking of using TypeScript, you can read up on the types of types (pardon the pun).