This paper is participating in thePerformance optimization combat record”Topic essay activity

introduce

In this episode, we’re going to use Pixi.js to animate a scene dialogue. Many games have this kind of business scene, such as narrating or recalling a story background, which is much more immersive than a long piece of straight text. Next, I will take a look at the final complete animation effect:

The scene above is a story segment of Japanese Inuyasha’s broken iron teeth. The animation composed of text and pictures will soon understand how his broken iron teeth.

Because the length is too long, so, we have the key divided into two chapters to tell, respectively for optimization and implementation. Today we’re going to do the opposite and start by talking about how to optimize the resources used to get the best performance from the start. If you look at the animation, you will see that it has 9 background images and font resources. Because my this is to use pixi.js to achieve the H5 web page, so, loading speed on the user’s impact is crucial. These two resources are a big part of the impact on loading speed. How to optimize these two types of resources will be discussed later.

Optimize the article

Font resources

Q: Why can’t font resources be used directly?

Answer: It’s not that it can’t be used, but font resources, especially Chinese font resources, are relatively large. On the one hand, users waste user traffic, and on the other hand, users wait for a long time.

For example, in the case of Inuyasha we are going to do, he used the font huakang Girl style. This font alone takes up more than 20 megabytes, which is absolutely terrifying

Q: What if we want to use him? The default font is really ugly!!

A: We can use bitmap fonts for rendering. Of course, we need to choose the fonts to use first, and don’t use them at all. In this way, only the fonts to use will be small.

The BMFont font editor is a tool for stripping fonts. It can strip out all the fonts that we want to use and then load them in pixi.js. Next, let’s briefly introduce its use.

  1. Download it from the official website and open exe

  2. In Notepad, write a paragraph of text to be used. Remember to use UTF-8 encoding to save the text otherwise it will be garbled.

  3. Options->Font Settings Import the Font to be used and select it.

  4. Edit->Select chars from file from Edit->Select chars from file

  5. Options->Export Options we go to set the Export to 32 bits and also select PNG bitmap form.

  6. Options->Save bitmap font as… We exported it. Let’s look at the size

We reduced the size of 23M font resources to 50K, which is 470 times smaller, so we can load font resources in seconds

We will first look at how to use this font resource in pixi.js. In the implementation section, we will show an example of bitmap text implementation:

this.app.loader
.add('hk'.'font/hk/font.fnt')
.load(() = >{
    const text = new PIXI.BitmapText("Iron Claw", {
        fontName: 'Hua Kang Girl font'.fontSize: 36.tint: 0x000000.letterSpacing: 5.align: "left"}); text.position.set(100.100)
    this.app.stage.addChild(text)
});
Copy the code

We first load the corresponding font, and then draw the text into the interface, as shown in the picture below. The font we want comes out ~

Image resources

Q: what aspects of image resources should we optimize?

A: We optimized it in two ways. One was to make it make fewer requests and reduce server stress. The second is that the resource size makes it smaller, so it loads faster.

We saw that there were 9 background images in the animation, so let’s think about how to combine them and just request one image for the scene.

I’ll introduce you to the TexturePackerGUI, which combines image resources

This is very simple to use, is to drag in the picture set up the corresponding configuration export wizard map on the line.

So we have a big image and a JSON file, and then we load the JSON through pixi.js, and then we get the location of several smaller images in the big image.

this.app.loader
.add("stage"."assets/stage.json")
.load((res) = > {
    let bgImg = new PIXI.Sprite(res.resources.stage.textures["6.png"]);
    bgImg.anchor.set(0.0);
    bgImg.position.set(0, -5)
    bgImg.scale.set(1.23)
    this.app.stage.addChild(bgImg);
})
Copy the code

Similarly, when we load json and get the corresponding data, we can generate image sprites for us to use.

Not yet finished, the big picture we synthesized can still be compressed and optimized. Using tinypng, which is known in the industry, can perfectly reduce the space by 60% to 80%. Hurry up and try it

conclusion

How do you feel after learning just now? Font and image resource optimization is an important part of H5 games and animations, and I expect you to do the same for web page optimization to reduce the number of requests, reduce the size of resources, everything for the server and users to consider. Well, as for the beginning of the case of inuyasha animation how to complete to achieve, in the next episode, please pay attention to ~ help you don’t forget to point a thumbs up yo ~