笔记八 :EgretH5通用MVC框架的入门操作:制作并播放帧动画(UI部分)

笔记八 :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

动画播放监听的官方讲解: