1.1?Cocos 不同時(shí)期與產(chǎn)品

?

剛接觸Cocos家族的時(shí)候，會(huì)有很多個(gè)Cocos的版本與分支，比如Cocos2d, Cocos2d-x, Cocos Creator 1.x, Cocos Creator 2.x, Cocos Cretor3D, Cocos Creator 3.x, CocosDashboard, 等我們先把Cocos 的主要產(chǎn)品脈絡(luò)梳理一遍。

智能手機(jī)剛出來(lái)的時(shí)候，國(guó)外做了一個(gè)2D游戲引擎給iphone上開發(fā)游戲使用，叫做cocos2d, 他是用objective-c實(shí)現(xiàn)的ios的2D游戲引擎。隨著手機(jī)游戲的興起,一次開發(fā),同時(shí)可以發(fā)布到Android與IOS平臺(tái)就成了手機(jī)游戲引擎的必備的需求，所以國(guó)內(nèi)有一個(gè)團(tuán)隊(duì)，使用C++實(shí)現(xiàn)了cocos2d的objective-c的代碼與接口，實(shí)現(xiàn)一次開發(fā)同時(shí)發(fā)布到Android與IOS等平臺(tái)。并把這個(gè)游戲引擎項(xiàng)目開源，叫做cocos2d-x?；赾ocos2d-x，又發(fā)展出來(lái)了cocos2d-x 2.x以及cocos2d-x 2.x相關(guān)的開發(fā)工具，如cocos studio等?；赾ocos2d-x引擎內(nèi)核又發(fā)展出cocos2d-x-lua與cocos2d-x-js分支,支持Lua與JavaScript開發(fā)游戲邏輯代碼。這個(gè)期間很多手游都是用cocos2d-x開發(fā)出來(lái)的，比如《刀塔傳奇》等。后來(lái)隨著h5游戲的興起，cocos2d-x團(tuán)隊(duì)又做了一件事情，就是用JavaScript基于h5實(shí)現(xiàn)了cocos2d-x開發(fā)接口相同的的h5游戲引擎。這樣使用cocos2d-x-js開發(fā)游戲，既可以發(fā)布成手機(jī)游戲，也可以發(fā)布h5的游戲。

隨著手機(jī)游戲的發(fā)展，越來(lái)越多的3D游戲出來(lái)了，cocos2d-x也迎來(lái)了一次重大的升級(jí)，支持3D游戲開發(fā)。也就是cocos2d-x 3.x系列。在這個(gè)時(shí)期，游戲引擎的編輯器與相關(guān)開發(fā)工具變得越來(lái)越重要，所以cocos團(tuán)隊(duì)發(fā)布了Cocos Creator產(chǎn)品家族系列。Cocos Creator是基于Cocos游戲引擎內(nèi)核的游戲開發(fā)編輯器與工具，Cocos Creator采用編輯器不開源，引擎開源的模式, 采用當(dāng)下游戲開發(fā)比較流行的數(shù)據(jù)化驅(qū)動(dòng),可視化編輯，組件化開發(fā)，多平臺(tái)發(fā)布。Cocos Creator 1.x第一階段只支持2D游戲開發(fā), Cocos Creator 2.x階段引入了TypeScript，同時(shí)讓2D游戲開發(fā)更穩(wěn)定，更成熟,性能更好。由于之前設(shè)計(jì)定位于2D游戲開發(fā), 同時(shí)3D游戲開發(fā)需求越來(lái)越多，Cocos Creator 獨(dú)立出來(lái)一個(gè)3D游戲引擎的分支，Cocos Ceator 3D, 丟棄掉一些歷史包袱,從3D游戲出發(fā)來(lái)重新設(shè)計(jì)開發(fā)工具與編輯器。這個(gè)版本的分支成熟了以后，cocos creator 將3D與2D結(jié)合起來(lái)，推出了Cocos Creator 3.x 系列產(chǎn)品，至此Cocos Creator 3.x演變成一個(gè)完整的全新2D/3D游戲開發(fā)引擎。同時(shí)為了方便下載安裝管理Cocos Creator項(xiàng)目與工具，cocos又推出了CocosDashboard工具,能快速的安裝不同版本的Cocos Creator,管理不同版本開發(fā)的Cocos Creator項(xiàng)目。下面用一張圖，整理以下Cocos的演變歷史。

?

?

?

?

1.2?安裝Cocos Creator

?

去到Cocos官網(wǎng),

https://www.cocos.com

