[UnityUI]一些有趣的UI样例
2024-08-23 07:10:53
1.环形进度条
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
2.图形匹配
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
using UnityEngine;
using System.Collections.Generic;
using UnityEngine.UI; /// <summary>
/// 被拖拽的慷慨块
/// </summary>
public class DragBrick : MonoBehaviour { private List<Transform> childrenTra = new List<Transform>();//慷慨块下的小方块
private List<GameObject> targetGo = new List<GameObject>();//小方块匹配的空方块
private GameObject[] tempGo;
private Vector3 posOffset; void Start()
{
Transform[] tra = transform.GetComponentsInChildren<Transform>();
for (int i = 1; i < tra.Length; i++)//tra[0]是自身。故不算上
childrenTra.Add(tra[i]);
} public void DragStart()
{
posOffset = transform.position - Input.mousePosition;
transform.SetAsLastSibling();
} public void DragUpdate()
{
transform.position = Input.mousePosition + posOffset;
} /// <summary>
/// 注意点：
/// 1.被射线检測的物体要带有Collider
/// 2.被射线检測的物体的z轴 > 发出射线检測的物体的z轴
/// 3.当没有给Raycast函数传layerMask參数时，只只忽略使用IgnoreRaycast层的碰撞器。 /// </summary>
public void DragEnd()
{
tempGo = new GameObject[childrenTra.Count];
int suitableBrickAmount = 0;//能正确匹配的砖块数目 for (int i = 0; i < childrenTra.Count; i++)
{
RaycastHit hit;
if (Physics.Raycast(childrenTra[i].position, Vector3.forward, out hit))
{
tempGo[i] = hit.transform.gameObject;
suitableBrickAmount++;
}
else break;
} if (suitableBrickAmount == childrenTra.Count)//全然匹配
{
if (targetGo.Count == 0)//初次全然匹配
{
Match();
}
else//已经全然匹配，再次全然匹配
{
Clear();
Match();
}
}
else//不能全然匹配
{
Clear();
}
} void Match()
{
for (int i = 0; i < tempGo.Length; i++)
{
targetGo.Add(tempGo[i]);
targetGo[i].layer = 2;//忽略射线碰撞
Vector3 pos = targetGo[i].transform.position;
pos.z--;
childrenTra[i].position = pos;
childrenTra[i].GetComponent<Outline>().enabled = true;
}
} void Clear()
{
for (int i = 0; i < targetGo.Count; i++)
targetGo[i].layer = 0;
targetGo.Clear(); for(int i = 0;i < childrenTra.Count;i++)
childrenTra[i].GetComponent<Outline>().enabled = false;
}
}
3.多重血条
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
描写叙述：
1.当受到伤害较小时，出现“残血”效果
2.当受到伤害较大时，出现“流水”效果
3.多重血条主要由四种血条组成：
a.最底层血条
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
b.当前血条与下一血条，就像下图中的紫色和红色
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
c.过渡血条，一般为深红色
using UnityEngine;
using System.Collections;
using UnityEngine.UI; //假设仅仅有一条血。那么一条血就是全部的血量
//假设有多条血。那么一条血就设定为一个固定值
public class MultiplyBloodBar : MonoBehaviour { public Image nowBar;//当前血条
public Image middleBar;//过渡血条
public Image nextBar;//下一血条
public Text countText;//剩下的血条数text private int count;//剩下的血条数(不包含当前血量)
private float nowBlood;//在一条血中的当前血量。如：100/1000则为100
private float oneBarBlood = 10000f;//一条血的容量，如：100/1000则为1000 private int colorIndex = 0;
public Color[] colors;//血条的颜色，注意Alpha值。默觉得0 private float slowSpeed = 0.1f;//受到重伤时( >oneBarBlood)或者处于加血状态，当前血条的流动速度
private float quickSpeed = 1f;//受到轻伤时( <oneBarBlood)，当前血条的流动速度
private float speed;//当前血条採用的速度
private float middleBarSpeed = 0.1f;//过渡血条的流动速度 private float nowTargetValue;//当前血条移动的目标点
private float middleTargetValue;//过渡血条移动的目标点
private bool isBloodMove = false;//控制血条的移动 void Update()
{
MoveNowBar();//当前血条的流动
MoveMiddleBar();//过渡血条的流动
} /// <summary>
/// 传入总血量。初始化血条
/// </summary>
/// <param name="number"></param>
public void InitBlood(float number)
{
count = (int)(number / oneBarBlood);
nowBlood = number % oneBarBlood;
if (nowBlood == 0)
{
nowBlood = oneBarBlood;
count--;
} colorIndex = count % colors.Length;
nowBar.color = colors[colorIndex];
nowBar.fillAmount = nowBlood / oneBarBlood; if (count != 0)
{
int nextColorIndex = (colorIndex - 1 + colors.Length) % colors.Length;
nextBar.color = colors[nextColorIndex];
nextBar.gameObject.SetActive(true);
}
else
{
nextBar.gameObject.SetActive(false);
} middleBar.gameObject.SetActive(false); countText.text = count + "";
} /// <summary>
/// 血量变化，并依据伤害推断是否使用过渡血条
/// </summary>
/// <param name="number"></param>
public void ChangeBlood(float number)
{
nowBlood += number;
nowTargetValue = nowBlood / oneBarBlood;
isBloodMove = true; if ((number < 0) && (Mathf.Abs(number) <= oneBarBlood))//处于受伤状态而且伤害量较低时
{
speed = quickSpeed;
middleBar.gameObject.SetActive(true);
middleBar.transform.SetSiblingIndex(nextBar.transform.GetSiblingIndex() + 1);
middleBar.fillAmount = nowBar.fillAmount;
middleTargetValue = nowTargetValue;
}
else//处于受伤状态而且伤害量较大时。或者处于加血状态
{
speed = slowSpeed;
middleBar.gameObject.SetActive(false);
}
} /// <summary>
/// 普通血条的流动
/// </summary>
void MoveNowBar()
{
if (!isBloodMove) return; nowBar.fillAmount = Mathf.Lerp(nowBar.fillAmount, nowTargetValue, speed); if (Mathf.Abs(nowBar.fillAmount - nowTargetValue) < 0.01f)//到达目标点
isBloodMove = false; if (count == 0)
nextBar.gameObject.SetActive(false);
else
nextBar.gameObject.SetActive(true); if (nowBar.fillAmount >= nowTargetValue)
SubBlood();
else
AddBlood();
} /// <summary>
/// 过渡血条的流动
/// </summary>
void MoveMiddleBar()
{
//受到轻伤时( <oneBarBlood)。才会出现过渡血条
if (speed == quickSpeed)
{
middleBar.fillAmount = Mathf.Lerp(middleBar.fillAmount, middleTargetValue, middleBarSpeed);
if (Mathf.Abs(middleBar.fillAmount - 0) < 0.01f)
{
middleBar.transform.SetSiblingIndex(nextBar.transform.GetSiblingIndex() + 1);
middleBar.fillAmount = 1;
middleTargetValue++;
}
}
} void AddBlood()
{
float subValue = Mathf.Abs(nowBar.fillAmount - 1);
if (subValue < 0.01f)//到达1
{
count++;
countText.text = count.ToString(); nowBar.fillAmount = 0;
nowTargetValue -= 1;
nowBlood -= oneBarBlood; nextBar.color = colors[colorIndex]; colorIndex++;
colorIndex %= colors.Length;
nowBar.color = colors[colorIndex];
}
} void SubBlood()
{
float subValue = Mathf.Abs(nowBar.fillAmount - 0);
if (subValue < 0.01f)//到达0
{
//当前血条已经流动完，将过渡血条放置最前
middleBar.transform.SetSiblingIndex(nextBar.transform.GetSiblingIndex() + 2); if (count <= 0)
{
middleBar.gameObject.SetActive(false);
Destroy(this);
return;
};
count--;
countText.text = count.ToString(); nowBar.fillAmount = 1;
nowTargetValue += 1;
nowBlood += oneBarBlood; colorIndex--;
colorIndex += colors.Length;
colorIndex %= colors.Length;
nowBar.color = colors[colorIndex]; int nextColorIndex = colorIndex - 1 + colors.Length;
nextColorIndex %= colors.Length;
nextBar.color = colors[nextColorIndex];
}
} }
最新文章
- CoreData教程
- Debian配置Apache2支持mod-python和cgi模块
- virtualenvwrapper安装使用
- LuManager 2.0.97 设置shopex 手机版waptouch，绑定二级目录
- IOS播放音乐和音效
- ［企业级linux安全管理］－ 安全管理基础（1）
- A Neural Network in 11 lines of Python
- HTML&CSS基础学习笔记1.28-给网页添加一个css样式
- Linux jdk安装多个版本并进行切换
- redis常见使用场景下PHP实现
- SpringBoot整合Sqlite数据库流程
- xpath语法笔记
- Android-SpinKit 进度条 (ProgressBar)
- jsonp跨域实现单点登录，跨域传递用户信息以及保存cookie注意事项
- 如何建立一个WCF服务并将其发布到IIS上
- mysql 常用sql语句
- 【JMeter】前置处理器
- JD_M案例知识点（移动端）
- WPF基础学习笔记整理 （三） x命名空间
- ASP.NET Core多语言 （转载）