Comparison of webGL libraries for 2D games

There are numerous types of platforms, for which games can be created – Xbox, PS, Nintendo, PC, mobile, web. The last one is not so well known among gamers, but web games definitely have their own application area.

First of all, such games can be launched from every device that has a web browser installed and internet connection. So, web games do not require any specific hardware to get them working. Also, they can be easily launched inside native mobile applications with a WebView component, so, once created, the web game becomes portable for both desktop and mobile platforms. Such games can be plugged in the web sites to attract, entertain or reward users, or published as a separate web project.

But how to build such a web game? The most strict and simple solution is to use regular HTML markup, CSS and JavaScript to create some interactive web page that will act like a game.

Such a solution is good for very simple games, that do not require any complex animations or effects, for example, some questionnaires, 2048 game, etc. But if you want to make the game, that will stand out of other ones – with custom animations, interactive characters, beautiful effects and even physics – you will need to use WebGL.

There are a lot of WebGL libraries that can be used, but in terms of 2D games development the most popular ones are Pixi.js and Phaser.js.

Both of them can be used to develop 2D web games, but which one would be the best for a particular situation, depends on several circumstances.

First of all, it’s important to understand that Pixi is not a game framework, it’s just a library for rendering. So, in case of using it as a main technology, most game features should be developed manually, and Pixi will just take care of rendering everything on canvas. It’s definitely good to use as a renderer, if the developer is sure that he can and wants to develop a lot of things from scratch.

Phaser, instead, is a framework for games development, so it has a lot of features out of box. For example, Phaser supports camera, tilemaps, sounds, has a built-in particle system and tween manager. All these things can be used with Pixi either, but they should be installed as separate packages.

You should definitely use Phaser if you need physics in your game.

Physics support is included into this framework, it is bundled with three different physics engines — Arcade Physics, P2 and Ninja Physics. Also it has a Box2D, but it is available as a commercial plugin.

As for Pixi, it doesn’t support physics. Of course, you can try to integrate some third-party libraries into the Pixi project (for example, Matter.js or P2.js), but there is no guarantee that it will work as expected, especially for some advanced cases.

Pixi provides the most common methods to handle user input, that are similar to the HTML events, but triggered for elements that were drawn on canvas. Phaser, instead, supplies more advanced input handling (input priority, drag and drop, etc.). Also, keyboard and gamepad inputs are easy to use in Phaser.

Most web games are made to be used mostly on mobile devices (or both types of resolutions – desktop and mobile). According to this, all game scenes and UI elements must be responsive to feat these screens.

If you choose Pixi, you should be ready to implement a responsive layout manually. In simple cases, it can be done by freezing height (for landscape oriented games) or width (for portrait) as 100% of the screen and changing the other side size proportionally. This way, part of the scene will be cut off for screens that have the other sides proportion than the original game scene. So, you have to keep it in mind while developing the UI.

Phaser keeps things simple in these therms. It has a built-in scale manager to handle game or scene resizing; also, full screen is supported.

Organizing your code properly and managing all actions and processes of your game in a clear way is a good practice to build a maintainable and extensible project. If you are using Pixi – you are free to use any design patterns and perform the code style you like. Pixi itself doesn’t supply any instruments for this purpose. Phaser either allows you to build your project using any architectural techniques, but it also helps you a bit by providing a State Manager to let you swap between game states easily. The same functionality can be implemented by the developer in Pixi using a State pattern.

All the possibilities that are included into Phaser have their cost – it’s a bundle size, that is twice bigger than the size of a Pixi.

Just to compare: here are the builds of two small games – the left one is Pixi (5.8 KB), and the right one is Phaser (12.5 KB).

So, if you don’t need all ready-made features of Phaser, or you are ready to build your game by your own hands, feel free to use Pixi and enjoy it’s lightweight. The bundle size can be critical for mobile games, social instant games or those that are going to be launched inside a web view in some application. But if the size of a bundle is not a blocker for you – enjoy all the possibilities of Phaser.