New to pixi.js? This tutorial should help!
Hi everyone! It seems that pixi.js has gained a fair bit of traction since its launch last month and I figured now would be a good time to create a primer pixi.js tutorial for the newcomers! Lets get stuck in shall we?
Step 1: Set up the page
First things first, you won’t be able to create much pixi.js stuff without a copy of pixi.js! You can download the latest build here on GitHub and if you fancy you can download this example form here. So! Are we already?! First you need to set up your index.html file like so making sure you include the pixi.js file:
Step 2: Set up a stage and renderer
In order to get pixi.js up and running the first thing we need to do is create the two main objects :
- Stage – Much like the Stage in flash the pixi.js Stage represents the root of our display tree. A stage can be rendered by one of the pixi.js renderers.
- Renderer – A renderer draws a stage and all its contents to the screen. It comes in two flavours, webGL and Canvas.
Woo! pixi.js is now running. so what exactly did we do? First we created an instance of a stage. Then we created a renderer with the dimensions 400×300. There are currently 2 renderers for pixi.js. A webGL renderer and a canvas renderer. Both render exactly the same but the webGL renderer is much faster. The
PIXI.autoDetectRenderer function will check if the browser supports webGL and return an instance of WebGLRender otherwise it will return an instance of CanvasRender.
Once the two main parts exist all we have done is create a loop and render the stage to the screen each frame using the renderer. So now we are are up and running lets add a sprite to the stage!
Step 3: Create and add a Sprite
Here’s the code:
Not too painful ay? First thing to note is that a sprite requires a texture. A
Texture stores the information that represents an image. It cannot be added to the display list directly, instead it has to be mapped onto a
Sprite. There are a few different ways of creating textures but this way is by far the easiest –
Texture.fromImage simply tells pixi.js to create a new
Texture based on the image path provided. The same texture can be re-used for multiple sprites. Its worth mentioning that any time you request an image, pixi.js will store it in its texture cache, so if you ever request the same image url again it will not reload it. Now we have a
Texture we next create a new
Sprite that will use it.
After that we set the
anchor point of the bunny to 0.5 x 0.5. Its important to note that the
anchor point is not a pixel value, it is a % of the texture’s dimensions with a range from 0.0 to 1.0 (0% to 100%). If the anchor point is 0x0 (pixi.js’ default), then the texture’s upper left corner aligns with the sprites position. If the anchor point is 0.5×0.5 then the texture is centered on the sprites position. If the anchor point is 1×1 then the texture’s lower right corner aligns with the sprites position.
Adding to the stage
Finally we move the bunny to the middle of the screen by setting its
position and then add it to the stage using the
addChild function. Similar to Flash and many other rendering engines, once an object has been added to the stage it will be rendered. Time to see the fruits of our labour I think. Ready to have your mind blown?!
Ok, I should probably give you a moment to pick your jaw up off the floor after witnessing that visual feast! So thats the end of this tutorial, hopefully its enough to get you on your way! I personally have found that the best way to learn this stuff is to get stuck right in so I encourage you to check out all the examples that come with the pixi.js src files and have a fiddle with them :)
A word of warning too, unfortunately webGL does not run locally due to security restrictions. There are a few work arounds for this situation though :) they can be found here
Happy Pixi Coding!