Summary of using Pixi.js

This time I will bring you a summary of using Pixi.js. What are the precautions when using Pixi.js? The following is a practical case, let’s take a look.

Pixi.js is a 2D rendering engine written in JavaScript. It can be used to make "rich visual" applications such as interactive graphics, animations and games in the browser. It mainly supports hardware GPU-rendered WebGL API. If the browser does not support WebGL, Pixi will fall back to HTML5 Canvas for rendering. Pixi is mainly responsible for rendering images. Developers have to write many other functions themselves or use them with other libraries. For example, the Phaser framework used to develop web games uses Pixi for rendering. The following content is selected from the book Learning Pixi.js. You can give Pixi a try.

Note: The JavaScript in the example uses ES6, var becomes let, function(){} becomes () => {}.

Making sprites

The basic building module in Pixi is an object called sprite. A sprite is a graphic that can be controlled with code. You can control their position, size, and other properties to create interactive and animated graphics. Learning how to make and control sprites is indeed the most important thing when learning to use Pixi. If you know how to make and display sprites, you are only a small step away from starting to make games or any other interactive program.

In this chapter, you will learn the necessary knowledge required to display and position sprites in Pixi's Canvas, including the following content:

How to make a root container (root container), called a stage (stage) )

How to create a new renderer

Use the loader to load graphics into Pixi's texture cache (texture cache)

Use the loaded graphics including tilesets and texture atlases, making sprites

Before we start making sprites, let's create a rectangular-like screen for displaying them.

Create renderer and stage

Pixi has a renderer object (renderer) for you to create a display screen. It will automatically generate an HTML element and solve the problem of displaying your image in the canvas, but you have to create another Pixi container object called stage (don't worry, you will know what a container object is and what it is in a moment) why they are needed anymore). This stage object will be used as a root container to display everything we need Pixi to display. The following is the code to create a renderer and stage. Add these codes between the