Scene 場景編輯器

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

視圖介紹

導(dǎo)航

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

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

坐標(biāo)系和網(wǎng)格

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

場景中的標(biāo)尺和網(wǎng)格是我們擺放場景元素時(shí)位置的重要參考信息。

設(shè)計(jì)分辨率指示框

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

選取節(jié)點(diǎn)

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

如果要在?場景編輯器?中快速聚焦節(jié)點(diǎn)，有以下兩種方式：

• 在?層級(jí)管理器?中雙擊節(jié)點(diǎn)。
• 在?層級(jí)管理器?中選中節(jié)點(diǎn)，然后按下?F?快捷鍵。

節(jié)點(diǎn)的約束框

節(jié)點(diǎn)在鼠標(biāo)懸浮或選中狀態(tài)下都能夠看到約束框（灰色或藍(lán)色的線框），約束框的矩形區(qū)域表示節(jié)點(diǎn)的尺寸（size）屬性大小。即使節(jié)點(diǎn)沒有包含圖像渲染組件（如?Sprite），也可以為節(jié)點(diǎn)設(shè)置?size?屬性，而節(jié)點(diǎn)約束框以內(nèi)的透明區(qū)域都可以被鼠標(biāo)懸浮和點(diǎn)擊選中。

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

節(jié)點(diǎn)名稱提示

鼠標(biāo)懸浮在節(jié)點(diǎn)上時(shí)，與節(jié)點(diǎn)的約束框同時(shí)顯示的還有節(jié)點(diǎn)的名稱，在節(jié)點(diǎn)比較密集時(shí)可以先根據(jù)懸浮提示確定要選擇的目標(biāo)，然后點(diǎn)擊確認(rèn)您的選擇。

多選節(jié)點(diǎn)

在?場景編輯器?中按住鼠標(biāo)左鍵并拖拽，可以畫出一個(gè)藍(lán)色覆蓋的選取框，和選取框有部分重合的節(jié)點(diǎn)，在放開鼠標(biāo)按鍵后都會(huì)被一起選中。在放開鼠標(biāo)鍵之前可以任意滑動(dòng)鼠標(biāo)來更改選取框的區(qū)域。

選中多個(gè)節(jié)點(diǎn)后，進(jìn)行的任何變換操作都會(huì)同時(shí)作用于所有選中的節(jié)點(diǎn)。

使用變換工具布置節(jié)點(diǎn)

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

移動(dòng)變換工具

移動(dòng)變換工具?是打開編輯器時(shí)默認(rèn)處于激活狀態(tài)的變換工具，之后這個(gè)工具也可以通過點(diǎn)擊位于主窗口左上角工具欄第一個(gè)按鈕來激活，或者在使用場景編輯器時(shí)按下快捷鍵?W，即可激活?移動(dòng)變換工具。

選中任何節(jié)點(diǎn)，就能看到節(jié)點(diǎn)中心（或錨點(diǎn)所在位置）上出現(xiàn)了由紅綠兩個(gè)箭頭和藍(lán)色方塊組成的移動(dòng)控制手柄（gizmo）。

控制手柄?是指場景編輯器中在特定編輯狀態(tài)下顯示出的可用鼠標(biāo)進(jìn)行交互操作的控制器。這些控制器只用來輔助編輯，不會(huì)在游戲運(yùn)行時(shí)顯示。

移動(dòng)變換工具激活時(shí)：

• 按住紅色箭頭拖拽鼠標(biāo)，將在 x 軸方向上移動(dòng)節(jié)點(diǎn)；
• 按住綠色箭頭拖拽鼠標(biāo)，將在 y 軸方向移動(dòng)節(jié)點(diǎn)；
• 按住藍(lán)色方塊拖拽鼠標(biāo)，可以同時(shí)在兩個(gè)軸向自由移動(dòng)節(jié)點(diǎn)。

旋轉(zhuǎn)變換工具

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

旋轉(zhuǎn)變換工具的手柄主要是一個(gè)箭頭和一個(gè)圓環(huán)組成，箭頭所指的方向表示當(dāng)前節(jié)點(diǎn)旋轉(zhuǎn)屬性（rotation）的角度。拖拽箭頭或圓環(huán)內(nèi)任意一點(diǎn)就可以旋轉(zhuǎn)節(jié)點(diǎn)，放開鼠標(biāo)之前，可以在控制手柄上看到當(dāng)前旋轉(zhuǎn)屬性的角度值。

縮放變換工具

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

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

縮放節(jié)點(diǎn)時(shí)，會(huì)同比縮放所有的子節(jié)點(diǎn)。

矩形變換工具

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

拖拽控制手柄的任一頂點(diǎn)，可以在保持對(duì)角頂點(diǎn)位置不變的情況下，同時(shí)修改節(jié)點(diǎn)尺寸中的?width?和?height?屬性。

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

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

關(guān)注公眾號(hào)：《碼之有道》，一起聊游戲全棧開發(fā)！

1、公眾號(hào)回復(fù)：【教程】獲取零基礎(chǔ)游戲開發(fā)客戶端+服務(wù)端全套教程。
2、公眾號(hào)回復(fù)：【實(shí)戰(zhàn)】獲取企業(yè)級(jí)實(shí)戰(zhàn)項(xiàng)目。
3、公眾號(hào)回復(fù)：【資料】獲取大學(xué)四年整理的所有自學(xué)資料。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。