Cos start source code and creator

Preface

get set

I don't know if you ever thought about , If you compare the game world to a car , So this one “ automobile ” How to start , How does it work continuously ？

As the title , The main contents of this paper are as follows Cocos Creator Engine Start process and Main circulation .

And in the content of the main loop, there will be ： The life cycle of components and timers 、 Retarder system 、 Animation system and physical system, etc ...

This paper will interpret the relationship between the main loop and each module from a macro perspective , For each module will also briefly introduce , But it will not go deep into the specific implementation of the module .

Because if you put every module “ feel ” Again , I'm afraid this article can't be finished .

Go!

I hope you can understand more after reading this article Cocos Creator engine .

At the same time, I hope this article can play a role in “ Master leads in ” The role of , Let's cheer up and practice duck together ~

in addition 《 Source code interpretation 》 series （ should ） It will be updated continuously , If you want a skin to read a module of the interpretation engine , Also welcome to leave a message to tell me , I ... I'll think about it. Ha ha ha ~

This article takes Cocos Creator 2.4.3 Version for reference .

---

Text

Start process

index.html

about Web platform index.html Documents are the absolute starting point .

In the default index.html In file , Defines the layout of the game launch page , And there's an immediate code to execute .

Here we intercept some of the more critical code in the file ：

//  Load engine script 
loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.ec334.js', function () {
    //  Is the physical system turned on ？
    if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
        //  Load the physical system script and start the engine 
        loadScript(debug ? 'physics.js' : 'physics-min.js', window.boot);
    } else {
        //  Start the engine 
        window.boot();
    }
});

The above code is mainly used to load engine scripts and physical system scripts , After the script is loaded, it will call main.js As defined in window.boot() function .

🧵 Code compression

Script file name with -min The typeface generally means that the code in the file is compressed .

Compressing code can save the space occupied by code files , Speed up file loading , Reduce traffic consumption , But it also makes the code unreadable , Not conducive to debugging .

Therefore, after the debugging mode is turned on, the uncompressed code file will be used directly , Easy to develop, debug and locate errors .

main.js

window.boot()

For different platforms main.js There are also some differences , Here we ignore the difference part , Focus only on the key common behaviors .

About main.js The content of the document basically defines window.boot() function .

For non Web platform , It will be called directly after the definition window.boot() function , therefore main.js That's where they start .

and window.boot() There are the following key behaviors inside the function ：

1. Definition onStart Callback function ： It is mainly used to load startup scenarios
2. cc.assetManager.init(...)： initialization AssetManager
3. cc.assetManager.loadScript(...)： load src Plug in script directory
4. cc.assetManager.loadBundle(...)： Load the bundle
5. cc.game.run(...)： Start the engine

This part of the code will not be posted , Partners can look at their own projects after the construction of main.js file .

cc.game

cc.game The object is cc.Game An instance of a class ,cc.game Contains the main body information of the game and is responsible for driving the game .

Say something reasonable. ,cc.game Objects are the modules that manage the life cycle of an engine , start-up 、 It's needed for pauses and restarts .

CCGame.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js

run()

cc.game.run() The engine configuration and onStart Call back and trigger cc.game.prepare() function .

run: function (config, onStart) {
    //  Specify engine configuration 
    this._initConfig(config);
    this.onStart = onStart;
    this.prepare(game.onStart && game.onStart.bind(game));
}

Portal ：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js#L491

prepare()

cc.game.prepare() Function is used to quickly compile project code and call _prepareFinished() function .

prepare(cb) {
    //  Skip if ready 
    if (this._prepared) {
        if (cb) cb();
        return;
    }
    //  Load preview project code 
    this._loadPreviewScript(() => {
        this._prepareFinished(cb);
    });
}

Portal ：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js#L472

For the details of quick compilation , You can open the browser's developer tool during project preview , stay Sources In the search bar （Ctrl + P） __quick_compile_project__ You can find it __quick_compile_project__.js file .

_prepareFinished()

cc.game._prepareFinished() The function is mainly used to initialize the engine 、 Set the frame rate timer and initialize the built-in resources （effect Resources and material resources ）.

Called when the built-in resource is loaded cc.game._runMainLoop() Start the engine main cycle .

_prepareFinished(cb) {
    //  Initialize engine 
    this._initEngine();
    //  Set frame rate timer 
    this._setAnimFrame();
    //  Initialize built in resources （ Load built-in  effect  and  material  resources ）
    cc.assetManager.builtins.init(() => {
        //  Print engine version to console 
        console.log('Cocos Creator v' + cc.ENGINE_VERSION);
        this._prepared = true;
        //  start-up  mainLoop
        this._runMainLoop();
        //  launch  ‘game_inited’  event （ That is, the engine has been initialized ）
        this.emit(this.EVENT_GAME_INITED);
        //  call  main.js  As defined in  onStart  function 
        if (cb) cb();
    });
}

Portal ：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js#L387

about _prepareFinished() Internally called _setAnimFrame() Function here we have to mention .

_setAnimFrame()

cc.game._setAnimFrame() Internal to different game frame rate to do the adaptation .

It's also true window.requestAnimationFrame() The interface is packaged with compatibility , For compatibility with different browser environments , We'll talk about it later .

We don't post them here _setAnimFrame() The code of , If you need it, you can check it by yourself .

Portal ：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js#L564

_runMainLoop()

cc.game._runMainLoop() The name of this function is very simple and direct , It's a showdown. It's used to run mainLoop() Functional .

Let's look at the code ：

_runMainLoop: function () {
    if (CC_EDITOR) return;
    if (!this._prepared) return;
    //  Defining local variables 
    var self = this, callback, config = self.config,
        director = cc.director,
        skip = true, frameRate = config.frameRate;
    //  Show or hide performance statistics 
    debug.setDisplayStats(config.showFPS);
    //  Set frame callback 
    callback = function (now) {
        if (!self._paused) {
            //  Loop call callback 
            self._intervalId = window.requestAnimFrame(callback);
            if (!CC_JSB && !CC_RUNTIME && frameRate === 30) {
                if (skip = !skip) return;
            }
            //  call  mainLoop
            director.mainLoop(now);
        }
    };
    //  The loop callback will start at the next frame 
    self._intervalId = window.requestAnimFrame(callback);
    self._paused = false;
}

Portal ：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCGame.js#L612

Through the above code, we can know that ,_runMainLoop() Mainly through window.requestAnimFrame() Interface to implement the loop call mainLoop() function .

window.requestAnimFrame()

window.requestAnimFrame() That's what we said _setAnimFrame() Internal to window.requestAnimationFrame() Compatibility encapsulation of .

Small partners who are not familiar with the front end may have questions ,window.requestAnimationFrame() What is it , What is it for , How does it work ？

window.requestAnimationFrame()

Simply speaking ,window.requestAnimationFrame() Used to request a redraw from the browser （repaint）, And calls the specified callback function before repainting .

window.requestAnimationFrame() Receives a callback as a parameter and returns an integer as a unique identifier , The browser will execute this callback before the next redraw ; And a parameter will be passed in when the callback is executed , The value of the parameter and performance.now() The values returned are equal .

performance.now() The return value of the browser window can be simply interpreted as the running time of the browser window , That is, the time difference between opening the window and the current time .

MDN file ：https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/now

The number of times the callback function is executed usually matches the number of browser screen refreshes , in other words , For refresh rate of 60Hz Display for , The browser will execute in a second 60 Sub callback function .

about window.requestAnimationFrame() That's all , If you want to know more, please search by yourself .

MDN file ：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

Summary

Draw a picture to make a small summary of the engine starting process ~

Main circulation

After some twists and turns , Finally came to the most anticipated part of the main engine cycle , Don't talk much , We continue ！

cc.director

cc.director The object is the director class cc.Director Example , Engine pass cc.director Object to manage the logical flow of the game .

CCDirector.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCDirector.js

mainLoop()

cc.director.mainLoop() Function is probably one of the most critical logic in the engine , It contains a lot of content and it's critical .

Now let's go in mainLoop() Let's look inside the function ！

Here I selectively exclude some of the code in the function , I made some notes ：

mainLoop: function(now) {
    //  Calculation “ overall situation ” Incremental time （DeltaTime）
    //  That is, from the last call  mainLoop  Time interval of 
    this.calculateDeltaTime(now);
    //  The game will be updated if it is not suspended 
    if (!this._paused) {
        //  launch  'director_before_update'  event 
        this.emit(cc.Director.EVENT_BEFORE_UPDATE);
        //  Call the new component （ Enabled ） Of  start  function 
        this._compScheduler.startPhase();
        //  Call all components （ Enabled ） Of  update  function 
        this._compScheduler.updatePhase(this._deltaTime);
        //  Update scheduler （cc.Scheduler）
        this._scheduler.update(this._deltaTime);
        //  Call all components （ Enabled ） Of  lateUpdate  function 
        this._compScheduler.lateUpdatePhase(this._deltaTime);
        //  launch  'director_after_update'  event 
        this.emit(cc.Director.EVENT_AFTER_UPDATE);
        //  Destroy recently removed entities （ node ）
        Obj._deferredDestroy();
    }
    //  launch  'director_before_draw'  event 
    this.emit(cc.Director.EVENT_BEFORE_DRAW);
    //  Rendering game scene 
    renderer.render(this._scene, this._deltaTime);
    //  launch  'director_after_draw'  event 
    this.emit(cc.Director.EVENT_AFTER_DRAW);
    //  Update event manager event monitoring （cc.eventManager  It has been abandoned ）
    eventManager.frameUpdateListeners();
    //  Add up the total number of frames the game runs 
    this._totalFrames++;
}

