Laya Sprite

Sprite

Sprite是基础的显示图形的显示列表节点

LayaAir引擎核心显示类只有一个Sprite类，Sprite会针对不同情况自动渲染优化。

Laya.Sprite类位于Core核心类库中，是laya.display.Sprite类封装后形成的。

Sprite默认没有宽高

Sprite默认没有宽高，可通过getBounds()获取本对象在父容器坐标系中的矩形显示区域，也可手工设置autoSize = true，指定自动计算宽高尺寸，然后再获取精灵的宽高。

Sprite的宽高一般用于碰撞检测和排版，并不影响显示图片大小，如需更改显示图像大小，可使用缩放属性scaleX、scaleY，scale。

Sprite默认不接收鼠标事件

Sprite默认不接收鼠标事件，即mouseEnabled = false。只要对其监听任意鼠标事件，都会自动打开自己以及所有父对象的mouseEnabled = true，因此无需手工设置mouseEnabled属性。

Sprite也是容器类可用来添加多个子节点

加载图片

图片的显示是游戏开发的基础，LayaAir中提供两种方式用于显示图片分别是Sprite.loadImage和Graphics.drawTexture方法。

Sprite.loadImage

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

Sprite.loadImage用于加载并显示一张图片，相当于加载图片后设置texture纹理属性。

Sprite.loadImage方法可以直接加载外部图片
Sprite.loadImage方法可以从缓冲区读取图片
Sprite.loadImage若要显示图集中的一张图片则图集必须先被加载

显示图片

//初始化引擎
const canvas = Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
//舞台设置
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//设置舞台水平居中
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//设置舞台垂直居中
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//设置舞台缩放模式为显示所有
Laya.stage.bgColor = "#000000";//设置舞台背景颜色为黑色
//加载精灵图
const imgPath = "./res/atlas/avatar.png";
let sprite = new Laya.Sprite();
sprite.loadImage(imgPath);
//舞台添加节点
Laya.stage.addChild(sprite);

Laya.loader.load

使用Laya加载器加载图片完成后绘制纹理

//初始化引擎
const canvas = Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
//舞台设置
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//设置舞台水平居中
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//设置舞台垂直居中
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//设置舞台缩放模式为显示所有
Laya.stage.bgColor = "#000000";//设置舞台背景颜色为黑色

//图片路径
const imgPath = "./res/atlas/avatar.png";
//使用加载器加载图片
Laya.loader.load(imgPath, Laya.Handler.create(this, ()=>{
    //舞台添加精灵节点
    let sprite = new Laya.Sprite();
    Laya.stage.addChild(sprite);
    //精灵设置纹理并居中显示
    const res = Laya.loader.getRes(imgPath);
    const x = (Laya.stage.width-res.width)>>1;
    const y = (Laya.stage.height-res.height)>>1; 
    sprite.graphics.drawTexture(res, x, y);
}));

Graphics.drawTexture用于绘制纹理

图片显示

切换图片

//初始化引擎
const canvas = Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
//舞台设置
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//设置舞台水平居中
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//设置舞台垂直居中
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//设置舞台缩放模式为显示所有
Laya.stage.bgColor = "#000000";//设置舞台背景颜色为黑色

//创建精灵
let sprite = new Laya.Sprite();
//切换状态
let flag = false;
//图片路径
const imgPath1 = "./res/atlas/avatar.png";
const imgPath2 = "./res/atlas/poker.png";
//切换图片
const switchImage = ()=>{
    let imgPath = flag=!flag ? imgPath1 : imgPath2;
    //加载精灵图
    sprite.loadImage(imgPath);
}

//默认显示图片
switchImage();
//点击精灵图切换图片
sprite.on(Laya.Event.CLICK, sprite, switchImage);

//舞台添加节点
Laya.stage.addChild(sprite);

如果加载的图片是多个图片所合成的图集文件，此时需要先引入图片后将容器状态修改为Clip切换类型，即可使用图片上的小图。

轴心点

改变轴心点pivot可以控制旋转和缩放的中心

旋转图片

旋转图片前首先必须明确图片的轴心点pivot，精灵的默认轴心点是自己的左上角，比如使用pos(x,y)设置定位时默认是以精灵的左上角作为参考点的。

轴心点pivot会影响对象位置、缩放中心、旋转中心。

// 设置轴心点，相当于分别设置pivotX和pivotY属性。
pivot(pivotX:Number, pivotY:Number):Sprite

// 轴心点X轴位置，单位像素默认为0。
pivotX:Number

//轴心点Y轴位置，单位像素默认为0.
pivotY:Number

例如：以精灵对象默认左上角为轴心点进行旋转

//初始化引擎
const canvas = Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
//舞台设置
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//设置舞台水平居中
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//设置舞台垂直居中
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//设置舞台缩放模式为显示所有
Laya.stage.bgColor = "#000000";//设置舞台背景颜色为黑色

//创建精灵
let sprite = new Laya.Sprite();
//图片路径
const imgPath = "./res/atlas/avatar.png";
//精灵加载图片
sprite.loadImage(imgPath);
//设置图片旋转
//设置帧动画，每隔1帧的时间执行回调函数
Laya.timer.frameLoop(1, this, ()=>{
    //设置精灵的旋转角度
    sprite.rotation += 0.5;
});

//舞台添加节点
Laya.stage.addChild(sprite);

例如：以精灵对象自身的中心点为轴心点进行旋转

缩放图片

加载图集

放大镜效果

Sprite.cacheAs

/*
* 指定显示对象是否缓存为静态图像，cacheAs时，子对象发生变化，会自动重新缓存，同时也可以手动调用reCache方法更新缓存。
* 建议把不经常变化的“复杂内容”缓存为静态图像，能极大提高渲染性能。cacheAs有"none"，"normal"和"bitmap"三个值可选。
* 默认为"none"，不做任何缓存。
* 当值为"normal"时，canvas模式下进行画布缓存，webgl模式下进行命令缓存。
* 当值为"bitmap"时，canvas模式下进行依然是画布缓存，webgl模式下使用renderTarget缓存。
* webgl下renderTarget缓存模式缺点：会额外创建renderTarget对象，增加内存开销，缓存面积有最大2048限制，不断重绘时会增加CPU开销。优点：大幅减少drawcall，渲染性能最高。
* webgl下命令缓存模式缺点：只会减少节点遍历及命令组织，不会减少drawcall数，性能中等。优点：没有额外内存开销，无需renderTarget支持。
*/
cacheAs:string;

缓存为静态图片

将多个显示对象缓存成静态图像可大幅提升渲染效率

//初始化引擎
const canvas = Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);
//舞台设置
Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;//设置舞台水平居中
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;//设置舞台垂直居中
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;//设置舞台缩放模式为显示所有
Laya.stage.bgColor = "#000000";//设置舞台背景颜色为黑色

let sprite = new Laya.Sprite();
Laya.stage.addChild(sprite);

let text;
for(let i=0; i<100; i++){
    text = new Laya.Text();
    sprite.addChild(text);

    text.fontSize = 20;
    text.text = (Math.random() * 1000).toFixed(0);
    text.color = "#ccc";
    text.rotation = Math.random() * 360;
    text.x = Math.random() * Laya.stage.width;
    text.y = Math.random() * Laya.stage.height;
}
sprite.cacheAs = "bitmap";

Laya Sprite

你可能感兴趣的:(Laya Sprite)