creator_to_cocos2dx 插件

Cocos Creator 可以很高效的编辑场景和 UI，同时内置支持 JavaScript，这对 JavaScript 开发者十分友好。可是对于 C++/Lua 开发者，无法直接利用 Creator 高效的界面编辑功能，可能有一些遗憾。

为了去除这种遗憾，我们提供了 creator_to_cocos2dx 插件，它允许开发者导出 Creator 编辑的场景到 Cocos2d-x 的 C++/Lua 工程中。插件逻辑上分为两部分，第一部分是 Creator 的插件，负责把 Creator 制作的场景导出为 .ccreator 文件；第二部分是 reader，负责在 C++/Lua 工程中解析导出的 .ccreator 文件。

特性

使用插件要求 Cocos2d-x 版本 v3.14+，Creator 版本 v1.4+。

Creator 使用基于组件的模型创建对象，而 Cocos2d-x 每个对象有自己的结构，因此插件很难支持全部的 Creator 特性。下面是目前支持的一些特性：

Node Node Node Node Node
Scene Sprite Canvas ScrollView Label
EditBox ParticleSystem TiledMap Button ProgressBar
RichText SpineSkeleton Widget Animations VideoPlayer
WebView Slider Toggle ToggleGroup PageView
Mask Collider Prefab DragonBones

如果在使用过程中，发现某些特性不支持，升级 Cocos2d-x 和 Creator 可能是一个解决办法。

安装配置

在 Cocos Creator 中添加 creator_to_cocos2dx 插件：

  • 克隆 GitHub 仓库 Creator To Cocos2d-x.
  • 将插件仓库目录 creator_project/packages/creator_luacpp_support 拷贝到 Creator 项目的 packages 目录

Creator to Cocos2d-x 插件 - 图1

  • 使用 Creator 打开刚才添加插件的项目，在菜单栏的项目(Project)下，即可看到 LuaCpp Support 菜单项。

Creator to Cocos2d-x 插件 - 图2

Creator 场景导出

使用插件进行场景导出：

  • 在菜单栏中点击 项目(Project) -> LuaCPP Support -> Setup Target Project，出现的对话框中 Project Path 选择目标 Cocos2d-x 工程的路径。

Creator to Cocos2d-x 插件 - 图3

  • 点击 Build，构建过程将很快完成

  • 在你编译运行 Cocos2d-x 项目前，记得重新 Build。完成 Build 后，导出的 reader 源码和 Creator 资源将位于如下位置：

    • C++ 项目：

源码： NATIVE_PROJECT_ROOT/Classes/reader

资源： NATIVE_PROJECT_ROOT/Resources/creator

  • LUA 项目：

源码：NATIVE_PROJECT_ROOT/frameworks/runtime-src/Classes/reader

资源：NATIVE_PROJECT_ROOT/frameworks/runtime-src/Resources/Creator

NATIVE_PROJECT_ROOT 是 Build 时，选择的 Project Path 路径

导出选项

  • Export Resource Only, 不导出插件包含的 reader 源码，只导出 Creator 的场景和相关的资源，通过这种方式，可以避免二次导出的时候插件附带的原始 reader 覆盖掉已经导出到项目中的 reader。

  • Export Resource Dynamically Loaded, 导出可能被动态加载的资源，根据 Creator 的资源使用规范，动态加载的资源需要放置到 resources 目录下。默认的导出选项，只导出在 Creator 场景中被静态引用的资源文件。

  • Auto Build After Scene Saved,在 Creator 场景保存后，后台运行插件，按照面板的配置进行导出。通过这种方式简化开发者使用插件进行导出的流程。

场景导入 Cocos2d-x 项目

完成上一步的场景导出后，reader 源码和 Creator 资源都被放到文件系统中了。此时你需要将这些东西，添加到工程中。

增加头文件搜索路径

将这些目录，添加到工程的头文件搜索路径中：

对于 C++ 项目：

  1. ```sh
  2. reader
  3. ```

