一、前言：
完成了 UI 基礎設定與單向場景切換後，今天我們要進入視覺呈現的核心——「對話框與雙角色立繪的 Canvas 佈局」。在 2D 遊戲中，主角（Main Character）與配角/NPC（Second Character）的登場位置、大小比例、對話框層級（Order in Layer / Canvas Level）以及角色面向，會直接影響讀者的沉浸感。今天我們就透過實戰畫面，來示範如何在 Unity Canvas 中建立標準的角色對話舞台！

二、畫面的「對話舞台」架構設計
在我們的專案中，每一幕劇情對話通常包含三個核心 UI 元素：

1. Panel-dialogue： 位於底部的半透明像素風對話框，承載對話文字與講者名字（DialogueContentText 與 SpeakerNameText）。
2. Main-charater： 位於畫面左側（或指定位置）的主角立繪 UI Image。
3. Second-charater： 位於畫面右側的配角/NPC 立繪 UI Image。
   透過將立繪放在 UI Canvas 內，我們可以非常方便地使用 UI RectTransform 進行定點配對與相對位置對齊。

三、角色立繪 UI 設定實務
1. 配角/NPC 立繪設定 (Second-charater)
以第23幕畫面右側的配角(Son)為例，我們在 Canvas 的 Panel 下新增一個 Image 物件，並將其命名為 Second：

• RectTransform 位置：
  • Pos X / Pos Y：設定在右側對應位置（如 PosX: 800, PosY: -300），使角色半身像自然站立於對話框後方。
  • Width / Height：定為 300 x 500，保持 2D 像素立繪的精細比例，不拉伸失真。
• Image 組件：
  • 將繪製好的 NPC 像素 Sprite 拖入 Source Image 欄位。
  • Raycast Target：取消勾選（Uncheck），避免角色立繪擋住後方的滑鼠點擊事件。

圖一、 Second-charater加入場景示意圖

2. 主角立繪設定 (Main-charater) 與左右翻轉技巧
以第23幕畫面右側的配角(Dad)為例，我們在 Canvas 的 Panel 下新增一個 Image 物件，並將其命名為 Main：

• RectTransform 位置：

  • Pos X / Pos Y：設定於左側（如 PosX: -1400, PosY: -1000）。
  • Width / Height：定為 500 x 1500，使主角與配角在畫面上的視覺身高比例達到平衡。

• 關鍵技巧：Scale 左右翻轉 (Facing Direction)：

  • 有時候美術畫出來的角色朝向與對話方向相反（例如原圖朝左，但站在左邊時應該朝右看向配角）。
  • 我們不需要請美術重新畫一張圖，只需將 Scale X 改為 -1，就能在 Unity 中直接進行完美的鏡像翻轉，讓兩位角色產生自然的面對面對話眼神接觸！

  
  圖二、主角原圖

  
  圖三、Main-charater加入場景示意圖

  四、Hierarchy 圖層順序與對話框遮罩
  在 Unity UI (uGUI) 中，Hierarchy 的上下順序決定了畫面的渲染前後順序（越下方的物件會繪製在越上方）：

• 背景 (Office) 放在最上方，作為最底層的畫面打底。

• 角色 (Main / Second) 放在中間，讓角色自然站立在背景前方。

• 對話框 (Panel-dialogue) 放在 Canvas 的最下方，這樣對話框就能遮擋住角色的腰部以下，創造出立體的對話對峙感。

五、開發實戰踩坑經驗分享
1. 角色圖片變形失真：

• 問題： 將 Sprite 拉進 Image 後，角色被拉寬或壓扁。
• 解法： 除了手動調整 Width/Height 外，可以勾選 Image 組件上的 Preserve Aspect（保持寬高比），或是點擊 Set Native Size 恢復圖片原始像素大小後再進行等比例縮放。

2. 翻轉 Scale X = -1 導致子物件跟著顛倒：

• 問題： 如果在角色物件底下掛了文字或提示 Icon，翻轉 Parent 的 Scale X 會連帶讓子物件也變成反向鏡像。
• 解法： 保持角色物件乾淨，不要將其他 UI 元素作為角色的 Child 物件；若需要跟隨，改用 C# 腳本綁定位置。

六、今日成果與小結

• 視覺舞台建構： 成功在 Canvas 中配置了主角與配角的視覺位置，並透過 Scale X = -1 完成鏡像對齊。
• 層級排序最佳化： 調整 Hierarchy 順序，實現對話框壓在角色腰部前方的專業對話視覺。

由於我們在 Day 6 已經進入了劇情對話與畫面流轉的階段（開了 feature/story-flow 分支），而 Day 7 是在同一個功能範疇內繼續建置「對話框與雙角色立繪 Canvas 佈局」，所以我們可以直接延續使用這個分支，並在結尾加上對應的 Commit：

1. 檢查修改狀態
   git status
2. 加入暫存區並提交 Commit
   git add .
   git commit -m "feat: 完成 Day 7 對話框與雙角色立繪 Canvas 佈局設定"
3. 推送到遠端開發分支
   git push origin feature/story-flow