cocoscreatorjs原理,cocos creator javascript

本文目錄一覽：

• 1、CocosCreator初體驗
• 2、cocos creator 如何加載一張圖片並渲染出來的
• 3、想學cocoscreator，請教學習路線，先要學cocos2d-js嗎
• 4、為什麼cocos creator 不選擇兼容c#而是只有js
• 5、cocos creator 2.4.0 渲染流程詳解（七：ForwardRender）
• 6、Cocos Creator 和 Cocos2d-x Js 之間到底是啥關係

CocosCreator初體驗

機緣巧合，最近接到關於遊戲的需求，前後調研了一下Unity3D和CocosCreator，但是考慮到是作為項目的一部分而使用，並且局限於Unity3D的使用條款，為了避免法律問題，最後選擇的是使用CocosCreator來實現。第一次接觸Unity3D和CocosCreator這類的遊戲引擎，大約用了一個月的時間，從學習到項目大部分完成，之後要打包成靜態庫供其他客戶端的同事們使用。學習途徑主要是CocosCreator官網文檔和官方Demo（看中文的文檔就是爽！！！）。本片文章的目的主要是記錄一下過程中遇到的問題及解決方案，並不是完整的教程。

本次要做的是一個最簡單的跑酷類遊戲，無需使用Tiled（地圖編輯器），spine（骨骼動畫編輯器）。也是做了這個小遊戲才發現遊戲其實已經發展的很成熟了。

我們可以看到，元素很簡單，背景主要有遠景、中景，通過設置不同的速度來實現現實中跑動的效果。主要的邏輯實現部分是在前景的任務和障礙物。由於沒有使用物理引擎，所以是直接使用CocosCreator的碰撞檢測實現的。主人公可以跳躍越過障礙物，撞開障礙物，收集金幣。按住屏幕，hero跳起，按的時間長一些，主人公的跳躍也會高一些，自然一些的話還是需要簡單的物理公式的。正常情況下hero是在x軸上是沒有速度的，一種情況是當障礙物擋住hero時會有一個和障礙物同樣的速度模擬阻擋的效果，還有一種情況是阻擋產生之後hero產生了位置上的移動，需要一個速度回到原位置。由於CocosCreator提供了碰撞檢測之後的回調函數，所以我們可以很輕鬆的在回調中做一些相關操作，比如讓碰到的金幣消失之類的。

有位同事做過cocos2d-x的開發，使用的c++，向他請教了一些基礎了知識，但是細節上跟cocosCreator相差恨遠，因為cocosCreator是用cocos2d-js框架並配合可視化的編輯器來實現的。由於是先調研的Unity3D，對這種腳本的方式還是比較能夠接受的。其核心思想是在組件，在編輯器中製作精靈和動畫，然後通過腳本組件來控制其邏輯實現，各種功能都組件化，當我們需要給精靈添加一個功能的時候，就是向其添加一個組件。在這個小遊戲的製作過程中用的組件的數量也是有限的，主要是使用了：

編輯器給我們提供了方便的拖拽界面，直接將我們需要使用的圖片導入，就會自動生成精靈文件（但是用過Unity3D之後，還是感覺Unity3D的功能集成度更高一些，而且還可以做3D）。

在編寫腳本的時候也是不能脫離編輯器的，在編寫腳本的時候着實是讓我這個ios程序員有點摸不到頭腦了，JS的使用方式有點讓我不太適應，沒有了xcode的提示功能，寫起來還是有些費勁的。JS也是邊學邊寫，不過得益於官方的Demo幾乎把所有組件都寫了一遍，所以就照着葫蘆畫瓢。寫的時候就發現，其實引擎並沒有幫我們做很多的工作（Unity3D可以直接在編輯器里設置物理屬性，不過聽說下個版本的CocosCreator也會有）。在編寫腳本的過程中，最複雜的就是hero腳本的編寫，需要檢測碰撞和處理hero跳躍過程中的不同狀態。碰撞檢測的話需要自己計算碰撞發生的位置，當做矩形碰撞器來處理的，只計算x軸和y軸的碰撞。x軸發生碰撞的話，hero有一個和障礙物一樣的速度，y軸碰撞一直持續的話就是調整hero的y軸的位置，讓其在障礙物的頂部。跳躍的過程中完成動畫的切換。

與CocosCreator編輯器不同的是，這個編輯器是我寫的一個生成障礙物的一個app，可以方便讓產品配置障礙物的位置。主要的實現思路是使用UICollectionView，界面非常的簡單,主要是配合CocosCreator腳本的實現，需要將顆粒狀的障礙物連成一個長的條狀，所以需要將界上的障礙物顆粒結構化一下，取到障礙物的最底部的顆粒的位置，然後連接在一起的高度，這樣的話就是對每一列的統一種類的障礙物進行深度優先搜索，記錄最低點和搜索過的深度，這樣的生成的JSON文件在CoCosCreator腳本里就可以直接使用了。

cocos creator 如何加載一張圖片並渲染出來的

導讀：   ccc 我們在使用一張圖片的時候，使用cc.laod api ，回調傳回來cc.spriteFrame 或者cc.texture來供我們使用。下面的內容會解密中間到底經歷了哪些過程（native）。

加載：首先會在js引擎中，通過一些方式得到資源的完整信息，包括資源的完整路徑資源類型等（可以了解下load的加載過程）。

