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
