ActionScript
TypeScript
JavaScript

二、创建与使用图集,让飞机飞

发布时间:2016-05-14


前节教程完成了循环滚动背景的实现,这节我们让飞机在地图上飞行起来。先看一下主角飞机使用的图片资源。

图片1.png 

这是飞机飞行状态的两张图片,两种图片交替显示,就组成了飞行动画,LayaAir内置动画类Animation。Animation类的具体Api可以通过官方网站查询:

Animation类查询

图片1.png 

通过Animation的提供的属性集合里,可以看出可以控制动画的frames,可以更改当前播放索引index,可以设置播放间隔interval,可以设置是否循环播放loop,我们再看此类提供的方法:

图片1.png 

createFrames方法,可以用来创建动画模板,并且进行缓存。

loadAtlas方法,实现了从图集中创建Animation的方式。

loadImages方法,实现了从图片数组创建Animation的方式。

play、stop可以控制动画播放和停止。

看来实现一个动画还是有不少方法,官方提供了三种API供选择,大家选择自己方便的一种即可,我这里打算用loadImages实现。

 

创建图集

为了提高游戏性能和减少加载HTTP请求,我打算把飞机的几张图片打成图集,LayaAirIDE内置图集打包工具可以很方便的实现这个需求(也可以使用TexturePacker打包,选择json(hash)类型)。

下面打开 LayaAirIDE,把上面两个图片copy到ide的laya/assets/war文件夹下。

图片1.png 

点击右上角图片1.png切换到编辑器模式(快捷键Alt+Q),可以在设计面板上看到刚才所放的资源。

图片1.png 

使用快捷键F12打包图集(打包图集),然后再点右上角切换到代码模式,在资源树中可以看到编辑器的bin/res/atlas下,生成了两个文件,war.json和war.png,就是上面两个图片打包而成的图集和图集描述文件,图集名称是和文件夹名称一一对应的(如果有多个文件夹)。

图片1.png 

 

使用图集

我们现在用Animation类去实现这个飞机飞行效果,实现思路是先加载这个图集,然后创建一个角色类Role,使用Animation播放飞机飞行动画,代码更改如下:

/**
* Game
*/
class Game {
 
    constructor() {
        //初始化引擎,设置游戏设计宽高
        Laya.init(480, 852);
 
        //创建循环滚动的背景
        var bg: BackGround = new BackGround();
        //把背景添加到舞台上显示出来
        Laya.stage.addChild(bg);
 
        //加载图集资源
        Laya.loader.load("res/atlas/war.json", Laya.Handler.create(this, this.onLoaded), null, Laya.Loader.ATLAS)
    }
 
    onLoaded() {
        //创建一个主角(主战斗机)
        var hero: Role = new Role();
        //把主角添加到舞台上
        Laya.stage.addChild(hero);
    }
}
 
//启动游戏
new Game();


 

其中使用到了加载管理器:

Laya.loader.load("res/atlas/war.json", Laya.Handler.create(this, this.onLoaded), null, Laya.Loader.ATLAS)


加载管理器是负责资源加载解析的工具类,帮忙我们加载管理资源,下面我们看此函数的API说明:

图片1.png 

第一个参数url接受一个文件地址或者数组(文件地址集合)。

第二个参数complete接受一个结束回调。

第三个参数progress 接受一个加载进度回调。

第四个参数type 指定加载文件的类型(前提是url是一个单一地址)。

第五个参数 cache 是否缓存,默认为true

看到API解释之后,上述代码就很好理解了,就是加载一个图集,加载完回调onLoaded方法。下面看onLoaded方法内,创建了一个主角,然后把主角添加到舞台显示。很好理解吧。

onLoaded() {
        //创建一个主角(主战斗机)
        var hero: Role = new Role();
        //把主角添加到舞台上
        Laya.stage.addChild(hero);
    }


使用Animation实现Role

下面开始使用Animation类,实现角色动画,以下是代码。

Role.ts

/**
 * 角色类
 */
class Role extends Laya.Sprite {
    //定义飞机的身体
    private body:Laya.Animation;
    constructor() {
        super();
        //初始化
        this.init();
    }
    
    init():void{
        //创建一个动画作为飞机的身体
       this.body = new Laya.Animation();
       //设置飞行动画使用的图片
       this.body.loadImages(["war/hero_fly1.png","war/hero_fly2.png"]);
       //开始播放动画
       this.body.play();
       //把机体添加到容器内
       this.addChild(this.body);
    }
}


其中 this.body = new Laya.Animation(); 就是创建了一个Animation动画。

设置动画播放哪些图片

this.body.loadImages(["war/hero_fly1.png","war/hero_fly2.png"]);

修改index.html,引入Role.js。

 

下面我们看看效果, 点击调试图片1.png或者快捷键F5,会看到如下效果:

        图片1.png 

飞机已经在飞行了,是不是很简单,LayaAir内置工具链和动画类,让实现类似效果非常容易。

本节课程下载地址