features Why Pixi.js ?

[Ytyse]

Hello everyone,

I'm a French Student in an Engineering school and i need to find the best way to do some animation in HTML5.
It seems there's three principal tools : Canvas, SVG and WebGL.
According to my recent research, Canvas is more for dynamic animation, if i need to refresh a lot of sprites, etc etc... ,SVG more for graphics, charts and pre-programmed animations and WebGL for 3D.
(Tell me if i'm wrong, because i feel like Canvas and SVG can do SAME, i can't see a real difference except about performance)

I saw there's a lot of library for Canvas(Pixi.js, Fabric.js, Easel.js...).
But what's the "real" difference between them ? Is there a benchmark for that ? Is there a list of features of Pixi.js for example ?
I search something concrete to compare theses libraries.

If someone could answer that
Sorry for my English,

Ytyse

[ivan.popelyshev]

If you need smooth lines and stuff, use SVG/canvas. If you need performance, 10.000 particles, or Meshes, or Shader stuff, then WebGL is your choice.

PIXI provides API that has both canvas and WebGL implementations. That way you dont have to operate with low-level stuff, and at the same time you can enable optimizations that work for webgl. If you want to use smooth primitives with PIXI - just wrap your own Canvas2d into PIXI.BaseTexture and update it regularly.

I dont think that SVG or canvas2d libs will help you to render 100k bunnies : http://www.goodboydigital.com/pixi-js-v4-batching/

PIXI examples: http://pixijs.github.io/examples/

PIXI plugins:

0) SPINE!!! The best skeleton animation editor in the world: https://github.com/pixijs/pixi-spine

1) particles (https://github.com/pixijs/pixi-particles)

2) tilemaps (https://github.com/pixijs/pixi-tilemap)

3) extra filters (https://github.com/pixijs/pixi-extra-filters)

4) compressed-textures (https://github.com/pixijs/pixi-compressed-textures)

5) 3d support (http://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cards.js&title=Cards , https://github.com/gameofbombs/pixi.js)

One of the best PIXI games: http://www.celsiusheroes.com/

One of game constructors that uses PIXI: http://www.rpgmakerweb.com/

[Ytyse]

Thanks for your answer, it helps me a lot

[Harrisyu]

The only reason for me is phaser don't support spine very well but pixi does.

[ivan.popelyshev]

2 minutes ago, Harrisyu said:

The only reason for me is phaser don't support spine very well but pixi does.

Yep, its up-to-date with Spine, and has integration features like "change texture on your attachments PIXI way"