Cocos Creator 是一個(gè)完整的游戲開發(fā)解決方案，包含了 cocos2d-x 引擎的 JavaScript 實(shí)現(xiàn)，以及快速開發(fā)游戲所需求的各種圖形界面東西。Cocos Creator 的編輯器完全為引擎定制打造，包含從規(guī)劃、開發(fā)、預(yù)覽、調(diào)試到發(fā)布的整個(gè)工作流所需的全功能，該編輯器供給面向規(guī)劃和開發(fā)的兩種工作流，供給簡略順暢的分工合作方法。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)建場景、預(yù)制、動(dòng)畫、腳本、粒子等各類資源。

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

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

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

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

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

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

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

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

　　當(dāng)開發(fā)告一段落時(shí)，經(jīng)過構(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)測版時(shí)會(huì)更新的比較頻頻，假如當(dāng)時(shí) PC 上已裝置的版別號(hào)和裝置包的版別號(hào)相同時(shí)，無法主動(dòng)覆蓋裝置注意相同版別號(hào)的裝置包，需要先卸載之前的版別才能持續(xù)裝置。

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

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

This browser does not support WebGL...

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

【mac】

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

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

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

【版別兼容】

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

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

　　裝置舊版別過程中或許遇到的問題有：

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

2、運(yùn)用新版別 Cocos Creator 打開過的項(xiàng)目，在舊版別 Cocos Creator 中打開或許會(huì)遇到編輯器面板無法顯示內(nèi)容的問題，能夠測驗(yàn)選擇主菜單中的「布局->恢復(fù)默許布局」來進(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)目并打開。

【打開場景】

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

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

【項(xiàng)目內(nèi)容】

　　打開 helloworld 場景后，就可以看到這個(gè)模板項(xiàng)目中的全部內(nèi)容了。

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

【預(yù)覽場景】

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

點(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ì)用來放置游戲中所有本地資源、腳本和第三方庫文件。只要在 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 外面來辦理。

【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ì)重新生成資源庫。

【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ā)布菜單里的包名、場景和渠道挑選等。這些設(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 自身目前只用來規(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)來，或使用菜單導(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)過修改這些腳本為添加組件功能和游戲邏輯。

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

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

?1、文件夾

2、腳本文件

3、場景

4、動(dòng)畫編排

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

【場景修改器(scene)】

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

? ? ? ?可以通過以下的操作來移動(dòng)和定位場景編輯器的視圖：

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

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

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

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

　　鼠標(biāo)懸浮到場景中的節(jié)點(diǎn)上時(shí)，節(jié)點(diǎn)的約束框?qū)?huì)以灰色單線顯示出來。此時(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í)管理器用樹狀列表的形式展示場景中的所有節(jié)點(diǎn)和他們的層級(jí)關(guān)系，所有在場景編輯器中看到的內(nèi)容都可以在層級(jí)管理器中找到對(duì)應(yīng)的節(jié)點(diǎn)條目，在編輯場景時(shí)這兩個(gè)面板的內(nèi)容會(huì)同步顯示，一般會(huì)同時(shí)使用這兩個(gè)面板來搭建場景。

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

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

【屬性檢查器】

　　屬性檢查器是查看并編輯當(dāng)前選中節(jié)點(diǎn)和組件屬性的工作區(qū)域。在場景編輯器或?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)顯示名稱一致。

　　屬性檢查器接下來會(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)的屬性通?？梢粤⒖淘趫鼍熬庉嬈髦锌吹焦?jié)點(diǎn)的外觀或位置變化。

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

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

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

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

　　需要拖拽節(jié)點(diǎn)來賦值的屬性欄上會(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)類型的資源過來就可以完成賦值。

【控制臺(tái)】

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

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

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

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

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

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

更多資源盡在：

我的學(xué)習(xí)交流群哦