LayaAir基础（5）之图集打包及资源加载

最新推荐文章于 2021-04-22 14:09:01 发布

启之灵

最新推荐文章于 2021-04-22 14:09:01 发布

阅读量5.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： LayaAir 文章标签： layaair

本文链接：https://blog.youkuaiyun.com/z_x_Qiang/article/details/86635194

LayaAir 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了LayaAir中如何进行图集打包，包括使用IDE工具打包和编辑模式下的手动设置，以及详细步骤。同时讲解了资源加载的过程，帮助开发者更有效地管理和使用游戏或应用的资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图集打包

例如：

第一种、利用ide提供的工具打包图集；

1.将资源拷贝到项目的laya/assets/role/role目录下

2.ide菜单栏中的工具 ---图集打包设置相关的参数

3.点击确定，就生成了下面的文件

第二种方式

1.将资源文件直接拷贝到laya -- >assets的目录下

2.切换到编辑模式下，点击F9 弹出项目设置；

3.点击确定后，会在设置的输出资源目录下出现对相应的打包资源；

资源加载

(function(){
	(function(){
		var WebGL = laya.webgl.WebGL;
        Laya.init(600, 400, WebGL);
        Laya.stage.scaleMode = Laya.Stage.SCALE_NOSCALE;
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
        Laya.stage.alignV  = Laya.Stage.ALIGN_MIDDLE;
        Laya.stage.screenMode = Laya.Stage.SCREEN_NONE;

		loadsrc();
	})();

	function loadsrc(){
		//记载图集资源到内存中；
		Laya.loader.load("res/atlas/role.atlas",Laya.Handler.create(this,onLoaded));
	}
	function onLoaded(){
		this.roleAni =new Laya.Animation();
		this.roleAni.loadAtlas("res/atlas/role.atlas");//动画对象去加载一个动画资源；
		this.roleAni.interval=100;//设置帧动画的时间间隔；
		//可以手动的给roleAni设置宽高
		// this.roleAni.size(96,96);
		//也可以是用bounds的方式获取；这种方式是事实获取的，会影响性能的；要谨慎使用；
		// var rec = this.roleAni.getBounds();
		//如果不手动设置的话，此时获取的this.roleAni的宽高都是0；
		// this.roleAni.pos((Laya.stage.width - this.roleAni.width)/2,(Laya.stage.height - this.roleAni.height)/2);

		//当然也可以设置资源的轴心点位置为资源的中心
		this.roleAni.pivotX = this.roleAni.pivotY = 48;
		//这里设置轴心点在父父元素中的位置；
		this.roleAni.pos(Laya.stage.width/2,Laya.stage.height/2);
		// this.roleAni.loadImages(getImagesArray(7,"attack"),"attack");//这种是类方法；

		Laya.Animation.createFrames(getImagesArray(8,"die"),"die");//这种是静态的方法；
		this.roleAni.play(0,true,"die");//播放attack这个动画效果；
		
		Laya.stage.addChild(this.roleAni);
	}

	function getImagesArray(number,name){
		let imgArr = [];
		for(let i=0;i<number;i++){
			imgArr.push("role/"+name+i+".png");
		}
		return imgArr;
	}
})();