ActionScript
TypeScript
JavaScript

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

发布时间:2017-01-03


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

图片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文件夹下。

image.png 

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

图片1.png 

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

image.png 

 

使用图集

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

package 
{
 import laya.net.Loader;
 import laya.utils.Handler;

 public class Main 
 {
  
  public function Main() 
  {
   //初始化引擎
   Laya.init(480,852);
   //创建滚动的背景
   var bg:BackGround = new BackGround();
   //将背景添加到舞台上
   Laya.stage.addChild(bg);
   //加载图集资源
   Laya.loader.load("res/atlas/war.json", Handler.create(this, this.onload), null, Loader.ATLAS);
  }
  
  private function onload():void 
  {
   //创建控制的飞机 
   var hero:Role = new Role();
   //将飞机加入到舞台上
   Laya.stage.addChild(hero);
  }

 }
 
 

}


 

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

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


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

图片1.png 

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

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

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

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

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

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

 private function onload():void 
  {
   //创建控制的飞机 
   var hero:Role = new Role();
   //将飞机加入到舞台上
   Laya.stage.addChild(hero);
  }

 }


使用Animation实现Role

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

Role.as

package 
{
 import laya.display.Animation;
 import laya.display.Sprite;
 

 public class Role extends Sprite 
 {
  //定义飞机的身体
  private var body:Animation;  
  
  /**
   * 角色创建
   */
  public function Role() 
  {
   this.init();
  }
  
  private function init():void 
  {
   //创建动画作为飞机的身体
   body = new Animation();
   //加载飞机飞行的图片
   body.loadImages(["war/hero_fly1.png", "war/hero_fly2.png"]);
   //播放动画
   body.play();
   //将动画加入到容器中
   this.addChild(body);
  }
  
  
 }

}


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

设置动画播放哪些图片

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


 

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

        图片1.png 

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

本节课程下载地址