笔记八 :EgretH5通用MVC框架的入门操作:制作并播放帧动画(UI部分)
前言:帧动画是游戏中最常用的的两种动画播放形式之一,其中一种是骨骼动画,一种就是帧动画了,在H5游戏中,帧动画一般用于UI界面的操作动画,人物技能,特效什么的。本笔记基于通用MVC框架,以及“笔记一”中的scene搭建的范例,基于源代码我的资源中的《笔记一到笔记七源代码》。
源代码:
如图:
1.步骤一,找到一张帧动画的gif,或者flash的swf文件:(网上找的,学习使用,如有侵权,请联系删除)
2.打开Texture Merger,并新建一个项目,名为testrong2:
点击创建转换动画,并选择gif文件,以及修改动画名称,动作名称:
点击导出,会生成两个文件,testrong.json,testrong.png
3.把这两个文件放入\resource\assets\animation\test\文件夹中,
并打开default.res.json,末尾需要有这些代码:
{
"name": "testrong2_json",
"type": "json",
"url": "assets/animation/test/testrong2.json"
},
{
"name": "testrong2_png",
"type": "image",
"url": "assets/animation/test/testrong2.png"
}
而且在头部的key关键字后面需要有:
testrong2_json,testrong2_png
4.打开\src\example\test\DemoTest.ts: (添加preload资源的加载)
构建函数constructor中的subGroup,添加上preload关键字:
var subGroups:Array<string> = ["preload_core", "preload_ui", "preload_rpg","preload","preload_battle"];
DemoTest.ts参考代码:(源代码参考范例一到范例七的源代码,资源里有)
/**
* Created by yangsong on 15-3-27.
* GUI测试
*/
class DemoTest{
public constructor(){
var groupName:string = "preload_DemoTest";
var subGroups:Array<string> = ["preload_core", "preload_ui", "preload_rpg","preload","preload_battle"];
App.ResourceUtils.loadGroups(groupName, subGroups, this.onResourceLoadComplete, this.onResourceLoadProgress, this);
}
/**
* 资源组加载完成
*/
private onResourceLoadComplete():void {
this.initModule();
App.Init();
//音乐音效处理
App.SoundManager.setBgOn(true);
App.SoundManager.setEffectOn(!App.DeviceUtils.IsHtml5 || !App.DeviceUtils.IsMobile);
//App.SceneManager.runScene(SceneConsts.UI);
App.SceneManager.runScene(SceneConsts.Demo);
}
/**
* 资源组加载进度
*/
private onResourceLoadProgress(itemsLoaded:number, itemsTotal:number):void {
App.ControllerManager.applyFunc(ControllerConst.Loading, LoadingConst.SetProgress, itemsLoaded, itemsTotal);
}
/**
* 初始化所有模块
*/
private initModule():void{
App.ControllerManager.register(ControllerConst.Friend, new FriendController());
App.ControllerManager.register(ControllerConst.Demo, new DemoController());
App.ControllerManager.register(ControllerConst.TarbarDemo, new TarBarDemoController());
App.ControllerManager.register(ControllerConst.ItemListDemo, new ItemListDemoController());
}
}
5.打开:\src\example\module\demo\DemoView.ts (添加播放帧动画的代码)
找到 private button3ClickHandler(e: egret.TouchEvent): void 函数,这是主页面点击第三个按钮触发的函数
private data:any;
private txtr:any;
private button3ClickHandler(e: egret.TouchEvent): void {
// GameConfig.getInstance().initConfig();
//加载特效
if (this.mc1 == null) {
this.data = RES.getRes("testrong2_json");
this.txtr = RES.getRes("testrong2_png");
var mcFactory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(this.data, this.txtr);
this.mc1 = new egret.MovieClip(mcFactory.generateMovieClipData("zhendonghua"));
this.addChild(this.mc1);
this.mc1.gotoAndPlay("gongji", 3);
}else{
this.mc1.gotoAndPlay("gongji", 3);
}
}
其中,this.data和this.txtr分别是我们生成的这两个文件的资源,mcFactory生成动画的工厂类,mc1则是生成的帧动画,
mc1.gotoAndPlay("gongji",3)其中的“gongji”是我们生成的动画中的动作名称。
“zhendonghua”是表示gongji上一级的目录,在json或者编辑器里面能找到这个名字
注意:如果代码运行失败,请检查编辑器的设定的两个名称是否按照教程严格设定,第一级修改为zhendognhua,第二级修改为gongji
另外附监听的东西:
比如在第动画的第 6 帧有一个 “@fall” 帧事件标签,我们还可以为动画增加监听获取这个消息
this.mc1.addEventListener(egret.MovieClipEvent.FRAME_LABEL,(e:egret.MovieClipEvent)=>{
console.log(e.type,e.frameLabel,this.mc1.currentFrame);//frame_label @fall 6
},this);
我们还可以获取动画播放完成的消息。比如要播放 3 次动画,每当动画循环播放完成一次,会调用一次 egret.Event.LOOP_COMPLETE 事件。3 次动画播放完后,会调用 egret.Event.COMPLETE 事件。
this.mc1.addEventListener(egret.Event.LOOP_COMPLETE, (e:egret.Event)=>{
console.log(e.type);//输出3次
}, this);
this.mc1.addEventListener(egret.Event.COMPLETE, (e:egret.Event)=>{
console.log(e.type);//1次
}, this);
另外 MovieClip 还支持帧序标签,比如我们要从第3帧播放,代码为:
mc1.gotoAndPlay( 3 );
6.运行测试,并进行优化(去除白色背景)
用Photoshop打开文件夹中的文件:\resource\assets\animation\test\testrong2.png
用/菜单/选择/色彩范围
选中白色
菜单/编辑/剪切
然后保存替换到原来的testrong2.png
动画播放监听的官方讲解: