1.創建Canvas組件
首先我們創建一個Canvas畫布,我們再在Canvas畫布底下創建一個空物體,取名為Resgister。把空物體的錨點設置為全屏撐開。
?2.我們在Resgister空物體底下創建一個Image組件,改名為bg。我們也把它 的錨點設置為全屏撐開狀態。接下來我們把我們的圖片UI素材導入進去,修改它的類型為2D和UI,點擊應用。那么我們即可在Unity引擎中使用它。
接下來我們把對應的bg圖片拖拽到對應的位置。
?3.創建InputFiled組件
?(1).我們在bg下面創建InputFiled組件,把創建好的InputFiled組件改名為userName,接下來我們點擊Placehoder在里面調整它的大小,調節對應的組件樣式。
?(2).我們也需要調節里面的Text里面的字體大小樣式和對齊方式等等,這個Text修改是我們輸入時的字為多大,而上面的Placehoder是InputFiled組件顯示的字體樣式。
(3)點擊userNamer組件按快捷鍵Ctrl+D復制一方出來,我們改名為password,我們只需要修改Placehoder里面的字就行。
我們繼續復制一份出來改名為confirmPassword,和上面操作一模一樣只需要修改里面的字即可。修改為:請確認密碼...
最后我們需要適當的調節這3個物體的位置。
?這里我們已經到達了這樣的效果,接下來我們把對應的圖片拖拽進去。
(4).我們在bg下面創建一個Button組件,改名為registerButton,我們設置好它的錨點讓它在對應的位置,并且調整他的大小。修改一下里面的字,并且修改一下button上的顏色讓點擊或者移動上去更明顯。
?接下來我們ctrl+D復制一份一模一樣的出來,取名為loginButton,調整它的位置并且只需要修改text里面的字就行,不需要其他操作。
?接下來我們創建一個文本顯示在最上面,告訴我們進入了注冊頁面。我們把這個文本的錨點設置成最上面那一塊全屏。
?我們調節文本的樣式。因為在最上面所以我們需要把它設置大一點。具體操作如圖。
?(5).我們再創建一個Text文本組件,我們用來接收注冊的反饋信息。我們改名為TipsText,修改里面的文本,字體大小,對齊,顏色我們設置為紅色。
?
?設置好后我們的UI基本搭建完成。效果圖如下:
看起來感覺還是很不錯的。我們接下來運行看看
?從上面圖片可以看出,已經弄好了UI,接下來我們要寫代碼實現對應的效果。
代碼:
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using System; using UnityEngine.SceneManagement;public class RegisterManager : MonoBehaviour {public InputField usernameInput;public InputField passwordInput;public InputField confirmPasswordInput;public Text TipsText;public void RegisterInformation(){if (PlayerPrefs.GetString(usernameInput.text) == ""){if (passwordInput.text == confirmPasswordInput.text){PlayerPrefs.SetString(usernameInput.text, usernameInput.text);PlayerPrefs.SetString(usernameInput.text + "password", passwordInput.text);//綠色TipsText.color = Color.green;TipsText.text = "注冊成功!";}else{//紅色TipsText.color = Color.red;TipsText.text = "兩次密碼輸入不一致";}}else{//紅色TipsText.color = Color.red;TipsText.text = "用戶已存在";}}public void Login(){if (PlayerPrefs.GetString(usernameInput.text) != ""){if (PlayerPrefs.GetString(usernameInput.text + "password") == passwordInput.text){//綠色TipsText.color = Color.green;TipsText.text = "登錄成功,請稍等...";StartCoroutine(success());}else{//紅色TipsText.color = Color.red;TipsText.text = "密碼錯誤";}}else{//紅色TipsText.color = Color.red;TipsText.text = "賬號不存在";}}//登入成功IEnumerator success(){//等待2秒yield return new WaitForSeconds(2);//加載場景SceneManager.LoadScene(1);} }
4.返回Unity引擎掛載對應的組件
(1).button按鈕掛載對應的方法
?
?5.最后我們運行看一下效果。
Register頁面
這是一個簡單的Register注冊頁面制作,如果沒有更高級的方法,可以采用我制作簡單使用的方法來使整個項目效果更加完美。?
最后
以上步驟就是制作聲音開關控制器和聲音滑動條控制聲音大小整個流程。
看到的小伙伴一鍵三連一下吧,你們的支持讓我更有動力去創作和分享,希望能一直為你帶來驚喜和收獲。
