GDPU unity游戏开发 滚动小球UI界面

手把手用界面设计点缀滚动小球的游戏实例。

收集素材

绘制一个UI界面可以先找好实现效果的素材，然后先规划一下大致的布局，把素材导入assets文件里。接着新建一个canvas画布，要记住，ugui的设计肯定离不开canvas画布。在canvas下新建一些ui元素，如图片、移动条、输入框这种交互元素。

 

接着把收集到的素材与这些对象进行关联，即把图片拖进sourceimage，要注意素材图要改为sprite精灵图类型才能拖进去。

 

界面设计 

进行关联组件后，就是日常的拖拖拉拉了，把组件摆放到合适的位置，在scene面板点击拖动即可。

 

到了这里，大致的页面是摆放好了，继续写代码实现交互效果。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
using Chapter03;

namespace Chapter03
{

public class UI_Main : MonoBehaviour
{
    public Sprite finishName;
    public Image img_loadSlider;
    public Button btn_beginGame;
    public InputField inp_name;
    private bool load; // 标识游戏是否正在加载
    private float inttime = 0;// 记录加载时间

     public void Start()
    {
            // 初始化加载状态和加载滑块的填充值
          load = false;
        img_loadSlider.fillAmount = 0;
    }

    public void Update()
    {
        if (load)
        {
                // 更新加载时间
                inttime += Time.deltaTime;
                // 更新加载滑块的填充值
                img_loadSlider.fillAmount = inttime;
        }
          // 如果加载滑块的填充值达到了1
        if (img_loadSlider.fillAmount == 1)
        {
            //跳转到场景1
            SceneManager.LoadScene(1);
        }
    }

    public void BeginGame()
    {
        if (PlayerPrefs.GetString("name")!=null)
        {
                // 开始加载游戏
                load = true;
        }
    }

    public void SetName(InputField input_name)
    {
        if (input_name.text!=null)
        {
                // 将名字存储到PlayerPrefs中
                PlayerPrefs.SetString("name", inp_name.text);
                // 将输入框的图片设置为完成名字的精灵图
                inp_name.GetComponent<Image>().sprite = finishName;
        }
    }


}
    
}

把该脚本挂载在canvas组件上，然后再canvas属性处进行传值初始化。

 

接着，"onValueChange" 的 "RuntimeOnly" 特性表示该事件只在游戏运行时触发，而不在编辑器中触发，避免在编辑器中进行调试或设置时触发不必要的事件。因此可以在要实现交互的组件元素逐一找到类似的选项进行RuntimeOnly，然后调用该元素所需的方法。

实现这个脚本后，这个简单的ui界面设计就完成了，接着与我们之前的滚动小球场景界面进行切换。在编译器中找到file-buildsettings-scenes in build，点击add open scenes，同样在滚动小球界面按这个，然后确认这个工程文件有了两个这样的场景，注意一下顺序，ui在前。这是同一个游戏，因此新建场景的是在assets里完成，附加到该游戏项目即可。

 

运行中的音视频播放

接着，让我们点击主场景，跳回滚动小球的界面。 

 同样，找到一些音视频的素材，新建一些ui组件，让游戏运行时更加生动形象。编写脚本。这里的SphereCollision、UI_Game对应案例滚动小球做了一些修改。

using UnityEngine;
using System.Collections;
using Chapter03;

namespace Chapter03{
public class SphereCollision : MonoBehaviour
{
    public int CountTagObject(string s_tag)
    {
        GameObject[] obj = GameObject.FindGameObjectsWithTag(s_tag);
        return obj.Length;//返回标签 s_tag 的游戏对象的数量
        }
    //当挂有刚体组件和碰撞体组件进入到另一个对象的碰撞组件触发区域就会调用该方法
    //Collider other 为被进入的触发区域的碰撞对象
    private void OnCollisionEnter(Collision collision)
    {
        //进行判断碰撞触发对象的标签Tag是否为设置的Cube
        if (collision.gameObject.CompareTag("Cube"))
        {
            //调用父类中的销毁函数销毁触碰到的对象物体
            Destroy(collision.gameObject);
            StartCoroutine("UI_Update");     //启动UI_Update协程
            }
    }

    IEnumerator UI_Update()
    {
        yield return new WaitForSeconds(0.5f);//让程序等待 0.5 秒钟，然后再继续执行协程中的下一条语句
                     //调用UIManager中的设置UI文本方法
            UI_Game._instance.SetText(CountTagObject("Cube"));
    }

}
}

using UnityEngine;
using UnityEngine.UI;//需要导入UI包
using UnityEngine.Video;
using Chapter03;

namespace Chapter03
{
public class UI_Game : MonoBehaviour
{
   //单例模式，保证实例的唯一性。
    public static UI_Game _instance;
    public Text countText;
    public Text infoText;
    public int initCount;

    public Text t_UserName;
    private int i=0;
    public VideoPlayer vidP_UserImage;

    public GameObject pan_Setting;

    public AudioSource bg_Audio;

   //在游戏对象被实例化时调用，将当前实例赋值给私有变量 _instance
    private void Awake()
    {
        _instance = this;
    }
      //在脚本启动时调用，初始化了几个文本框的文本内容
    void Start()
    {
        //初始化设置Text文本框
        countText.text = "Count:" + initCount.ToString();
        infoText.text = "";
        t_UserName.text = PlayerPrefs.GetString("name");//从 PlayerPrefs 中获取
        }
        //用于播放和停止名为 vidP_UserImage 的视频，根据变量的奇偶性控制
        public void UserVideo()
    {
        i++;
        switch (i%2)
        {
            case 0:
                vidP_UserImage.Play();
                break;
            case 1:
                vidP_UserImage.Stop();
                break;
        }   
    }
    //当玩家触碰到Cube对象时可以被调用
    public void SetText(int cubeCount)
    {
        countText.text = "Count: " + cubeCount.ToString();
        //判断当前场景中Cube数量是否为0
        if (cubeCount == 0)
        {
            infoText.text = "You Win!";//显示获胜文本内容
        }
    }
    //显示隐藏pan_setting
    public void Show_Setting()
    {
        pan_Setting.SetActive(true);
    }
    public void Hide_Setting()
    {
        pan_Setting.SetActive(false);
    }
      //根据 Toggle 组件的状态true还是false控制音频播放
    public void Tog_Audio(Toggle tog_Audio)
    {
        if (tog_Audio.isOn)
            bg_Audio.Play();
        else
            bg_Audio.Stop();
    }

    public void Sli_Audio(Slider sli_Audio)
    {
       bg_Audio.volume = sli_Audio.value;
    }
}
}

接着把UI_Game脚本挂载到canvas画布上。然后做什么呢，相信你也会了，进行组件的关联，摆放好组件的位置，调整组件的runtimeonly。

这里用到了音视频与前面的ui界面设计有什么不一样呢，让我们一探究竟。首先视频如上图，用了assets新建的rendertextture关联ui中的按钮组件下的rawimage，然后根据脚本编写的方法，可以知道点击这个视频按钮，它就会进行播放或停止。然后音频方面， 一开始就希望听到熟悉的bgm，一个场景运行是离不开相机对象的，可以在相机对象中添加音频组件，然后将素材拖进去。接着也是通过按钮的脚本实现暂停与播放。

 

好啦，这个简单的滚动小球案例就完成了 。让我们来看下效果吧。

 

实验心得 

被假期拖累的作业，什么样的假期才能对得上叠到一堆的作业阿。