Laya Sprite

游戏中Sprite精灵是在屏幕中能够被控制的显示对象，如果屏幕中的显示对象不能被控制那就只是一个节点。准确来说，Sprite精灵是一个能够通过改变自身属性，比如角度、位置、伸缩、颜色等，变为可控动画的2D图像。

结构	描述
Package	`laya.display.Sprite`
Class	`Laya.Sprite`
Inheritance	`Sprite / Node / EventDispatcher / Object`

Sprite是基础的显示图形的显示列表节点，LayaAir引擎核心显示类只有一个Sprite类，Sprite会针对不同情况自动渲染优化。Laya.Sprite类位于Core核心类库中，是laya.display.Sprite类封装后形成的。

创建精灵对象实例

let sprite = new Laya.Sprite();

属性	描述
`autoSize:boolean=false`	指定是否自动计算宽高尺寸，默认为`false`。
`hitTestPrior:boolean = false`	指定鼠标事件检测是否优先检测自身
`mouseThrough:boolean = false`	鼠标事件与当前对象的碰撞检测是否可以穿透

autoSize:boolean = true;

精灵的宽高默认为0，不会随着绘制内容的变化而变化，如果想要根据绘制内容获取宽高，可以设置autoSize属性为true，或通过getBounds()方法获取，不过开启autoSize后会影响性能。

getBounds():Rectangle

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

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

Sprite默认不接收鼠标事件

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

容器

Sprite是容器类，能够作为其它显示对象的容器，用来添加多个子节点。

class Test {constructor() {Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);this.onInit();}initStage(){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";}onInit(){this.ATLAS_PATH = "./res/atlas/avatar.atlas";Laya.loader.load(this.ATLAS_PATH, Laya.Handler.create(this, function(){// Sprite容器类作为其它显示对象的容器，用来添加多个子节点。let container = new Laya.Sprite();// 容器添加子节点let sprite;for(let i=1; i<5; i++){sprite = new Laya.Sprite().loadImage(`avatar/avatar${i}.png`);sprite.pivot(55, 72).pos(Math.cos(Math.PI/2*i)*150, Math.sin(Math.PI/2*i)*150);container.addChild(sprite);}// 通过控制容器改变自身以及子级外观container.pos(Laya.stage.width/2, Laya.stage.height/2);Laya.stage.addChild(container);}));}
}
//启动
new Test();

加载图片 loadImage

方法	描述
`loadImage(url:string, complete?:Handler):Sprite`	加载并显示单张图片，相当于加载图片后设置纹理`texture`属性。

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

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

直接加载外部图片并获取精灵纹理图片的信息

class Test {constructor() {Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);this.initStage();this.run();}initStage(){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";}run(){this.createSprite("res/image/bomb.png");}createSprite(url){this.sprite = new Laya.Sprite();// 加载并显示一个图片this.sprite.loadImage(url, Laya.Handler.create(this, this.onLoadedImage, [url]));this.sprite.pos(Laya.stage.width >> 1, Laya.stage.height >> 1);// 添加到舞台Laya.stage.addChild(this.sprite);}//加载图片完毕后触发onLoadedImage(url){//获取加载的纹理图片this.texture = Laya.loader.getRes(url);console.log(this.texture, this.texture.width, this.texture.height);//61 55//设置}
}
//启动
new Test();

从缓冲区读取图片

class Test {constructor() {Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);this.initStage();this.loadAssets();}initStage(){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";}loadAssets(){this.AVATAR_PATH = "./res/atlas/avatar.png";this.CARD_PATH = "./res/atlas/card.png";let assets = [];assets.push(this.AVATAR_PATH);assets.push(this.CARD_PATH);Laya.loader.load(assets, Laya.Handler.create(this, this.onAssetsLoaded));}onAssetsLoaded(isLoaded){if(isLoaded){this.sprite = new Laya.Sprite();//清空绘制this.sprite.graphics.clear();//获得新的图片资源重新绘制this.sprite.loadImage(this.AVATAR_PATH);//设置精灵的轴心点会影响对象位置，缩放，旋转this.sprite.pivot(0, 0);//设置精灵的坐标值this.sprite.pos((Laya.stage.width - this.sprite.width)/2, (Laya.stage.height - this.sprite.height)/2);//let texture = Laya.loader.getRes(this.AVATAR_PATH);console.log(this.sprite.pivotX, this.sprite.pivotY);//0 0//向舞台中添加精灵Laya.stage.addChild(this.sprite);}}
}
//启动
new Test();

显示图集中的一张图片则图集必须先被加载

绘图对象 Graphics

Sprite精灵的graphics存取器是Graphics类的一个绘图对象

存取器	描述
`graphics`	绘图对象，封装了绘制位图和矢量图的接口，Sprite所有的绘图操作都是通过Graphics来实现的。

Graphics对象是比Sprite更为轻量级的对象，合理使用能提高性能，比如将大量的节点绘图调整为一个节点的Graphics命令集合，能减少大量节点创建的消耗。

结构	描述
Package	`laya.display.Graphics`
Inheritance	`Graphics`

LayaAir通过Graphics类提供了绘制矢量图形的各种接口方法

方法	描述
alpha(value:number):AlphaCmd	用于设置绘图对象的透明度
clear(recoverCmds?:boolean):void	清除绘制命令
destroy():void	销毁绘图对象

绘图方法	描述
draw9Grid()	绘制九宫格
drawCircle()	绘制圆形
drawCurves()	绘制曲线
drawImage()	绘制图片
drawLine()	绘制单线条
drawLines()	绘制多线条
drawPath()	绘制路径
drawPie()	绘制扇形
drawPoly()	绘制多边形
drawRect()	绘制矩形
drawTexture()	绘制纹理，相比drawImage功能更为强大，性能更差。
drawTextures()	批量绘制纹理
drawTriangles()	绘制三角形

绘制纹理 drawTexture

使用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用于绘制纹理

graphics
get graphics():Graphics
set graphics(value: Graphics):void

绘图对象，封装了绘制位图和矢量图的接口，Sprite所有的绘图操作都是通过Graphics来实现的。

/*** 绘制纹理* 相比drawImage功能更为强大，性能会差一些。* @param texture:Texture 纹理* @param x:Number (default=0) 可选，X轴偏移量* @param y:Number (default=0) 可选，Y轴偏移量* @param width:Number (default=0) 可选，宽度* @param height:Number (default=0) 可选，高度* @param matrix:Matrix (default=null) 可选，矩阵信息* @param alpha:Number (default=1) 可选，透明度* @param color:String (default=null) 可选，颜色滤镜* @param blendMode:String (default=null) 可选，混合模式
*/
drawTexture(texture:Texture, x:Number=0, y:Number=0, width:Number=0, height:Number=0, matrix:Matrix=null, alpha:Number=1, color:String=null, blendMode:String=null
):DrawTextureCmd

class Test {constructor() {Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);this.onInit();}initStage(){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";}onInit(){this.AVATAR_PATH = "./res/atlas/avatar.png";Laya.loader.load(this.AVATAR_PATH, Laya.Handler.create(this, function(){let texture = Laya.loader.getRes(this.AVATAR_PATH);let sprite = new Laya.Sprite();//使用Graphics.drawTexture绘制纹理sprite.graphics.drawTexture(texture);Laya.stage.addChild(sprite);}));}
}
//启动
new Test();

图片显示

例如：切换图片，点击扑克牌，随机改变牌面值与花色。

poker

class Test {constructor() {Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);this.onInit();}initStage(){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";}onInit(){let assets = [];assets.push({type:Laya.Loader.ATLAS, url:"res/atlas/poker.atlas"});Laya.loader.load(assets, Laya.Handler.create(this, this.onAssetsLoaded));}onAssetsLoaded(){this.sprite = new Laya.Sprite();Laya.stage.addChild(this.sprite);this.sprite.pivot(55, 72);this.sprite.pos(Laya.stage.width/2, Laya.stage.height/2);this.onSpriteClick();this.sprite.on(Laya.Event.CLICK, this, this.onSpriteClick);}onSpriteClick(){this.sprite.graphics.clear();let suit = Math.floor(Math.random()*4);//花色let rank = (Math.floor(Math.random()*12) + 1).toString(16);//牌值let url = `poker/0x${suit}${rank}.png`;console.log(url);let texture = Laya.loader.getRes(url);this.sprite.graphics.drawTexture(texture, 0, 0);this.sprite.size(texture.width, texture.height);}
}
//启动
new Test();

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

轴心点 pivot

