引言

　Cocos Creator 是一個(gè)完整的游戲開(kāi)發(fā)解決方案，包含了 cocos2d-x 引擎的 JavaScript 實(shí)現(xiàn)，以及快速開(kāi)發(fā)游戲所需求的各種圖形界面東西。Cocos Creator 的編輯器完全為引擎定制打造，包含從規(guī)劃、開(kāi)發(fā)、預(yù)覽、調(diào)試到發(fā)布的整個(gè)工作流所需的全功能，該編輯器供給面向規(guī)劃和開(kāi)發(fā)的兩種工作流，供給簡(jiǎn)略順暢的分工合作方法。Cocos Creator 現(xiàn)在支持發(fā)布游戲到 Web、Android 和 iOS，真正實(shí)現(xiàn)一次開(kāi)發(fā)，全渠道工作。Cocos Creator 是以?xún)?nèi)容創(chuàng)作為中心的游戲開(kāi)發(fā)東西，在 Cocos2d-x 基礎(chǔ)上實(shí)現(xiàn)了完全腳本化、組件化和數(shù)據(jù)驅(qū)動(dòng)等特征。本文將詳細(xì)介紹cocos creator 入門(mén)常識(shí)

工作流程

cocos creator的流程如下所示

【創(chuàng)建或?qū)胭Y源】

將圖片、聲音等資源拖拽到編輯器的資源管理器面板中，即可完結(jié)資源導(dǎo)

此外，也能夠在編輯器中直接創(chuàng)建場(chǎng)景、預(yù)制、動(dòng)畫(huà)、腳本、粒子等各類(lèi)資源

【建造場(chǎng)景內(nèi)容】

項(xiàng)目中有了一些根本資源后，就能夠開(kāi)端建立場(chǎng)景了，場(chǎng)景是游戲內(nèi)容最根本的安排方法，也是向玩家展現(xiàn)游戲的根本形態(tài)

經(jīng)過(guò)場(chǎng)景編輯器將添加各類(lèi)節(jié)點(diǎn)，擔(dān)任展現(xiàn)游戲的美術(shù)音效資源，并作為后續(xù)交互功用的承載

【添加組件腳本，完成交互功用】

可認(rèn)為場(chǎng)景中的節(jié)點(diǎn)掛載各種內(nèi)置組件和自定義腳本組件，來(lái)完成游戲邏輯的運(yùn)轉(zhuǎn)和交互，包括從最根本的動(dòng)畫(huà)播映、按鈕響應(yīng)，到驅(qū)動(dòng)整個(gè)游戲邏輯的主循環(huán)腳本和玩家角色的控制

幾乎一切游戲邏輯功用都是經(jīng)過(guò)掛載腳本到場(chǎng)景中的節(jié)點(diǎn)來(lái)完成的

【一鍵預(yù)覽和發(fā)布】

建立場(chǎng)景和開(kāi)發(fā)功用的過(guò)程中，能夠隨時(shí)點(diǎn)擊預(yù)覽來(lái)檢查當(dāng)時(shí)場(chǎng)景的運(yùn)轉(zhuǎn)效果。使用手機(jī)掃描二維碼，能夠立即在手機(jī)上預(yù)覽游戲

當(dāng)開(kāi)發(fā)告一段落時(shí)，經(jīng)過(guò)構(gòu)建發(fā)布面板能夠一鍵發(fā)布游戲到包括桌面、手機(jī)、Web 等多個(gè)平臺(tái)

安裝和啟動(dòng)

【windows】

從 v1.3.0 開(kāi)始，Windows 版 Cocos Creator 將不供給 32 位操作體系支撐，Windows 所支撐的最低版別是 Windows 7 64位

Windows 版的裝置程序是一個(gè) .exe 可執(zhí)行文件，一般命名會(huì)是 CocosCreator_vX.X.X_20XXXXXX_setup.exe，其間 vX.X.X 是 Cocos Creator 的版別號(hào)，如 v1.2.2，后面的一串?dāng)?shù)字是版別日期編號(hào)

