【Unity】制作简单的启动、菜单和游戏界面

本文内容

1. 制作游戏启动界面：有个滚动条展示载入进度，10秒后滚动条满格切换到主界面；
2. 主界面：显示若干个按钮，包括开始游戏、保存游戏、设置等，点击开始游戏进入游戏界面；
3. 游戏界面：显示任意三维场景，左上角显示血条，标签显示血量%，右上角显示魔法条，标签显示魔法量%，右下角按钮点击后切换到主界面。

步骤

1. 新建场景“0Scene”（启动界面）“Menu”（主界面）“Game”（游戏界面）；
   
2. 首先来制作有进度条的场景：打开“0Scene”，在Hierarchy面板新建UI->Canvas，再在Canvas下新建Image和Text，用于显示进度条图片和文字；
3. 将一个空白图片拖到Project面板，此时它不能直接拖到Image上，点击该图片，在Inspector面板修改其Texture Type为Sprite(2D and UI)，
   
   再将其拖到Image上，选择颜色（即进度条颜色）；
   
4. 添加脚本LoadScene，用于显示进度条动画，代码为：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class LoadScene : MonoBehaviour
{
    public Text loadingText;
    public Image progressBar;
    private int curProgressValue = 0;
    
    void FixedUpdate()
    {
        int progressValue = 100;

        if (curProgressValue < progressValue)
        {
            curProgressValue++;
        }

        loadingText.text = "夏目正在努力加载哦..." + curProgressValue + "%";//实时更新进度百分比的文本显示  

        progressBar.fillAmount = curProgressValue / 100f;//实时更新滑动进度图片的fillAmount值  

        if (curProgressValue == 100)
        {
            loadingText.text = "OK";//文本显示完成OK
            SceneManager.LoadScene("Menu");
        }
    }
}

保存，将其拖到主摄像机（Main Camera）上；

5. 为脚本中的loadingText及progressBar赋值：点击Main Camera，LoadingText选择Text，ProgressBar选择Image；
   
6. 为场景添加一个背景：在Hierarchy面板新建3D Object->Quad，把背景图直接拖上去；
7. 调整背景图及进度条、文字的位置、大小；
   
8. 点击运行，发现进度条至100%后并没有切换画面，此时，点击File->Build Settings…，将三个个画面添加到Scenes In Build内，再次运行，进度条运行至100%后就切换至Menu，至此，进度条场景制作完成；
9. 制作菜单场景：打开Menu，先为其添加背景，方法与之前一样；
10. 添加按钮：Hierarchy面板Create->UI->Canvas，在Canvas下新建UI->Button，创建三个按钮，分别命名为Begin，Continue，Set，点击按钮前面的小三角，下拉出现Text，将文字分别改为“开始游戏”“继续游戏”“设置”；
11. 添加脚本Begin，使得点击“开始游戏”按钮时跳转到游戏界面，核心代码为：

using UnityEngine.SceneManagement;
public void OnClick()
    {
        SceneManager.LoadScene("Game");
    }

将其拖到Button_Begin上；

12. 运行，点击“开始游戏”，并没有切换到Game，那是因为还没有选择点击事件，点击Button_Begin，在Button(Script)组件下有一个On Click()，点击下方加号添加事件，Object选择Button_Begin，Fuction选择OnClick()，有时找不到这个函数，是因为脚本中这个函数前少了public，
    
    再次运行，点击“开始游戏”，场景切换到Game；
13. 给这个场景添加一段说明文字：新建Canvas，再在Canvas下新建Text，修改其属性即可，这样菜单界面也制作完成；
    
14. 打开Game，先建一个三维场景，添加2个Quad和1个Plane，调整他们的位置；
15. 给墙壁和地板添加颜色：在Project面板新建Material，选择颜色，然后拖到Quad和Plane上即可；
16. 添加角色：新建一个空物体，把角色的png格式图片拖到其上，发现并不能直接放上去，点开空物体，添加组建Mesh->Mesh Filter，Mesh选择Quad，再添加Mesh->Mesh Renderer，新建一个Material，Albedo选择角色图片，同时上方Shader选择Sprites->Default，
    
    然后为Mesh Renderer组建中Element0选择该Material；
17. 添加血条：新建Canvas、Slider，展开Slider，删去Handle Slide Area，Fill Area的Left和Right值都改为0，展开Fill Area，Fill的Color选择红色，然后调整Slider的位置，接着给血条添加表示血量的文字：在同一Canvas下添加Text；
18. 新建脚本SliderHPChange，用于初始化和实时更新血量，

public Slider HPStrip;
public Text HPText;    //显示血量
void Start()
    {
        HPStrip.value = 0;    //初始化血条
    }
    
void Update()
    {
        HPText.text = "HP:" + HPStrip.value + "%";
    }

将其拖到Slider上，Slider和Text分别选择刚才设置的Slider和Text；

19. 以同样的方法再建一个Slider，Fill的Color为蓝色，作为魔法条，魔法值自动回升的函数：

void FixedUpdate()
    {
        MPStrip.value++;
    }

20. 添加按钮，用于使血量回升，添加脚本，核心代码为：

public SliderHPChange ChangeHP1;
public void OnClick()
    {
        ChangeHP1.HPStrip.value += Random.Range(3, 7);
    }

将其拖到按钮上，再添加点击事件；

21. 以同样的方法再建两个按钮，可以修改Random.Range(3,7)内整数的值来为不同的按钮设定不同的血量增长值；
22. 再添加返回主菜单的按钮，脚本的核心代码为：

public void OnClick()
    {
        SceneManager.LoadScene("Menu");
    }

至此游戏界面也制作完成；