Cocos Creator JSB [Lv.1]

Posted 2021-06-30 VermillionTear

目录

• • 摘要
  • 系列文章
  • JSB能做什么
  • 环境
  • 资源
  • 准备工作
  • 正式开始
  • • 对工程做一些修改
    • 如何互动
    • 小姐姐现身
    • 与小姐姐互动的桥梁
    • 找到小姐姐
  • 划重点

摘要

本系列文章主要实操JSB的手动绑定，在官方教程的基础上，做了适当的修改，并增加了新的内容。
文中对相关知识点进行适当展开，不做深入研究。
以实际操作做为出发点，帮助读者快速实现并且掌握JSB手动绑定。

系列文章

• Cocos Creator JSB [Lv.1] (1)
• Cocos Creator JSB [Lv.1] (2)
• Cocos Creator JSB [Lv.1] (3)

JSB能做什么

他能让js脚本与C++互相传递参数，互相调用函数。他搭建了js脚本与C++之间通讯的桥梁。

环境

• Cocos Creator 2.4.4
• Visual Studio Community 2017

资源

• 官方教程
• 本文Demo

准备工作

1. 一张小姐姐的图片。没错！你没有看错，就是一张小姐姐的图片，我们要通过JSB跟小姐姐互动起来~
2. 一张心形的图片。
3. 创建Empty工程。
4. 构建工程，
   
   模板一定要选default，因为这样才会将cocos2dx的源码拷贝到发布路径下。我们需要修改cocos2dx的部分源码，从而实现JSB绑定。
   窗口大小调整为Cocos Creator中Canvas节点设置的设计分辨率大小。
   构建完成后，在发布路径会看到jsb-default目录。
   cocos2dx源码目录为发布路径/jsb-default/frameworks/cocos2d-x/。之后为了叙述方便，提及cocos2dx源码中的文件，如不做特殊说明，均以此目录作为根目录。

正式开始

对工程做一些修改

资源管理器

层级管理器

1. 对节点的层级稍稍做了规范化，保证UI与代码分开，代码均挂载在Controller下对应的节点上。
2. 创建JSBController.js脚本，并且挂载在JSBController节点上。

之后节点相关的设置请参考工程中的设置，文中不再赘述。
场景编辑器

如何互动

这回小姐姐一下子就出现在我们面前了，可是怎么跟她互动呢？
我们模拟小姐姐在C++层面，而我们在js层面。通过JSB搭建的桥梁，实现参数的相互传递，以及函数的相互调用。

小姐姐现身

我们在C++层面创建一个小姐姐的类。
在cocos目录下创建myjsb目录，并在其中创建Goddess.h和Goddess.cpp。
Goddess.h

#ifndef __CC_GODDESS_H__
#define __CC_GODDESS_H__

#include <string>
#include "base/ccMacros.h"

namespace cocos2d { namespace myjsb {		// 命名空间，cocos2d::myjsb

    class CC_DLL Goddess 		// 单例类
    {
    public: 
        static Goddess* getInstance();		// 获取单例
        static void destroyInstance();		// 销毁单例
    protected: 
        static Goddess* _instance;		// 实例
    };

}}  // namespace cocos2d::myjsb

#endif    // __CC_GODDESS_H__

Goddess.cpp

#include "myjsb/Goddess.h"

namespace cocos2d { namespace myjsb {

    Goddess* Goddess::_instance = nullptr;    // 必须写，否则报错“无法解析的外部符号”。

	// 获取单例。
    Goddess* Goddess::getInstance()
    {
        if (_instance == nullptr)
        {
            _instance = new Goddess();
        }

        return _instance;
    }

	// 销毁单例。
    void Goddess::destroyInstance()
    {
        CC_SAFE_DELETE(_instance);
    }
    
}}  //  namespace cocos2d::myjsb

将这两个文件加入libcocos2d中，从而让它们编译进libcocos2d库中，

与小姐姐互动的桥梁

在cocos/scripting/js-bindings/auto目录下创建jsb_cocos2dx_myjsb_auto.hpp和jsb_cocos2dx_myjsb_auto.cpp。
jsb_cocos2dx_myjsb_auto.hpp

#pragma once
#include "base/ccConfig.h"

#if (CC_TARGET_PLATFORM == CC_PLATFORM_android || CC_TARGET_PLATFORM == CC_PLATFORM_ios || CC_TARGET_PLATFORM == CC_PLATFORM_MAC || CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)
#include "cocos/scripting/js-bindings/jswrapper/SeApi.h"

extern se::Object* __jsb_cocos2d_myjsb_Goddess_proto;
extern se::Class* __jsb_cocos2d_myjsb_Goddess_class;

bool js_register_cocos2d_myjsb_Goddess(se::Object* obj);
bool register_all_myjsb(se::Object* obj);
// 声明作为桥梁的函数。
// 桥梁函数的作用：
// 1、将js层面传递过来的参数从se::Value类型转换为C++的类型。
// 2、调用对应的（在js_register_xxx中绑定的）C++类的成员函数，并传递转换后的的参数。
// 3、得到返回值，并将其转换为se::Value类型。
// 4、存入s.rval中，s.rval中的值就是返回给js层面的返回值。
SE_DECLARE_FUNC(js_cocos2d_myjsb_Goddess_getInstance);

