LayaAir 使用IDE制作动画并播放

前言

由设计人员来设计动画

然后由开发人员进行控制

是在游戏开放中比较重要的分工

如果所有动画都由开发人员代码来实现 工作量太大 质量不高 

下面就来演示下 如何操作

准备动画素材

首先将所有动画素材导入到项目中

在这里我准备圆桌骑士中的 大剑勇士的攻击和行走的图片集合

所有图片我都使用了 角色_动作_序号 的命名方式

导入到工程中

在Laya IDE中 切换视图模式为 编辑模式  快捷键 ALT+W

然后在左下角资源列表中 打开所在目录 

拷贝图片资源文件到文件夹中 回到IDE中 刷新即可 效果如图

开始建立动画

在编辑视图中, 右键项目新建一个动画

将攻击图片集合 拖到时间轴上

修改动效名称为attack 这里很重要 一会儿要用到

再把move图片集合拖拽过来 动效名称设置为 move

然后直接 F12 发布开始编辑我们的代码啦

import WebGL = Laya.WebGL;
class GameMain{

    private heroAni:Laya.Animation;
    private heroAni2:Laya.Animation;

    


    constructor()
    {
        Laya.init(600,400, WebGL);
        Laya.stage.bgColor = "#bbbbbb";
        Laya.loader.load("res/atlas/hero.atlas",Laya.Handler.create(this,this.onLoaded),null,Laya.Loader.ATLAS);

    }

    private onLoaded(){
        console.info('load_ok')
        this.create_anni();
    }

    private create_anni(){
        

        this.heroAni = new Laya.Animation();
        Laya.stage.addChild(this.heroAni);
        this.heroAni.loadAnimation("hero.ani")
        this.heroAni.interval=100;
        this.heroAni.play(0,true,"move");

        let console_ui:ui.consoleUI = new ui.consoleUI();
        Laya.stage.addChild(console_ui);
        console_ui.btn_attack.on(Laya.Event.CLICK,this,this.attack);
        
    }

    private attack(){
        this.heroAni.play(0,false,"attack");
        this.heroAni.on(Laya.Event.COMPLETE,this,this.move);
    }

    private move(){
        this.heroAni.off(Laya.Event.COMPLETE,this,this.move);
        this.heroAni.play(0,true,"move");
    }

}
new GameMain();

关键语句 读取动画 注意地址不要写错了

 loadAnimation("hero.ani")

关键语句 播放动画 其中的attack 就是动画特效名称 来决定播放这个ani文件中的哪个动画

this.heroAni.play(0,false,"attack");

完成后效果如下