目录

Sprite.loadImage

编码实例

加载并显示图片

动态切换图片

Sprite.loadImage

图片显示是游戏开发的基础，常用的有 Sprite.loadImage 与 Graphics.drawTexture 两种方式，本文介绍 laya.display.Sprite 的 loadImage() 方法。

1、laya.display.Sprite 是基本的显示图形的显示列表节点

2、通过 laya.display.Graphics 可以绘制图片或者矢量图，支持旋转，缩放，位移等操作

3、Sprite 同时也是容器类，可用来添加多个子节点。

4、Sprite 默认没有宽高，可以通过 getBounds 函数获取；也可手动设置宽高；还可以设置 autoSize=true，然后再获取宽高。Sprite 的宽高一般用于进行碰撞检测和排版，并不影响显示图像大小，如果需要更改显示图像大小，请使用 scaleX ， scaleY ， scale。

5、Sprite 默认不接受鼠标事件，即 mouseEnabled=false，但是只要对其监听任意鼠标事件，会自动打开自己以及所有父对象的mouseEnabled=true。所以一般也无需手动设置 mouseEnabled。

6、LayaAir 引擎 API 设计精简巧妙。核心显示类只有一个Sprite。Sprite针对不同的情况做了渲染优化，所以保证一个类实现丰富功能的同时，又达到高性能。

/**
* <p>加载并显示一个图片。相当于加载图片后，设置texture属性</p>
* <p>注意：2.0改动：多次调用，只会显示一个图片（1.0会显示多个图片）,x,y,width,height参数取消。</p>
* @param url       图片地址。
* @param complete  （可选）加载完成回调。
* @return  返回精灵对象本身。
*/
loadImage(url: string, complete?: Handler): Sprite;

编码实例

加载并显示图片

本文使用 LayaAirIDE 版本、LayaAir 引擎 版本为 2.0.0beat5：https://ldc2.layabox.com/layadownload/?type=layaairide-LayaAir%20IDE%202.0.0%20beta5

//初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
Laya.init(1334, 750,Laya.WebGL);

//创建精灵对象
var imgSprite = new Laya.Sprite();

//加载并显示图片，不用像 Html Canvas 一样担心图片资源未加载完成的问题
imgSprite.loadImage("images/apache_1.png");

//添加到舞台
Laya.stage.addChild(imgSprite);

动态切换图片

//被切换的图片地址，本次使用的是 LayaAir 2.0.0beta5 版本，图片资源位于 bin/images下
let apache_1 = "images/apache_1.png";
let apache_2 = "images/apache_2.png";

//切换状态
let flag = false;

//创建精灵对象，2.0 开始多次 loadImage 只会显示最后一次调用的图片
const apacheSprite = new Laya.Sprite();

//绘制图片
let switchImg = function(){
    //获取本次切换的图片
    let currentImg = (flag = !flag)?apache_1:apache_2;
    
    //加载图片资源进行显示
    apacheSprite.loadImage(currentImg);
    console.log("切换图片",currentImg);
}

//初始化舞台,设置大小,当浏览器不支持 WebGL 时自动切换为 Canvas,
Laya.init(1334, 750,Laya.WebGL);
switchImg();

//为精灵(图片)绑定单击事件，其中的 this 表示的是 apacheSprite 对象
apacheSprite.on(Laya.Event.CLICK,this,switchImg);

//将图片精灵添加到舞台显示
Laya.stage.addChild(apacheSprite);

可参考官网：

https://ldc.layabox.com/doc/?nav=zh-js-1-3-0

https://layaair.ldc.layabox.com/demo/?category=2d&group=Sprite&name=DisplayImage