[簡介]

滑鼠座標影響VFX效果系列文章，會介紹用滑鼠座標影響特效動態的方向性，以及相關設定細節。

[目的]

這章目的，先將按鈕繪製好，再新增VFX，組合相關元件及調整圖層位置。

1.先到Photoshop縮製整個UI的場景，第一次繪製相關按鈕，可參考這篇(UI Object Design Process)，可依照設計觀念及流程，進行繪製按鈕及場景，這次試著以熔岩的風格進行設計場景。

2.這次在繪製場景時，也先將背景一起加入設計，看起來會比較風格會比較一致性，調整VFX時也會比較順暢。

3.練習圖庫如下，請按右鍵下載

4.在專案裡新增UI-Image圖層，將按鈕的圖片放入對應的位置，為了讓VFX能如圖呈現，會把場景背景(bg)和按鈕背景(btn_bg)群組並在最下層的Canvas(back-ground)，再將按鈕前景框（btn_frame)和按鈕文字(btn-wording)群組並在最上層的Canvas(front-ground)，圖層位置，請依下方視意圖檢視。

5.若有建立UI元件，請先養成習慣先檢查Canvas的Inspector有沒有將攝影機及場景大小設定好
a.Canvas->>Render Mode => Screen Space-Camera
b.Canvas->>Render Mode -> Render Camera => Main Camera(將主要的攝影機拉入)
c.Canvas Scaler-> UI Scale Mode => Scale with Screen Size
d.Canvas Scaler-> Reference Resolution => (1920,1080)

6.新增VFX放入圖層中，確認有看到粒子從上層的框和文字後漂出即可。

[小結]

UI圖層的放置，可以試著前後放看看，可能效果都會不同，建議在實作VFX時，己經可以切換成2D視角，這樣的效果和最終的呈現才會一致。