#endif //#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID || CC_TARGET_PLATFORM == CC_PLATFORM_IOS || CC_TARGET_PLATFORM == CC_PLATFORM_MAC || CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)

jsb_cocos2dx_myjsb_auto.cpp

#include "scripting/js-bindings/auto/jsb_cocos2dx_myjsb_auto.hpp"
#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID || CC_TARGET_PLATFORM == CC_PLATFORM_IOS || CC_TARGET_PLATFORM == CC_PLATFORM_MAC || CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)

#include "scripting/js-bindings/manual/jsb_conversions.hpp"
#include "scripting/js-bindings/manual/jsb_global.h"
#include "myjsb/Goddess.h"

se::Object* __jsb_cocos2d_myjsb_Goddess_proto = nullptr;
se::Class* __jsb_cocos2d_myjsb_Goddess_class = nullptr;

// 桥梁函数，jsb.Goddess.getInstance()实际会调用到这里。
static bool js_cocos2d_myjsb_Goddess_getInstance(se::State &s) {
    const auto& args = s.args();	// 传递的参数。
    size_t argc = args.size();		// 参数的数量。
    CC_UNUSED bool ok = true;		// 参数转换是否成功的标志。

    if (argc == 0) {	// 需要0个参数。
    	// 不需要参数，也就没有了参数的转换部分。
        cocos2d::myjsb::Goddess* result = cocos2d::myjsb::Goddess::getInstance();	// 获取Goddess类的实例。
        // 将Goddess类的实例转换为se::Value，并赋值到s.rval。s.rval中的值就是返回给js层面的返回值。
        ok &= native_ptr_to_seval<cocos2d::myjsb::Goddess>((cocos2d::myjsb::Goddess*)result, &s.rval());
        SE_PRECONDITION2(ok, false, "js_cocos2d_myjsb_Goddess_getInstance : Error processing arguments");
        return true;
    }

	// 传递的参数不正确时，打印的提示信息。
    SE_REPORT_ERROR("wrong number of arguments: %d, was expecting %d", (int)argc, 0);
    return false;
}
SE_BIND_FUNC(js_cocos2d_myjsb_Goddess_getInstance);

bool js_register_cocos2d_myjsb_Goddess(se::Object* obj) {
    auto cls = se::Class::create("Goddess", obj, nullptr, nullptr);

	// 这里就是定义，jsb.Goddess 要暴露出一个 getInstance 函数，
	// jsb.Goddess.getInstance() 时，在 JSB 中要调用 js_cocos2d_myjsb_Goddess_getInstance
    cls->defineStaticFunction("getInstance", _SE(js_cocos2d_myjsb_Goddess_getInstance));

    cls->install();
    // 将 se::Class::create 的 Goddess 与 C++ 实际的 Goddess 类对应起来。
    JSBClassType::registerClass<cocos2d::myjsb::Goddess>(cls);

    __jsb_cocos2d_myjsb_Goddess_proto = cls->getProto();
    __jsb_cocos2d_myjsb_Goddess_class = cls;

    se::ScriptEngine::getInstance()->clearException();
    return true;
}

bool register_all_myjsb(se::Object* obj)
{
    // Get the ns
    se::Value nsVal;
    if (!obj->getProperty("jsb", &nsVal))
    {
        se::HandleObject jsobj(se::Object::createPlainObject());
        nsVal.setObject(jsobj);
        obj->setProperty("jsb", nsVal);
    }
    se::Object* ns = nsVal.toObject();

	// 以下函数被调用之后，jsb.Goddess就可以使用了。
    js_register_cocos2d_myjsb_Goddess(ns);

    return true;
}

#endif //#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID || CC_TARGET_PLATFORM == CC_PLATFORM_IOS || CC_TARGET_PLATFORM == CC_PLATFORM_MAC || CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)

将这两个文件加入libcocos2d中，从而让它们编译进libcocos2d库中，

由于myjsb是新增加的模块，所以需要在发布路径/jsb-default/frameworks/runtime-src/Classes/jsb_module_register.cpp中增加myjsb的注册逻辑，实际上就是调用register_all_myjsb。
注意cocos/scripting/js-bindings/manual/目录下也有一个jsb_module_register.cpp，不要使用这个，
而是要使用发布路径/jsb-default/frameworks/runtime-src/Classes/目录下的。
jsb_module_register.cpp

...
#include "cocos/scripting/js-bindings/auto/jsb_cocos2dx_myjsb_auto.hpp"
...
se->addRegisterCallback(register_all_myjsb);
...

找到小姐姐

经过上述工作，我们在js层面就可以获取到小姐姐的实例了，
JSBController.js

let _goddess = null		// 小姐姐的实例。

cc.Class({
    extends: cc.Component,

    properties: {
        // TODO
    }, 

    onLoad () {
        _goddess = jsb.Goddess.getInstance()	// 获取小姐姐的实例。
    }, 
});

划重点

• 构建工程时，模板要选择default。
• JSB手动绑定的一般流程：cocos/myjsb/下定义类，cocos/scripting/js-bindings/auto/下定义桥梁，发布路径/jsb-default/frameworks/runtime-src/Classes/jsb_module_register.cpp中注册桥梁。
• 注意jsb_module_register.cpp的目录。
• 绑定单例类的写法。