Portal ：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/CCDirector.js#L843

Next, let's decompose the key points in the main loop one by one .

ComponentScheduler

cc.director Object _compScheduler attribute yes ComponentScheduler Class .

Most of the partners may be interested in ComponentScheduler This class has no impression , Let me explain briefly .

take ComponentScheduler That's the literal translation of the name “ Component scheduler ”, You can see from the name that , This class is used to schedule components .

Say something reasonable. ,ComponentScheduler Class is used for centralized scheduling. （ management ） All components in the game scene （cc.Component） Life cycle of .

The text is not intuitive enough , After reading the following picture, you will understand ：

component-scheduler.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/component-scheduler.js

startPhase

//  Call the new component （ Enabled ） Of  start  function 
this._compScheduler.startPhase();

Component's start The callback function will be before the component is activated for the first time , That's the first execution update Trigger before .

In the lifetime of components start The callback will only be triggered once ,onLoad and onEnable It's the same thing .

It's just onLoad and onEnable By NodeActivator Class ：

• onLoad Will trigger when the node is active
• onEnable Will trigger when the component is enabled

and start It will wait until the next main loop mainLoop() Only when the .

NodeActivator

NodeActivator Class is mainly used to enable and disable nodes and their components .

cc.director There is an instance in the object _nodeActivator, All nodes in the game need to be enabled and disabled through it .

like this ：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

//  Call all components （ Enabled ） Of  update  function 
this._compScheduler.updatePhase(deltaTime);

Component's update The function is triggered once per frame .

lateUpdatePhase

//  Call all components （ Enabled ） Of  lateUpdate  function 
this._compScheduler.lateUpdatePhase(deltaTime);

Component's lateUpdate The function will be in the update And scheduler cc.Scheduler Triggered after update . The scheduler updates include jogging 、 Animation and physics, etc , This will unfold below .

ParticleSystem

BTW, Particle system components （cc.ParticleSystem） Is in the lateUpdate Callback function to update .

CCParticleSystem.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/particle/CCParticleSystem.js#L923

Tips

Please use with caution update and lateUpdate Callback , Because they're triggered every frame , If update or lateUpdate Too much logic in , It will make the execution time of each frame （ That is frame time Frame time） All grow longer , Cause the game running frame number to reduce or appear unstable situation .

Notice that it's not that you're not allowed to use it , Should we use it or not , Just don't abuse it , Don't race everything inside ~

Scheduler

cc.director Object's _scheduler The attribute is cc.Scheduler Class .

cc.Scheduler Is the class responsible for triggering callback functions .

Scheduler.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/Scheduler.js

You can't guess what happens when the next line of seemingly flat code is executed .

//  Update scheduler （cc.Scheduler  Class instance ）
this._scheduler.update(this._deltaTime);

cc.director.mainLoop() Use in _scheduler.update() Function to distribute update, In scheduler （cc.director._scheduler） The internal system will trigger the timer update of each system module and component according to the priority .

System module

The scheduler update will trigger the following system module updates first ：

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

All the above modules are based on cc.director._scheduler.scheduleUpdate() To register to the scheduler , Because these modules need to be updated every frame .

except InputManager The priority of other modules is cc.Scheduler.PRIORITY_SYSTEM, That is, system priority , Will be triggered first .

ActionManager

ActionManager namely Action manager , Used to manage all actions in the game , It's a slow motion system Action and Tween（ In fact, they are essentially the same thing ）.

CCActionManager.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/actions/CCActionManager.js

AnimationManager

AnimationManager namely Animation Manager , Used to manage all animations in the game , On the drive node Animation Component play animation .

animation-manager.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/animation/animation-manager.js

CollisionManager

CollisionManager namely Collision component manager , It is used to deal with the collision between nodes and whether the components have caused collision , And call the corresponding callback function .

CCCollisionManager.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/collider/CCCollisionManager.js

PhysicsManager

PhysicsManager namely Physical system manager , Inside with Box2D As 2D Physical engine , Encapsulate and open some common interfaces . meanwhile PhysicsManager Also responsible for managing the distribution of collision information .

CCPhysicsManager.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/physics/CCPhysicsManager.js

Physics3DManager

Physics3DManager namely 3D Physical system manager ,Cocos Creator Medium 3D The physics engine has Cannon.js and Builtin Optional ,Physics3DManager Encapsulate them with a unified common interface .

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

