关于cocos:Cocos-Creator-源码解读引擎启动与主循环

131次阅读

共计 11770 个字符，预计需要花费 30 分钟才能阅读完成。

前言

本文基于 Cocos Creator 2.4.3 撰写。

Ready?

不晓得你有没有想过，如果把游戏世界比作一辆汽车，那么这辆“汽车”是如何启动，又是如何继续运行的呢？

如题，本文的内容次要为 Cocos Creator 引擎的 启动流程 和主循环。

而在主循环的内容中还会波及到：组件的生命周期和计时器、缓动系统、动画零碎和物理零碎等 …

本文会在宏观上为大家解读主循环与各个模块之间的关系，对于各个模块也会简略介绍，但不会深刻到模块的具体实现。

毕竟如果要把每个模块都“摸”一遍，那这篇文章怕是写不完了。

Let’s Go!

心愿大家看完这篇文章之后可能更加理解 Cocos Creator 引擎。

同时也心愿本文能够起到「领进门」的作用，大家一起加油呀~

另外《源码解读》系列（应该）会继续更新，如果你想要皮皮来解读解读引擎的某个模块，也欢送留言通知我，我 … 我思考下哈哈哈~

注释

启动流程

index.html

对于 Web 平台来说 index.html 文件就是程序的终点。

在默认的 index.html 文件中，定义了游戏启动页面的布局，加载了 main.js 文件，并且还有一段立刻执行的代码。

📝 这里截取 main.js 文件中一部分比拟要害的代码：

// 加载引擎脚本
loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.ec334.js', function () {
  // 是否开启了物理零碎？if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
    // 加载物理零碎脚本并启动引擎
    loadScript(debug ? 'physics.js' : 'physics-min.js', window.boot);
  } else {
    // 启动引擎
    window.boot();}
});

下面这段代码次要用于加载引擎脚本和物理零碎脚本，脚本加载实现之后就会调用 main.js 中定义的 window.boot 函数。

📱 原生平台

对于原生平台，会在 {我的项目目录}build\jsb-link\frameworks\runtime-src\Classes\AppDelegate.cpp 文件的 applicationDidFinishLaunching 函数中加载 main.js 文件。

——来自渡鸦大佬的补充

📦 代码压缩

脚本文件名中带有 -min 字样（如 index.min.js）个别代表着这个文件内的代码是被压缩过的。

压缩代码能够节俭代码文件所占用的空间，放慢文件加载速度，缩小流量耗费，但同时也让代码失去了可浏览性，不利于调试。

所以开启调试模式后会间接应用未通过压缩的代码文件，便于开发调试和定位谬误。

main.js

boot

对于不同平台 main.js 的内容也有些许差别，这里咱们疏忽差别局部，只关注其中要害的独特行为。

对于 main.js 文件的内容基本上就是定义了 window.boot 函数。

💡 对于非 Web 平台，会在定义完之后间接就调用 window.boot 函数，所以 main.js 就是他们的终点。

而 window.boot 函数外部有以下要害行为：

  1. 定义 onStart 函数：次要用于加载启动场景
  2. cc.assetManager.init(...)：初始化 AssetManager
  3. cc.assetManager.loadScript(...)：加载 src 目录下的插件脚本
  4. cc.assetManager.loadBundle(...)：加载我的项目中的 bundle
  5. cc.game.run(...)：启动引擎

这部分的代码就不贴了，小伙伴们能够看看本人的我的项目构建后的 main.js 文件。

cc.game

cc.game 对象是 cc.Game 类的一个实例，cc.game 蕴含了游戏主体信息并负责驱动游戏。

说人话，cc.game 对象就是治理引擎生命周期的模块，启动、暂停和重启等操作都须要用到它。

[源码] CCGame.js: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js

run

cc.game.run 函数内指定了引擎配置和 onStart 回调并触发 cc.game.prepare() 函数。

📝 源码节选：

函数：cc.game.run

run: function (config, onStart) {
  // 指定引擎配置
  this._initConfig(config);
  this.onStart = onStart;
  this.prepare(game.onStart && game.onStart.bind(game));
}

[源码] CCGame.js#L491: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js#L491

prepare

cc.game.prepare 函数内次要在我的项目预览时疾速编译我的项目代码并调用 _prepareFinished 函数。

📝 源码节选：

函数：cc.game.prepare

