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.
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.
Rendering a flying bird
To start using Pixi.js, you can start with include script below in your HTML file (or
npm install pixi.js if you have bundle tools within your project):
Let’s start from creating a scene, after this setup, any changes happen inside the stage container can be rendered by using
const renderer = PIXI.autoDetectRenderer(512, 512);
const stage = new PIXI.Container();
Then, what I did is creating a “Sprite” and update the Sprite’s texture with an interval timer.
With the code below, you will get an animating bird looks like flying.
reset, we use
y to control the position.
If you have the
speedY, you can also update bird’s flying orientation by
this.sptire.rotation=Math.atan(speedY / speedX).
Now we have a bird and can apply different transformation to it; you can try adding a new field
Bird class and update bird’s position by updating sprite’s
draw based on that field .
As I mentioned before, by using Pixi.js, all kinds of 2D content(image, text, shapes) can be treated as “Sprite”, for the tube, I’m simply drawing some rectangles.
Pixi.js provided 2d drawing API with
PIXI.Graphics, for example, to draw a “tube” and moving it horizontally:
const tube = new PIXI.Graphics();tube.beginFill(0xffffff);
//drawRect(x, y, width, height)
tube.drawRect(100, 0, 50, 120);
tube.drawRect(100, 200, 50, 512);
tube.endFill();tube.x = 200;
And the tube class I made is like:
After we have moving objects (tubes and bird), we can treat them as rectangles.
If we have their left topmost point, width and height(x1, y1, w1, h1 and x2, y2, w2, h2), then we can check whether two rectangles are hitting each other:
if((x1 + w1 < x2) || (x2 + w2 < x1) || (y1 + h1 < y2) || (y2 + h2 < y1))
So, that’s basically all parts of making a simple flappy bird copy.
Thanks for your reading :)