Unity UGUI界面

Posted on | In

不属于3d环境中的时刻显示在屏幕上的，用于游戏的开始菜单，RPG游戏的菜单栏，侧边栏与功能栏比如背包系统，任务列表，设计用来控制移动的虚拟杆和攻击的攻击按钮

创建一个公告的文本列表

游戏内的公告板用于对玩家的提示，或者是任务的了解

1.创建一个UI的image
2.只能上下拖动就要取消勾选以下按钮：

3. 在刚创建的image下创建一个text

4。为了只显示在框内要添加Scoll Rect组件

5.为了消除白板要添加Mash组件

6.添加Scrollbar滑动组件
7.把Scrollbar组件添加到被滑动的Image上

最终实现的效果：

监控UI界面的按钮点击事件（点击开始按钮开始游戏）

用于游戏中场景的切换

1.按钮上的点击事件：

2.脚本代码：
1
2
3
4
5
6
7
8
9
using UnityEngine.SceneManagement;

public class StartGame : MonoBehaviour {

public void OnClick(string sceneName)
{
SceneManager.LoadScene(sceneName);
}
}
实现：

制作一个显示血条的UI:

血条的增减是游戏中的基本

1.添加一个slider的组件：

2.修改图片的类型:

实现：

制做一个技能

对于一个游戏角色来说，多变的技能必不可少，这里主要简单的实现了技能UI的检测，与触发

1.创建一个鼠标点击事件和检测按钮按下脚本

2.创建被技能加载的图片

3.脚本代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; //添加UI

public class skill1 : MonoBehaviour {
public float timer = 0;
public bool isStartTimer = false;
public float coldTimer = 2;
public Image Imageskill1;
public KeyCode keyCode1;
// Use this for initialization
void Start () {
Imageskill1 = transform.Find("load").GetComponent<Image>(); //寻找图片下的Image组件
}

// Update is called once per frame
void Update () {
if (Input.GetKeyDown(keyCode1)) //监控按钮时间
{
isStartTimer = true;
}
if (isStartTimer)
{
timer += Time.deltaTime; //开始计时
Imageskill1.fillAmount = (coldTimer - timer) / coldTimer; //把得到的时间的比例传递个Image组件
if(timer >= coldTimer)
{
timer = 0;
isStartTimer = false;
Imageskill1.fillAmount = 0;
}
}

}
public void OnClick() //监控点击事件
{
isStartTimer = true;
}
}
4.开启监控：

最终实现：

制作一个角色的物品栏面板

游戏中的物品栏面板用于玩家对自己已获得物品的了解

1.为不同的物品栏面板添加toggel选项卡组件

2.添加Togger Group组件使选项卡只能选择一个：

3.为面板添加自动布局

4.为了防止物体图片被自动布局影响，创建一个空的中间物体

实现：

制作一个关卡选择界面(实现关卡的拖动与选择）

便于玩家选择关卡

1.点击按钮实现关卡选择界面的切换：

2.拖动与点击跟随触发代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems; //实现接口所需要引用的
using UnityEngine.UI;

public class LevelButtonScroll : MonoBehaviour,IBeginDragHandler,IEndDragHandler { //实现接口
private ScrollRect scrollRect;
private float[] pageArray = new float []{ 0, 0.5f, 1 };
private float smoothing = 3; //滑动速度
private float targetPosition;
private bool isDragStart = false;
public Toggle[] toggler; //创建跟随触发的toggle数组
// Use this for initialization
void Start () {
scrollRect = GetComponent< ScrollRect > (); //获得ScrollRect组件

}

// Update is called once per frame
void Update () {
if(isDragStart ==false) //当开始拖动的时候才用这个方法赋予scrollRect值
scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, targetPosition, Time.deltaTime * smoothing);
//缓慢的移动
}
public void　OnBeginDrag(PointerEventData eventDate)
{
isDragStart = true;
}

public void OnEndDrag(PointerEventData eventData)

{
isDragStart = false;
float posX = scrollRect.horizontalNormalizedPosition; //获取
int index = 0;
float offset = Mathf.Abs(pageArray[index] - posX); //初始化偏移量
for(int i = 1; i <pageArray.Length;i++)
{
float offsetTemp = Mathf.Abs(pageArray[i] - posX); //拖动的位置更与不同页的位置差
if (offsetTemp < offset) // 比较偏移的值更接近哪个页数的值
{
index = i;
offset = offsetTemp;
}
}
targetPosition = pageArray[index];
//scrollRect.horizontalNormalizedPosition = pageArray[index]; //返回接近的位置
toggler[index].isOn = true; //跟随触发
}


/*************设置按钮开关的调用方法**********************/
public void MoveTOPasage1( bool isOn) //当调用此方法时改变位置
{
if (isOn)
{
targetPosition = pageArray[0];
}
}
public void MoveTOPasage2(bool isOn)
{
if (isOn)
{
targetPosition = pageArray[1];
}
}
public void MoveTOPasage3(bool isOn)
{
if (isOn)
{
targetPosition = pageArray[2];
}
}
}

实现：

制作一个设置界面（关于自定义Toggle组件）

设置界面便于玩家对游戏进行一些调整，这里重点实现了一个自定义Toggle开关的实现

1.创建一个Toggle组件：

2.重写Toggle调用代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class MyToggle : MonoBehaviour {
public GameObject switch1; //用于显示不同开关
public GameObject switch2;
private Toggle toggle;
// Use this for initialization
void Start () {
toggle = GetComponent<Toggle>(); //得到物体上的TOggle组件
OnVlueChange(toggle.isOn); //初始化开关
}
// Update is called once per frame
void Update () {
}
public void OnVlueChange(bool isOn) //当按钮被点击时调用
{
switch1.SetActive(isOn);
switch2.SetActive(!isOn);
}
}

实现：