文章目錄
- 【Unity使用UGUI實作王者榮耀UI界面（一）】加載頁面（進度條）
- 1. 素材準備
- 2. 界面分析
- 3. 打開Unity Hub創建專案
- 4. 開始搭建UI
- 1. 準備作業
- 2. 背景圖片
- 3. 匯入素材
- 4. 配置背景圖片
- 5. 進度條顯示UI搭建
- 6. 腳本撰寫
- 7. 演示
- 5. 打包
- 結語
【Unity使用UGUI實作王者榮耀UI界面（一）】加載頁面（進度條）
1. 素材準備
我們先打開王者榮耀，在加載頁面截個圖，當做我們的素材用
然后使用PS把必要元素摳出來
2. 界面分析
王者榮耀加載頁如下圖所示：
可以看到四個元素
-
左上角的黑框框，上面還有一行字
-
下面的進度條，文字，進度
-
左上角的靜音按鈕
-
當然還有我們的背景
3. 打開Unity Hub創建專案
【如果沒下載的，可以百度一下安裝教程，很簡單，免費的】
1.打開Unity Hub后，我們點擊專案上面的新建按鈕，代表新建一個專案
2.我們選擇3D，然后在右邊填寫專案名字和選擇專案路徑
3.等待專案加載，這個程序會有一點長
4.創建成功
如果你的默認界面與我的不一樣，你可以點擊右上角的按鈕，選擇2 by 3
4. 開始搭建UI
1. 準備作業
我們先將當前場景另存為【Ctrl shift s】，保存在Scenes檔案夾，命名為：Hero GUI，
然后再把原來的默認的洗掉（不洗掉也可以）
然后右鍵->delete，
2. 背景圖片
右鍵創建一個圖片作為專案背景：
不會發現創建一個多了兩個東西，一個是canvas，一個是EventSystem
canvas是UI界面的畫布，必不可少，EventSystem也必不可少，沒了他，你的按鈕就是個擺設了，
然后我們選中Image，在Inspector中，，，等等，我們的素材還沒匯入
3. 匯入素材
我們先創建一個檔案夾保存素材
命名為：img
然后下載這個
鏈接：https://pan.baidu.com/s/1-MXSmvYfsL3iumfPNeNotA
提取碼：l48m
將他們拖到我們新建的檔案夾里面
4. 配置背景圖片
【只第一次詳細說】
選中全部圖片設定為精靈屬性（sprite）
然后選中我們剛剛創建的image圖片
-
有個Source Image
-
選擇我們的背景圖片
-
然后點擊左上角的網格
-
選擇最右下邊的填充
-
然后在scene頁面按2，切換成2D編輯模式，滑輪放大縮小到一個你覺得合適的位置
-
并且將圖片放到與后面的框框相同大小
-
然后再點擊canvas，選擇render mode，跟隨方式為跟隨相機（screen space camera）這樣做之后，我們的游戲運行起來后，就是直接顯示畫布內容了
5. 進度條顯示UI搭建
進度條其實也是圖片，所以我們還是先創建一個Image
然后把那個藍色的條狀圖片當做他的進度條
接著再調一下位置，然后設定錨點為中下
好，現在基本上就是這個樣子了，【圖片扣的并不好看，多多擔待，，】
接著我們就去寫腳本吧
新建一個檔案夾存放腳本檔案，命名為Scripts
點擊Scripts新建一個c#檔案
命名為jindu,cs
然后雙擊打開，我這邊是用的是Rider，當然你用vs也是完全沒問題的
6. 腳本撰寫
在剛剛的腳本檔案中撰寫如下代碼：
using UnityEngine;
using UnityEngine.UI;
public class Jindu : MonoBehaviour
{
private Image jindubar;
private Text jindu;
//控制進度
float startValue = 0;
float endValue = 100;
// Start is called before the first frame update
void Start()
{
jindubar = gameObject.GetComponent<Image>(); // 獲取到進度條的圖片物件
jindu = transform.Find("jindu").GetComponent<Text>(); // 獲取到進度條的百分比顯示
}
// Update is called once per frame
void Update()
{
if (startValue < endValue)
{
startValue++;
}
//實時更新進度百分比的文本顯示
jindu.text = startValue + "%";
//實時更新滑動進度圖片的fillAmount值
jindubar.GetComponent<Image>().fillAmount = startValue / 100f; // 因為FillAmount的值是從0-1的
if (startValue == 100)
{
// 這里先不寫，我們回頭寫上跳轉下一個界面的代碼
}
}
}
OK，將這個腳本檔案拖到進度條圖片的add comment上面，然后運行就行了
7. 演示
5. 打包
是的，打包讓你朋友看看你花了好幾分鐘做出來的東西
結語
歡迎喜愛Python，Unity（游戲開發引擎）的愛好者，讓我們一步步走向大神，成功離得不遠，也就兩個字，堅持罷了！！
Unity游戲引擎宣言：
你是否熱愛游戲呢？
你是否曾經幻想著有一天自己做出一款屬于自己的游戲呢？
不要猶豫了，趕快學習吧！
點擊鏈接查看社區：Python/游戲開發交流社區
【關注下方作者公號，獲取更多咨詢】
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/343103.html
標籤：其他