引言

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

工作流程

cocos creator的流程如下所示

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

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

此外趴腋，也能夠在編輯器中直接創(chuàng)建場(chǎng)景吊说、預(yù)制、動(dòng)畫优炬、腳本颁井、粒子等各類資源

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

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

經(jīng)過(guò)場(chǎng)景編輯器將添加各類節(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)畫播映吐辙、按鈕響應(yīng)，到驅(qū)動(dòng)整個(gè)游戲邏輯的主循環(huán)腳本和玩家角色的控制

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

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

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

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

安裝和啟動(dòng)

【windows】

從 v1.3.0 開始棒掠，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ì)占有體系盤中大約 1.25 GB 的空間芹橡，運(yùn)用的裝置路徑默許選擇了 C:\CocosCreator毒坛，能夠在裝置過(guò)程中進(jìn)行指定

對(duì)于部分 windows 操作體系和顯卡類型，或許會(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 加速功用，能夠繞開部分顯卡驅(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 就能夠開始運(yùn)用了

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

【版別兼容】

Cocos Creator 版別升級(jí)時(shí)唆貌，新版別的編輯器能夠打開舊版別的項(xiàng)目，但當(dāng)項(xiàng)目開發(fā)到一半時(shí)升級(jí)新版別的 Cocos Creator 時(shí)也或許會(huì)遇到一些問(wèn)題垢乙。由于在早期版別中引擎和編輯器的完成或許存在 bug 和其他不合理的問(wèn)題锨咙，這些問(wèn)題能夠經(jīng)過(guò)用戶項(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)系開發(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 打開過(guò)的項(xiàng)目漾唉，在舊版別 Cocos Creator 中打開或許會(huì)遇到編輯器面板無(wú)法顯示內(nèi)容的問(wèn)題荧库，能夠測(cè)驗(yàn)選擇主菜單中的「布局->恢復(fù)默許布局」來(lái)進(jìn)行修正

入門示例

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

在 Dashboard 中，打開 【新建項(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)目并打開

【打開場(chǎng)景】

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

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

【項(xiàng)目?jī)?nè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)建并打開一個(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 文件夾再打開項(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)目打開畅厢。而 project.json 自身目前只用來(lái)規(guī)則當(dāng)時(shí)運(yùn)用的引擎類型和插件存儲(chǔ)方位，不需要用戶關(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)目和開發(fā)者的需要

【資源編輯器(assets)】

資源管理器里顯示了項(xiàng)目資源文件夾（assets）中的所有資源。這里會(huì)以樹狀結(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)左面的箭頭就能夠打開/折疊該文件夾中的內(nèi)容

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

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

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

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

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

1再层、文件夾

2贸铜、腳本文件

3堡纬、場(chǎng)景

4、動(dòng)畫編排

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

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

場(chǎng)景修改器是內(nèi)容創(chuàng)作的中心作業(yè)區(qū)域烤镐，使用它挑選和擺放場(chǎng)景圖像、角色棍鳖、特效炮叶、UI 等各類游戲元素。在這個(gè)作業(yè)區(qū)域里渡处，能夠選中并經(jīng)過(guò)變換工具修改節(jié)點(diǎn)的方位镜悉、旋轉(zhuǎ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)周圍將會(huì)有藍(lán)色的線框提示節(jié)點(diǎn)的約束框

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

【層級(jí)管理器】

層級(jí)管理器用樹狀列表的形式展示場(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)前打開場(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)上所有組件的屬性以供查詢和編輯

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

1骤视、節(jié)點(diǎn)激活開關(guān)和節(jié)點(diǎn)名稱

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)激活開關(guān)右邊顯示的是節(jié)點(diǎn)的名稱，和 層級(jí)管理器 中的節(jié)點(diǎn)顯示名稱一致

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

節(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)上掛載的所有組件和組件的屬性。用戶通過(guò)腳本創(chuàng)建的組件停撞，其屬性是由腳本聲明的瓷蛙。不同類型的屬性在屬性檢查器中有不同的控件外觀和編輯方式

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

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

2食听、引用類型包括更復(fù)雜的對(duì)象胸蛛，比如節(jié)點(diǎn)、組件或資源樱报。和值類型各式各樣的編輯方式不同葬项，引用類型通常只有一種編輯方式：拖拽節(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)簽上顯示的是資源的類型，如sprite-frame箩兽，prefab津肛，font等。只要從 資源管理器 中拖拽相應(yīng)類型的資源過(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)提示用戶最好進(jìn)行處理的異常情況，但不處理也不會(huì)影響運(yùn)行

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

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