项目	类型	描述
`pivotX:Number`	存取器	轴心点X轴坐标像素位置，默认为0。
`pivotY:Number`	存取器	轴心点Y轴坐标像素位置，默认为0。
`pivot(x:Number, y:Number):Sprite`	方法	设置轴心点，相当于分别设置`pivotX`和`pivotY`属性。

什么是pivot轴心点呢？一个Sprite精灵对象默认的轴心点位于自身的左上角，使用pos(x, y)设置Sprite精灵的位置时默认是以左上角为基准进行定位的。

轴心点pivot和锚点anchor是同一个改变，都是基准点，决定着图片在舞台的位置。轴心点以像素为单位，默认XY坐标为(0,0)表示图片左上角作为基准点。锚点则是以图片的宽和高的倍数为单位，取值范围是0~1。当修改了Sprite对象设置默认轴心点，对Sprite对象设置位置pos、缩放scale、旋转rotation时，都是以轴心点为基准，而并非默认的Sprite对象左上角的坐标值。

改变轴心点pivot可以控制旋转和缩放的中心
轴心点pivot会影响对象位置、缩放中心、旋转中心
精灵的pivot()用于设置轴心点，相当于分别设置精灵的pivotX和pivotY属性。

// 设置轴心点，相当于分别设置pivotX和pivotY属性。
pivot(pivotX:Number, pivotY:Number):Sprite// 轴心点X轴位置，单位像素默认为0。
pivotX:Number//轴心点Y轴位置，单位像素默认为0.
pivotY:Number

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

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

//初始化引擎
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);

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

class Test {constructor() {Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);this.onInit();}initStage(){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";}onInit(){this.sprite = new Laya.Sprite();//清空绘制this.sprite.graphics.clear();//绘制有边框的填充矩形this.sprite.graphics.drawRect(0, 0, 100, 100, "#CCFF00", "#FF0000", 5);//设置精灵对象相对于父容器的水平坐标值this.sprite.x = 200;//设置精灵对象相对于父容器的垂直坐标值this.sprite.y = 200;//设置精灵对象的宽高this.sprite.width = 100;this.sprite.height = 100;//设置精灵对象水平轴心点坐标this.sprite.pivotX = 50;//设置精灵对象垂直轴心点坐标this.sprite.pivotY = 50;//向舞台中添加精灵Laya.stage.addChild(this.sprite);this.sprite.on(Laya.Event.CLICK, this, this.onSpriteClick);}onSpriteClick(){this.sprite.rotation += 5;}
}
//启动
new Test();

例如：从外部加载图片后，将图片放置到舞台中央位置，并以图片中心为圆心进行旋转。