注意：日期編號(hào)在運(yùn)用內(nèi)測(cè)版時(shí)會(huì)更新的比較頻頻，假如當(dāng)時(shí) PC 上已裝置的版別號(hào)和裝置包的版別號(hào)相同時(shí)，無(wú)法主動(dòng)覆蓋裝置注意相同版別號(hào)的裝置包，需要先卸載之前的版別才能持續(xù)裝置

Cocos Creator 將會(huì)占有體系盤(pán)中大約 1.25 GB 的空間，運(yùn)用的裝置路徑默許選擇了 C:\CocosCreator，能夠在裝置過(guò)程中進(jìn)行指定

對(duì)于部分 windows 操作體系和顯卡類(lèi)型，或許會(huì)遇到如下報(bào)錯(cuò)信息

This browser does not support WebGL...

這是顯卡驅(qū)動(dòng)對(duì)編輯器 WebGL 烘托模式的支撐不正確導(dǎo)致的，假如呈現(xiàn)這種情況，能夠測(cè)驗(yàn)運(yùn)用命令行運(yùn)轉(zhuǎn) CocosCreator.exe 并加上 --disable-gpu 運(yùn)轉(zhuǎn)參數(shù)，來(lái)禁用 GPU 加速功用，能夠繞開(kāi)部分顯卡驅(qū)動(dòng)的問(wèn)題

【mac】

Mac OS X 所支撐的最低版別是 OS X 10.9

Mac 版 Cocos Creator 的裝置程序是 DMG 鏡像文件，雙擊 DMG 文件，然后將 CocosCreator.app 拖拽到運(yùn)用程序文件夾快捷方式，或恣意其他方位。然后雙擊復(fù)制出來(lái)的 CocosCreator.app 就能夠開(kāi)始運(yùn)用了

注意： 假如初次運(yùn)轉(zhuǎn)時(shí)呈現(xiàn)下載的運(yùn)用已損壞的提示，請(qǐng)前往并設(shè)置 體系偏好設(shè)置->安全性與隱私->允許任何來(lái)源的運(yùn)用，初次打開(kāi)后能夠立刻康復(fù)安全與隱私設(shè)置

【版別兼容】

Cocos Creator 版別升級(jí)時(shí)，新版別的編輯器能夠打開(kāi)舊版別的項(xiàng)目，但當(dāng)項(xiàng)目開(kāi)發(fā)到一半時(shí)升級(jí)新版別的 Cocos Creator 時(shí)也或許會(huì)遇到一些問(wèn)題。由于在早期版別中引擎和編輯器的完成或許存在 bug 和其他不合理的問(wèn)題，這些問(wèn)題能夠經(jīng)過(guò)用戶(hù)項(xiàng)目和腳本的特定運(yùn)用方法來(lái)規(guī)避，但當(dāng)后續(xù)版別中修正了這些 bug 和問(wèn)題時(shí)就或許會(huì)對(duì)現(xiàn)有項(xiàng)目形成影響

在發(fā)現(xiàn)這種版別升級(jí)形成的問(wèn)題時(shí)，除了聯(lián)系開(kāi)發(fā)團(tuán)隊(duì)尋求解決辦法，也能夠卸載新版別的 Cocos Creator 并重新裝置舊版別

裝置舊版別過(guò)程中或許遇到的問(wèn)題有：

1、在Windows下，或許會(huì)遇到裝置舊版別時(shí)提示「已經(jīng)有一個(gè)更新版別的運(yùn)用程序已裝置」，假如確認(rèn)已經(jīng)經(jīng)過(guò)控制面板正確卸載了新版別的 Cocos Creator 還不能裝置舊版別，能夠訪問(wèn)微軟官方解決無(wú)法裝置或卸載程序的協(xié)助頁(yè)，按照提示下載小工具并修正損壞的裝置信息，即可持續(xù)裝置舊版別了

2、運(yùn)用新版別 Cocos Creator 打開(kāi)過(guò)的項(xiàng)目，在舊版別 Cocos Creator 中打開(kāi)或許會(huì)遇到編輯器面板無(wú)法顯示內(nèi)容的問(wèn)題，能夠測(cè)驗(yàn)選擇主菜單中的「布局->恢復(fù)默許布局」來(lái)進(jìn)行修正

入門(mén)示例

