Cocos2d-x 配合 creator 引入组件化工作流尝试

由于官方 Cocos2d-x 一键导出插件目前要求 v3.14 版本以上,对于其他版本使用有一定的限制。于是社区有才的开发者自给自足,根据公司项目动手开发了另外一款 Creator to Cocos2d-x 插件,全新的思路全新的实现方式并且版本要求只需 v3.10 以上,适合推荐给大家。


主要针对公司的项目开发需求:
1、公司使用的 Cocos2d-x 版本为 3.10,而官方版本的最低要求为 3.14;
2、希望导出的文件对插件本身依赖低,即插即用,这样就能随意给老项目“打补丁”;
3、希望创建和使用导出的 node,能比写网页时用 jQuery 都更方便;
4、希望任意 node 都能被导出,最好能实现 react 那样的组件化工作流;
5、目前只能导出 c++ 版本,因为公司目前用的 c++ 方案,lua 版本后面有需求也是要搞的。


1
简介


  • Creator 插件: outline 是一个 Cocos Creator(以下简称 creator)上的插件,用于将 creator 上的 node 和 Animation 导出到 cocos2d-x(以下简称2d-x)项目中。

  • 特点: outline 致力于为 2d-x 引入组件化工作流的同时,保持较高的兼容性、易用性和易迁移性。不同于官方版本,outline 支持 2d-x v3.14以下版本(我的项目 3.10 可以使用,具体最低支持到哪个版本还未测试),任意 node 都能被单独导出,并且支持导出自定义组件。

  • 导出源码: outline 直接导出 c++ 源码,每一次导出的 node 整体,或者每个 animation clip 都会存放于单个 hpp 文件中,开发者只需 include 对应的 hpp 文件即可直接使用。导出的源码将会包含整个导出节点的模板树,配合 ide 的代码提示可以快速获取到制定的节点的模板的指针,通过它的 creator 函数便可以生产出想要的节点。直接导出源码的方案,优势和劣势都很明显。优势是快,所有设计信息都会编译为机器码,不需要额外的 io 操作和字符串操作,也不易被同行 copy,使用起来更灵活;劣势是不能进行热更新(后续如有 lua 版本应该就能支持了)。

  • 设计思路: 正如其名,outline 将会把注意力放在 node 的轮廓上。因为我发现,用编辑器写界面相比较于手写,最大的优势莫过于能够直观的设置 node 的 position、scale、rotation 等属性,这些都可以概括为 node 的轮廓。

  • 动画设计思路: outline 使用了运行时演绎录制的方式来导出 Animation clip,原理是自定义一个继承自 Animation 组件的 AnimationRecord 组件,在播放 animation 的同时记录宿主 node 的每帧动画状态,然后在 Canvas 节点上添加 AutoRecord 脚本,使其能在运行时时自动扫描所有 node,找到所有 AnimationRecord 组件并逐个单独播放记录,完成后通过网络接口将演绎的数据导出。目前支持针对 position、rotation、scale、opacity 属性的动画,帧动画还未测试。另外针对多个子 node 也参与动画的情况还在开发中。

2
导出node


假设已经安装了 outline(如果还不清楚如何安装 creator 扩展,可以移步官网),那么打开 creator 时,会发现菜单栏多了 outline 选项,点击后会出现 export node 子菜单;另外在资源面板中会出现 outline-components 目录,里面包含 ExportRule.js、AnimationRecorder.js、AutoRecorder.js、Status.js 四个脚本。ExportRule 用来描述一个导出规则,直接拖动 ExportRule 脚本至 Canvas 节点中,接着为它取个名称(rule name字段),再设置导出的位置及名称(dst hpp path字段),导出哪个 node(surc_node字段)。保存一下项目,接着点击 outline 菜单子菜单 export node,就会弹出选择 export rule的对话框,勾选需要套用的 export rule,然后点导出即可。可以在 Canvas 节点中添加多个 ExportRule 脚本,以分别导出需要的 node。 目前 export rule 还支持剔除子 node 的功能,方便将封装的多个 node 组合到一个 scene 钟。


3
添加自定义组件


当需要为一个节点添加额外信息时,可以通过添加组件脚本的方式来进行。这和在普通 creator 项目中添加组件脚本并无二样,只不过组件的属性名称,需要作特殊标记。


针对项目中使用的问题,将自定义组件的导出分成两种方案。 
1、属性名以"o_"前缀的依然直接嵌入作为成员变量;
2、属性名以"o__"前缀的则导出为键值对存放在一个固定成员中。


第一种方案用于导出不需批量处理,又与逻辑相关的信息,如为 node 预设多个状态等;

第二种方案用于导出与逻辑无关的,可以批量处理的信息,如自定义控件等。


4
导出动画


首先拖动 AnimationRecorder.js 脚本至合适的 node 中,将需要导出的 animation clip 拖到脚本的 clips 数组中。这样就完成了一个 clip 的设置,接着将 AutoRecorder 脚本拖入 Canvas 节点中,设置好导出的目录,在浏览器中运行项目。所有设置的动画都会在运行时自动逐个播放,都播完后会导出到指定目录。


5
2d-x中使用outline


首先将需要的 Resources 文件夹中的资源文件(保持目录结构)复制到 2d-x 项目的资源根目录下,在导入了 outline.h 头文件和对应的节点的 hpp 文件后,就可以直接通过命名空间 O 来访问导出节点的结构体,调用结构体的 pIt 函数获取单例,再调用它的 creator 函数就可以创建需要的节点。如下



以上代码创建并返回创建了的节点的指针。如果传给 creator 函数的是一个节点,那么将会调用这个节点的 addChild 函数把新创建的节点加入进来。通过这个单例还可以访问子节点的结构体实例。 每个单例都可以创建若干个节点,也可以调用 reset 函数将导出的节点的性状赋给传入的现有节点。


6
播放动画


导入相应hpp文件和资源文件后,可通过命名空间 Anims 来访问导出 clip 的结构体,调用 creator 函数即可创建实例,调用 play 函数即可让传入的节点播放动画,如  



其中 mynode 为需要播放动画的节点,"myAnimation1" 为该播放行为的标记(会作为回调函数的参数传入),第三个参数为是否重复播放,重载的第四个参数为播放完成后的回调函数,使用 lambda 形式。


7
使用前必读

 1、第一次使用前需要设置,将 creator 中偏好设置-常规-导入图片时自动裁剪选项取消掉,才能保证 2d-x 和 creator 的显示效果一致;

 2、所有 node 的名字首字母只能是小写;

 3、导出 node 前必须先要保存 scene;

 4、弹出的 export rule 选择界面可能会比较小,把窗口拉大即可。



戳原文,进Github更有料!
相关文章
相关标签/搜索