天天看點

cocos creator入門

[1]工作流程

[2]安裝和啟動

[3]入門示例

[4]項目結構

[5]編輯器界面

 前面的話

  Cocos Creator 是一個完整的遊戲開發解決方案,包括了 cocos2d-x 引擎的 JavaScript 實作,以及快速開發遊戲所需要的各種圖形界面工具。Cocos Creator 的編輯器完全為引擎定制打造,包含從設計、開發、預覽、調試到釋出的整個工作流所需的全功能,該編輯器提供面向設計和開發的兩種工作流,提供簡單順暢的分工合作方式。Cocos Creator 目前支援釋出遊戲到 Web、Android 和 iOS,真正實作一次開發,全平台運作。Cocos Creator 是以内容創作為核心的遊戲開發工具,在 Cocos2d-x 基礎上實作了徹底腳本化、元件化和資料驅動等特點。本文将詳細介紹cocos creator 入門知識

工作流程

  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 并重新安裝舊版本

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

  1、在Windows下,可能會遇到安裝舊版本時提示「已經有一個更新版本的應用程式已安裝」,如果确定已經通過控制台正确解除安裝了新版本的 Cocos Creator 還不能安裝舊版本,可以通路微軟官方解決無法安裝或解除安裝程式的幫助頁,按照提示下載下傳小工具并修複損壞的安裝資訊,即可繼續安裝舊版本了

  2、使用新版本 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模闆建立出的項目中包括了三種核心資源:

  1、image圖檔資源:目前包括 jpg, png 等圖像檔案,圖示會顯示為圖檔的縮略圖

  2、javascript腳本資源:程式員編寫的 JavaScript 腳本檔案,以js為檔案擴充名。通過編輯這些腳本為添加元件功能和遊戲邏輯

  3、scene場景資源:輕按兩下可以打開的場景檔案,打開了場景檔案才能繼續進行内容創作和生産

  目前可以在 資料總管 中建立的資源有以下幾類:

  1、檔案夾

  2、腳本檔案

  3、場景

  4、動畫剪輯

  注意:删除資源是不可撤銷的操作,無法從資源回收筒(Windows)或廢紙簍(Mac)找回

【場景編輯器(scene)】

  場景編輯器是内容創作的核心工作區域,使用它選擇和擺放場景圖像、角色、特效、UI 等各類遊戲元素。在這個工作區域裡,可以選中并通過變換工具修改節點的位置、旋轉、縮放、尺寸等屬性,并可以獲得所見即所得的場景效果預覽

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

  1、滑鼠右鍵拖拽:平移視圖

  2、滑鼠滾輪:以目前滑鼠懸停位置為中心縮放視圖

  場景視圖的背景會顯示一組标尺和網格,表示世界坐标系中各個點的位置資訊。讀數為(0,0)的點為場景中世界坐标系的原點

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

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

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

【層級管理器】

  層級管理器用樹狀清單的形式展示場景中的所有節點和他們的層級關系,所有在場景編輯器中看到的内容都可以在層級管理器中找到對應的節點條目,在編輯場景時這兩個面闆的内容會同步顯示,一般會同時使用這兩個面闆來搭建場景

  層級管理器中包括目前打開場景中的所有節點,通過點選來選中節點,被選中的節點會以藍底色高亮顯示。目前選中的節點會在場景編輯器中顯示藍色邊框,并更新屬性檢查器中的内容

  節點在清單中的排序決定了節點在場景中的顯示次序。在層級管理器中位置越靠下的節點,在場景中的渲染就會更晚,也就會覆寫清單中位置較為靠上的節點

【屬性檢查器】

  屬性檢查器是檢視并編輯目前選中節點群組件屬性的工作區域。在場景編輯器或層級管理器中選中節點,就會在屬性檢查器中顯示該節點的屬性和節點上所有元件的屬性以供查詢和編輯

  屬性檢查器面闆從上到下依次是:

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

  2、節點屬性

  3、元件屬性

  左上角的複選框表示節點的激活狀态,節點處于非激活狀态時,節點上所有圖像渲染相關的元件都會被關閉,整個節點包括子節點就會被有效的隐藏;節點激活開關右邊顯示的是節點的名稱,和 層級管理器 中的節點顯示名稱一緻

  屬性檢查器接下來會顯示節點的屬性,節點的屬性排列在Node标題的下面,點選Node可以将節點的屬性折疊或展開

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

  節點屬性下面,會列出節點上挂載的所有元件群組件的屬性。使用者通過腳本建立的元件,其屬性是由腳本聲明的。不同類型的屬性在屬性檢查器中有不同的控件外觀和編輯方式

  屬性是元件腳本中聲明的公開并可被序列化存儲在場景和動畫資料中的變量,通常可以根據變量使用記憶體位置不同将屬性分為值類型和引用類型兩大類

  1、值類型包括數值(Number)、向量(Vec2)、字元串(String)、布爾值(Boolean)、枚舉(Enum)、顔色(Color)等簡單的占用很少記憶體的變量類型

  2、引用類型包括更複雜的對象,比如節點、元件或資源。和值類型各式各樣的編輯方式不同,引用類型通常隻有一種編輯方式:拖拽節點或資源到屬性欄中

  需要拖拽節點來指派的屬性欄上會顯示綠色的标簽,标簽上可能會顯示

Node

,表示任意節點都可以拖拽上去,或者标簽顯示元件名如

Sprite

Animation

等,這時需要拖拽挂載了相應元件的節點才行

  需要拖拽資源指派的屬性欄上會顯示黃色的标簽,标簽上顯示的是資源的類型,如

sprite-frame

prefab

font

等。隻要從 資料總管 中拖拽相應類型的資源過來就可以完成指派

【控制台】

  控制台會顯示報錯、警告或其他 Cocos Creator 編輯器和引擎生成的日志資訊。不同重要級别的資訊會以不同顔色顯示:

  1、日志(Log):灰色文字,通常用來顯示正在進行的操作

  2、提示(Info):藍色文字,用來顯示重要提示資訊

  3、成功(Success):綠色文字,表示目前執行的操作已成功完成

  4、警告(Warn):黃色文字,用來提示使用者最好進行處理的異常情況,但不處理也不會影響運作

  5、報錯(Error):紅色文字,表示出現了嚴重錯誤,必須解決才能進行下一步操作或運作遊戲

好的代碼像粥一樣,都是用時間熬出來的

cocos creator入門

繼續閱讀