- Cocos Creator架构
Cocos Creator 拥有两套引擎内核,C++ 内核 和 TypeScript 内核。C++ 内核用于原生平台,TypeScript 内核用于 Web 和小游戏平台。 在引擎内核之上,是用 TypeScript 编写的引擎框架层,用以统一两套内核的差异,让开发更便捷。
- engine的图像与Android的Surface对接
安卓平台下是从一个标准的activity启动,然后加载一个NativeActivity ,NativeActivity是纯c++语言实现,调用入口为全局函数android_main,里面循环执行渲染任务
然后c++端获取ANativeWindow,然后从ANativeWindow创建surface,然后使用EGL接口创建渲染表面,接着创建渲染环境
调用堆栈:
创建device,准备渲染环境:
cc::gfx::GLES3Device::doInit(const cc::gfx::DeviceInfo &) GLES3Device.cpp:79
cc::gfx::Device::initialize(const cc::gfx::DeviceInfo &) GFXDevice.cpp:67
cc::gfx::DeviceAgent::doInit(const cc::gfx::DeviceInfo &) DeviceAgent.cpp:68
cc::gfx::Device::initialize(const cc::gfx::DeviceInfo &) GFXDevice.cpp:67
cc::gfx::DeviceValidator::doInit(const cc::gfx::DeviceInfo &) DeviceValidator.cpp:76
cc::gfx::Device::initialize(const cc::gfx::DeviceInfo &) GFXDevice.cpp:67
cc::gfx::DeviceManager::tryCreate<…>(const cc::gfx::DeviceInfo &, cc::gfx::Device **) GFXDeviceManager.h:162
cc::gfx::DeviceManager::create(const cc::gfx::DeviceInfo &) GFXDeviceManager.h:105
cc::gfx::DeviceManager::create() GFXDeviceManager.h:72
cc::Engine::init() Engine.cpp:123
cc::CocosApplication::init() CocosApplication.cpp:56
cc::BaseGame::init() BaseGame.cpp:73
Game::init() Game.cpp:55
cocos_main(int, const char **) Game.cpp:65
cc::GameInputProxy::handleAppCommand(int) AndroidPlatform.cpp:533
cc::handleCmdProxy(android_app *, int) AndroidPlatform.cpp:704
process_cmd android_native_app_glue.c:177
cc::AndroidPlatform::loop() AndroidPlatform.cpp:827
cc::AndroidPlatform::run(int, const char **) AndroidPlatform.cpp:808
android_main(android_app *) JniCocosEntry.cpp:38
android_app_entry android_native_app_glue.c:210
__pthread_start(void*) 0x00000000e84c5828
__start_thread 0x00000000e847c5ce
V8引擎回调:添加一个任务到消息队列,初始化Swapchain:
cc::gfx::SwapchainAgent::doInit(const cc::gfx::SwapchainInfo &) SwapchainAgent.cpp:50
cc::gfx::Swapchain::initialize(const cc::gfx::SwapchainInfo &) GFXSwapchain.cpp:45
cc::gfx::SwapchainValidator::doInit(const cc::gfx::SwapchainInfo &) SwapchainValidator.cpp:51
cc::gfx::Swapchain::initialize(const cc::gfx::SwapchainInfo &) GFXSwapchain.cpp:45
cc::gfx::Device::createSwapchain(const cc::gfx::SwapchainInfo &) GFXDevice.h:234
cc::Root::createRenderWindowFromSystemWindow(cc::ISystemWindow *) Root.cpp:119
cc::Root::initialize(cc::gfx::Swapchain *) Root.cpp:82
js_cc_Root__initialize(se::State &) jsb_scene_auto.cpp:4918
jsbFunctionWrapper(const v8::FunctionCallbackInfo<…> &, bool (*)(se::State &), const char *) HelperMacros.cpp:99
js_cc_Root__initializeRegistry(const v8::FunctionCallbackInfo<…> &) jsb_scene_auto.cpp:4923
v8::internal::FunctionCallbackArguments::Call(v8::internal::CallHandlerInfo) 0x00000000bd00ba24
执行消息队列初始化Swapchain任务:初始化上屏surface
cc::gfx::GLES3Swapchain::doInit(const cc::gfx::SwapchainInfo &) GLES3Swapchain.cpp:117
cc::gfx::Swapchain::initialize(const cc::gfx::SwapchainInfo &) GFXSwapchain.cpp:45
SwapchainInit::execute() SwapchainAgent.cpp:50
cc::MessageQueue::executeMessages() MessageQueue.cpp:249
cc::MessageQueue::flushMessages() MessageQueue.cpp:236
cc::MessageQueue::consumerThreadLoop() MessageQueue.cpp:277
decltype(*std::__ndk1::forward<cc::MessageQueue*>(fp0).*fp()) std::__ndk1::__invoke<void (cc::MessageQueue::*)() noexcept, cc::MessageQueue*, void>(void (cc::MessageQueue::*&&)() noexcept, cc::MessageQueue*&&) type_traits:3815
void std::__ndk1::__thread_execute<std::__ndk1::unique_ptr<std::__ndk1::__thread_struct, std::__ndk1::default_delete<std::__ndk1::__thread_struct>>, void (cc::MessageQueue::*)() noexcept, cc::MessageQueue*, 2u>(std::__ndk1::tuple<std::__ndk1::unique_ptr<std::__ndk1::__thread_struct, std::__ndk1::default_delete<std::__ndk1::__thread_struct>>, void (cc::MessageQueue::*)() noexcept, cc::MessageQueue*>&, std::__ndk1::__tuple_indices<2u>) thread:273
void* std::__ndk1::__thread_proxy<std::__ndk1::tuple<std::__ndk1::unique_ptr<std::__ndk1::__thread_struct, std::__ndk1::default_delete<std::__ndk1::__thread_struct>>, void (cc::MessageQueue::*)() noexcept, cc::MessageQueue*>>(void*) thread:284
__pthread_start(void*) 0x00000000e84c5828
__start_thread 0x00000000e847c5ce
3. V8简介
3.1 V8的API定义了几个基本概念:句柄(handle)、作用域(scope)、上下文环境(Context)、模板(Templates)。
- 上下文环境Context就是脚本的运行环境,JavaScript的变量、函数等都存在于上下文环境Context中。Context可以嵌套,即当前函数有一个Context,调用其它函数时如果又有一个Context,则在被调用的函数中javascript是以最近的Context为准的,当退出这个函数时,又恢复到了原来的Context。
- 句柄(handle)就是一个指向V8对象的指针,有点像C++的智能指针。所有的v8对象必须使用句柄来操作。没有句柄指向的V8对象,很快会被垃圾回收器回收了。
- 作用域(scope)是句柄的容器,一个作用域(scope)可以有很多句柄(handle)。当离开一个作用域(scope)时,所有在作用域(scope)里的句柄(handle)都会被释放了。
- 模板(Templates)分为函数模板和对象模板,是V8对JavaScript的函数和对象的封装。方便C++语言操作JavaScript的函数和对象。
V8 API定义了一组类或者模板,用来与JavaScript的语言概念一一对应。比如:
V8的 Function模板与JavaScript的函数对应
V8的Object类与JavaScript的对象对应
V8的String类与JavaScript的字符对应
V8的Script类与JavaScript的脚本文本对应,它可以编译并执行一段脚本
3.2 c++和JavaScript交互 - c++调用JavaScript
在C++中访问Javascript脚本中的内容,首先要调用Context::GetCurrent()->Global()获取到Global全局对象,再通过Global全局对象的Get函数来提取Javascript的全局变量、全局函数、全局复杂对象。 - JavaScript调用c++
使用V8,在Javascript脚本中想要访问C++中的内容,必须先将C++的变量、函数、类注入到Javacsript中。注入时,首先要调用Context::GetCurrent()->Global()获取到Global对象,再通过Global对象的Set函数来注入全局变量、全局函数、类对象。
4. Cocos引擎内部Cpp和js交互方式
4.1 Jsb绑定机制,实现为上一小结JavaScript调用c++的方式
手动绑定的c++接口位置:engine\native\cocos\bindings\manual
自动绑定:工程构建时通过Cmake 脚本engine\native\cmake\predefine.cmake批量 生成jsb2.0可绑定得c++方法到:工程目录\build\android\proj\build\Debug\xxxxxx\armeabi-v7a\generated\cocos\bindings\auto,swig工具配置文件目录: engine\native\tools\swig-config
基于反射的旧方式:jsb.reflection.callStaticMethod,支持从 ts 端直接调用 Native 端的接口,性能较jsb慢
4.2 共享内存:共享 CPP 的内存到 JS ,实现类:bindings::NativeMemorySharedToScriptActor。
5. Cocos启用V8引擎
V8引擎启动堆栈:
se::ScriptEngine::start() ScriptEngine.cpp:772
cc::CocosApplication::init() CocosApplication.cpp:95
cc::BaseGame::init() BaseGame.cpp:73
Game::init() Game.cpp:55
cocos_main(int, const char ) Game.cpp:65
cc::GameInputProxy::handleAppCommand(int) AndroidPlatform.cpp:533
cc::handleCmdProxy(android_app *, int) AndroidPlatform.cpp:704
process_cmd android_native_app_glue.c:177
cc::AndroidPlatform::loop() AndroidPlatform.cpp:827
cc::AndroidPlatform::run(int, const char ) AndroidPlatform.cpp:808
android_main(android_app *) JniCocosEntry.cpp:38
se引擎调用main.js入口文件堆栈
se::ScriptEngine::evalString(const char *, unsigned int, se::Value *, const char *) ScriptEngine.cpp:880
setCanvasCallback(se::Object *) Engine.cpp:97
se::ScriptEngine::callRegisteredCallback() ScriptEngine.cpp:758
se::ScriptEngine::start() ScriptEngine.cpp:800
cc::CocosApplication::init() CocosApplication.cpp:95
cc::BaseGame::init() BaseGame.cpp:73
Game::init() Game.cpp:55
cocos_main(int, const char ) Game.cpp:65
cc::GameInputProxy::handleAppCommand(int) AndroidPlatform.cpp:533
cc::handleCmdProxy(android_app *, int) AndroidPlatform.cpp:704
process_cmd android_native_app_glue.c:177
cc::AndroidPlatform::loop() AndroidPlatform.cpp:827
cc::AndroidPlatform::run(int, const char ) AndroidPlatform.cpp:808
android_main(android_app *) JniCocosEntry.cpp:38
android_app_entry android_native_app_glue.c:210
__pthread_start(void*) 0x00000000e84c5828
__start_thread 0x00000000e847c5ce
V8引擎调用c++,创建渲染表面:
cc::gfx::SwapchainAgent::doInit(const cc::gfx::SwapchainInfo &) SwapchainAgent.cpp:50
cc::gfx::Swapchain::initialize(const cc::gfx::SwapchainInfo &) GFXSwapchain.cpp:45
cc::gfx::SwapchainValidator::doInit(const cc::gfx::SwapchainInfo &) SwapchainValidator.cpp:51
cc::gfx::Swapchain::initialize(const cc::gfx::SwapchainInfo &) GFXSwapchain.cpp:45
cc::gfx::Device::createSwapchain(const cc::gfx::SwapchainInfo &) GFXDevice.h:234
cc::Root::createRenderWindowFromSystemWindow(cc::ISystemWindow *) Root.cpp:119
cc::Root::initialize(cc::gfx::Swapchain *) Root.cpp:82
js_cc_Root__initialize(se::State &) jsb_scene_auto.cpp:4918
jsbFunctionWrapper(const v8::FunctionCallbackInfo<…> &, bool (*)(se::State &), const char *) HelperMacros.cpp:99
js_cc_Root__initializeRegistry(const v8::FunctionCallbackInfo<…> &) jsb_scene_auto.cpp:4923
v8::internal::FunctionCallbackArguments::Call(v8::internal::CallHandlerInfo) 0x00000000bd00ba24
6. Native引擎流程图
7. 工程加载
7.1 构建配置声明文件:
resources\app.asar.unpacked\builtin\builder@types\public\build-result.d.ts
7.2 模板&入口文件:
engine\platforms\native\builtin*.js 编译为-> jsb-adapter/web-adapter.js //web接口封装
engine\platforms\native\engine*.js 编译为-> jsb-adapter/engine-adapter.js //引擎接口封装
engine\templates\native\index.ejs -> main.js
engine\templates\launcher\application.ejs -> application.js
7.3 工程启动流程图
有空补
8. Cocos Creator引擎流程图
9. Cocos 渲染管线
Cocos 渲染管线有内置的两种渲染管线:前向渲染管线、延迟渲染管线,和可自定义的渲染管线:
9.1 前向渲染管线
引擎默认使用 前向渲染管线,前向渲染管线的执行流程如下图所示:
前向渲染主要包括 ShadowFlow 和 ForwardFlow 两个阶段:
- ShadowFlow 中包含一个 ShadowStage 会预先对场景中需要投射阴影的物体进行阴影贴图的绘制。
- ForwardFlow 包含一个 ForwardStage,会对场景中所有物体按照 非透明 -> 光照 -> 透明 -> UI 的顺序依次进行绘制。在计算光照时,每个物体都会与所有光照进行计算确定是否照射到该物体,照射到该物体的光照将会执行绘制并进行光照计算,目前场景中只支持一个平行光,可接受的最大光照数量为 16。
9.2 延迟渲染管线
目前引擎提供了试验版本的内置 延迟渲染管线,对于光照数量比较多的项目可以使用 延迟渲染管线 来缓解光照计算的压力。延迟管线的执行流程如下图所示:
内置的延迟渲染管线主要包括 ShadowFlow 和 MainFlow 两个过程:
- ShadowFlow 与前向渲染一致,用于预先进行阴影贴图的绘制。
- MainFlow 包含了 GBufferStage、LightingStage、BloomStage 和 PostProcessStage 四个阶段:
- GbufferStage 会对场景中的非透明物体进行绘制;
- 然后 LightingStage 会对输出到 GBuffer 中的非透明物体信息进行基于屏幕空间的光照计算,再绘制半透明物体。如果有非透明物体并且设备支持 ComputeShader,还会进行 SSPR 的资源收集与绘制;
- 若还开启了 Bloom 效果,BloomStage 会对已经经过 LightingStage 处理后的图像进行 Bloom 后处理;
- 最后 PostProcessStage 会把 BloomStage/LightingStage 输出的全屏图像绘制到主屏幕中,再进行 UI 的绘制。
9.3 自定义渲染管线
自定义渲染管线以数据流(Dataflow)的形式概括了渲染的整个流程,用渲染图(RenderGraph)描述。
渲染图由不同的渲染节点组成,比如渲染通道(RenderPass),计算通道(ComputePass)等。每个渲染通道有数据输入与输出,比如渲染目标(RenderTarget)、深度模板(DepthStencil)、贴图(Texture)等。这些输入与输出会在计算节点间构成链接关系,形成数据流。
在渲染通道、计算通道节点下,可以有渲染队列(RenderQueue)子节点,用于控制渲染的顺序。渲染队列节点下,可以有渲染内容(RenderContent)子节点,用于控制渲染的内容。
渲染内容 可以是 场景、屏幕 矩形,也可以是计算任务的 分发(Dispatch),不同的通道支持不同的渲染内容。
自定义渲染管线 的【渲染通道、渲染队列、渲染内容】构成一个森林:
自定义渲染管线的【渲染通道、渲染资源】构成一个有向无环图(DAG):
9.4 :前向渲染pipeline流程
有空补
10. Cocos原生引擎调试方法
10.1 原生平台 JavaScript 调试
Android 真机调试
如果游戏只有在真机上才能运行,那就必须用真机对打包后的游戏进行调试。调试步骤如下:
- 确保 Android/iOS 设备与 Windows 或者 Mac 在同一个局域网中。注意在调试过程中请勿开启代理,否则可能导致无法正常调试。
- 在 Creator 的 构建发布 面板选择 Android/iOS 平台、Debug 模式,构建编译运行工程(iOS 平台建议通过 Xcode 连接真机进行编译运行)。
- 用 Chrome 浏览器打开地址:devtools://devtools/bundled/js_app.html?v8only=true&ws=设备的本地 IP:6086/00010002-0003-4004-8005-000600070008 即可进行调试。公司电脑因为网络问题,6086这个端口号用不了,可通过运行apk从logcat查看分配的端口号,Android Studio logcat信息如下:
adb shell ip -4 -br addr
查询手机IP地址
Windows 平台及 Mac 平台调试
在 Windows 平台及 Mac 平台下调试游戏,步骤与真机调试类似,将工程用 IDE 编译运行之后,此时便可进行调试。步骤如下:
- 用 IDE 将打包好的工程编译并运行(Windows 平台请使用 Visual Studio,Mac 平台请使用 Xcode)
- 在游戏运行时打开 Chrome 浏览器,输入地址:devtools://devtools/bundled/js_app.html?v8only=true&ws=127.0.0.1:6086/00010002-0003-4004-8005-000600070008 即可进行打断点调试
10.2 c++中查看当前的 JS 调用栈
A. c++ 源码中使用se引擎获取js堆栈接口
通过在 C++ 中断点我们能很便捷地看到 C++ 的调用栈,但并不能同时看到 JS 的调用栈,这个割裂的过程常常会破坏调试的体验
源码中使用ScriptEngine引擎的这个接口,可以获取当前js调用栈:
se::ScriptEngine::getInstance()->getCurrentStackTrace()
或 :
utils::getStacktraceJS()
B. Android 平台下使用LLDB工具注入命令(慎用,自测总是闪退,报解析错误):
断点后LLDB终端输入如下命令:
po se::ScriptEngine::getInstance()->getCurrentStackTrace()