這一章我們要把收集的素材放到 Unity 的場景中進行擺放

1. 擺放背景

   

   我們先把背景素材直接拖到場景裡面, 包含 Background 和 Tree

2. 擺放北極熊

   

   把北極熊的走路序列圖全部選擇起來, 直接拖到場景中

   Unity 會默認 跳出一個生成動畫的視窗

   可以直接在這裡創建一個北極熊走路的動畫

   

   創建好後, 可以透過 Window/Animation/Animation 把動畫面板打開

   這裡實際上做的就是每0.02秒切換一張北極熊的圖片

   看起來就好像在走路

   

   我們可以在 Animation 的面板中 Create New Clip

   新增一個 Drag 的動畫

   ( 點擊紅色的圈圈可以進行錄製, 然後把 Drag 的圖片拖到 Sprite Renderer 裡面）

   

   打開 Window/Animation/Animator 後, 可以打開動畫管理器

   可以根據上圖的方式進行連線

   我們這裡簡化成一開始就會播放北極熊移動的動畫 ( Walk_bear )

   然後任何狀態下, 就可以切換成 Drag 的動畫效果

   至於怎麼切換, 我們就在下一章的 Vibe Coding 階段來實現

3. 道具爛 UI

   

   接下來我們來擺放下方的道具爛 UI

   在開始之前, 可以把 UI 裡面的 Frame.png 圖片進行切割

   

   點擊 Open Sprite Editor, 把綠色的線條往中心移動一點

   這樣在放大縮小的時候, 四周的邊框就不會變形

   

   接著, 我們可以在 Hierarchy 中新增 Image, 把 Frame 的圖片拉上去

   也可以加上 Shadow 的 Component, 製作一點陰影效果

   

   然後我們在 Image 下方新增一個 Scroll View

   背景的 Image 可以關掉比較好看, Scroll Rect 可以只勾選 Horizontal

   Vertical 的 Scrollbar 也可以刪掉

   

   然後在 Content 的地方加上 Content Size Fitter 和 Horizontal Layout Group

   參數可以參考圖片的設定, 或是自己調整成滿意的數值

   然後在裡面我先放了兩個 Image 的圖片

   過後再寫功能讓它可以拖拉出來

4. 對話框 UI

   

   接下來我們來做一個簡單的對話框 UI

   利用 Frame.png 和 Arrow.png 在場景中進行簡單的 UI 擺放

   然後再底下加入一個 Legacy 的 Text UI

   

   Arrow 的遊戲物件Pivot座標設定成下方

   

   文字的物件設定者右下角, 跟著 Parent 層級進行縮放

最終效果:

最後擺放好後的場景 UI 長這個樣子

你可以根據自己的喜好再進行微調

下一章, 我們就開始為這些物件加上代碼功能 !