prepare(cb) {
  // 曾经筹备过则跳过
  if (this._prepared) {if (cb) cb();
    return;
  }
  // 加载预览我的项目代码
  this._loadPreviewScript(() => {this._prepareFinished(cb);
  });
}

[源码] CCGame.js#L472: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js#L472

🛠 疾速编译

对于疾速编译的细节，能够在我的项目预览时关上浏览器的开发者工具，在 Sources 栏中搜寻（Ctrl + P）__quick_compile_project__ 即可找到 __quick_compile_project__.js 文件。

_prepareFinished

cc.game._prepareFinished() 函数的作用次要为初始化引擎、设置帧率计时器和初始化内建资源（effect 资源和 material 资源）。

当内建资源加载实现后就会调用 cc.game._runMainLoop() 启动引擎主循环。

📝 源码节选：

函数：cc.game._prepareFinished

_prepareFinished(cb) {
  // 初始化引擎
  this._initEngine();
  // 设置帧率计时器
  this._setAnimFrame();
  // 初始化内建资源（加载内置的 effect 和 material 资源）cc.assetManager.builtins.init(() => {
    // 打印引擎版本到控制台
    console.log('Cocos Creator v' + cc.ENGINE_VERSION);
    this._prepared = true;
    // 启动 mainLoop
    this._runMainLoop();
    // 发射‘game_inited’事件（代表引擎已初始化实现）this.emit(this.EVENT_GAME_INITED);
    // 调用 main.js 中定义的 onStart 函数
    if (cb) cb();});
}

[源码] CCGame.js#L387: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js#L387

_setAnimFrame

💡 对于 _prepareFinished 函数内调用的 _setAnimFrame 函数这里必须提一下。

cc.game._setAnimFrame 函数外部对不同的游戏帧率做了适配。

另外还对 window.requestAnimationFrame 函数做了兼容性封装，用于兼容不同的浏览器环境，具体的咱们上面再说。

这里就不贴 _setAnimFrame 函数的代码了，有须要的小伙伴可自行查阅。

[源码] CCGame.js#L564: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js#L564

_runMainLoop

cc.game._runMainLoop 函数的名字获得很简略间接，摊牌了它就是用来运行 mainLoop 函数的。

📝 源码节选：

函数：cc.game._runMainLoop

_runMainLoop: function () {if (CC_EDITOR) return;
  if (!this._prepared) return;
  // 定义局部变量
  var self = this, callback, config = self.config,
    director = cc.director,
    skip = true, frameRate = config.frameRate;
  // 展现或暗藏性能统计
  debug.setDisplayStats(config.showFPS);
  // 设置帧回调
  callback = function (now) {if (!self._paused) {
      // 循环调用回调
      self._intervalId = window.requestAnimFrame(callback);
      if (!CC_JSB && !CC_RUNTIME && frameRate === 30) {if (skip = !skip) return;
      }
      // 调用 mainLoop
      director.mainLoop(now);
    }
  };
  // 将在下一帧开始循环回调
  self._intervalId = window.requestAnimFrame(callback);
  self._paused = false;
}

[源码] CCGame.js#L612: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js#L612

通过以上代码咱们能够得悉，_runMainLoop 函数次要通过 window.requestAnimFrame 函数来实现循环调用 mainLoop 函数。

requestAnimFrame

window.requestAnimFrame 函数就是咱们下面说到的 _setAnimFrame 函数外部对于 window.requestAnimationFrame 函数的兼容性封装。

对前端不太熟悉的小伙伴可能会有疑难，window.requestAnimationFrame 又是啥，是用来干嘛的，又是如何运行的？

requestAnimationFrame

简略来说，window.requestAnimationFrame 函数用于向浏览器申请进行一次重绘（repaint），并在重绘之前调用指定的回调函数。

window.requestAnimationFrame 函数接管一个回调作为参数并返回一个整数作为惟一标识，浏览器将会在下一个重绘之前执行这个回调；并且执行回调时会传入一个参数，参数的值与 performance.now() 返回的值相等。

🕒 Performance.now()

performance.now() 的返回值能够简略了解为浏览器窗口的运行时长，即从关上窗口到以后时刻的时间差。

[MDN] Performance.now(): https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/now

回调函数的执行次数通常与浏览器屏幕刷新次数相匹配，也就是说，对于刷新率为 60Hz 的显示器，浏览器会在一秒内执行 60 次回调函数。

