Scene 場景編輯器

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

視圖介紹

導航

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

• 鼠標右鍵拖拽?：平移視圖。
• 鼠標滾輪?：以當前鼠標懸停位置為中心縮放視圖。

坐標系和網格

場景視圖的背景會顯示一組標尺和網格，表示?世界坐標系?中各個點的位置信息。讀數為?(0,0)?的點為場景中世界坐標系的原點。使用鼠標滾輪縮小視圖顯示時，每一個刻度代表?100?像素的距離。根據當前視圖縮放尺度的不同，會在不同刻度上顯示代表該點到原點距離的數字，單位都是像素。

場景中的標尺和網格是我們擺放場景元素時位置的重要參考信息。

設計分辨率指示框

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

選取節點

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

如果要在?場景編輯器?中快速聚焦節點，有以下兩種方式：

• 在?層級管理器?中雙擊節點。
• 在?層級管理器?中選中節點，然后按下?F?快捷鍵。

節點的約束框

節點在鼠標懸浮或選中狀態下都能夠看到約束框（灰色或藍色的線框），約束框的矩形區域表示節點的尺寸（size）屬性大小。即使節點沒有包含圖像渲染組件（如?Sprite），也可以為節點設置?size?屬性，而節點約束框以內的透明區域都可以被鼠標懸浮和點擊選中。

節點的尺寸（size）屬性在多分辨率適配和排版策略中有非常重要的作用。

節點名稱提示

鼠標懸浮在節點上時，與節點的約束框同時顯示的還有節點的名稱，在節點比較密集時可以先根據懸浮提示確定要選擇的目標，然后點擊確認您的選擇。

多選節點

在?場景編輯器?中按住鼠標左鍵并拖拽，可以畫出一個藍色覆蓋的選取框，和選取框有部分重合的節點，在放開鼠標按鍵后都會被一起選中。在放開鼠標鍵之前可以任意滑動鼠標來更改選取框的區域。

選中多個節點后，進行的任何變換操作都會同時作用于所有選中的節點。

使用變換工具布置節點

場景編輯器?的核心功能就是以所見即所得的方式編輯和布置場景中的可見元素。我們主要通過主窗口工具欄左上角的一系列?變換工具?來將場景中的節點按我們希望的方式布置。將鼠標懸浮到變換工具上方時會顯示相關的提示信息。

移動變換工具

移動變換工具?是打開編輯器時默認處于激活狀態的變換工具，之后這個工具也可以通過點擊位于主窗口左上角工具欄第一個按鈕來激活，或者在使用場景編輯器時按下快捷鍵?W，即可激活?移動變換工具。

選中任何節點，就能看到節點中心（或錨點所在位置）上出現了由紅綠兩個箭頭和藍色方塊組成的移動控制手柄（gizmo）。

控制手柄?是指場景編輯器中在特定編輯狀態下顯示出的可用鼠標進行交互操作的控制器。這些控制器只用來輔助編輯，不會在游戲運行時顯示。

移動變換工具激活時：

• 按住紅色箭頭拖拽鼠標，將在 x 軸方向上移動節點；
• 按住綠色箭頭拖拽鼠標，將在 y 軸方向移動節點；
• 按住藍色方塊拖拽鼠標，可以同時在兩個軸向自由移動節點。

旋轉變換工具

點擊主窗口左上角工具欄第二個按鈕，或在使用場景編輯器時按下?E?快捷鍵，即可激活?旋轉變換工具。

旋轉變換工具的手柄主要是一個箭頭和一個圓環組成，箭頭所指的方向表示當前節點旋轉屬性（rotation）的角度。拖拽箭頭或圓環內任意一點就可以旋轉節點，放開鼠標之前，可以在控制手柄上看到當前旋轉屬性的角度值。

縮放變換工具

點擊主窗口左上角工具欄第三個按鈕，或在使用場景編輯器時按下?R?快捷鍵，即可激活?縮放變換工具。

• 按住紅色方塊拖拽鼠標，在 x 軸方向上縮放節點圖像；
• 按住綠色方塊拖拽鼠標，在 y 軸方向上縮放節點圖像；
• 按住中間的黃色方塊，保持寬高比的前提下整體縮放節點圖像。

縮放節點時，會同比縮放所有的子節點。

矩形變換工具

點擊主窗口左上角工具欄第四個按鈕，或在使用場景編輯器時按下?T?快捷鍵，即可激活?矩形變換工具。

拖拽控制手柄的任一頂點，可以在保持對角頂點位置不變的情況下，同時修改節點尺寸中的?width?和?height?屬性。

拖拽控制手柄的任一邊，可以在保持對邊位置不變的情況下，修改節點尺寸中的?width?或?height?屬性。

在UI元素的排版中，經常會需要使用?矩形變換工具?直接精確控制節點四條邊的位置和長度。而對于必須保持原始圖片寬高比的圖像元素，通常不會使用矩形變換工具來調整尺寸。

關注公眾號：《碼之有道》，一起聊游戲全棧開發！

1、公眾號回復：【教程】獲取零基礎游戲開發客戶端+服務端全套教程。
2、公眾號回復：【實戰】獲取企業級實戰項目。
3、公眾號回復：【資料】獲取大學四年整理的所有自學資料。

總結

以上是生活随笔為你收集整理的CocosCreator之场景编辑器介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。