Getting started with pixi.js

[ruttydm]

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:

begin();update(delta);draw();

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.

 

 

[xerver]

Quote

-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.

Quote

- 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/

[catafest]

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.

[ruttydm]

Thanks for the information! Tomorow i will port my simple ecosystem simulation in canvas to pixijs. I will share it!

[sombriks]

hello ruttydm, 

you can take a look at this quite nice tutorial: https://github.com/kittykatattack/learningPixi

i also have one getting started however it's in portuguese, when i translate that i'll share it.

 

 

[ruttydm]

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

MainLoop.setMaxAllowedFPS(120);
//Create the renderer
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
//Add the canvas to the HTML document
document.body.appendChild(renderer.view);
//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
  for(i=0;i<=opts.objects;i++){
    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.
  stage.removeChildren();
}

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

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

//calling seed function
seed();
//setting up loop
MainLoop.setBegin(begin).setUpdate(update).setDraw(draw).start();

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

[ivan.popelyshev]

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.