Canvas
Canvas 组件可以控制如何渲染属于该 Canvas 的 UI 元素。此渲染主要由 Render Mode 设置进行控制。
渲染具有三种可能的模式:
- Screen Space - Overlay,在这种模式下,画布将填充屏幕,画布的所有 UI
元素都会渲染在其他所有元素之上,画布填满整个屏幕,UI元素在场景中渲染在其他物体的前方,如果调整屏幕大小或者改变分辨率,画布将会自动改变大小以适应屏幕显示。 - Screen Space - Camera,在这种模式下,画布将填充屏幕,但会渲染到特定摄像机,并受到与摄像机的距离的影响,画布以指定的距离放置在指定的相机前,UI元素被指定的相机渲染,相机设置会影响到UI的呈现
- World Space,在这种模式下,UI 存在于场景中,并渲染到其他对象的前面或后面(例如,3D
世界中角色上方的名称标签),使画布渲染在世界空间,该模式使画布在场景中像其他游戏对象一样,可以通过手动调整它的Rect
Transform来改变画布的大小,GUI控件可能会渲染于其它物体的前方或后方 Canvas Scaler
这个脚本用于当它们被显示在不同的屏幕尺寸控制UI元素的相对尺寸的一个简单的方法。 - Graphic Raycaster. 这被用来检测UI事件,如点击。它将确定哪个UI元素被点击和事件发送到该元件,以便适当的组件可以反应。
选择Camera模式的时候,一般会使用额外的摄像机组为UI摄像机,设置Depth大于主摄像机,渲染层只渲染UI,以及 flags 设置为 Depth only,不渲染空白部分
Text
将想要着重标记的字放在语法中,就可以显示额外的效果
Slider
Background: 后置背景
Fill: 前置背景
Handle Slide: 手柄滑动控制前置背景覆盖后置背景
Interactable : 选中此项则用户不可以点击,不可以随机修改数值
- Unity 中图片的类型 Image type
Simple :没有特殊效果,就是图片原本的样式
Sliced:可以通过设置图片的边界,让边界内的图像可以进行拉伸,但是边界外的图像不影响,在Sprite Editor中设置边界
Tiled :平铺,将图片拉伸后,图片的样式不改变,但是图像会增多
Filed:可以使用滑块的效果,比如血槽,蓝条,技能冷却时
Shaow Script :给UI元素加上阴影的效果,一般用于字体
Outline Script:给UI元素加上边框的效果,一般用于字体
Toggle
添加此项,可以使被选择的UI元素消失或者出现,进行一张图片的切换
Toggle Groups :通过一个对象控制所有Toggle,可以实现页面的切换等
Grid layout Group:Unity内置组件,可以自动排列子对象,可用于设置道具栏
需要注意的是,Grid layout Group 组件只会排列它的直属子对象,位于直属子对象的子对象则不会进行排列
同理还有Vertical layout Group .Horizontal layout Group
所以应该在Grid对象的下面创建一个用于排列的空对象,再在空对象里面创建实际的道具栏
为了实现关卡选择界面滚动的效果,添加一个空的Image对象,附加 Scroll Rect 组件
滚动的同时不希望关卡选择的图片溢出到界面外,加上一个 Mask 组件,可以控制一个区域,使溢出区域的图片消失
注意,Mask 组件需要与 Image 组件一起使用
- 用代码控制图片滚动
public class ScrollPanel : MonoBehaviour,IBeginDragHandler,IEndDragHandler
{
private float m_ScrollInit = 0.33f;
private ScrollRect m_ScrollRect;
private float[] m_Position =new float[4];
private float m_TargetPosition;
private bool m_IsDragging = false;
void Start()
{
m_ScrollRect = GetComponent<ScrollRect>();
InitPosition();
}
void Update()
{
//if (m_IsDragging)
//{
m_ScrollRect.horizontalNormalizedPosition = Mathf.Lerp(m_ScrollRect.horizontalNormalizedPosition, m_TargetPosition, 4f*Time.deltaTime);
//}
}
public void OnBeginDrag(PointerEventData eventData)
{
m_IsDragging = true;
}
public void OnEndDrag(PointerEventData eventData)
{
//float temp = m_ScrollRect.horizontalNormalizedPosition; //获取 ScrollRect 的水平坐标
//Debug.Log(temp); // 0.33
float m_EndDrag = m_ScrollRect.horizontalNormalizedPosition; // 取得结束Drag后的水平坐标
int index = 0;
float offset = Mathf.Abs(m_Position[0] - m_EndDrag);
for(int i= 0; i < m_Position.Length; i++)
{
float tempOffset = Mathf.Abs(m_Position[i] - m_EndDrag);
if(tempOffset < offset)
{
index = i;
offset = tempOffset;
}
}
m_TargetPosition = m_Position[index];
m_IsDragging = false;
}
private void InitPosition()
{
m_Position[0] = 0;
for (int i = 1; i < m_Position.Length; i++)
{
m_Position[i] = m_Position[i - 1] + m_ScrollInit;
}
}
}
InputField
有三个组件,InputField 控制子对象的开关
PlaceHolder控制当用户没有输入任何东西时,显示的文本,当用户开始输入之后,PlaceHolder关闭
Text控制用户输入的字体
Content Type ,对用户的输入进行限制,验证用户的输入是否正确(正则表达式)
button
Transtion :控制按钮被点击或者被选中时的类型,可以设置为颜色,图片等
HighLighted Sprite : 按钮被选中时的图片
Pressed Sprite :按钮被点击时的图片
Selected Sprite:按钮被点击后的图片
实现界面渐入渐出
Component[] comps = GameObject.Find("Canvas").GetComponentsInChildren<Component>();
foreach (Component c in comps)
{
if (c is Graphic)
{
(c as Graphic).CrossFadeAlpha(0, 1, true);
}
}
实现图片闪烁
private Image m_Image;
private float m_Alpha = 1f; //图片的Alpha值
private void Start()
{
m_Image = GetComponent<Image>();
}
void Update()
{
m_Alpha = Mathf.PingPong(Time.time, 1);
m_Image.color = new Color(m_Image.color.r, m_Image.color.g, m_Image.color.b, m_Alpha);
}
Mathf.PingPong(float t,float length) :循环值t,使输出不会大于length,也不会小于0。返回值将在0和length之间来回移动,一般使用 Time.time
Mathf.Repeat(float t,float length);循环值t,使输出不会大于等于length,也不会小于0。返回值会从 0 > length-1 ,0 > length-1 ,一直重复
Event
-
1.在编辑器中直接绑定
优点:方便快捷 缺点:无法得知是哪个对象调用的此方法 -
2.AddListener
通过代码添加,可以获得调用的对象引用(推荐使用)
Button btn = transform.Find("Button").GetComponent<Button>();
btn.onClick.AddListener(Fun1);
InputField ifd = transform.Find("InputField").GetComponent<InputField>();
ifd.onEndEdit.AddListener(Fun2);
建立在点选的基础之上,1.选中了某个物体,滑动鼠标滚轮,就执行
2.选中了物体,移动,会执行,上下左右…
3.选中UI,敲回车,执行
InputField 那种选中才是选中,按钮之类的那种是点击
public void OnDrag(PointerEventData eventData)
{
//PointerEventData 与指针(鼠标/触摸)事件关联的事件信息
//eventData.position 是 屏幕坐标,仅仅适用于 overlay 模式
transform.position = eventData.position;
//通用方式,将屏幕坐标转换为世界坐标
transform.position = GetWorldPosition(eventData);
}
public class DragDemo : MonoBehaviour,IBeginDragHandler,IDragHandler
{
private Vector3 offset; //偏移量
private Vector3 worldPoint;//世界坐标
public void OnBeginDrag(PointerEventData eventData)
{
worldPoint = GetWorldPosition(eventData);
offset = transform.position - worldPoint; //获得偏移量
}
public void OnDrag(PointerEventData eventData)
{
worldPoint = GetWorldPosition(eventData);
//根据偏移量移动当前UI
transform.position = worldPoint + offset;
}
private Vector3 GetWorldPosition(PointerEventData eventData)
{
RectTransform parent = transform.parent as RectTransform;
Vector3 worldPos;
RectTransformUtility.ScreenPointToWorldPointInRectangle(parent, eventData.position, eventData.pressEventCamera, out worldPos);
return worldPos;
}
}