3D Action RPG 工作日誌

今天要接著製作登入頁面跟註冊頁面的跳轉，註冊頁面的製作方式與前幾章介紹得差不多，請大家舉一反三自己做看看吧。不會做的話請參考以下兩章： 6-11 Decorating Login User Interface https://3dactionrpg.blogspot.tw/2018/05/6-11-decorating-login-user-interface.html 6-12 Finishing Login User Interface https://3dactionrpg.blogspot.tw/2018/05/6-12-finishing-login-user-interface.html 做完以後大致如下圖，登入畫面多了一顆按鈕，按下去後切換到註冊畫面。 然後註冊畫面也差不多，按下去會回到登入畫面。註冊畫面請根據自己的需求做調整，因為我的遊戲範例只用到帳號跟密碼兩種資料，不需要再輸入姓名等其它個資。 接著在Login Window新增一個Script名為LoginWindow.cs。 同理在Signup Window也新增一個SignupWindow.cs。 接著來撰寫程式吧，由於我過去已經針對視窗類型寫了一個共用類別Panel.cs，所以就直接繼承Panel便能使用他的Hide與Show方法。如果不知道Panel.cs寫了哪些內容，可以先參考這篇文章： 5-14 Discard Item And Control Panel Display https://3dactionrpg.blogspot.tw/2018/01/5-14-discard-item-and-control-panel.html 不過我還是提供本次會用到的完整原始碼： LoginWindow.cs： using System.Collections; using System.Collections.Generic; using UnityEngine; public class LoginWindow : Panel { [SerializeField] SignupWindow signupWindow; public void OnLoginButton(){ } public vo...

本章要繼續完成登入畫面，接著來佈置登入按鈕的部分吧。在Loing Window按右鍵，選擇UI/Button。 預設的按鈕真的很醜。 接著自己修改背景圖片跟Text的屬性，Text的部分可以參考我的設定。 設定好以後如下圖，但仍舊覺得文字只有單一白色實在太單調，跟按鈕的配色也不太合。 這邊介紹幾個好用的Script，待會提供原始碼，Gradient.cs可以替UI元件建立漸層色，如下圖設定。 接著文字就會有漸層色了。 然後再使用NicerOutline.cs可以建立外邊框，如下圖設定。 文字的外邊框也做出來了，是否好看很多了呢。 接著替Button建立一個Image名為Press Overlay，這是我要用來自訂Button按下去時的陰影。 將陰影放進來後的結果如下圖，會將整個按鈕跟文字都蓋過去。 接著將Press Overlay拖拉進Button的Target Graphic中，並將Normal Color跟Highlighted Color的Alpha值設為0。這樣一來在普通狀態以及滑鼠移動到按鈕上的狀態，都不會將顯示這個陰影，只要按下去的時候才會出現。 設定完成如下圖。 以下提供Gradient跟NicerOutline的原始碼。 Gradient.cs： using UnityEngine; using System.Collections.Generic; namespace UnityEngine.UI { [AddComponentMenu("UI/Effects/Gradient")] #if UNITY_5_2 || UNITY_5_3_OR_NEWER public class Gradient : BaseMeshEffect #else public class Gradient : BaseVertexEffect #endif { [SerializeField] private Color topColor = Color.white; [SerializeField] private Color bottomColor = Color.black; #if U...

前幾章已簡單介紹過NHibernate的用法了，接下來便要開始實作我們的登入、註冊功能啦！首先最重要的，就是要來佈置我們的登入畫面，我想大家都不希望登入畫面醜醜的吧，所以我先上個完成圖給大家看，大致上如下圖這樣。 但由於這張登入畫面是我付費購入的版權資源，就不方便提供給大家。但是網路上隨意找找的話還是有很多好看的免費登入畫面唷，比方說這裡 https://colorlib.com/wp/template/login-form-v4/ 這個網頁有提供50個免費的登入畫面範本唷，雖然比較像是給網頁用的，但重點是裡面提供的圖片資源啦，稍加改造還是很適合當作手機版本的登入畫面： https://colorlib.com/wp/html5-and-css3-login-forms/ 好的，那接下來回來佈置我們的畫面。首先在Scene的設定選擇2D。 接著選擇GameObject/UI/Canvas，建立一個新畫布。 然後在Canvas的Canvas Scaler組件中，將UI Scale Mode設定為Scale With Screen Size，這樣UI才會隨著螢幕大小進行縮放唷。 Reference Resolution可設為1920x1080，這是以網路上大多可下載的範例都是用螢幕解析為主。也可以考慮主要的手機螢幕尺寸解析度為主，如iPhone 8 是1334x750。 接著在Canvas底下按右鍵選擇UI/Image。 命名為Background，用來放置背景圖。 設定好後，按下Set Native Size，會自動將Image的大小設定成圖片的大小。 效果上超出了Canvas。 所以我們將它調整小一點。  接著在Canvas底下繼續新增Image，我命名為Login Window。 針對Login的背景圖我向大家介紹一個功能，首先到該圖片的Inspector中，按下Sprite Editor。 大家仔細看，應該會看見圖片的邊緣有綠色框線。 接著將框下拉到如下圖的樣子，此設定可以讓圖片在伸縮的時候，只會將圖中被框住的部位進行伸縮，其他部位維持不變。比方說圖片裡不是有一些凹角嗎？如果凹角也跟著伸縮的話就有可能會變得很醜。 然後Image T...