, 選擇”產(chǎn)品/Cocos Creator”, 選擇下載中心，立即下載，可以下載到各個(gè)版本的Cocos Creator,如下圖所示:

Cocos Creator 3.x全新的2D/3D游戲開發(fā)引擎，Cocos Creator 2.x 傳統(tǒng)的2D游戲開發(fā)引擎,后面Cocos Creator 2.x會(huì)停止維護(hù)，所以盡量大家新項(xiàng)目都用Cocos Creator 3.x系列。安裝的時(shí)候，先安裝CocosDashboard,后面基于Dashboard來(lái)安裝對(duì)應(yīng)的Cocos Creator版本就可以了。安裝好了以后，打開CocosDashboard能看到你電腦上安裝的Cocos Creator版本。如圖所示:

安裝完Cocos Creator相關(guān)開發(fā)工具后，最后安裝代碼編輯器，Cocos Creator采用代碼編輯器Visual Studio Code,直接在微軟的官網(wǎng)上可以下載得到，下載完成后安裝就可以了。

https://code.visualstudio.com/

?

1.3?創(chuàng)建一個(gè)Cocos Creator項(xiàng)目

?

打開CocosDashboard, 選擇項(xiàng)目，選擇”新建”,選擇對(duì)應(yīng)的模板，2D項(xiàng)目選”Empty 2D”, 3D項(xiàng)目選Empty 3D。如果2D/3D選錯(cuò)了，其實(shí)也不要緊，編輯的時(shí)候是可以切換的，只是2D項(xiàng)目默認(rèn)進(jìn)去是2D相關(guān)的設(shè)置，3D默認(rèn)進(jìn)去是3D相關(guān)默認(rèn)設(shè)置。如果做VR，可以選擇VR項(xiàng)目模板。

創(chuàng)建完成后編輯器就會(huì)打開項(xiàng)目，你就可以使用編輯器來(lái)開發(fā)游戲了。

?

?

4 Cocos Creator編輯器面板介紹

?

Cocos Creator編輯器面板由以下幾個(gè)部分組成:

(1)?層級(jí)管理器:?用來(lái)查看當(dāng)前場(chǎng)景或節(jié)點(diǎn)預(yù)制體的詳細(xì)結(jié)構(gòu)面板，如圖所示:

(2)?場(chǎng)景編輯器:?用來(lái)可視化編輯2D/3D游戲場(chǎng)景與預(yù)制體。

?

(3)?資源管理器:用來(lái)查看與管理當(dāng)前游戲項(xiàng)目的代碼+資源。如圖:

(4)?屬性檢查器:用來(lái)檢查當(dāng)前節(jié)點(diǎn)/資源文件等的相關(guān)屬性信息，也可以做相關(guān)可視化修改與設(shè)置。如圖:

(5)?動(dòng)畫編輯器:?可以查看與編輯游戲中的一些動(dòng)畫,如圖:

(6) 調(diào)試預(yù)覽工具欄: 開發(fā)完成以后預(yù)覽運(yùn)行，就基于工具欄中的按鈕來(lái)運(yùn)行預(yù)覽，如圖:

點(diǎn)擊三角形按鈕，就可以預(yù)覽運(yùn)行當(dāng)前游戲場(chǎng)景的效果。左邊的下拉選擇框可以選擇哪種模式下預(yù)覽運(yùn)行，一般開發(fā)的時(shí)候選瀏覽器模式預(yù)覽運(yùn)行，如圖:

其它的一些編輯器上的功能我們?cè)诤竺孢M(jìn)行介紹。

?

?

1.5?Cocos Creator 重要菜單介紹

?

偏好設(shè)置菜單:?點(diǎn)擊CocosCreator/偏好設(shè)置, 打開菜單，主要是編輯器的一些全局設(shè)置，針對(duì)這些全局設(shè)置，CocosCreator按照類別來(lái)進(jìn)行分類，建議大家把每個(gè)類別的菜單都仔細(xì)看下,如圖:

?

項(xiàng)目設(shè)置菜單: 點(diǎn)擊”項(xiàng)目/項(xiàng)目設(shè)置”,能查看到當(dāng)前針對(duì)項(xiàng)目的相關(guān)設(shè)置，這里的每一項(xiàng)也建議大家都看一遍，后面用到的時(shí)候再詳細(xì)的講解。如圖:

其它的菜單都可以看以下，但是這兩個(gè)部分的菜單最為重要，后續(xù)講解中如果用到了某個(gè)菜單再詳細(xì)講解。