然後調用jsb_global_load_image方法，利用native來加載這張圖片到內存中，拿到內存首地址和內存大小。

把剛才拿到的信息轉為jsObject，內存地址和大小會被描述成arrayBuff，包裝好的對象回調回給js。

js引擎拿到回調後會創建一個texture來，然後調用 texture.initWithElement()方法，把之前包裝好的數據再傳回給native的texture對象（js的texture利用jsb來管理native的texture對象，並且是1對1的）。

渲染：native的texture接收到數據後會用OpenGL的api來開闢顯存，綁定紋理數據（分配一個紋理id給native的texture）。然後通過device（DeviceGraphics是單例，大多數的OpenGL api接口都是通過他調用）渲染到屏幕上。（OpenGL api可自行查找資料）

我們在js端讓一個精靈顯示圖片的時候，是在load的回調里 把cc.spriteFrame給精靈使用，spriteFrame里持有cc.texture對象，cc.texture又持有由native返回的數據。通過這種方式讓紋理數據和將要渲染的對象綁定起來。

還有許多包括頂點數據  node的位置 大小 shader 等等 都在RenderFlow等類中獲取和封裝（比較複雜），最後配合紋理數據 渲染出來。我們加載的一張圖片就這樣渲染到了屏幕上。

流程圖：

想學cocoscreator，請教學習路線，先要學cocos2d-js嗎

不用學習cocos2d-js，直接學習creator的開發模式就可以了，因為現在官方主推也是creator，但是前提是需要會js。

js基礎會了以後，然後看官方文檔知道ide如何使用、編寫腳本，後面就是看官方demo熟悉api，自己根據想做的遊戲嘗試做一些demo了。

為什麼cocos creator 不選擇兼容c#而是只有js

選擇Js和C#並不是根本原因，Unity3D編輯器的底層技術棧是Mono，它是一個用來構建跨平台桌面應用開發的框架，與之類似的還有QT（QT使用C++，當然也提供Python和其它語言綁定）。但是Mono這個東西太重，Cocos Creator使用的是Electron，它是一個基於Chromium和Node.js的新型跨平台桌面應用開發神器。目前已經和Atom和VS Code這兩款編輯器是基於Electron開發的。我相信今後還會有更多的跨平台桌面應用會選擇使用Electron。Creator要支持C#沒有這個必要，Js是世界上最好的語言，為何還要C#這種功能無比強大（四不象）的語言呢？當然，我這裡也不想引起語言之爭，Creator使用Js，Unity3D使用C#，只是技術選型的差異而已。

cocos creator 2.4.0 渲染流程詳解（七：ForwardRender）

全文共5000+字，分為8個章節，由本人歷時一周整理而來。由於篇幅問題，將本文分為8個章節分開發布。全文 （ 不 ） 詳細描述了cocoscreator 引擎的2.40版本中，web平台的js部分引擎的渲染流程。請將文章配合源碼一起食用！

由於我尚在學習引擎源碼中，文章可能有不正確的部分，所以我會不斷更新內容。如有錯誤或補充，請留言交流！

全部章節鏈接：

一： 渲染流程中用到的核心類

二 ： 渲染流程詳解

三： RenderFlow 的運行邏輯

四： Assembler 的作用

五： ModelBatcher 數據合批

六： 材質系統

七： ForwardRender

ForwardRender 繼承於 Base, 是與底層渲染最靠近的類型，當上面的流程處理完畢後，會在ForwardRender 的 render() 中處理當前場景的渲染狀態，材質,光照，通道，着色器，更新着色器的統一變量。並在 _draw() 中調用 device.draw()方法，進行繪製。

部分重要的繼承於 Base 的成員變量：

_device：根據運行平台對應的繪製圖形對象 gfx.Device 的實例，用於繪製圖形到屏幕，類型定義於 cocos2d\renderer\gfx\index.js。

_programLib ： 管理 shader 定義，獲取，檢查等相關的變量。類型定義於 cocos2d\renderer\core\program-lib.js。

_stage2fn：保存有不同渲染通道的名稱與其對應的不同渲染方法。ForwardRender 中設置有 shadowcast， opaque, transparent 三種渲染通道。

_viewPools：單個相機的描述數據類(View) 的對象池。一個View對應一個相機。

_drawItemsPools：渲染數據類的對象池，保存有每個渲染批次需要的model，effect 等數據。

_stageItemsPools：單個渲染通道需要渲染的數據的對象池，本質是對 _drawItemsPools 中的數據按照不同通道進行了分類。

ForwardRender 中定義的成員變量：

_lights：保存所有燈光數據。

_shadowLights：保存所有陰影燈光數據。

類名 ForwardRender 翻譯為前向渲染，泛指傳統上只有 Opaque 和 Transparent 兩個通道的渲染技術。cocos有三個渲染通道，渲染通道方法定義在 _stage2fn 中。

渲染管線具體詳解請參考unity官方文檔（對的，真要學cocos還得看unity的文檔）：

內置渲染管線中的渲染路徑

相關鏈接

Cocos Creator 和 Cocos2d-x Js 之間到底是啥關係

Cocos Creator 可以說脫胎自 Cocos2d-JS，它們的 API 一脈相承，有很多相同的部分，但由於使用了全新的組件化框架，兩者的 API 是有差異的，並且無法互相兼容。Cocos Creator 和 Cocos2d-x Js 之間到底是啥關係