ActionScript
TypeScript
JavaScript

三、飞机被击爆炸及鼠标跟随的实现

发布时间:2017-01-03

 

上节课已经实现了飞机动起来的效果。这节我们实现飞机更多功能,比如飞机状态切换,飞机控制。我找来更多图片(版权归原作者所有,这里之作研究只用),除了原来的飞行效果外,新增加了击中爆炸效果。

图片1.png 

通过上节提供的方法,我在编辑器内让这些图片打包为一个图集。

image.png 

下面更改代码,实现飞机状态切换功能。

Role.as类

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

 public class Role extends Sprite 
 {
  //定义飞机的身体
  private var body:Animation;  
  
  /**
   * 角色创建
   */
  public function Role() 
  {
   this.init();
  }
  
  private function init():void 
  {
   //缓存飞机飞行动画
   Animation.createFrames(["war/hero_fly1.png", "war/hero_fly2.png"], "hero_fly");
   //缓存飞机死亡动画
   Animation.createFrames(["war/hero_down1.png", "war/hero_down2.png","war/hero_down3.png","war/hero_down4.png"], "hero_down");
   //创建动画作为飞机的身体
   body = new Animation();
   //将动画加入到容器中
   this.addChild(body);
   //播放当前状态的动画
   this.playAction("hero_down");
  }
  
  private function playAction(action:String):void 
  {
   //根据类型播放动画
   body.play(0, true, action);
   //获取动画大小区域
   var bound: Rectangle = this.body.getBounds();
   //设置机身剧中
   body.pos(-bound.width / 2, -bound.height / 2);
  }
 
 }

}

本次修改了loadImages,加载了多个动画,并给每个动作起了名字。

封装了一个playAction方法,根据不同的状态播放不同动画。

 

Game.as中修改英雄的位置。

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

 

编译后看到效果如下:

图片1.png 

 

让飞机跟随鼠标移动

修改Main.as类,实现飞机跟随鼠标效果。

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

 public class Main 
 {
  //定义主角(主战斗机)
  private var hero:Role;
  
  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 
  {
   //创建控制的飞机 
   hero = new Role();
   //设置飞机的位置
   hero.pos(240, 700);
   //将飞机加入到舞台上
   Laya.stage.addChild(hero);
   //添加鼠标事件
   Laya.stage.on(Event.MOUSE_MOVE, this, onMouseMove);
  }
  /**
   * 鼠标移动控制飞机函数
   * @param e
   */
  private function onMouseMove(e:Event):void 
  {
   //飞机跟随鼠标移动
   hero.pos(Laya.stage.mouseX, Laya.stage.mouseY);
  }

 }

}


 

编译后可以看到主战斗机已经可以跟随鼠标移动了。

图片1.png 

 

本节课程源码下载地址