Before talking details of the implementation, here are my two cents about TypeScript and Pixi.js

The first benefit TypeScript provided strong type checking, the code below is an example:

If we are lucky, we can find the typo with locale in the development stage, but sometimes this kind of errors are being pushed into codebase’s master branch without being noticed and will waste a lot of time on debugging in the production environment.

The second benefit TypeScript provided is easing suffering from with developing a javascript library I’m unfamiliar with, very often I worry a lot whether I’m using the right signatures, and wasting a lot of time in checking the docs.

Now, I can rely on what TypeScript tells me:

Pixi.js is a lightweight 2D library.

The first benefit is it’s a WebGL wrapper (in short, WebGL allows us rendering graphics using GPU directly), it lets us using WebGL without worry touching WebGL API. (In my last article WebGL and Image Filter 101 I mentioned the power of WebGL, and there are a lot of boilerplate code we have to provide to make WebGL working since it’s a low-level API).

The second benefit is it unified all kinds of 2D content(image, text, shapes) to “Sprite”, we can apply the transformation and adding interactivity to these content the same way with the easy-to-use API.

We also can group different content with containers, and use batch effects quickly.