LayaAir飞机大战-2

问题:

1.什么是图集?

图集(Atlas)是游戏开发中常见的一种美术资源,通过工具将多张图片合并成一张大图,并通过atlas与json等格式的文件存放原始图片资源信息。

如下图

LayaAir飞机大战-2_第1张图片

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);

}

}

你可能感兴趣的:(LayaAir飞机大战-2)