InputManager

InputManager namely Input event manager , Used to manage all input events . Developers actively enable accelerometers （Accelerometer） after , The engine will pass at regular intervals InputManager send out cc.SystemEvent.EventType.DEVICEMOTION event （ The default interval is 0.2 second ）.

CCInputManager.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d\core\platform\CCInputManager.js

Component timer

I believe that most of the partners have used components of schedule() and scheduleOnce() Interface , It is mainly used to execute functions repeatedly or regularly .

actually ,cc.Component Of schedule() The interface is also dependent cc.Scheduler class , It is also used specifically cc.director Object _scheduler example .

Component's schedule() Interface in cc.director._scheduler.schedule() A layer of encapsulation is added to the interface , Take the component itself as target, In this way, the timed tasks within the component are bound to the life cycle of the component , When a component is destroyed, the scheduled task is also removed .

and scheduleOnce() The interface is in the component schedule() The interface has a layer of encapsulation , Fixed will only be executed once after the specified time .

CCComponent.js：https://github.com/cocos-creator/engine/blob/2.4.3/cocos2d/core/components/CCComponent.js#L555

[ file ] Using timers ：http://docs.cocos.com/creator/manual/zh/scripting/scheduler.html

I also noticed that , There are a lot of small partners are not very clear about the component timer and setTimeout()、setInterval() The difference and usage of , Let's take this opportunity to talk about it briefly ~

setTimeout & setInterval

setTimeout() and setInterval() Both are created by the browser or Node.js This kind of runtime Interface provided .

• setTimeout() Interface is used to set a timer , The timer executes a function or a specified piece of code after the timer expires .
• setInterval() Interface is used to repeatedly call a function or execute a code segment , There is a fixed time delay between calls .

Add a little knowledge ：

In the browser setTimeout() and setInterval() Minimum delay of （ interval ） yes 4ms.

If not activated （ backstage ） Tab for （tab）, minimum delay （ interval ） It will be extended to 1000ms.

Take a chestnut

If I set a per in the current tab 500ms Output one log Timer for , When I switch to another tab , Then the timer becomes every 1000ms Only one output log.

like this , If you are interested, you can try it yourself ：

setInterval(() => {
    console.log(new Date().getTime());
}, 500);
//  Analog output 
//  The tab is at the front desk 
// 1604373521000
// 1604373521500
// 1604373522000
//  After switching to another tab 
// 1604373523000
// 1604373524000
// 1604373525000

difference & usage

Component timers depend on the engine's mainLoop() And the component itself , If the engine is suspended , Then the timer of the component will also be suspended , If a component or its node is destroyed , Then the timer will fail .

setTimeout() and setInterval() Depends on where you are window object , That is to say, as long as the current browser tab is not closed ,setTimeout() and setInterval() Will still be implemented .

When you need to execute a function or operate a node regularly or repeatedly within a component , Then you can use the component timer .

Let's imagine a scene ：

Use within a script in the current scenario setInterval() To repeatedly move a node in the scene , What happens when we switch scenes ？

When the timer calls the callback again to try to move the node , An error is reported when the target node cannot be found , Because the node has been destroyed along with the previous scene , And the timer goes on .

In this case, the timer using the component will not have this problem , Because the timer will be cleared with the destruction of the component .

And when we need to do something that has nothing to do with the game scene , You can consider using it setTimeout() or setInterval().

Of course, if you can use the component timer, you'd better use the component timer ~

Summary

Still draw a picture to sum up a little Scheduler.

summary

That's all about the engine's starting process and main loop .

If there are omissions or mistakes , You are also welcome to raise it , After all, it's excusable to stay up late and write articles in a trance, right ~

Last, last , Or draw a picture to make a final conclusion ~（ Gradually fell in love with painting ~）

---

Portal

Wechat tweet version

Personal blog ： Rookie Inn

Open source Homepage ： Tangerine peel

Eazax-CCC Game development scaffolding

Eazax-CCC Sample online preview

---

Share more

《 Why choose to use TypeScript ？》

《 Gaussian blur Shader》

《 Read a text YAML》

《Cocos Creator performance optimization ：DrawCall》

《 Internet operation terminology literacy 》

《 stay Cocos Creator It's a cool radar map 》

《 use Shader Write a perfect wave 》

《 stay Cocos Creator Manage pop ups gracefully and efficiently 》

---

official account

Rookie Inn

I'm tangerine peel , A game developer who is still learning , One who loves sharing Cocos Star Writer.

This is my personal official account. , Focus on but not limited to game development and front-end technology sharing .

Every original article is very attentive , Your attention is the driving force of my originality ！

Input and output.