【創(chuàng)建項(xiàng)目】

在 Dashboard 中，打開(kāi) 【新建項(xiàng)目】 選項(xiàng)卡，選中 Hello World 項(xiàng)目模板

然后會(huì)在下面的項(xiàng)目路徑欄中指定一個(gè)新項(xiàng)目即將被創(chuàng)建的位置，路徑的最后一部分就是項(xiàng)目文件夾

填好路徑后點(diǎn)擊右下角的 新建項(xiàng)目 按鈕，就會(huì)自動(dòng)以 Hello World 項(xiàng)目模板創(chuàng)建項(xiàng)目并打開(kāi)

【打開(kāi)場(chǎng)景】

Cocos Creator 的工作流程是以數(shù)據(jù)驅(qū)動(dòng)和場(chǎng)景為核心的，初次打開(kāi)一個(gè)項(xiàng)目時(shí)，默認(rèn)不會(huì)打開(kāi)任何場(chǎng)景，要看到 Hello World 模板中的內(nèi)容，需要先打開(kāi)場(chǎng)景資源文件

在 資源管理器 中雙擊箭頭所指的 helloworld 場(chǎng)景文件。Cocos Creator 中所有場(chǎng)景文件都以火焰圖作為圖標(biāo)

【項(xiàng)目?jī)?nèi)容】

打開(kāi) helloworld 場(chǎng)景后，就可以看到這個(gè)模板項(xiàng)目中的全部?jī)?nèi)容了

場(chǎng)景中的內(nèi)容會(huì)按照工作流分別呈現(xiàn)在 資源管理器、層級(jí)管理器、場(chǎng)景編輯器、屬性檢查器 四個(gè)核心面板中

【預(yù)覽場(chǎng)景】

要預(yù)覽游戲場(chǎng)景，點(diǎn)擊編輯器窗口正上方的 預(yù)覽游戲 按鈕

Cocos Creator 會(huì)使用默認(rèn)瀏覽器運(yùn)行當(dāng)前游戲場(chǎng)景，效果如圖所示：

點(diǎn)擊預(yù)覽窗口左上角的下拉菜單，可以選擇不同設(shè)備屏幕的預(yù)覽效果

項(xiàng)目結(jié)構(gòu)

初次創(chuàng)建并打開(kāi)一個(gè) Cocos Creator 項(xiàng)目后，項(xiàng)目文件夾將會(huì)包括以下結(jié)構(gòu)：

ProjectName（項(xiàng)目文件夾）

├──assets

├──library

├──local

├──settings

├──temp

└──project.json

【assets】

assets 將會(huì)用來(lái)放置游戲中所有本地資源、腳本和第三方庫(kù)文件。只要在 assets 目錄下的內(nèi)容才能顯現(xiàn)在資源辦理器中

assets 中的每個(gè)文件在導(dǎo)入項(xiàng)目后都會(huì)生成一個(gè)相同名字的 .meta 文件，用于存儲(chǔ)該文件作為資源導(dǎo)入后的信息和與其他資源的相關(guān)

一些第三方東西生成的工程或設(shè)計(jì)原文件，如 TexturePacker 的 .tps 文件，或 Photoshop 的 .psd 文件，可以挑選放在 assets 外面來(lái)辦理

【library】

library 是將 assets 中的資源導(dǎo)入后生成的。在這兒，文件的結(jié)構(gòu)和資源的格式將被處理成最終游戲發(fā)布時(shí)需要的方式。假如運(yùn)用版別操控系統(tǒng)辦理項(xiàng)目，這個(gè)文件夾是不需要進(jìn)入版別操控的。 當(dāng) library 丟失或損壞的時(shí)分，只需刪去整個(gè) library 文件夾再打開(kāi)項(xiàng)目，就會(huì)重新生成資源庫(kù)

【local】

local 文件夾中包含該項(xiàng)意圖本地設(shè)置，包含編輯器面板布局，窗口巨細(xì)，方位等信息。不需要關(guān)懷這兒的內(nèi)容，只需按照習(xí)氣設(shè)置編輯器布局，這些就會(huì)主動(dòng)保存在這個(gè)文件夾。一般 local 也不需要進(jìn)入版別操控