对于 window.requestAnimationFrame 函数的阐明到此为止，如果想要理解更多信息请自行检索。

[MDN] window.requestAnimationFrame: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

小结

🎨 画一张图来对引擎的启动流程做一个小小的总结叭~

主循环

🎯 经验了一番挫折后，终于来到了最期待的引擎主循环局部，话不多说，咱们持续！

cc.director

cc.director 对象是导演类 cc.Director 的实例，引擎通次要过 cc.director 对象来治理游戏的逻辑流程。

[源码] CCDirector.js: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCDirector.js

mainLoop

cc.director.mainLoop 函数可能是引擎中最要害的逻辑之一了，蕴含的内容很多也很要害。

当初让咱们进入 mainLoop 函数外部来一探到底吧！

📝 源码节选：

函数：cc.Director.prototype.mainLoop

这里我选择性剔除掉了函数中的一些代码，还加了点正文。

mainLoop: function(now) {
  // 计算“全局”增量工夫（DeltaTime）// 也就是间隔上一次调用 mainLoop 的工夫距离
  this.calculateDeltaTime(now);
  // 游戏没有暂停则进行更新
  if (!this._paused) {
    // 发射 'director_before_update' 事件
    this.emit(cc.Director.EVENT_BEFORE_UPDATE);
    // 调用新增的组件（已启用）的 start 函数
    this._compScheduler.startPhase();
    // 调用所有组件（已启用）的 update 函数
    this._compScheduler.updatePhase(this._deltaTime);
    // 更新调度器（cc.Scheduler）this._scheduler.update(this._deltaTime);
    // 调用所有组件（已启用）的 lateUpdate 函数
    this._compScheduler.lateUpdatePhase(this._deltaTime);
    // 发射 'director_after_update' 事件
    this.emit(cc.Director.EVENT_AFTER_UPDATE);
    // 销毁最近被移除的实体（节点）Obj._deferredDestroy();}
  // 发射 'director_before_draw' 事件
  this.emit(cc.Director.EVENT_BEFORE_DRAW);
  // 渲染游戏场景
  renderer.render(this._scene, this._deltaTime);
  // 发射 'director_after_draw' 事件
  this.emit(cc.Director.EVENT_AFTER_DRAW);
  // 更新事件管理器的事件监听（cc.eventManager 已被废除）eventManager.frameUpdateListeners();
  // 累加游戏运行的总帧数
  this._totalFrames++;
}

[源码] CCDirector.js#L843: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCDirector.js#L843

🔬 接下来咱们来对主循环中的关键点一一进行合成。

ComponentScheduler

cc.director 对象中的 _compScheduler属性 是 ComponentScheduler 类的实例。

大多数小伙伴可能对于 ComponentScheduler 这个类没有什么印象，我来简略解释一下。

将 ComponentScheduler 的名字直译过去就是“组件调度器”，从名字上就能够看出，这个类是用来调度组件的。

说人话，ComponentScheduler 类是用来集中调度（治理）游戏场景中所有组件（cc.Component）的生命周期的。

🎨 文字不够直观，看完上面这张图大略就懂了：

[源码] component-scheduler.js: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/component-scheduler.js

startPhase

📝 mainLoop 函数代码片段：

// 调用上一帧新增（且已启用）的组件的 start 函数
this._compScheduler.startPhase();

组件的 start 回调函数会在组件第一次激活前，也就是第一次执行 update 之前触发。

在组件的毕生中 start 回调只会被触发一次。

而 start 则会等到下一次主循环 mainLoop() 时才触发。

💡 常识补充

生命周期中的 onLoad 和 onEnable 是由 NodeActivator 类的来治理的：

  • onLoad 在节点首次激活时触发
  • onEnable 在组件每次被启用时都会触发

🎛 NodeActivator

NodeActivator 类次要用于激活和反激活节点以及节点身上的组件。

cc.director 对象中就领有一个实例 _nodeActivator。如激活节点时会调用 cc.director._nodeActivator.activateNode(this, value);。

[源码] node-activator.js: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/node-activator.js

updatePhase

📝 mainLoop 函数代码片段：

// 调用所有（已启用）组件的 update 函数
this._compScheduler.updatePhase(deltaTime);

组件的 update 回调每一帧都会被触发一次。

lateUpdatePhase

📝 mainLoop 函数代码片段：

// 调用所有组件（已启用）的 lateUpdate 函数
this._compScheduler.lateUpdatePhase(deltaTime);

组件的 lateUpdate 回调会在「组件 update 回调执行后、调度器（cc.Scheduler）更新后」被触发。

调度器（cc.Scheduler）的更新内容包含缓动、动画和物理等，这一点上面会开展。

ParticleSystem

BTW，粒子系统组件（cc.ParticleSystem）就是在 lateUpdate 回调函数中进行更新的。

[源码] CCParticleSystem.js#L923: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/particle/CCParticleSystem.js#L923

一个倡议

请审慎应用 update 和 lateUpdate 回调，因为它们每一帧都会被触发，如果 update 或 lateUpdate 内的逻辑过多，就会使得每一帧的执行工夫（即帧工夫 Frame time）都变长，导致游戏运行帧数升高或呈现不稳固的状况。

📢 留神：这个倡议不是不让你用，该用还得用，只是不要滥用，不要啥玩意都往里边塞~

Scheduler

cc.director 对象的 _scheduler 属性是 cc.Scheduler 类的一个实例。

cc.Scheduler 是负责触发回调函数的类。

[源码] Scheduler.js: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/Scheduler.js

📝 mainLoop 函数代码片段：

你相对猜不到上面这一行看起来如此平平无奇的代码执行之后会产生什么。

// 更新调度器（cc.Scheduler 类实例）this._scheduler.update(this._deltaTime);

cc.director.mainLoop 函数中应用调度器 _scheduler 的 update 函数来散发 update，在调度器外部会依据优先级先后触发各个系统模块和组件计时器的更新。

零碎模块

调度器的更新会先触发以下零碎模块的更新：

  • ActionManager
  • AnimationManager
  • CollisionManager
  • PhysicsManager
  • Physics3DManager
  • InputManager

以上这些模块都以 cc.director._scheduler.scheduleUpdate() 的形式注册到调度器上，因为这些模块每一帧都须要进行更新。

除了 InputManager 以外的模块的优先级都为 cc.Scheduler.PRIORITY_SYSTEM，也就是「零碎优先级」，会优先被触发。

ActionManager

ActionManager 即 动作管理器，用于治理游戏中的所有动作，也就是缓动系统 Action 和 Tween（其实它们实质上是同一种货色）。

[源码] CCActionManager.js: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/actions/CCActionManager.js

AnimationManager

AnimationManager 即 动画管理器，用于治理游戏中的所有动画，驱动节点上的 Animation 组件播放动画。

[源码] animation-manager.js: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/animation/animation-manager.js

CollisionManager

CollisionManager 即 碰撞组件管理器，用于解决节点之间的碰撞组件是否产生了碰撞，并调用相应回调函数。

[源码] CCCollisionManager.js: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/collider/CCCollisionManager.js

PhysicsManager

PhysicsManager 即 物理零碎管理器，外部以 Box2D 作为 2D 物理引擎，加以封装并凋谢局部罕用的接口。同时 PhysicsManager 还负责管理碰撞信息的散发。

[源码] CCPhysicsManager.js: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/physics/CCPhysicsManager.js

Physics3DManager

Physics3DManager 即3D 物理零碎管理器，Cocos Creator 中的 3D 物理引擎有 Cannon.js 和 Builtin 可选，Physics3DManager 给它们封装了对立的罕用接口。

[源码] physics-manager.ts: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/3d/physics/framework/physics-manager.ts

InputManager

InputManager 即 输出事件管理器，用于治理所有输出事件。开发者被动启用加速度计（Accelerometer）之后，引擎会定时通过 InputManager 发送 cc.SystemEvent.EventType.DEVICEMOTION 事件（默认距离为 0.2 秒）。

[源码] CCInputManager.js: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d\core\platform\CCInputManager.js

组件计时器

置信大多数小伙伴都应用过组件的 schedule 和 scheduleOnce 函数，次要用来提早或反复执行指定的函数。

实际上，cc.Component 的 schedule 函数依赖的也是 cc.Scheduler 类，具体应用的也是 cc.director 对象中的 _scheduler 实例。

组件的 schedule 函数在 cc.director._scheduler.schedule 函数之外加了一层封装，「以组件本身作为 target，这样一来组件内的定时工作就与组件生命周期绑定，当组件被销毁时定时工作也会被移除。」

而 scheduleOnce 函数则是在组件的 schedule 接口之外又加了一层简略的封装，写死只会在指定工夫后执行一次。

[源码] CCComponent.js#L555: https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/components/CCComponent.js#L555

[文档] 应用计时器: http://docs.cocos.com/creator/manual/zh/scripting/scheduler.html

setTimeout & setInterval

另外我还留神到，有不少小伙伴还不是很分明组件的计时器和 setTimeout、setInterval 之间的区别和用法，那就趁这个机会简略讲一下吧~

首先，setTimeout 和 setInterval 函数都是由浏览器或 Node.js 这类 runtime 所提供的接口。

  • setTimeout 函数用于设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。
  • setInterval 函数用于反复调用一个函数或执行一个代码段，在每次调用之间具备固定的时间延迟。
常识补充

在浏览器中 setTimeout 和 setInterval 函数的最小延时（距离）是 4ms。

如果是未激活（处于后盾）的标签页（tab），最小延时（距离）则加长到 1000ms。

🌰 举个栗子

如果我在以后标签页设置了一个每 500ms 输入一个 log 的定时器，当我切换到别的标签页之后，那么这个定时器就会变成每 1000ms 才输入一个 log。

📝 像这样（能够本人跑跑看）：

setInterval(() => {console.log(Date.now());
}, 500);
// 模拟输出
// 标签页在前台
// 1604373521000
// 1604373521500
// 1604373522000
// 切换到别的标签页后
// 1604373523000
// 1604373524000
// 1604373525000
区别 & 用法

组件的计时器依赖于引擎的 mainLoop() 和组件本身，如果引擎被暂停，那么组件的计时器也会被暂停，如果组件或组件所在的节点被销毁了，那么计时器也会生效。

setTimeout() 和 setInterval() 都依赖于以后所处的 window 对象，也就是说只有以后浏览器标签页不敞开，setTimeout() 和 setInterval() 都还是会执行的。

当你须要在组件外部定时或反复执行某一函数或操作某个节点，那么能够应用组件的计时器。

💬 让咱们设想一个场景：

在以后场景中的某个脚本内应用 setInterval() 来反复挪动场景中的某个节点，当咱们切换场景后会产生什么？

当定时器再次调用回调尝试挪动节点的时候，会无奈找到指标节点而报错，因为节点曾经跟着之前的场景一起被销毁了，而定时器还在继续执行。

这种状况下应用组件的计时器就不会有这种问题，因为计时器会随着组件的销毁而被革除。

而当咱们须要执行一些与游戏场景没有关联的事件的时候，就能够思考应用 setTimeout() 或 setInterval()。

🎃 当然能用组件计时器的话最好还是用组件计时器啦~

小结

🎨 同样也画一张图来小小总结一下 Scheduler。

总结

🎉 对于引擎的启动流程和主循环就解读到这里啦。

如果有脱漏或谬误的中央，也欢送大家提出来，毕竟熬夜写文章精神恍惚漏了也是情有可原的对吧哈哈哈~

🎨 最初的最初，再画一张图来做一个最初的总结~

🤣 逐步爱上画图~

传送门

微信推文版本

集体博客：菜鸟小栈

开源主页：陈皮皮

Eazax Cocos 游戏开发工具包

更多分享

《Cocos Creator 性能优化：DrawCall》

《在 Cocos Creator 里画个炫酷的雷达图》

《用 Shader 写个完满的波浪》

《在 Cocos Creator 中优雅且高效地治理弹窗》

《JavaScript 内存详解 & 剖析指南》

《Cocos Creator 编辑器扩大：Quick Finder》

《JavaScript 原始值与包装对象》

公众号

菜鸟小栈

😺 我是陈皮皮，一个还在一直学习的游戏开发者，一个酷爱分享的 Cocos Star Writer。

🎨 这是我的集体公众号，专一但不仅限于游戏开发和前端技术分享。

💖 每一篇原创都十分用心，你的关注就是我原创的能源！

Input and output.

正文完
cocos
发表至： cocos
2021-08-04
 0
关于cocos:3D摇杆控制器一种简单实现Cocos-Creator-3D
关于cocos:Cocos-Creator-源码解读引擎启动与主循环
Cocos03runAction顺序和并行执行一系列动作
关于cocos:3分钟学会Cocos独立游戏开发框架中的Http网络模块含源码工程