Task 23: picture display and switching

1, Mission objectives

The display and switching of pictures is the basis of game development. The task is not to introduce the use of Image components in LayaAir, but to introduce the ways of drawing pictures by two engines. By comparing these two ways, we can have some ideas in the final optimization process.

2, Task decomposition

2.1 loadImage() method

This method is the method on the sprite node. Sprite is the basic display list node for displaying graphics. Sprite has no width or height by default, and does not accept mouse events by default. Through graphics, you can draw pictures or vector images, and support operations such as rotation, scaling, displacement, etc. Sprite is also a container class that can be used to add multiple child nodes.

  • Note: loadImage is loaded and displayed
export default class image extends Laya.Script {

    constructor() {
        super();
        this.showImage();
    }

    private showImage(): void {
        // Method 1. Use loadImage
        let sprite: Laya.Sprite = new Laya.Sprite();
        sprite.pos(100,50);
        sprite.loadImage("myComp/leaftexiao.png");
        Laya.stage.addChild(sprite);
    }
}

View the operation results: (the picture can be displayed normally)

2.2 loadImage() to switch pictures

loadImage() loads and displays a picture, which is actually equivalent to loading the picture first and then setting the texture attribute. Therefore, the real method of switching the picture is to empty the drawn texture first and then load a new texture again. In version 2.0, loadImage() can only display one picture, and the later setting will not overwrite the previous one, so it needs to be cleared manually.

export default class showImage extends Laya.Script {

    private texture1: string = "myComp/leaftexiao.png";
    private texture2: string = "myComp/silver.png";
    private flag: boolean = false;
    private sprite: Laya.Sprite;

    constructor() {
        super();
        Laya.loader.load([this.texture1,this.texture2],Laya.Handler.create(this,this.onAssetsLoaded));
    }

    private onAssetsLoaded(): void {
        this.sprite = new Laya.Sprite();
        Laya.stage.addChild(this.sprite);
        this.sprite.pos(100,50);

        // Show default texture
        this.switchTexture();

        // Add click to switch picture events
        this.sprite.on("click",this,this.switchTexture);
    }

    private switchTexture(): void {
        let textureURL: string = (this.flag = !this.flag) ? this.texture1 : this.texture2;

        //Replace texture
        //It should be noted that all sprite drawing methods are completed through graphics instances
        this.sprite.graphics.clear();
        let texture: Laya.Texture = Laya.loader.getRes(textureURL);
        this.sprite.loadImage(textureURL);
        //this.sprite.texture = texture;

        //console.log(this.sprite.width,this.sprite.height);
        //Set the interaction area. sprite has no width or height by default. If you do not set the click event, it cannot be triggered
        this.sprite.size(texture.width,texture.height);
    } 
}
  • After testing, if the settings of the interaction area are commented out, there is still the width and height of sprite, that is, the click event can be completed
  • You can use the texture attribute assignment method to change the texture. This method is equivalent to emptying before painting, and the performance is better

2.3 drawTexture() method

The drawTexture() method cannot load immediately like the loadImage() method. This method must be loaded before drawing, and its functions are richer.

export default class drawImage extends Laya.Script {

    private url: string = "myComp/leaftexiao.png";

    constructor() {
        super();
        Laya.stage.bgColor = "#ffffff";
        this.showImage();
    }

    private showImage(): void {
        Laya.loader.load(this.url,Laya.Handler.create(this,(texture: Laya.Texture)=>{
            let sprite: Laya.Sprite = new Laya.Sprite();
            Laya.stage.addChild(sprite);
            //The performance is not as good as drawImage, but the function is more powerful
            sprite.graphics.drawTexture(texture);
            sprite.pos(100,50);
        }));
    }
}

2.4 drawImage() to switch pictures

By analogy with the method in 2.2, if there is any problem, please refer to the official documents.

3, Summary

  • loadImage() loads immediately, and drawTexture() loads first and then draws
  • loadImage() is lightweight and drawTexture() is powerful, but the performance is degraded
  • You need to clear the last texture before painting it
  • If you directly use the texture attribute to draw, it is equivalent to clear() first and then drawImage(), which will have better performance and save troublesome operations
  • If you can't click the switch, you can try to view the width and height of Sprite. Its default width and height is 0, and then set the interaction area
  • When the resource is loaded, because it is uncertain when it will be loaded, the drawing operation should be operated in the callback function or processing class Handler

4, References

Posted on Sun, 26 Sep 2021 22:41:07 -0400 by sasori