原生插件创建范例

如果想在原生项目中使用第三方原生库,则可以按照本文的步骤进行。

本文需要对原生工程的编译生成有一定了解,开发者可以通过 CMake 官网 了解。 我们也准备了范例工程 GitHub 以供参考。

创建原生插件

插件开发工程 Windows 配置

示例中,我们将引入 hello_cocos.lib 作为 windows 平台上的插件,引入引擎并使其支持在 TS/JS 中使用。其他平台将使用 hello_cocos.a 为例,如果要使用其他库,请提前编译到对应平台。

  • 使用 Cocos Creator 3.6+ 创建一个工程

    启动 CocosCreator,在指定目录执行 创建空工程

    create

  • 创建并保存一个空的场景

    save scene

  • 通过 构建发布 面板导出原生工程并构建,生成 native/ 目录

    这里在 Windows 上新建构建任务。

    build windows

    执行 构建,同时生成 native/ 目录。

    通过控制台(Windows CMD 或 PowerShell 等类似软件)查看目录的内容:

    1. $ tree native/ -L 2
    2. native/
    3. └── engine
    4. ├── common
    5. └── win64
  • native/ 中创建插件存放的目录

    1. mkdir -p native/plugins/hello_cocos

添加原生插件对 Windows 的支持

  • 添加 Windows 平台相关的子目录:

    1. mkdir -p native/plugins/hello_cocos/windows/
  • 把预先编译好的依赖库 hello_cocos.lib 和头文件拷贝到对应的目录:

    1. $ tree native/plugins/
    2. native/plugins/
    3. └── hello_cocos
    4. ├── include
    5. └── hello_cocos.h
    6. └── windows
    7. └── lib
    8. ├── hello_cocos.lib
    9. └── hello_cocosd.lib
  • 添加文件 hello_cocos_glue.cppCMakeLists.txthello_cocos_glue-config.cmake

    1. mkdir native/plugins/hello_cocos/src
    2. touch native/plugins/hello_cocos/src/hello_cocos_glue.cpp
    3. touch native/plugins/hello_cocos/src/CMakeLists.txt
    4. touch native/plugins/hello_cocos/windows/hello_cocos_glue-config.cmake

    当前插件目录的内容:

    1. $ tree native/plugins/hello_cocos/
    2. native/plugins/hello_cocos/
    3. ├── include
    4. └── hello_cocos.h
    5. ├── src
    6. ├── CMakeLists.txt
    7. └── hello_cocos_glue.cpp
    8. └── windows
    9. ├── hello_cocos_glue-config.cmake
    10. └── lib
    11. ├── hello_cocos.lib
    12. └── hello_cocosd.lib
  • 编辑 hello_cocos_glue-config.cmake 中添加声明 hello_cocos.lib 和导入的内容:

    1. set(_hello_cocos_GLUE_DIR ${CMAKE_CURRENT_LIST_DIR})
    2. add_library(hello_cocos STATIC IMPORTED GLOBAL)
    3. set_target_properties(hello_cocos PROPERTIES
    4. IMPORTED_LOCATION ${_hello_cocos_GLUE_DIR}/lib/hello_cocos.lib
    5. IMPORTED_LOCATION_DEBUG ${_hello_cocos_GLUE_DIR}/lib/hello_cocosd.lib
    6. )
    7. include(${_hello_cocos_GLUE_DIR}/../src/CMakeLists.txt)
  • 编辑 native/plugins/hello_cocos/src/CMakeLists.txt,并添加如下内容:

    1. set(_hello_cocos_GLUE_SRC_DIR ${CMAKE_CURRENT_LIST_DIR})
    2. add_library(hello_cocos_glue ${_hello_cocos_GLUE_SRC_DIR}/hello_cocos_glue.cpp)
    3. target_link_libraries(hello_cocos_glue
    4. hello_cocos
    5. ${ENGINE_NAME} # cocos_engine
    6. )
    7. target_include_directories(hello_cocos_glue PRIVATE
    8. ${_hello_cocos_GLUE_SRC_DIR}/../include
    9. )
  • 在目录 native/plugins/hello_cocos/ 中创建配置文件 cc_plugin.json

    1. {
    2. "name":"hello-cocos-demo",
    3. "version":"0.1.0",
    4. "author":"cocosdemo",
    5. "engine-version":">=3.6.0",
    6. "modules":[
    7. {
    8. "target":"hello_cocos_glue"
    9. }
    10. ],
    11. "platforms":["windows"]
    12. }

    现在原生插件所需的文件已经创建,但还不能编译。文件 hello_cocos_glue.cpp 需要注册插件的初始化函数。

    再次执行 构建 触发 Visual Studio 工程的更新。

  • 使用 Visual Studio 打开目录 build/windows/proj/ 中的 sln 文件

    • 自动生成一个 plugin_registry 目标,用于初始化所有启用的插件:

      Solution Explorer

    • 直接运行目标会导致类似的报错:

      link error

  • 编辑 hello_cocos_glue.cpp

    1. #include "hello_cocos.h"
    2. #include "bindings/sebind/sebind.h"
    3. #include "plugins/bus/EventBus.h"
    4. #include "plugins/Plugins.h"
    5. // export c++ methods to JS
    6. static bool register_demo(se::Object *ns) {
    7. sebind::class_<Demo> klass("Demo");
    8. klass.constructor<const char *>()
    9. .function("hello", &Demo::hello);
    10. klass.install(ns);
    11. return true;
    12. }
    13. void add_demo_class() {
    14. using namespace cc::plugin;
    15. static Listener listener(BusType::SCRIPT_ENGINE);
    16. listener.receive([](ScriptEngineEvent event) {
    17. if (event == ScriptEngineEvent::POST_INIT) {
    18. se::ScriptEngine::getInstance()->addRegisterCallback(register_demo);
    19. }
    20. });
    21. }
    22. /**
    23. * Regist a new cc plugin entry function
    24. * first param: should match the name in cc_plugin.json
    25. * second param: callback when engine initialized
    26. */
    27. CC_PLUGIN_ENTRY(hello_cocos_glue, add_demo_class);

    再次编译后不在报错,此时可正确的编译和运行工程。

  • 运行目标工程:

    empty window

  • 为了验证我们的原生插件是否已经加载,我们需要连接 devtools:

    Output 面板,获取调试连接。

    debug url

    打开浏览器,输入上图中的调试链接地址,在控制台(Console)中键入下面的代码:

    1. new Demo("World").hello("Cocos")

    devtools

    根据输出可以确认,我们的接口已经成功通过原生插件导出。

