任务23：图片的显示与切换

一、任务目标

图片的显示和切换是游戏开发的基础，该任务并非介绍LayaAir中Image组件的使用，而是介绍两种引擎绘制图片的方式，通过比较这两种方式，可以让我们在最后的优化过程中有些许思路。

二、任务分解

2.1 loadImage()方法

该方法是Sprite节点上的方法。Sprite 是基本的显示图形的显示列表节点。 Sprite 默认没有宽高，默认不接受鼠标事件。通过 graphics 可以绘制图片或者矢量图，支持旋转，缩放，位移等操作。Sprite同时也是容器类，可用来添加多个子节点。

• 注意：loadImage是加载并显示

export default class image extends Laya.Script {

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

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

查看运行结果：（图片能够正常显示）

2.2 loadImage()实现切换图片

loadImage()加载并显示图片，其实就相当于先加载图片，然后设置texture属性，所以切换图片的实只就是先清空绘制的纹理，然后再次加载新的纹理即可，在2.0版本中loadImage()只能显示一张图片，后设置的不会覆盖之前的，所以需要手动清空。

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);

        // 显示默认纹理
        this.switchTexture();

        // 添加点击切换图片事件
        this.sprite.on("click",this,this.switchTexture);
    }

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

        //更换纹理
        //这里需要注意的是sprite所有的绘图方法都是通过graphics实例来完成的
        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);
        //设置交互区域,sprite默认没有宽高，如果不设置点击事件就不能触发
        this.sprite.size(texture.width,texture.height);
    } 
}

• 经过测试，如果注释掉交互区域的设置，还是有sprite的宽高在，即可以完成点击事件
• 可以利用texture属性赋值的方法改变纹理，这个方法相当于先清空再绘制，性能也更优一些
  

2.3 drawTexture()方法

drawTexture()方法做不到loadImage()方法那样的即时加载，该方法必须先加载再绘制，相对的其功能也要更丰富一些。

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);
            //性能不及drawImage，但是功能更强大
            sprite.graphics.drawTexture(texture);
            sprite.pos(100,50);
        }));
    }
}

2.4 drawImage()实现图片切换

类比2.2中的方法，如果有问题可以参考官方文档。

三、总结

• loadImage()即时加载，drawTexture()先加载再绘制
• loadImage()轻量级，drawTexture()功能强大，但是性能有所下降
• 绘制纹理之前需要清空上一次的纹理
• 如果直接利用texture属性绘制，相当于先clear()，再drawImage()，性能会优一些，也省去了麻烦的操作
• 如果点击切换不了可以尝试查看Sprite的宽高，其默认宽高为0，之后设置交互区域即可
• 资源加载的时候因为不确定什么时候加载完，所以绘制操作要在回调函数或者处理类Handler中操作

四、参考资料

• 官方文档：https://ldc2.layabox.com/doc/?nav=zh-ts-1-3-0
• 引擎示例：https://layaair2.ldc2.layabox.com/demo2/?language=zh&category=2d&group=Sprite&name=DisplayImage
• API：https://layaair2.ldc2.layabox.com/api2/Chinese/index.html?version=2.12.1beta&type=Core&category=display&class=laya_display_sprite.sprite