政安晨的個人主頁：政安晨
歡迎?👍點贊?評論?收藏
收錄專欄:?AI虛擬世界大講堂
希望政安晨的博客能夠對您有所裨益，如有不足之處，歡迎在評論區提出指正！
現在我們已經學會了如何向場景中添加圖片，接下來繼續為游戲場景添加更多的元素，并進一步完善場景布局。
修改游戲設計分辨率
在通常情況下，為了方便場景的搭建工作，在開發游戲之前會選擇一個合適的分辨率來作為藍本，并以此為基礎進行整體界面的搭建，而作為藍本的分辨率也被稱為設計分辨率。在咱們這篇文章中，我們將采用比較主流的1280px×720px分辨率。
根據前面預覽運行的效果，不難發現預覽運行時展示的內容區域與編輯器中的Canvas區域是一致的。
這個時候我們會很自然地聯想到，如果直接修改Canvas的尺寸，或許就可以達到間接修改設計分辨率的目的。
當我們嘗試在層級管理器中選中【Canvas】節點時：
會發現節點下的UI變換組件的【ContentSize】有一個“鎖”圖標，輸入框也是灰色的，因此我們并不能直接對該屬性進行修改，如下圖所示。
在Cocos Creator中，如果想要修改游戲中的分辨率，則需要在項目設置中進行統一配置。在編輯器頂部選擇【項目】→【項目設置】命令，打開項目設置面板，在【項目數據】選項卡中可以直接修改游戲的設計分辨率，如下圖所示。
現在將【設計寬度】和【設計高度】的值分別修改為【720】和【1280】，修改完成后回到場景，再次選中【Canvas】組件，此時我們會發現游戲場景區域的寬高比已經發生了變化，同時Canvas里的UI變換組件的屬性也同步發生了改變，如下圖所示。
上述為同步變化的UI變換組件的屬性
這里需要注意的是，此時游戲的設計分辨率已經產生了變化，當我們再次預覽運行時，可能游戲區域超出了瀏覽器的顯示范圍，瀏覽器可能會有顯示不全并且出現滾動條的情況（看瀏覽器的情況），如下圖所示。
如果游戲區域超出了瀏覽器的顯示范圍，可以通過Chrome預覽窗口左上角的下拉菜單調整預覽分辨率，根據實際需求選擇一個合適的分辨率即可。
使用變換工具
在搭建游戲場景的過程中，經常會有對節點進行移動、旋轉、縮放等操作的需求，這個時候我們可以通過主窗口左上角工具欄的變換工具來操作場景中的相關節點。工具欄中從左往右依次為移動變換工具、旋轉變換工具、縮放變換工具、矩形變換工具、變換吸附設置，如下圖所示。
在默認狀態下，移動變換工具是處于激活狀態的，在層級管理器中選中需要移動的節點，就可以使用移動變換工具來對當前節點進行移動了。如果移動變換工具并沒有處于激活狀態，那么我們也可以通過點擊工具欄的第一個按鈕進行激活，或者使用組合鍵“Ctrl+W”，將變換工具切換為移動變換工具。
在確保移動變換工具被激活后，我們可以通過移動鼠標將【enemy】節點拖動到游戲場景的上方。如果仔細觀察將會發現，在移動的過程中，【enemy】節點上的【Position】屬性也會隨之變化，這說明移動變換工具會在我們操作時動態地修改節點坐標的位置，如下圖所示。
依次將三個技能圖標及重新開始圖標拖動到游戲場景中，之后使用同樣的方式操作移動變換工具，將圖標調整到合適的位置，完成后如下圖所示。
父節點與子節點變換關系
在通常情況下，場景中的節點會以樹狀結構呈現。每個節點都可以有多個子節點，而子節點的更新依賴于父節點，當父節點進行變換時子節點會隨之變換。我們可以利用這個特性間接地批量調整子節點的位置。
在了解了這一特性后，我們繼續在場景中添加敵人的招式圖標。首先在【Canvas】節點下新建一個空節點并命名為【enemy_skill】，然后在【enemy_skill】下依次添加三個技能的圖片作為其子節點，最后只需要使用移動變換工具操作【enemy_skill】節點，即可完成所有技能圖標的整體移動，完成后如下圖所示。
節點的遮擋關系
我們已經向enemy_skill中添加了三個節點，由于它們的坐標默認重疊在了一起，因此我們只能看到一個圖標，但是為什么看到的是最后一個添加的盾牌圖標呢？
這是因為在Cocos Creator中，UI節點的渲染和遮擋關系會受到節點樹的影響，從而按照層級管理器中節點的排列順序從上到下依次渲染，也就是說在列表上面的節點在場景顯示中會被在列表下面的節點遮蓋住。我們向enemy_skill中添加了三個節點，由于默認狀態下它們的坐標是一致的，且盾牌圖標的節點處于最下方，因此我們只看到了盾牌圖標。
現在可以嘗試修改enemy_skill子節點的順序來觀察遮擋關系的變化。例如，可以將代表盾牌的2號節點移動到流星錘的上方，由于節點的排列順序發生了變化，因而遮擋關系也會隨之改變，可以看到此時流星錘圖標已經顯示了出來，如下圖所示。
添加提示文本
我們制作的游戲場景比較簡單，為了能夠向玩家反饋游戲結果，還需要在游戲中添加提示文本信息。這里我們可以使用Label組件，右擊【Canvas】節點，在彈出的快捷菜單中選擇【創建】→【2D對象】→【Label（文本）】命令，創建一個Label組件，并將其命名為【hint】。可以在屬性檢查器中看到Label組件的相關屬性，如下表所示。
在屬性檢查器中將Label的【FontSize】和【LineHeight】屬性的值都修改為【40】，之后將【String】屬性修改為【出招中...】，如下圖所示。
這一段咱們已經完成，接下來的文章中，我們繼續。