添加原生插件对 Android 的支持

  • 添加 Android 的构建任务

  • 创建 Android 相关的原生插件目录

    1. mkdir native/plugins/hello_cocos/android
  • 将预先编译好的依赖库和头文件拷贝到对应的目录,创建 hello_cocos_glue-config.cmake

    Android 目录的状态:

    1. $ tree native/plugins/hello_cocos/android/
    2. native/plugins/hello_cocos/android/
    3. ├── hello_cocos_glue-config.cmake
    4. ├── arm64-v8a
    5. └── lib
    6. └── libhello_cocos.a
    7. └── armeabi-v7a
    8. └── lib
    9. └── libhello_cocos.a
  • 编辑 hello_cocos_glue-config.cmake

    1. set(_hello_cocos_GLUE_DIR ${CMAKE_CURRENT_LIST_DIR})
    2. add_library(hello_cocos STATIC IMPORTED GLOBAL)
    3. set_target_properties(hello_cocos PROPERTIES
    4. IMPORTED_LOCATION ${_hello_cocos_GLUE_DIR}/${ANDROID_ABI}/lib/libhello_cocos.a
    5. )
    6. include(${_hello_cocos_GLUE_DIR}/../src/CMakeLists.txt)
  • 更新 cc_plugin.json,添加 androidplatforms 字段

    1. {
    2. "name":"hello-cocos-demo",
    3. "version":"0.1.0",
    4. "author":"cocosdemo",
    5. "engine-version":">=3.6.0",
    6. "modules":[
    7. {
    8. "target":"hello_cocos_glue"
    9. }
    10. ],
    11. "platforms":["windows", "android"]
    12. }
  • 新增 Android 的构建任务

    Android build