【settings】

settings 里保存項(xiàng)目相關(guān)的設(shè)置，如構(gòu)建發(fā)布菜單里的包名、場(chǎng)景和渠道挑選等。這些設(shè)置需要和項(xiàng)目一同進(jìn)行版別操控

【Project.json】

project.json 文件和 assets 文件夾一同，作為驗(yàn)證 Cocos Creator 項(xiàng)目合法性的標(biāo)志。只要包含了這兩個(gè)內(nèi)容的文件夾才能作為 Cocos Creator 項(xiàng)目打開(kāi)。而 project.json 自身目前只用來(lái)規(guī)則當(dāng)時(shí)運(yùn)用的引擎類(lèi)型和插件存儲(chǔ)方位，不需要用戶(hù)關(guān)懷其內(nèi)容。這個(gè)文件也應(yīng)該納入版別操控

【build】

在運(yùn)用主菜單中的 項(xiàng)目->構(gòu)建發(fā)布... 運(yùn)用默認(rèn)發(fā)布途徑發(fā)布項(xiàng)目后，編輯器會(huì)在項(xiàng)目途徑下創(chuàng)建 build 目錄，并存放所有目標(biāo)渠道的構(gòu)建工程。因?yàn)槊看伟l(fā)布項(xiàng)目后資源 id 可能會(huì)變化，而且構(gòu)建原生工程時(shí)體積很大，所以此目錄主張不進(jìn)入版別操控

編輯器界面

Cocos Creator 編輯器由多個(gè)面板組成，面板可以自由移動(dòng)、組合，以適應(yīng)不同項(xiàng)目和開(kāi)發(fā)者的需要

【資源編輯器(assets)】

資源管理器里顯示了項(xiàng)目資源文件夾（assets）中的所有資源。這里會(huì)以樹(shù)狀結(jié)構(gòu)顯示文件夾并自動(dòng)同步在操作系統(tǒng)中對(duì)項(xiàng)目資源文件夾內(nèi)容的修改

可以將文件從項(xiàng)目外面直接拖拽進(jìn)來(lái)，或使用菜單導(dǎo)入資源

資源列表中能夠包含任意文件夾結(jié)構(gòu)，文件夾在 資源管理器 中會(huì)以藍(lán)色文件夾圖標(biāo)顯現(xiàn)，點(diǎn)擊圖標(biāo)左面的箭頭就能夠打開(kāi)/折疊該文件夾中的內(nèi)容

除了文件夾之外列表中顯現(xiàn)的都是資源文件，資源列表中的文件會(huì)躲藏?cái)U(kuò)展名，而以圖標(biāo)指示文件或資源的類(lèi)型，比如HelloWorld模板創(chuàng)建出的項(xiàng)目中包含了三種中心資源：

1、image圖片資源：現(xiàn)在包含 jpg, png 等圖像文件，圖標(biāo)會(huì)顯現(xiàn)為圖片的縮略圖

2、javascript腳本資源：程序員編寫(xiě)的 JavaScript 腳本文件，以js為文件擴(kuò)展名。經(jīng)過(guò)修改這些腳本為添加組件功能和游戲邏輯

3、scene場(chǎng)景資源：雙擊能夠翻開(kāi)的場(chǎng)景文件，翻開(kāi)了場(chǎng)景文件才能繼續(xù)進(jìn)行內(nèi)容創(chuàng)作和生產(chǎn)

現(xiàn)在能夠在 資源管理器 中創(chuàng)建的資源有以下幾類(lèi)：

1、文件夾

2、腳本文件

3、場(chǎng)景

4、動(dòng)畫(huà)編排

注意：刪除資源是不可吊銷(xiāo)的操作，無(wú)法從回收站（Windows）或廢紙簍（Mac）找回

【場(chǎng)景修改器(scene)】

場(chǎng)景修改器是內(nèi)容創(chuàng)作的中心作業(yè)區(qū)域，使用它挑選和擺放場(chǎng)景圖像、角色、特效、UI 等各類(lèi)游戲元素。在這個(gè)作業(yè)區(qū)域里，能夠選中并經(jīng)過(guò)變換工具修改節(jié)點(diǎn)的方位、旋轉(zhuǎn)、縮放、尺寸等屬性，并能夠取得所見(jiàn)即所得的場(chǎng)景作用預(yù)覽

