🔗

LinkArrow System
開發歷程簡報

Unity URP Decal 雙向箭頭連接線系統

2026-07-16

02 / 11

📋 需求概述

  • →兩個移動物件 A 和 B 之間建立連接線
  • →線上有方向箭頭圖示行進
  • →箭頭從 A 往中點移動，B 也往中點移動
  • →使用 Decal 投射（能貼合地面、障礙物）
  • →Runtime 效果，Editor 可視化調整
  • →可調整：數量、間距、速度、大小、顏色、淡化
03 / 11

🔬 技術選型

✅多個獨立 Decal Projector 移動
最終採用 — 箭頭完整、可調性最高
❌單條 Decal + UV 滾動
效能好但間距/大小受限
❌Quad Mesh + 手寫 Shader
不會投射到障礙物
❌逐一生長填滿版
不是持續移動感
04 / 11

⚠️ URP Decal 技術限制

  • ⚡URP Decal Projector 只接受 Shader Graph 材質
  • ⚡無法使用手寫 shader code
  • ⚡SetTextureOffset 對內建 Decal shader 無效
  • ⚡UV 滾動需自建 Shader Graph 節點
  • ⚡Shader Graph 無法用程式碼自動建立
  • ⚡Renderer 需手動加 Decal Render Feature
05 / 11

🏗️ 最終架構

📜
LinkArrowSystem.cs
主腳本（物件池管理）
🎨
Decal_Shader Graph.shadergraph
自建 Decal Shader
🖼️
T_Arrow_01.png
箭頭貼圖
⚙️
ArrowDecalMat.mat
Decal 材質

技術組合

URP + Decal Projector + Shader Graph
每側預建 20 個 Decal（物件池），動態顯示/隱藏

06 / 11

✨ 功能清單

  • ✅雙向箭頭行進（A→中點、B→中點）
  • ✅即時調整：數量、間距、速度、大小
  • ✅A/B 各自獨立顏色
  • ✅Color over Time（Gradient 隨進度變色）
  • ✅Emission 自發光（可調強度）
  • ✅拖尾淡化（尾巴快、領頭慢）
  • ✅Fade Start（控制何時開始淡化）
  • ✅Editor Gizmo 可視化
07 / 11

🧩 Shader Graph 結構

屬性 Properties

_MainTex _OffsetY _Tiling _Color _EmissionIntensity

節點流程

Combine(1, _Tiling)
→
Tiling And Offset
[Tiling]
→
Sample Texture 2D
[UV]
Combine(0, _OffsetY)
→
Tiling And Offset
[Offset]
↗
08 / 11

🎛️ Inspector 參數

連接目標
Target A Target B
箭頭設定
Count (1~20) Spacing (0.05~0.5) Speed
Decal
Material Width Length Depth
顏色
Color A Color B Use Color Over Time Gradient A Gradient B
Emission
Intensity (0~10)
拖尾淡化
Trail Fade
09 / 11

🐛 開發過程問題與解決

問題解決方案
Decal 不顯示加 Decal Render Feature
材質報錯改用 Shader Graph 建立
Z-fighting 閃爍位置抬高 0.1
UV 方向斜的Combine 節點分開控制 X/Y
UV 不動自建 Shader Graph 加 _OffsetY
拖尾方向反覆搞反Debug 確認 Arrow_0=起點(尾巴)
重複生成物件加 init flag
10 / 11

📦 移植到其他專案

必要條件

  • URP 專案
  • 已啟用 Decal Render Feature

帶走檔案

  • 📜LinkArrowSystem.cs
  • 🎨Decal_Shader Graph.shadergraph（含 .meta）
  • 🖼️T_Arrow_01.png（含 .meta）
  • ⚙️ArrowDecalMat.mat（含 .meta）

💡 建議：使用 Unity Export Package 匯出，可自動包含所有依賴

11 / 11

🚀 後續可擴展方向

💨 Dissolve 效果（箭頭靠近中點時溶解）
〰️ 曲線路徑（Bezier curve）
🔗 多段連接（A→B→C）
📐 箭頭大小隨 progress 漸變
🔊 音效/粒子在交匯點觸發
⏱️ Size over Time（箭頭大小隨時間變化）
← → 切換頁面