class Test {constructor() {Laya.init(Laya.Browser.clientWidth, Laya.Browser.clientHeight, Laya.WebGL);this.initStage();this.initComponent();}initStage(){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";}initComponent(){this.createSprite();Laya.timer.frameLoop(1, this, this.onFrameLoop);}onFrameLoop(){this.sprite.rotation += 2;}createSprite(){this.sprite = new Laya.Sprite();Laya.stage.addChild(this.sprite);const url = "res/image/npc.png";this.sprite.loadImage(url, Laya.Handler.create(this, function(){let res = Laya.loader.getRes(url);this.sprite.pivot(res.width/2, res.height/2);this.sprite.pos(Laya.stage.width>>1, Laya.stage.height>>1);}));}
}
//启动
new Test();

轴心点旋转

旋转缩放 rotation

项目	类型	描述
`rotation:number`	存取器	旋转角度，默认为0，以角度为单位。
`scaleX:number`	存取器	X轴缩放值，默认为1，设置为负数可实现水平反转。
`scaleY:number`	存取器	Y轴缩放值，默认为1，设置为负数可实现垂直反转。

class Test {constructor() {Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);this.onInit();}initStage(){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";}onInit(){this.sprite = new Laya.Sprite();Laya.stage.addChild(this.sprite);this.sprite.loadImage("res/image/npc.png");this.sprite.pivot(55, 72);this.sprite.x = Laya.stage.width / 2;this.sprite.y = Laya.stage.height / 2;this.scale = 0;Laya.timer.frameLoop(1, this, this.onFrameLoop);}onFrameLoop(){this.sprite.rotation += 2;this.scale += 0.02;this.sprite.scale(Math.sin(this.scale), Math.sin(this.scale));}
}
//启动
new Test();

设置遮罩 mask

存取器	描述
mask	根据对象（支持位图和矢量图）的形状进行遮罩显示，遮罩对象坐标系是相对于遮罩对象本身的。

public function get mask():Sprite
public function set mask(value:Sprite):void

LayaAir的遮罩可以设置一个对象，支持位图和矢量图，然后根据对象状态进行遮罩显示。遮罩对象坐标系时相对遮罩对象本身的，和Flash机制不同。

设置遮罩

class Test {constructor() {Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);this.initStage();this.init();}initStage(){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";}init(){this.ASSETS_NPC = {type:Laya.Loader.IMAGE, url:"res/image/npc.png"};this.ASSETS_HALL = {type:Laya.Loader.IMAGE, url:"res/image/hall.png"};let assets = [];assets.push(this.ASSETS_NPC);assets.push(this.ASSETS_HALL);Laya.loader.load(assets, Laya.Handler.create(this, this.onAssetsLoaded));}onAssetsLoaded(){//创建精灵this.bg = new Laya.Sprite();//获取图片资源let texture = Laya.loader.getRes(this.ASSETS_HALL.url);//绘制纹理this.bg.graphics.drawTexture(texture);this.bg.pos(0, 0);//添加到舞台Laya.stage.addChild(this.bg);//创建遮罩this.mask = new Laya.Sprite();this.radius = 100;        this.mask.graphics.drawCircle(0, 0, this.radius, "#FFFFFF");this.mask.pos(Laya.stage.width/2, Laya.stage.height/2);//图片添加遮罩this.bg.mask = this.mask;//添加移动事件Laya.stage.on(Laya.Event.MOUSE_MOVE, this, function(){this.mask.x = Laya.stage.mouseX;this.mask.y = Laya.stage.mouseY;});}
}
//启动
new Test();

缓存

存取器	描述
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引擎开发微信小游戏（下）
本文由云+社区发表 6. 动画 6.1 创建伞兵对象在src目录下创建一个新目录role,用来存放游戏中角色. 在role里创建一个伞兵Soldier.ts对象文件. module role{exp ...
Laya Stage
舞台是显示游戏元素的平台,在游戏视觉编程中,一切游戏的元素必须添加到舞台才能被显示.因此,舞台是放置对象的最终容器.舞台自身也是一种可以显示的对象,从编程角度来讲,任何对象都具有属性和行为. 舞台提供 ...
laya游戏开发之贪吃蛇大作战（二）—— 贪吃蛇客户端
文章目录一功能分析二实现方案 1. 代码结构 2. 关键函数实现 2.1 游戏主循环(GameLoop) 2.2 数据层(Model) 2.3 画面绘制层(View) 帧同步的困难与解决方法 ...
tiledmap 图块属性_tiledmap 可以在图块层的指定格子上添加Sprite吗
constructor(mapname:string, x:number, y:number){ super(); //显示登陆界面 this.tMap = new Laya.TiledMap() t ...
基于Laya游戏引擎实现微信小游戏排行榜
我们都知道,微信小游戏和小程序目前风头十足,很多公司都逐渐增加了相关业务线来迅速推广自己的产品和抢占用户群.说到微信小游戏,就不得不提到排行榜这个功能,就目前游戏行业,似乎都离不开排行榜这个重要功能, ...
Laya Shader消融特效
说明&使用项目仅用于测试交流, 如有侵权, 请联系我删除. 引擎版本: LayaAir2.10.0 Github地址: LayaEffect clone LayaEffect项目 → 打开 ...
vue + laya+二次贝赛尔曲线实现含有动画背景的登录页面
1.在layabox上下载demo源码修改得到自己想要的背景动画(也可以自己开发) https://github.com/layabox/layaair-demo/tree/master/h5/2 ...
淘宝小程序游戏迁移Laya引擎
淘宝小程序游戏迁移Laya引擎 1. 目录结构 bin -- 当前项目的输出文件 laya -- 存放UI项目 assets -- 图片,音频资源目录 pages -- .scene 场景文件 key ...
Laya 物理碰撞优化分层和碰撞过滤
用枚举类给对象分层 Laya引擎自身为开发者提供了以下几个层级以下工具类可以直接拿出用功能有: 获取节点上的3D刚体组件获取节点上的3D碰撞器组件设置碰撞组包含碰撞组排除碰撞组深 ...