构建后可使用 Android Studio 打开工程,并使用 devtool 调试验证。

添加原生插件对 iOS 的支持

  • 添加 iOS 的构建任务

  • 创建 iOS 相关的原生插件目录

    1. mkdir -p native/plugins/hello_cocos/ios/lib
  • 将预先编译好的依赖库和头文件拷贝到对应的目录,创建 hello_cocos_glue-config.cmake,如根据下列示例编辑:

    ```cmake set(_hello_cocos_GLUE_DIR ${CMAKE_CURRENT_LIST_DIR})

  1. add_library(hello_cocos STATIC IMPORTED GLOBAL)
  2. set_target_properties(hello_cocos PROPERTIES
  3. IMPORTED_LOCATION ${_hello_cocos_GLUE_DIR}/lib/libhello_cocos.a
  4. )
  5. include(${_hello_cocos_GLUE_DIR}/../src/CMakeLists.txt)
  6. ```

添加原生插件对 MacOS 的支持

  • 添加 MacOS 的构建任务

  • 创建 MacOS 相关的原生插件目录

    1. mkdir -p native/plugins/hello_cocos/mac/lib
  • 将预先编译好的依赖库和头文件拷贝到对应的目录,创建hello_cocos_glue-config.cmake

    1. set(_hello_cocos_GLUE_DIR ${CMAKE_CURRENT_LIST_DIR})
    2. add_library(hello_cocos STATIC IMPORTED GLOBAL)
    3. set_target_properties(hello_cocos PROPERTIES
    4. IMPORTED_LOCATION ${_hello_cocos_GLUE_DIR}/lib/libhello_cocos.a
    5. )
    6. include(${_hello_cocos_GLUE_DIR}/../src/CMakeLists.txt)
  • 更新 cc_plugin.json,添加 iOSmacplatforms 字段

    1. {
    2. "name":"hello-cocos-demo",
    3. "version":"0.1.0",
    4. "author":"cocosdemo",
    5. "engine-version":">=3.6.0",
    6. "modules":[
    7. {
    8. "target":"hello_cocos_glue"
    9. }
    10. ],
    11. "platforms":["windows", "android", "iOS", "mac"]
    12. }

至此,一个支持 Android、Windows、MacOS 以及 iOS 的原生插件就开发完成了。

原生插件目录的最终内容如下:

  1. $ tree native/plugins/hello_cocos/
  2. native/plugins/hello_cocos
  3. ├── cc_plugin.json
  4. ├── include
  5. └── hello_cocos.h
  6. ├── src
  7. ├── CMakeLists.txt
  8. └── hello_cocos_glue.cpp
  9. ├── android
  10. ├── hello_cocos_glue-config.cmake
  11. ├── arm64-v8a
  12. └── lib
  13. └── libhello_cocos.a
  14. └── armeabi-v7a
  15. └── lib
  16. └── libhello_cocos.a
  17. ├── ios
  18. ├── hello_cocos_glue-config.cmake
  19. └── lib
  20. └── libhello_cocos.a
  21. ├── mac
  22. ├── hello_cocos_glue-config.cmake
  23. └── lib
  24. └── libhello_cocos.a
  25. └── windows
  26. ├── hello_cocos_glue-config.cmake
  27. └── lib
  28. ├── hello_cocos.lib
  29. └── hello_cocosd.lib

下一步即可通过 构建发布 面板进行发布。

使用编辑器扩展机制发布

根据 扩展编辑器 创建编辑器扩展,在 打包扩展 前把目录 native/plugins/hello_cocos 一并打包到扩展中,再发布。开发者在下载扩展后,原生插件就会启用。

关于升级:目前编辑器扩展系统不支持升级检测,用户需要到 Cocos 商城手动更新。