Blog

Pixi.js tutorial: Getting started

April 20, 2013 at 11:55 pm / by

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:

Textures

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.

Anchor Points

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 0×0 (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!

Source files for this example

Did you like this? Share it:
 

15 Comments

  1. Clark says:

    Huh no comments??? Thanks a lot for this! I am new but enjoying learning, this is a great first step for me coming from AS3.

    Thanks!

  2. JonD says:

    Thanks! I’ve been following the progress of pixi.js since I saw it on HN a while ago and have been meaning to try it out.

    Good to see a tutorial so I can finally give it a go!

  3. matesnake says:

    This is beautiful!!!

  4. Mond Wan says:

    Hello, I am new to pixi.js. I would like to ask whether this example works for Window 7 or not. I have tried this example 1 (cloned from Github and open this example with chrome) on Ubuntu 12.10 and Windows 7. Ubuntu run this example normally while Windows 7 cannot. So….?

    • Mat Groves says:

      Hi Mond, the issue you are experiencing is that webGL does not run locally. If you look at the bottom of the post there is a link that should explain in a little more detail how to get around it. hope that helps!

      • Mond Wan says:

        Thanks for the reply. I follow the link and add the option –allow-file-access-from-files before open chrome. But, it still not works. However, it works on Firefox 19.0 (Default Configuration) for same testing environment.
        Actually, debugger in chrome point out this line in WebGLRenderer.js:
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
        Anymore suggestions for solving this problem? I really want it to run in chrome :)

  5. srikanth says:

    you install a webserver like xampp. put the files in htdocs.then you canrun in chrome from local host.

    • Mond Wan says:

      Thanks for reply. Finally, I can run PIXI on chrome. The trick is almost the same with the website provided. However, you need to make sure all chrome processes are closed. At first, I missed the background process and now everything works well.

  6. Wesley says:

    I’m the new guys from AS3,too.
    It’s really awesome!!!
    but, How about the browsers supporting?

  7. Abdelbasset Oueryemchi says:

    Seems awesome
    I’m using it for Game programming

  8. AD says:

    When I try this code, the image is totally black; why is this?

Leave a Comment

 

— required *

— required *