可以通過(guò)以下的操作來(lái)移動(dòng)和定位場(chǎng)景編輯器的視圖：

1、鼠標(biāo)右鍵拖拽：平移視圖

2、鼠標(biāo)滾輪：以當(dāng)前鼠標(biāo)懸停位置為中心縮放視圖

場(chǎng)景視圖的背景會(huì)顯示一組標(biāo)尺和網(wǎng)格，表示世界坐標(biāo)系中各個(gè)點(diǎn)的位置信息。讀數(shù)為(0,0)的點(diǎn)為場(chǎng)景中世界坐標(biāo)系的原點(diǎn)

視圖中的紫色線框表示場(chǎng)景中默認(rèn)會(huì)顯示的內(nèi)容區(qū)域，這塊區(qū)域的大小由設(shè)計(jì)分辨率決定

鼠標(biāo)懸浮到場(chǎng)景中的節(jié)點(diǎn)上時(shí)，節(jié)點(diǎn)的約束框?qū)?huì)以灰色單線顯示出來(lái)。此時(shí)單擊鼠標(biāo)，就會(huì)選中該節(jié)點(diǎn)。選擇節(jié)點(diǎn)是使用變換工具設(shè)置節(jié)點(diǎn)位置、旋轉(zhuǎn)、縮放等操作的前提，選中的節(jié)點(diǎn)周?chē)鷮?huì)有藍(lán)色的線框提示節(jié)點(diǎn)的約束框

工具欄中的變換工具從左到右分別是移動(dòng)變換工具(W)、旋轉(zhuǎn)變換工具(E)、縮放變換工具(E)、矩形變換工具（R）

【層級(jí)管理器】

層級(jí)管理器用樹(shù)狀列表的形式展示場(chǎng)景中的所有節(jié)點(diǎn)和他們的層級(jí)關(guān)系，所有在場(chǎng)景編輯器中看到的內(nèi)容都可以在層級(jí)管理器中找到對(duì)應(yīng)的節(jié)點(diǎn)條目，在編輯場(chǎng)景時(shí)這兩個(gè)面板的內(nèi)容會(huì)同步顯示，一般會(huì)同時(shí)使用這兩個(gè)面板來(lái)搭建場(chǎng)景

層級(jí)管理器中包括當(dāng)前打開(kāi)場(chǎng)景中的所有節(jié)點(diǎn)，通過(guò)點(diǎn)擊來(lái)選中節(jié)點(diǎn)，被選中的節(jié)點(diǎn)會(huì)以藍(lán)底色高亮顯示。當(dāng)前選中的節(jié)點(diǎn)會(huì)在場(chǎng)景編輯器中顯示藍(lán)色邊框，并更新屬性檢查器中的內(nèi)容

節(jié)點(diǎn)在列表中的排序決定了節(jié)點(diǎn)在場(chǎng)景中的顯示次序。在層級(jí)管理器中位置越靠下的節(jié)點(diǎn)，在場(chǎng)景中的渲染就會(huì)更晚，也就會(huì)覆蓋列表中位置較為靠上的節(jié)點(diǎn)

【屬性檢查器】

屬性檢查器是查看并編輯當(dāng)前選中節(jié)點(diǎn)和組件屬性的工作區(qū)域。在場(chǎng)景編輯器或?qū)蛹?jí)管理器中選中節(jié)點(diǎn)，就會(huì)在屬性檢查器中顯示該節(jié)點(diǎn)的屬性和節(jié)點(diǎn)上所有組件的屬性以供查詢(xún)和編輯

屬性檢查器面板從上到下依次是：

1、節(jié)點(diǎn)激活開(kāi)關(guān)和節(jié)點(diǎn)名稱(chēng)

2、節(jié)點(diǎn)屬性

3、組件屬性

