cocos creator入門

 前面的話

　　Cocos Creator 是一個完整的遊戲開發解決方案，包括了 cocos2d-x 引擎的 JavaScript 實現，以及快速開發遊戲所須要的各類圖形界面工具。Cocos Creator 的編輯器徹底爲引擎定製打造，包含從設計、開發、預覽、調試到發佈的整個工做流所需的全功能，該編輯器提供面向設計和開發的兩種工做流，提供簡單順暢的分工合做方式。Cocos Creator 目前支持發佈遊戲到 Web、Android 和 iOS，真正實現一次開發，全平臺運行。Cocos Creator 是之內容創做爲核心的遊戲開發工具，在 Cocos2d-x 基礎上實現了完全腳本化、組件化和數據驅動等特色。本文將詳細介紹cocos creator 入門知識

 

工做流程

　　cocos creator的流程以下所示

【建立或導入資源】

　　將圖片、聲音等資源拖拽到編輯器的資源管理器面板中，便可完成資源導入

　　此外，也能夠在編輯器中直接建立場景、預製、動畫、腳本、粒子等各種資源

【建造場景內容】

　　項目中有了一些基本資源後，就能夠開始搭建場景了，場景是遊戲內容最基本的組織方式，也是向玩家展現遊戲的基本形態

　　經過場景編輯器將添加各種節點，負責展現遊戲的美術音效資源，並做爲後續交互功能的承載

【添加組件腳本，實現交互功能】

　　能夠爲場景中的節點掛載各類內置組件和自定義腳本組件，來實現遊戲邏輯的運行和交互，包括從最基本的動畫播放、按鈕響應，到驅動整個遊戲邏輯的主循環腳本和玩家角色的控制

　　幾乎全部遊戲邏輯功能都是經過掛載腳本到場景中的節點來實現的

【一鍵預覽和發佈】

　　搭建場景和開發功能的過程當中，能夠隨時點擊預覽來查看當前場景的運行效果。使用手機掃描二維碼，能夠當即在手機上預覽遊戲

　　當開發告一段落時，經過構建發佈面板能夠一鍵發佈遊戲到包括桌面、手機、Web 等多個平臺

 

安裝和啓動

【windows】

　　從 v1.3.0 開始，Windows 版 Cocos Creator 將不提供 32 位操做系統支持，Windows 所支持的最低版本是 Windows 7 64位

　　Windows 版的安裝程序是一個 .exe 可執行文件，一般命名會是 CocosCreator_vX.X.X_20XXXXXX_setup.exe，其中 vX.X.X 是 Cocos Creator 的版本號，如 v1.2.2，後面的一串數字是版本日期編號

　　注意：日期編號在使用內測版時會更新的比較頻繁，若是當前 PC 上已安裝的版本號和安裝包的版本號相同時，沒法自動覆蓋安裝注意相同版本號的安裝包，須要先卸載以前的版本才能繼續安裝

　　Cocos Creator 將會佔據系統盤中大約 1.25 GB 的空間，應用的安裝路徑默認選擇了 C:\CocosCreator，能夠在安裝過程當中進行指定

　　對於部分 windows 操做系統和顯卡型號，可能會遇到以下報錯信息

This browser does not support WebGL...

　　這是顯卡驅動對編輯器 WebGL 渲染模式的支持不正確致使的，若是出現這種狀況，能夠嘗試使用命令行運行 CocosCreator.exe 並加上 --disable-gpu 運行參數，來禁用 GPU 加速功能，能夠繞開部分顯卡驅動的問題

【mac】

　　Mac OS X 所支持的最低版本是 OS X 10.9

　　Mac 版 Cocos Creator 的安裝程序是 DMG 鏡像文件，雙擊 DMG 文件，而後將 CocosCreator.app 拖拽到應用程序文件夾快捷方式，或任意其餘位置。而後雙擊複製出來的 CocosCreator.app 就能夠開始使用了

　　注意： 若是初次運行時出現下載的應用已損壞的提示，請前往並設置 系統偏好設置->安全性與隱私->容許任何來源的應用，首次打開後能夠立刻恢復安全與隱私設置

【版本兼容】

　　Cocos Creator 版本升級時，新版本的編輯器能夠打開舊版本的項目，但當項目開發到一半時升級新版本的 Cocos Creator 時也可能會遇到一些問題。由於在早期版本中引擎和編輯器的實現可能存在 bug 和其餘不合理的問題，這些問題能夠經過用戶項目和腳本的特定使用方法來規避，但當後續版本中修復了這些 bug 和問題時就可能會對現有項目形成影響

　　在發現這種版本升級形成的問題時，除了聯繫開發團隊尋求解決辦法，也能夠卸載新版本的 Cocos Creator 並從新安裝舊版本

　　安裝舊版本過程當中可能遇到的問題有：

