PixiJS, the most popular 2D WebGL (and canvas) engine

The title of my first job as a developer (outside of my freelance work) was: Game Developer.

My role was to develop learning tools based on games and interactive activities on the web and mobile for large French companies.

It was at that time that I discovered PixiJS, which I used extensively to create these HTML5 games and which I'm presenting to you today.

What is Pixi?

PixiJS is the most popular WebGL rendering engine library (and not a framework) in Javascript.

It's often thought of as an HTML5 game creation engine, but you need to understand that Pixi only contains the "graphics engine" part, and even though the library includes some mouse interaction mechanics, it does not include any physics engine (collision, gravity, etc...).

This means that if you want to use it to create a game, you will need to program the physics concepts (even basic ones) of your game yourself.

There are plenty of tutorials on the web for this, or you can instead use a complete game creation engine like PhaserJS!

What is WebGL?

WebGL, which stands for "Web Graphics Library", is a graphics programming API built into web browsers and whose rendering is displayed on an HTML "canvas" element, inspired by the general-purpose OpenGL library.

As you know, a web canvas is a blank slate onto which graphic elements can be imported and drawn programmatically (with code).

But instead of using the drawing API provided for the canvas, you can use a more advanced API (that of WebGL) which will notably allow the browser to leverage the machine's graphics card resources to perform graphic computations (what is known as hardware acceleration) rather than using the resources of the CPU (central processing unit).

For the same graphic animation, the one created with WebGL will therefore be more optimized, the rendering will be faster and above all smoother.

Why use Pixi?

Even though WebGL provides you with a library to, roughly speaking, "draw" on this blank slate that is the canvas, writing everything by hand directly with this API can take a very long time and the code quickly becomes very heavy to maintain.

Pixi therefore allows you to abstract a large amount of this code to provide you with a more concise API, but also a more "complete" one. For example, the library brings you concepts like "containers" (to group several graphic elements together), sprite animation, interactions, etc...

To put it simply, imagine that WebGL is Microsoft Paint, and Pixi is Photoshop, for the same result, the effort required is very different!

Here are a few advantages that Pixi offers:

• A complete but easy-to-access API
• Compatible with most browsers (IE11 and above) and mobile
• Canvas fallback if WebGL is disabled
• Built-in mouse and touch interactions (click, drag&drop, etc...)
• Many plugins
• ...

How do we use it?

You'll see that using Pixi is really approachable for most web developers and ultimately only requires a fairly basic knowledge of Javascript.

Of course, like all graphic rendering engines, the complexity can increase very quickly depending on the project.

Below, you'll find a small example (taken from Pixi's documentation and slightly customized) of an interactive animation, containing an image that rotates and grows bigger when you click on it.

I could have shown you a game example, but I preferred to present the library with a simple code example!

If you want to discover other examples, there are plenty on the official website, and some are truly impressive relative to the amount of code needed to produce them!

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script type="text/javascript">
    // Scale mode for all textures, will retain pixelation
    PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
    
    const app = new PIXI.Application({ backgroundColor: 0xf1c40f,width: 300, height: 300, view: document.getElementById("canvas") });
    const sprite = PIXI.Sprite.from('/content/size/w100/2020/02/IMG_1989.jpg');
    // Set the initial position
    sprite.anchor.set(0.5);
    sprite.x = app.screen.width / 2;
    sprite.y = app.screen.height / 2;
    // Opt-in to interactivity
    sprite.interactive = true;
    // Shows hand cursor
    sprite.buttonMode = true;
    // Pointers normalize touch and mouse
    sprite.on('pointerdown', onClick);
    
    app.stage.addChild(sprite);

    function onClick() {
        sprite.scale.x *= 1.1;
        sprite.scale.y *= 1.1;
    }
    
    // use delta to create frame-independent transform
    app.ticker.add(function(delta){
        sprite.rotation -= 0.01 * delta;
    });
</script>

To start using Pixi, I invite you to head over to the official documentation, and you'll be able to start having fun within minutes: https://www.pixijs.com/