ActionScript
TypeScript
JavaScript

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

发布时间:2016-05-14

 

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

图片1.png 

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

图片1.png 

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

Role.ts类

/**
 * 角色类
 */
class Role extends Laya.Sprite {
    //定义飞机的身体
    private body: Laya.Animation;
 
    constructor() {
        super();
        //初始化
        this.init();
    }
 
    init(): void {
        //缓存飞行动作
        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_down");
    }
 
    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);
    }
}

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

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

 

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

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

 

编译后看到效果如下:

图片1.png 

 

让飞机跟随鼠标移动

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

/**
* Game
*/
class Game {
    //定义英雄(主战斗机)
    private hero: Role
 
    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() {
        //创建一个主角(主战斗机)
        this.hero = new Role();
        //设置角色位置
        this.hero.pos(240, 700);
        //把主角添加到舞台上
        Laya.stage.addChild(this.hero);
 
        //监听舞台的鼠标移动事件
        Laya.stage.on("mousemove", this, this.onMouseMove)
    }
 
    onMouseMove(e: Laya.Event): void {
        //始终保持影响和鼠标位置一致
        this.hero.pos(Laya.stage.mouseX, Laya.stage.mouseY);
    }
}
 
//启动游戏
new Game();


 

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

图片1.png 

 

本节课程源码下载地址