左上角的復(fù)選框表示節(jié)點(diǎn)的激活狀態(tài)，節(jié)點(diǎn)處于非激活狀態(tài)時(shí)，節(jié)點(diǎn)上所有圖像渲染相關(guān)的組件都會(huì)被關(guān)閉，整個(gè)節(jié)點(diǎn)包括子節(jié)點(diǎn)就會(huì)被有效的隱藏；節(jié)點(diǎn)激活開(kāi)關(guān)右邊顯示的是節(jié)點(diǎn)的名稱(chēng)，和 層級(jí)管理器 中的節(jié)點(diǎn)顯示名稱(chēng)一致

屬性檢查器接下來(lái)會(huì)顯示節(jié)點(diǎn)的屬性，節(jié)點(diǎn)的屬性排列在Node標(biāo)題的下面，點(diǎn)擊Node可以將節(jié)點(diǎn)的屬性折疊或展開(kāi)

節(jié)點(diǎn)的屬性除了位置（Position）、旋轉(zhuǎn)（Rotation）、縮放（Scale）、尺寸（Size）等變換屬性以外，還包括錨點(diǎn)（Anchor）、顏色（Color）、不透明度（Opacity）。修改節(jié)點(diǎn)的屬性通常可以立刻在場(chǎng)景編輯器中看到節(jié)點(diǎn)的外觀或位置變化

節(jié)點(diǎn)屬性下面，會(huì)列出節(jié)點(diǎn)上掛載的所有組件和組件的屬性。用戶(hù)通過(guò)腳本創(chuàng)建的組件，其屬性是由腳本聲明的。不同類(lèi)型的屬性在屬性檢查器中有不同的控件外觀和編輯方式

屬性是組件腳本中聲明的公開(kāi)并可被序列化存儲(chǔ)在場(chǎng)景和動(dòng)畫(huà)數(shù)據(jù)中的變量，通?？梢愿鶕?jù)變量使用內(nèi)存位置不同將屬性分為值類(lèi)型和引用類(lèi)型兩大類(lèi)

1、值類(lèi)型包括數(shù)值(Number)、向量(Vec2)、字符串(String)、布爾值(Boolean)、枚舉(Enum)、顏色(Color)等簡(jiǎn)單的占用很少內(nèi)存的變量類(lèi)型

2、引用類(lèi)型包括更復(fù)雜的對(duì)象，比如節(jié)點(diǎn)、組件或資源。和值類(lèi)型各式各樣的編輯方式不同，引用類(lèi)型通常只有一種編輯方式：拖拽節(jié)點(diǎn)或資源到屬性欄中

需要拖拽節(jié)點(diǎn)來(lái)賦值的屬性欄上會(huì)顯示綠色的標(biāo)簽，標(biāo)簽上可能會(huì)顯示Node，表示任意節(jié)點(diǎn)都可以拖拽上去，或者標(biāo)簽顯示組件名如Sprite，Animation等，這時(shí)需要拖拽掛載了相應(yīng)組件的節(jié)點(diǎn)才行

需要拖拽資源賦值的屬性欄上會(huì)顯示黃色的標(biāo)簽，標(biāo)簽上顯示的是資源的類(lèi)型，如sprite-frame，prefab，font等。只要從 資源管理器 中拖拽相應(yīng)類(lèi)型的資源過(guò)來(lái)就可以完成賦值

【控制臺(tái)】

控制臺(tái)會(huì)顯示報(bào)錯(cuò)、警告或其他 Cocos Creator 編輯器和引擎生成的日志信息。不同重要級(jí)別的信息會(huì)以不同顏色顯示：

1、日志（Log）：灰色文字，通常用來(lái)顯示正在進(jìn)行的操作

2、提示（Info）：藍(lán)色文字，用來(lái)顯示重要提示信息

3、成功（Success）：綠色文字，表示當(dāng)前執(zhí)行的操作已成功完成

4、警告（Warn）：黃色文字，用來(lái)提示用戶(hù)最好進(jìn)行處理的異常情況，但不處理也不會(huì)影響運(yùn)行

5、報(bào)錯(cuò)（Error）：紅色文字，表示出現(xiàn)了嚴(yán)重錯(cuò)誤，必須解決才能進(jìn)行下一步操作或運(yùn)行游戲

好的代碼像粥一樣，都是用時(shí)間熬出來(lái)的