CocosCreator學習筆記（一）

什麼是Cocos Creator

Cocos Creator是以遊戲内容創作為核心的開發工具，它基于Cocos2D-X引擎進行開發，實作了一個一體化、可發展、可自定義工作流的編輯器，實作了開發的腳本化、元件化和資料驅動等特點，它在Cocos系列産品中第一次引入元件化的程式設計思想和資料驅動的架構設計，可以完整地實作包括場景編輯、UI設計、資源管理、調試、預覽及釋出等工具，是遊戲開發團隊提高開發效率，實作完整工作流的最佳選擇，同時由于它便捷的使用規則，也是幫助開發者快速實作遊戲Demo的高效開發工具

Cocos Creator的特點

• 提供了一套完整的工作流程——從資源導入到場景編輯，再到調試和預覽，直到導出和釋出。
• 實作完全的腳本化。提高開發效率節約開發成本，同時還可以做到項目的熱更新。在cocos2dx的時候對Lua和JS便有着非常好的支援。在creator中還可以使用js編寫插件來擴充引擎

• 采用ECS（Entity Component System，實體-元件系統）設計模式。

  ECS模式是什麼，是一個遊戲邏輯的架構，它建立在渲染引擎和實體引擎的基礎上，主要解決如何建立一個模型來處理遊戲對象的更新操作的問題

  ECS由Entity、Component、System三部分組成，分别是實體、元件、系統。 執行個體就是一個遊戲對象實體，一個實體擁有衆多的元件，而遊戲系統則負責一句元件對執行個體做出更新。

  舉個例子，如果對象A需要實作碰撞和渲染，那麼我們就給他加一個碰撞元件和一個渲染元件。而在遊戲循環中，每一個系統都會周遊一次對象，當渲染系統發現對象持有一個渲染元件時，就會根據渲染元件的資料來執行相應的的渲染過程。碰撞系統也是如此。換句話說執行個體隻需要持有必要的資料，由系統負責邏輯就行了。

CocosCreator的渲染方式（2.X）

• 在CocosCreator2.X的引擎中，所有的渲染元件都繼承于cc.RenderComponent，例如cc.Sprite，cc.Label等等。元件的Assembler主要是負責元件的資料更新以及資料的填充，由于不同的渲染元件在資料内容及填充上也都不相同，是以每一個渲染元件都會擁有自己的Assembler對象，而所有的Assembler對象都是繼承于cc.Assembler。Material作為資源，主要記錄和渲染元件的渲染狀态，使用的紋理以及Shader

• 在 Cocos Creator2.X 中，RenderFlow 會根據渲染過程中調用的頻繁度劃分出多個渲染狀态，比如

  Transform，Render，Children 等，而每個渲染狀态都對應了一個自己的函數。在 RenderFlow

  的初始化過程中，會預先根據這些狀态建立好對應的渲染分支，這些分支會把對應的狀态依次連結在一起。例如一個節點在目前幀需要更新矩陣，以及需要渲染自己，那麼這個節點會更新他的

  flag 為node._renderFlag = RenderFlow.FLAG_TRANSFORM |RenderFlow.FLAG_RENDER。RenderFlow 在渲染這個節點的時候就會根據節點的 node._renderFlag的狀态進入到 transform => render 分支，而不需要再進行多餘的狀态判斷。

• 與1.X的差別，1.X則是在周遊節點的時候進行多次的判斷，例如一個空節點都需要判斷位置，顔色等等，2.X通過标志去省去了這些的判斷提升了性能

CocosCreator1.X和2.X引擎加載的流程對比

• 1.X：加載引擎-》加載main.js-》初始化引擎-》初始化渲染器-》附加元件目的插件腳本-》附加元件目主腳本

  2.X：加載引擎-》加載main.js-》附加元件目的插件腳本-》附加元件目主腳本-》初始化引擎-》初始化渲染器

  具體解釋：2.X将項目腳本代碼和項目插件腳本代碼都在迎請的初始化之前進行初始化，這樣可以在項目代碼中對引擎和渲染器的加載重新定義

遇到的問題

• 在使用vscode打開初始HelloWorld的預設項目的腳本後，本來想預設打一點代碼，打了cc後發現并沒有智能提示。

  解決方法：

  1、在CocosCreator編輯器上頁籤-》開發者-》VS Code工作流-》更新VS Code智能提示資料

  2、等待幾秒後，下方控制台會提示一行綠色的文字，“API data generated and copied to XXXXXX”（XXX是檔案生成的路徑），一般在項目的assets的檔案夾外，與assets同級

  3、重新打開vscode，如果是ts的腳本，會發現已經可以有隻能提示了，如果你是js的腳本，則需要第4步

  4、如果前面幾步做完了發現還是不能提示，則把assets檔案外的tsconfig.json檔案删除，則js腳本即可産生智能提示。官方給出了問題所在，是tsconfig.json配置檔案影響了jsconfig.json配置檔案，導緻智能提示隻能在ts中運作