前言
由设计人员来设计动画
然后由开发人员进行控制
是在游戏开放中比较重要的分工
如果所有动画都由开发人员代码来实现 工作量太大 质量不高
下面就来演示下 如何操作
准备动画素材
首先将所有动画素材导入到项目中
在这里我准备圆桌骑士中的 大剑勇士的攻击和行走的图片集合
所有图片我都使用了 角色_动作_序号 的命名方式
导入到工程中
在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");
完成后效果如下