背景:原本是做白鹭项目的,后续考虑换成creator,但是由于creator的动画编辑器比较难受,而在白鹭那边已经有了一些脚本工具,因此希望在creator上实现一个组件,直接能够播放白鹭的movieClip。
在cocos社区找了一圈,没有找到可以直接伸手的组件,故想着自己也试着来造造轮子。
期待的样子:
1.实现movieClip控件(继承Node节点),直接new出来,添加到对应节点下,然后可以调用load(fileName)接口直接加载资源。playMovie/loadAndPlay等直接播放或者加载播放对应的动画/动作;一些额外回调操作;
2.实现movieClipComponent组件,可以挂载到节点上。具体是实现上述的需求。
首先做的一些准备:
1.封装了读取mc资源的接口,主要是来读取json跟texture2d;
加载json,加载texture,保证两步都加载完成了,才进行下一步操作。
解析配置主要做的是把json里的资源resData跟 动画mcData保存下来。
实现思路:
1.当前帧包括当前动画/当前动作/当前帧索引等。将这些作为一个私有变量保存起来,这样可以随时getter/setter。在数据发生变化的时候才重新去计算当前值。
2.基于update帧驱动或者计时器驱动,获取当前帧的配置数据,将纹理渲染出来,然后索引+1,等待下一次刷新。
只是拿到了当前帧的配置数据,怎样才能在雪碧图里裁切出想要的子图呢?
在这里我采取的办法是spriteFrame中的设置rect,来实现子图的效果。
在实现的路上,暂时忽略new过程中的性能损耗。。。。
3.后续又加入了循环以及播放次数的判断。播放结束/完成等的判断。
最后终于能够把动画播放起来了。
延时切换到该文件下的其他动画,结果也是可行。
最后是完整的代码。。。。。
import { Node } from "cc";
import { MovieClipComponent } from "./MovieClipComponent";
export class MovieClip extends Node{
private _mcc:MovieClipComponent;
private get mcc(){
if(!this._mcc)
this._mcc = this.addComponent(MovieClipComponent);
return this._mcc;
}
private _fileName:string;
constructor(){
super();
}
onLoad(){
};
/**
* 加载mc资源文件
*/
public loadFile(fileName:string){
if(fileName === this._fileName){
return;
}
this._fileName = fileName;
this.mc