Pixi.js vs Phaser 3

Which engines do I want to use?

I wish I had a clearer line of sight into both technologies when I was choosing which to use for my stackathon project. This may be a useful 5-minute read for you if you are wondering which engine would be better for your project.

I would like to share the pros and cons and my observations about both engines. I would also like to touch upon some of their basic concepts.

Both Pixi.js and Phaser 2 are WebGL renderers for web browsers.

What is Pixi?

PixiJS has full WebGL support and seamlessly falls back to HTML5’s canvas if needed. As a framework, PixiJS is a fantastic tool for authoring interactive content, especially with the move away from Adobe Flash in recent years. Use it for your graphics rich, interactive websites, applications, and HTML5 games.

npm install pixi.js
import * as PIXI from 'pixijs'

However, importing PIXI like the above did not work for me, so I had to import it as plugins as shown below

import { Application } from ‘@pixi/app’

Pros:

1. Pixi.js is great to create interactive graphics and animations.
2. There are many resources available for implementing Pixi. Example codes are available on the Pixi.js website, which makes it easier to understand how their functions work! Tutorials are available here as well.
3. Hundreds of global brands are using Pixi.js.

Cons:

1. As a beginner who never used Pixi.js before, it was very hard to know how to modularize. I ran into a lot of errors while modulizing but was unable to identify where they were and why they were occurring. It was also hard to find communities online. A lot of tutorials use their Pixi code in the HTML document.
2. Pixi.js is not very compatible with React. You can certainly try to use react-pixi-fiber to use Pixi.js in React. However, I was unable to download it.
3. The available documentation is good for implementing functionality but not ideal for setting up and identifying bugs.
4. Their “boilerplate” for javascript is very outdated.

Some basics that are helpful to know if you are a beginner:

There are a lot of concepts, and I think their examples do a good job illustrating them.

I retrieved the below code from Pix.js

var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
// create the root of the scene graph
var stage = new PIXI.Container();
// create a texture from an image path
var texture = PIXI.Texture.fromImage('_assets/basics/bunny.png');
// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);
// center the sprite's anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// move the sprite to the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;
stage.addChild(bunny);
// start animating
animate();
function animate() {
    requestAnimationFrame(animate);
// just for fun, let's rotate mr rabbit a little
    bunny.rotation += 0.1;
// render the container
    renderer.render(stage);
}

1. staging
2. adding texture
3. setting anchor
4. setting position
5. stage.addChild()
6. rendering with animation

These six steps are repeated continuously.

Now, let’s talk about Phaser!

What is Phaser?

Phaser is a 2D game framework used for making HTML5 games for desktop and mobile.

First of all, we need to install Phaser

npm i phaser
import 'phaser';

You don’t have to start from scratch. You may be able to use a boilerplate like this one because starting from scratch could be really painful and might take a long time to set up.

Pros:

1. It is well suited to create 2D games that can be played right in your browser.
2. It is simple to learn and to utilize to build a game.
3. It is relatively easy to learn how to modulize.
4. Their documentation is helpful.
5. Their step-by-step guide to get started is also very handy!

Cons:

1. It is not ideal for creating interactive graphics.
2. You need to have 2D sprites. It was a hassle for me to find or create sprites that I wanted to use in my project and figure out the right size that was needed. For size, I recommend 32 x 32 for canvas or 64 x 64 for pixels.

Some basics that are helpful to know if you are a beginner:

1. Modulizing.

A. Configuration object

The config obj is where you set how you want Phaser to operate while running the game.

It holds very important code, so I would like to put the code in a separate file.

In my phaser game project, I put the configuration class in one file and exported it.

export default = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    render: { pixelArt: true },
    physics: {
        default:'arcade',
        arcade: {
           gravity: { y : 1500 },
     }
 }

My src folders would look like this:

--congif
--entity
--scenes
--ui

You can also find more info in community forums like this one.

2. Phaser Cycle

The cycle consists of three methods: A. Preload; B. Create; and C. Update. It’s helpful to me to liken this to a model walking on a fashion show runway.

A. Preload()

• Preload() is making the assets available. You must preload before creating them. The runway model must first confirm their availability to walk in the fashion show.

B. Create()

• Create() is adding the assets and setting the scale. This is similar to getting ready to walk on the runway. Models must wear the clothes and make-up that were assigned to them.

C. Update()

• Update() would update the assets, moving them to every frame. The model is walking!

As a final thought, if you know that you want to build a game and are comparing these two engines, here is a great article you may want to consider reading.

Thank you for reading!