　　一、在Windows下，可能會遇到安裝舊版本時提示「已經有一個更新版本的應用程序已安裝」，若是肯定已經經過控制面板正確卸載了新版本的 Cocos Creator 還不能安裝舊版本，能夠訪問微軟官方解決沒法安裝或卸載程序的幫助頁，按照提示下載小工具並修復損壞的安裝信息，便可繼續安裝舊版本了

　　二、使用新版本 Cocos Creator 打開過的項目，在舊版本 Cocos Creator 中打開可能會遇到編輯器面板沒法顯示內容的問題，能夠嘗試選擇主菜單中的「佈局->恢復默認佈局」來進行修復

 

入門示例

【建立項目】

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

　　而後在下面的項目路徑欄中指定一個新項目即將被建立的位置，路徑的最後一部分就是項目文件夾

　　填好路徑後點擊右下角的 新建項目 按鈕，就會自動以 Hello World 項目模板建立項目並打開

【打開場景】

　　Cocos Creator 的工做流程是以數據驅動和場景爲核心的，初次打開一個項目時，默認不會打開任何場景，要看到 Hello World 模板中的內容，須要先打開場景資源文件

　　在 資源管理器 中雙擊箭頭所指的 helloworld 場景文件。Cocos Creator 中全部場景文件都以火焰圖做爲圖標

【項目內容】

　　打開 helloworld 場景後，就能夠看到這個模板項目中的所有內容了

　　場景中的內容會按照工做流分別呈如今 資源管理器、層級管理器、場景編輯器、屬性檢查器 四個核心面板中

【預覽場景】

　　要預覽遊戲場景，點擊編輯器窗口正上方的 預覽遊戲 按鈕

　　Cocos Creator 會使用默認瀏覽器運行當前遊戲場景，效果如圖所示：

　　點擊預覽窗口左上角的下拉菜單，能夠選擇不一樣設備屏幕的預覽效果

 

項目結構

　　初次建立並打開一個 Cocos Creator 項目後，項目文件夾將會包括如下結構：

ProjectName（項目文件夾）
├──assets
├──library
├──local
├──settings
├──temp
└──project.json

【assets】

　　assets 將會用來放置遊戲中全部本地資源、腳本和第三方庫文件。只有在 assets 目錄下的內容才能顯示在資源管理器中

　　assets 中的每一個文件在導入項目後都會生成一個相同名字的 .meta 文件，用於存儲該文件做爲資源導入後的信息和與其餘資源的關聯

　　一些第三方工具生成的工程或設計原文件，如 TexturePacker 的 .tps 文件，或 Photoshop 的 .psd 文件，能夠選擇放在 assets 外面來管理

【library】

　　library 是將 assets 中的資源導入後生成的。在這裏，文件的結構和資源的格式將被處理成最終遊戲發佈時須要的形式。若是使用版本控制系統管理項目，這個文件夾是不須要進入版本控制的。 當 library 丟失或損壞的時候，只要刪除整個 library 文件夾再打開項目，就會從新生成資源庫

【local】

　　local 文件夾中包含該項目的本地設置，包括編輯器面板佈局，窗口大小，位置等信息。不須要關心這裏的內容，只要按照習慣設置編輯器佈局，這些就會自動保存在這個文件夾。通常 local 也不須要進入版本控制

【settings】

　　settings 裏保存項目相關的設置，如構建發佈菜單裏的包名、場景和平臺選擇等。這些設置須要和項目一塊兒進行版本控制

【Project.json】

　　project.json 文件和 assets 文件夾一塊兒，做爲驗證 Cocos Creator 項目合法性的標誌。只有包括了這兩個內容的文件夾才能做爲 Cocos Creator 項目打開。而 project.json 自己目前只用來規定當前使用的引擎類型和插件存儲位置，不須要用戶關心其內容。這個文件也應該歸入版本控制

【build】

　　在使用主菜單中的 項目->構建發佈... 使用默認發佈路徑發佈項目後，編輯器會在項目路徑下建立 build 目錄，並存放全部目標平臺的構建工程。因爲每次發佈項目後資源 id 可能會變化，並且構建原生工程時體積很大，因此此目錄建議不進入版本控制

 

編輯器界面

　　Cocos Creator 編輯器由多個面板組成，面板能夠自由移動、組合，以適應不一樣項目和開發者的須要

【資源編輯器(assets)】

　　資源管理器裏顯示了項目資源文件夾（assets）中的全部資源。這裏會以樹狀結構顯示文件夾並自動同步在操做系統中對項目資源文件夾內容的修改

　　能夠將文件從項目外面直接拖拽進來，或使用菜單導入資源

　　資源列表中能夠包括任意文件夾結構，文件夾在 資源管理器 中會以藍色文件夾圖標顯示，點擊圖標左邊的箭頭就能夠展開/摺疊該文件夾中的內容

　　除了文件夾以外列表中顯示的都是資源文件，資源列表中的文件會隱藏擴展名，而以圖標指示文件或資源的類型，好比HelloWorld模板建立出的項目中包括了三種核心資源：

　　一、image圖片資源：目前包括 jpg, png 等圖像文件，圖標會顯示爲圖片的縮略圖

