Decide Pixi.js or Phaser

All:

One of my school project is to make a realtime multiplayers webpage game, I am currently having difficulty to decide if I should go Pixi.js or Phaser for the game graphic and control, could anyone talk a little bit about what they are good at and better that each other?

Thanks


Solution 1:

Phaser uses Pixi for rendering, albeit an older and heavily modified version of it. Current versions of Pixi may give you better performance, but you'll have to implement by hand what's readily available in Phaser.

They are different by that Pixi is a rendering engine and Phaser is a game framework.

I'll quote Rich, the creator of Phaser:

Off the top of my head, here is what Phaser adds onto Pixi:

  • Choice of physics systems (arcade or full body)
  • A Game World and a Camera which can pan around it
  • Tilemap support
  • A particle system
  • Sound support (both web audio and legacy audio)
  • More advanced input handling (input priority, drag and drop, etc)
  • Keyboard and Gamepad inputs
  • Scale Manager to handle game / scene resizing + full screen support
  • Tween Manager for tweening game objects, hooked into the core clock (so it pauses properly when your game does)
  • Asset loader (supporting all kinds of file types) and Cache
  • A State Manager to let you swap between game states easily
  • Game clock + custom timers + timer events

And probably lots more I forgot. As someone has commented though, it depends entirely on what you want to make. Lots of people use Pixi who don't make games at all. However as this is a game dev forum, I'm going to suspect you do :)

I guess just try it. If you don't like it put it down to experience and just use Pixi "raw".

Source: http://www.html5gamedevs.com/topic/12656-phaser-pixi/#comment-72893

Depending on how much you can wait, you may actually wait to try Phaser 3 (Lazer), which is currently in the works, and will have its own rendering engine. I think, however, that learning the current version of Phaser is a good starting point, and many things in Lazer will be the same.

Solution 2:

Phaser gives you a full game framework. Pixi is a rendering engine as Kamen described above.

My idea, if you are a beginner on HTML5 game development, you can have two different approaches;

  • If you have a product ahead of you to complete, Phaser gives you more tools and therefore speed. It is the biggest sea to swim in for HTML5 game development. But it has its own limitations. Off course you can write your own tools but at the end it is a framework and like every framework it forces you to use its own flow and tools to run smoothly. It would require some time for a developer to understand its flaw, pinpoint their needs and if Phaser doesn't meet them, implement their own solutions. But many people use Phaser and most possibly, there is an answer to all of the problems for a beginner. At the beginning they were using Pixi.js as renderer but now they have their own.

  • If you want to learn by digging deep into HTML5 renderers and game development, starting by using Pixi.js might be a better decision. As mentioned, Pixi.js is only the renderer. It has cool features but it needs more development upon it to make games. But it also gives you the freedom. You mostly won't have to deal with renderers(WebGL or Canvas) but rest is fully up to you. Personally, I started with Pixi.js, I knew about Phaser but I didn't look deeper into it and wrote my own framework. After my framework got into some point on development, I checked Phaser and I realized that what I had in mind was mostly already existed on Phaser. But still it gave me a deeper information about HTML5 game development.