Jump to content

Getting started with pixi.js


Recommended Posts

Hi everyone. (And sorry for my english below)

I want to change from canvas to webgl so I am learning pixi.js. But after googling on the world wide web some things are not clear for me.

A couple questions:

-How about the gameloop?

In every example they use requestAnimationFrame or something. I'm used to work with the mainloop.js library which structure is very easy:


Can i use this library with pixijs? Or is it better to use requestAnimationFrame?

And if i use requestAnimationFrame, how about delta time?

Delta time is really important to me because i often make cpu intensive simulations. The framerate will not always be 60 fps.

- What is the best method in pixijs to draw a million of separate pixels on the screen?  For example fluid simulations.



Link to comment
Share on other sites


-How about the gameloop

If you mean this lib: https://github.com/IceCreamYou/MainLoop.js, then it does use requestAnimationFrame under the hood. Just call renderer.render() in yuor draw callback.


- What is the best method in pixijs to draw a million of separate pixels on the screen?  For example fluid simulations.

Depends on what you mean by "millions of separate pixels". drawing directly with WebGL using GL_POINT is probably your best bet to draw *millions* of points at once. There are other techniques like using a Smoothed Particle System which you could implement using a PIXI.ParticleContainer. Really just depends on your actual technique for doing the fluid simulation.

Here is an example using Phaser: http://gamemechanicexplorer.com/#fluid-1

And here is a WebGL demo: http://madebyevan.com/webgl-water/

Link to comment
Share on other sites

Most topics from this forum can help you, because some part of pixi versions is not the same.

This means the result of some tutorials or source code will can give you errors. You can share https://jsfiddle.net/  to share your work or errors.

The http://www.pixijs.com is the first step and then read the documentation.

Link to comment
Share on other sites

I'm making something random but i got an error that i can't solve:

pixi.min.js:3 Uncaught TypeError: t.emit is not a function

//Create the renderer
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
//Add the canvas to the HTML document
//Create a container object called the `stage`
var stage = new PIXI.Container();
window.onresize = function(event) {
    renderer.resize(window.innerWidth, window.innerHeight);
var opts = {
  "objects" : 100
function seed(){
  //the most important line in the whole game
  cells = [];
  //let's generate some random cells
    cells[i] = {
      "x": Math.random(0, renderer.width),
      "y": Math.random(0, renderer.height)

function begin(){
  // Remove all objects we rendered last time so that we can add a new set.

function update(delta){
  //update cells
  //fps part
  fps = Math.round(MainLoop.getFPS());
  text = new PIXI.Text('FPS: ' + fps,{fontFamily : 'Arial', fontSize: 12, fill : 0xff1010, align : 'center'});

function draw(){
  //add the cells as children
    circle = new PIXI.Circle(cells[i].x,cells[i].y,10);
  //Tell the `renderer` to `render` the `stage`
  //drawing fps

//calling seed function
//setting up loop

I'm also using Math.js and Mainloop.js libs.

Link to comment
Share on other sites

Circle is not a DisplayObject, its just a shape that you may specify in Graphics. Either create the graphics and add circles there (graphics.drawCircle or whatever), either load a texture with circle and use sprites.

Also don't use .min.js without .map file, or may be its better to use non-minified library. That way you'll see where exactly that error did happen.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...