对于 Lua 项目：

  1. ```sh
  2. reader
  3. reader/collider
  4. reader/animation
  5. reader/dragonbones/cocos2dx
  6. reader/dragonbones/armature
  7. reader/dragonbones/animation
  8. reader/dragonbones/events
  9. reader/dragonbones/factories
  10. reader/dragonbones/core
  11. reader/dragonbones/geom
  12. ```

Android 平台的特殊处理

Android 平台的头文件搜索路径添加方式有一些特殊，需要修改 Android.mk 文件。仿照下面的示例，添加文件包含：

对于 C++ 项目：

  1. ```sh
  2. LOCAL_STATIC_LIBRARIES += creator_reader
  4. # _COCOS_LIB_ANDROID_BEGIN
  5. # _COCOS_LIB_ANDROID_END
  7. $(call import-module, ./../../Classes/reader)  # import module path
  8. ```

对于 Lua 项目：

  1. ```sh
  2. # for lua
  3. include $(CLEAR_VARS)
  4. LOCAL_MODULE := creator_reader_lua
  5. LOCAL_MODULE_FILENAME := libcreatorreaderlua
  6. LOCAL_ARM_MODE := arm
  7. LOCAL_SRC_FILES := $(cpp_src) \
  8. lua-bindings/creator_reader_bindings.cpp \
  9. lua-bindings/reader/lua_creator_reader_auto.cpp \
  10. lua-bindings/reader/lua_creator_reader_manual.cpp \
  11. lua-bindings/dragonbones/lua_dragonbones_manual.cpp \
  12. lua-bindings/dragonbones/lua_dragonbones_auto.cpp
  14. LOCAL_STATIC_LIBRARIES += creator_reader_lua
  16. # _COCOS_LIB_ANDROID_BEGIN
  17. # _COCOS_LIB_ANDROID_END
  19. $(call import-module, ./../../Classes/reader)
  20. ```

导入场景的使用

上面的工作完成了，你就可以添加代码开始使用 Creator 中的场景了，使用方式非常的简单：

对于 C++ 项目，只需要一步：

  1. // mygame.cpp
  2. #include "reader/CreatorReader.h"
  4. void some_function()
  5. {
  6.     creator::CreatorReader* reader = creator::CreatorReader::createWithFilename("creator/CreatorSprites.ccreator");
  8.     // will create the needed spritesheets + design resolution
  9.     reader->setup();
  11.     // get the scene graph
  12.     Scene* scene = reader->getSceneGraph();
  14.     // ...and use it
  15.     Director::getInstance()->replaceScene(scene);
  16. }

对于 Lua 项目，需要两步：

  • 注册 reader 绑定：

    include "reader/lua-bindings/creator_reader_bindings.hpp"

    …

    register_creator_reader_manual(L);

  • 添加代码使用导出的场景：

    local creatorReader = creator.CreatorReader:createWithFilename('creator/CreatorSprites.ccreator')
    creatorReader:setup()
    local scene = creatorReader:getSceneGraph()
    cc.Director:getInstance():replaceScene(scene)

如何使用 ColliderManager

我们提供了 ColliderManager 对象用于管理碰撞，每个场景都有一个 ColliderManager 的实例，你可以使用使用这个实例，监听碰撞事件：

  1. creator::CreatorReader* reader = creator::CreatorReader::createWithFilename("creator/CreatorSprites.ccreator");
  3. // will create the needed spritesheets + design resolution
  4. reader->setup();
  6. // get the scene graph
  7. Scene* scene = reader->getSceneGraph();
  9. auto colliderManager = scene->getColliderManager();
  11. colliderManager->registerCollitionCallback([=](creator::Contract::CollisionType type, creator::Collider* collider1, creator::Collider* collider2) {
  12.         if (type == creator::Contract::CollisionType::ENTER)
  13.             colliderManager->enableDebugDraw(true);
  15.         if (type == creator::Contract::CollisionType::EXIT)
  16.             colliderManager->enableDebugDraw(false);
  18. }, "");

了解更多的 ColliderManager 特性，请查看 ColliderManager.h

原文: http://docs.cocos.com/cocos2d-x/manual/zh/editors_and_tools/creator_to_cocos2dx.html