　　二、javascript腳本資源：程序員編寫的 JavaScript 腳本文件，以js爲文件擴展名。經過編輯這些腳本爲添加組件功能和遊戲邏輯

　　三、scene場景資源：雙擊能夠打開的場景文件，打開了場景文件才能繼續進行內容創做和生產

　　目前能夠在 資源管理器 中建立的資源有如下幾類：

　　一、文件夾

　　二、腳本文件

　　三、場景

　　四、動畫剪輯

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

【場景編輯器(scene)】

　　場景編輯器是內容創做的核心工做區域，使用它選擇和擺放場景圖像、角色、特效、UI 等各種遊戲元素。在這個工做區域裏，能夠選中並經過變換工具修改節點的位置、旋轉、縮放、尺寸等屬性，並能夠得到所見即所得的場景效果預覽

　　能夠經過如下的操做來移動和定位場景編輯器的視圖：

　　一、鼠標右鍵拖拽：平移視圖

　　二、鼠標滾輪：以當前鼠標懸停位置爲中心縮放視圖

　　場景視圖的背景會顯示一組標尺和網格，表示世界座標系中各個點的位置信息。讀數爲(0,0)的點爲場景中世界座標系的原點

　　視圖中的紫色線框表示場景中默認會顯示的內容區域，這塊區域的大小由設計分辨率決定

　　鼠標懸浮到場景中的節點上時，節點的約束框將會以灰色單線顯示出來。此時單擊鼠標，就會選中該節點。選擇節點是使用變換工具設置節點位置、旋轉、縮放等操做的前提，選中的節點周圍將會有藍色的線框提示節點的約束框

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

【層級管理器】

　　層級管理器用樹狀列表的形式展現場景中的全部節點和他們的層級關係，全部在場景編輯器中看到的內容均可以在層級管理器中找到對應的節點條目，在編輯場景時這兩個面板的內容會同步顯示，通常會同時使用這兩個面板來搭建場景

　　層級管理器中包括當前打開場景中的全部節點，經過點擊來選中節點，被選中的節點會以藍底色高亮顯示。當前選中的節點會在場景編輯器中顯示藍色邊框，並更新屬性檢查器中的內容

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

【屬性檢查器】

　　屬性檢查器是查看並編輯當前選中節點和組件屬性的工做區域。在場景編輯器或層級管理器中選中節點，就會在屬性檢查器中顯示該節點的屬性和節點上全部組件的屬性以供查詢和編輯

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

　　一、節點激活開關和節點名稱

　　二、節點屬性

　　三、組件屬性

　　左上角的複選框表示節點的激活狀態，節點處於非激活狀態時，節點上全部圖像渲染相關的組件都會被關閉，整個節點包括子節點就會被有效的隱藏；節點激活開關右邊顯示的是節點的名稱，和 層級管理器 中的節點顯示名稱一致

　　屬性檢查器接下來會顯示節點的屬性，節點的屬性排列在Node標題的下面，點擊Node能夠將節點的屬性摺疊或展開

　　節點的屬性除了位置（Position）、旋轉（Rotation）、縮放（Scale）、尺寸（Size）等變換屬性之外，還包括錨點（Anchor）、顏色（Color）、不透明度（Opacity）。修改節點的屬性一般能夠馬上在場景編輯器中看到節點的外觀或位置變化

　　節點屬性下面，會列出節點上掛載的全部組件和組件的屬性。用戶經過腳本建立的組件，其屬性是由腳本聲明的。不一樣類型的屬性在屬性檢查器中有不一樣的控件外觀和編輯方式

　　屬性是組件腳本中聲明的公開並可被序列化存儲在場景和動畫數據中的變量，一般能夠根據變量使用內存位置不一樣將屬性分爲值類型和引用類型兩大類

　　一、值類型包括數值(Number)、向量(Vec2)、字符串(String)、布爾值(Boolean)、枚舉(Enum)、顏色(Color)等簡單的佔用不多內存的變量類型

　　二、引用類型包括更復雜的對象，好比節點、組件或資源。和值類型各式各樣的編輯方式不一樣，引用類型一般只有一種編輯方式：拖拽節點或資源到屬性欄中

　　須要拖拽節點來賦值的屬性欄上會顯示綠色的標籤，標籤上可能會顯示Node，表示任意節點均可以拖拽上去，或者標籤顯示組件名如Sprite，Animation等，這時須要拖拽掛載了相應組件的節點才行

　　須要拖拽資源賦值的屬性欄上會顯示黃色的標籤，標籤上顯示的是資源的類型，如sprite-frame，prefab，font等。只要從 資源管理器 中拖拽相應類型的資源過來就能夠完成賦值

【控制檯】

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

　　一、日誌（Log）：灰色文字，一般用來顯示正在進行的操做

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

　　三、成功（Success）：綠色文字，表示當前執行的操做已成功完成

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

　　五、報錯（Error）：紅色文字，表示出現了嚴重錯誤，必須解決才能進行下一步操做或運行遊戲