问题:
1.什么是图集?
图集(Atlas)是游戏开发中常见的一种美术资源,通过工具将多张图片合并成一张大图,并通过atlas与json等格式的文件存放原始图片资源信息。
如下图
2.为什么要使用图集?
2.1、减少照片多余部分的使用,优化内存;
2.2 、减少对CPU的资源请求,提高运行效率。
3.怎么用图集实现动画?
将图集加载后,用LayaAir内置动画类Animation,里面有个createFrames方法,可以实现动画.
4.如何使用LayaAirIDE创建图集?
在laya/assets/
目录下添加图片资源,在IDE编辑器打开编辑模式,点击左下角刷新资源树,点击工具栏->发布,或按F12,发布成功后就可以使用图集资源。在res/atlas
中会生成3个文件,.rec文件 .arlas文件 .png文件。
详细可以参考网站
http://blog.sina.com.cn/s/blog_9fe6ba930102x43v.html
官方文档
http://ldc.layabox.com/doc/?nav=zh-ts-2-2-0
项目
1.用Animation制作图集动画并添加到舞台上播放
2.主角动画跟随鼠标移动
/**
* 程序入口
*/
//预加载
Laya.loader.load("res/atlas/war.json",Laya.Handler.create(this,this.onLoaded),null,Laya.Loader.ATLAS)
//创建一个角色
this.hero = new Role();
// //初始化角色
// this.hero.init("hero",0,1,0,30);
// this.hero.pos(200,500);
//将角色添加到舞台
Laya.stage.addChild(this.hero);
//监听舞台上的鼠标移动时间
Laya.stage.on(Laya.Event.MOUSE_MOVE,this,this.onMouseMove);
}
onMouseMove():void{
//始终保持主角和鼠标位置一致
this.hero.pos(Laya.stage.mouseX,Laya.stage.mouseY);
}
/**
* 角色类
*/
class Role extends Laya.Sprite {
//定义飞机的身体
private body:Laya.Animation;
constructor() {
super();
//初始化
// this.init();
}
init():void{
//缓存飞行动画 参数- 图片URL 动画名称
Laya.Animation.createFrames(["war/hero_fly1.png","war/hero_fly2.png"],"hero_fly");
//缓存击中爆炸效果
Laya.Animation.createFrames(["war/hero_down1.png","war/hero_down2.png"
,"war/hero_down3.png","war/hero_down4.png"],"hero_down");
//创建一个动画作为飞机的身体
this.body = new Laya.Animation();
//把机体添加到容器内
this.addChild(this.body);
//播放飞机动画
this.playAction("hero_fly");
}
playAction(action:string):void{
//根据类型播放动画
this.body.play(0,true,action);
//获取动画大小区域
var bound:Laya.Rectangle = this.body.getBounds();
//设置机身居中
this.body.pos(-bound.width/2,-bound.height/2);
}
}