[簡介]
這章節要教各位,如何設計在Mouse event按鈕上的VFX特效,所以在進入這章之前,先請將vfxui-mouse-event實際場景製作要點-1,先把感應區學會做成全透明,再把感應區與按鈕的位置對齊(實際場景製作要點-2),接著會和各位說明按鈕的設計流程及相關node的設定。
[目的]
逐步帶領各位將Mouse event按鈕上的VFX特效完成,這一章先完成基礎場景建構。
1.在開始之前,先檢查有沒有完成以下設定
1.1在Hierarchy先新增3D Object-Plane,再到Inspector->Element 0選擇透明度材質(做不出來可參考這章)

1.2新增VFX,再拉入Hierarchy新增VFX圖層(BtnhoverCFX),在Scene的畫面中有出現泡泡就對了。

1.3在Hierarchy先新增UI-Button,
a.在Inspector->Canvas->Render Mode設定為Screen Space-Camera,
b.再把Main Camera拉進到Render Camera,
c.另外Canvas Scaler->UI Scale Mode設定為Scale With Screen Size,Reference Resolution為1920×1080.

1.4接著我們可以開始設計按鈕,UI Object Design Process如下圖,最後記得輸出的圖檔要是PNG,放入後才會有透明的效果。

1.5 以下按鈕可以右按鍵下載使用,以供練習。


1.6將Button拉入GUI素材進Inspector->Image->Source image,再把hover的GUI素材拉入Inspector->Button->Highlighted sprite(先把Transition模式設定為Sprite Swap)

[小結]
先將場景該有元素都建構完成,就可以開始進行製作VFX的按鈕特效。