Cocos Creator之菜單欄和工具欄

本文轉載自查看原文 2021-02-06 15:13 305 Cocos Creator 開發游戲

今天我們再說一下 Cocos Creator 的編輯器。

Cocos Creator 下載地址

記住：一定要注冊一個帳號后再登錄使用編輯器。

項目

項目名稱：創建的項目名稱

編輯器的版本號 ，我們可以理解為用的哪個版本的框架，類似 Vue 1.x 或者 Vue 2.x。目前建議使用的是 Creator 2.4.x，因為 3.0 還很不穩定，很多功能都有問題。

編輯器

點擊下面的 下載編輯器 跳轉到安裝界面

選擇你想要的版本進行安裝。

安裝完成后，到項目中開始創建項目：

在 編輯器版本 中選擇你下載的版本
選擇創建空項目
輸入 項目名稱，選擇 項目路徑

點擊 創建打開 后，就會在對應的目錄中生成對應的項目目錄和代碼文件。然后 Cocos Creator 就會打開編輯器，現在我們就開始認識編輯器了。

編輯器從上往下，從左往右主要分七個區域：

菜單導航
工具欄
層級管理器
資源管理器
場景編輯器
動畫編輯器
屬性檢查器

同時我們可以通過 菜單導航 中的布局來控制界面中面板的顯示和隱藏。

菜單導航

文件

里面的功能很簡單，就是 打開/導入項目或者資源，新建/保存場景。這里面最麻煩可能就是設置。

設置

常規

這里面基本上就是對編輯器的常規操作，數值調節鈕步長 就是針對數字每次新增或者減少數是多少。如果設置 0.1 ，點擊右邊的新增/減少每次新增/減少 0.1；如果設置 1 ，點擊右邊的新增/減少每次新增/減少 1。

數據編輯

這個就很簡單了，外部腳本編輯器 就是雙擊 .js、.ts 文件的時候，用哪個編輯器打開，我這里設置的是 VSCode；外部圖片編輯器 同樣就是編輯圖片的，可以用各種圖片查看器。

原生開發環境

這個也很簡單，如果你有自己的 JavaScript 引擎，比如 V8，就可以在這里配置，還有 Android SDK 路徑。

預覽運行

看名字就知道了，開發過程中預覽的配置，很簡單理解，懶得講了。自動刷新一定要勾上，不然確實很麻煩，因為 F5 都用不了。

編輯

這個沒啥講的，一看就知道了

節點

這個里面的創建節點和組件很容易理解，就是在場景里面創建節點和組件，重點說上面三個：對齊到編輯器視角、還原成普通節點、關聯節點到預制。

對齊到編輯器視角

很簡單，其實就是將移動到視圖外的節點，重置到 x=0、y=0。

還原成普通節點

當把預制資源拖到層級管理器中時，點擊還原成普通節點，就會將這個預制實例轉換成一個普通節點，預制里面怎么變化都不會影響到節點。在重復創建節點的時候很有用。

關聯節點到預制

就是將節點和預制關聯起來，其實就是將節點添加到預制里面去。

組件

很簡單，就是給節點添加組件。

項目

這個東西基本上是編輯器里面比較重要的一項，運行預覽 和 刷新已經運行的預覽 很容易理解。下面兩個需要多了解一下：構建發布 和項目設置。

構建發布

游戲開發完成后，不可能直接把 Cocos Creator 生成的代碼直接發布上去的，因為它里面還有很多東西不能直接在瀏覽器里面打開，所以我們需要將代碼構建一下再發布，就和我們用 .vue 開發代碼流程一樣的，編譯--->發布。

有一點要記住：第一次構建發布的時間會比較長，最長有可能需要5-10分鍾。

游戲名稱里面的名稱會顯示在瀏覽器的 title 上面。

發布平台就很多了，選好你們自己需要發布的平台后構建：

發布路徑就是構建之后的文件路徑。

初始場景就是游戲的首頁是哪個。

參與構建的場景就是有哪些場景需要構建，右邊的五角星就是選擇的哪個場景為首頁。

下面的幾個欄目就沒啥講的，都是調試或者優化的配置。

項目設置

項目設置基本上我們會經常用到，特別是 分組管理、項目預覽。

分組管理

添加分組之后，保存，就可以在節點的 Group 里面選擇分組了

分組在 Cocos Creator 里面是比較重要的東西，俗話說：物以類聚，人以群分。游戲里面的節點一樣，我們要按照類別分一下。

應用場景也很多：
比如：碰撞檢測的時候，王者榮耀里面藍隊小兵和紅隊小兵就需要分組，因為小兵太多了，個數也不確定，如果不分組就需要一個一個小兵上寫碰撞檢測，太麻煩了，就利用分組來處理，它就像給多個 HTML 標簽添加了一樣的 class 名。

還有一個場景：你希望你的一個攝像機看到一部分節點，另外一個攝像機看到其他節點，就可以給攝像機設置看到哪個組。

項目預覽

設置內置服務器的端口。

關鍵是下面的 Canvas 分辨率設置。

在 Cocos Creator 里面分為：設計分辨率 和 屏幕分辨率。兩者的區別在於：設計分辨率 是在設計師以及開發人員用到的一個固定分辨率，比如安卓設備中 800 x 480 和 1280 x 720， iOS 設備中 1136 x 640 和 960 x 640，而屏幕分辨率是游戲在設備上運行時的實際屏幕顯示分辨率。通常設計分辨率會采用市場目標群體中使用率最高的設備的屏幕分辨率。設計分辨率不一定完全等於屏幕分辨率，畢竟市場上的設備太多了。當設計分辨率不等於屏幕分辨率的時候就可能出現黑邊。為了解決黑邊問題，我就可以根據設計師出的設計分辨率來選擇 適配屏幕寬度 或者 適配屏幕高度。

如果兩個都不勾選，就開啟 NO_BORDER 模式，如果不在乎裁剪了多少內容，可以選擇這個模式，此時無論屏幕寬高比多少都不會產生黑邊。當設計分辨率寬高比大於屏幕分辨率時，會適配高度；設計分辨率寬高比小於屏幕分辨率時，會適配寬度
如果只選擇 適配屏幕寬度，可能會出現高度黑邊
如果只選擇 適配屏幕高度，可能會出現寬度黑邊
如果兩個都勾選，就可能出現拉伸。