egret-docs-master/extension/game/movieClip
guofei 4fe0162b34 fist commit 2024-06-19 13:32:32 +08:00
..
README.md fist commit 2024-06-19 13:32:32 +08:00

README.md

MovieClip (MC) 又称之为 "影片剪辑"是Egret中提供的一种动画解决方案。实际上 MC 所实现的功能就是播放序列帧动画。

实现一个动画效果时,可以把原有的动画制作成为能够被 Egret 识别的动画格式。然后将这些制作好的资源进行加载,最后播放。

1.制作 MovieClip 动画资源

Egret 提供三种方式制作 Egret 动画资源文件:

  • 使用 TextureMerger 将 swf 或者 gif 文件转换成 Egret 动画资源文件。具体使用方法请查看:TextureMerger 使用说明

  • 使用 DragonBones Pro 制作帧动画。

  • Egret 为Flash提供了一个插件这个插件可以将Flash中的动画导出为能够被Egret播放的动画文件。插件安装和使用方法请查看 MovieClip Plug-in

2.资源约定

MovieClip 需要一对 json 配置文件和一个纹理集图片。比如 abc.jsonabc.png

  • 配置文件约定了各个字段标识的用途,
  • 纹理集图片为 MovieClip 所使用的图片集。

2.1.配置解析

{
	"mc": {
		"run": {
			"frameRate": 24,
			"events": [
				{
					"name": "@fall",
					"frame": 6
				}
			],
			"labels": [
                {
                    "end": 8,
                    "name": "start",
                    "frame": 2
                }
            ],
			"frames": [
				{
					"res": "19236B52",
					"x": 6,
					"y": 13,
					"duration": 3
				}
			]
		}
	},
	"file": "abc.png",
	"res": {
		"19236B52": {
			"x": 111,
			"y": 1,
			"w": 108,
			"h": 131
		}
	}
}
  • mcMovieClip 所拥有的动作,比如这里的 run。
    • run一个动作名称可以有多个。
      • frameRate播放的帧率。
      • events在某一帧下触发的事件。
      • labels标签标记当前标签所持续的帧的情况。
      • frames当前动作的所有帧数据。
  • file图集名称。
  • res纹理集数据。

2.2.资源配置

在Egret的资源配置文件默认为 default.res.json)中,应该有如下配置:

"resources":
    [
         {"name":"abc.json","type":"json","url":"assets/abc.json"}
        ,{"name":"abc.png","type":"image","url":"assets/abc.png"}
        ......
    ]

3.使用

3.1.创建

egret 的 MovieClip 采用工厂模式MovieClip 工厂类为: MovieClipDataFactory

一个 MovieClip 工厂类对应一个MC资源合集。比如资源文件为 abc.jsonabc.png。那么我们就可以在程序中把其解析到一个 MovieClip 工厂类:

var data = RES.getRes("abc.json");
var txtr = RES.getRes("abc.png");
var mcFactory:egret.MovieClipDataFactory = new egret.MovieClipDataFactory( data, txtr );

3.2.获取动作

比如上面的的 run,则在程序中解析该 MovieClip 的方法为:

var mc1:egret.MovieClip = new egret.MovieClip( mcFactory.generateMovieClipData( "run" ) );

3.3.播放

  • 帧标签播放

    如果在 MovieClip run 中有名为 "start" 的帧标签,从这里播放 3 次,代码即为:

this.addChild( mc1 );
mc1.gotoAndPlay( "start" ,3);
  • 帧数播放 比如要从第3帧播放代码为
mc1.gotoAndPlay( 3 );

注意为了避免可能的内存泄漏问题MovieClip只有被加到显示列表上之后才能被正确的播放!

4.事件

4.1帧标签事件

比如在第动画的第 6 帧有一个 "fall" 帧事件标签,可以为动画增加监听获取这个消息

mc1.addEventListener(egret.MovieClipEvent.FRAME_LABEL,e:egret.MovieClipEvent=>{
	console.log(e.type,e.frameLabel, mc1.currentFrame);//frame_label @fall 6
},this);

4.2.完成事件

比如要播放 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);