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

一、工作流程

cocos creator的流程如下所示

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

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

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

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

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

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

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

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

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

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

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

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

二、安裝和啟動

【windows】

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

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

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

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

　　對于部分 windows 操作體系和顯卡類型，或許會遇到如下報錯信息。

This browser does not support WebGL...

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

【mac】

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

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

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

【版別兼容】

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

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

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

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

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

三、入門示例

【創(chuàng)建項目】

　　在 Dashboard 中，打開 【新建項目】 選項卡，選中 Hello World 項目模板。

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

　　填好路徑后點擊右下角的 新建項目 按鈕，就會自動以 Hello World 項目模板創(chuàng)建項目并打開。

【打開場景】

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

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

【項目內(nèi)容】

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

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

【預(yù)覽場景】

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

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

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

四、項目結(jié)構(gòu)

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

ProjectName（項目文件夾）

──assets

──library

──local

──settings

──temp

──project.json

【assets】

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

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

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

【library】

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

【local】

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

【settings】

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

【Project.json】

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

【build】

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

五、編輯器界面

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

【資源編輯器(assets)】

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

　　可以將文件從項目外面直接拖拽進來，或使用菜單導(dǎo)入資源。

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

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

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

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

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

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

1、文件夾

2、腳本文件

3、場景

4、動畫編排

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

【場景修改器(scene)】

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

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

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

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

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

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

　　鼠標(biāo)懸浮到場景中的節(jié)點上時，節(jié)點的約束框?qū)曰疑珕尉€顯示出來。此時單擊鼠標(biāo)，就會選中該節(jié)點。選擇節(jié)點是使用變換工具設(shè)置節(jié)點位置、旋轉(zhuǎn)、縮放等操作的前提，選中的節(jié)點周圍將會有藍色的線框提示節(jié)點的約束框。

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

【層級管理器】

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

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

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

【屬性檢查器】

　　屬性檢查器是查看并編輯當(dāng)前選中節(jié)點和組件屬性的工作區(qū)域。在場景編輯器或?qū)蛹壒芾砥髦羞x中節(jié)點，就會在屬性檢查器中顯示該節(jié)點的屬性和節(jié)點上所有組件的屬性以供查詢和編輯。

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

1、節(jié)點激活開關(guān)和節(jié)點名稱。

2、節(jié)點屬性。

3、組件屬性。

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

　　屬性檢查器接下來會顯示節(jié)點的屬性，節(jié)點的屬性排列在Node標(biāo)題的下面，點擊Node可以將節(jié)點的屬性折疊或展開。

　　節(jié)點的屬性除了位置（Position）、旋轉(zhuǎn)（Rotation）、縮放（Scale）、尺寸（Size）等變換屬性以外，還包括錨點（Anchor）、顏色（Color）、不透明度（Opacity）。修改節(jié)點的屬性通?？梢粤⒖淘趫鼍熬庉嬈髦锌吹焦?jié)點的外觀或位置變化。

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

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

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

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

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

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

【控制臺】

　　控制臺會顯示報錯、警告或其他 Cocos Creator 編輯器和引擎生成的日志信息。不同重要級別的信息會以不同顏色顯示：

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

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

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

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

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

更多資源盡在：https://bycwedu.vipwan.cn/promotion_channels/630597732