設置即時消息 UI 時的 2D 精靈問題

Question

我是 Unity 和一般游戲開發的新手。 我想制作一個基於文本的游戲。 我正在尋找重現即時通訊工具（如 Messenger 或 whatapp）的行為。

我選擇將 Unity UI 系統用於預制組件，例如 rect scroll。 但是這個選擇讓我遇到了以下問題：

我有對話框的“氣泡”，它們的寬度和高度必須能夠隨着文本的大小而增長。 圖。1

1. 我立即嘗試使用VectorGraphics來 import.svg 以將運行時移動到我的 Beziers 曲線的點。 但我沒有找到如何訪問這些點並在運行時編輯它們。
2. 然后我找到了“精靈形狀”，但它們不是“用戶界面”的一部分，所以如果我采用這樣的解決方案，我將不得不重新實現滾動、按鈕等……
3. 我想把我的對話泡泡分成 7 個部分（圖 2 ）並根據文本大小縮放它。 但我覺得這很重，但不多。
4. 最后我想知道混合解決方案是否不是最好的，使用 UI 進行滾動，獲取轉換並將它們注入 Shape 精靈（在 Canvas 之外）。

如果可以做 1. 然后我將非常感謝一個例子。 如果 2. 3. 4. 似乎不可行，我想聽聽您對 3. 中最相關的意見。

提前致謝。

Answer 1

對於您的問題，有一個更簡單且非常優雅的解決方案，它只使用精靈本身（或者更確切地說是精靈的設計）。

從官方統一文檔中查看9-slicing Sprites 。 使用Sprite 編輯器，您可以在對話氣泡的“核心”周圍創建邊框。 由於這些對話氣泡通常以單一顏色着色且不包含任何其他顏色，因此ImageType : Sliced將是滿足您的想法的完美解決方案。 我創建了一個小示例 Sprite來更詳細地解釋如何處理這個問題： sprite 本身是 512 像素寬和 512 像素高。 邊緣缺失的每個立方體都是 8x8 像素，因此頂部、底部和左邊框的深度為 3x8=24 像素。 右側有額外的 16 像素空間來表示氣泡上的小“尾巴”（右下角）。 所以，我們有 4 個邊框：top=24，bottom=24，left=24 和 right=40 像素。 導入這樣的精靈后，我們只需將其MeshType設置為FullRect ，單擊Apply並使用Sprite Editor設置 4 個邊框（不要忘記也應用它們）。 最后要做的是在Canvas上的Image Component中使用精靈並將此Component的Sliced ImageType 現在您可以隨心所欲地縮放/扭曲Image - 邊框將始終保持其原始大小而不會變形。 由於您的泡泡有一個堅固的“核心”，“ Sliced ”選項會拉伸這個核心而不會引起注意。

編輯：縮放Image時，您必須使用其Width和Height而不是基於 (1,1,1) 的Scale ，因為Scale可能仍會扭曲您的Image 。 此外，這是另一個屏幕截圖，顯示了不同尺寸的結果。