Canvas 组件可以控制如何渲染属于该 Canvas 的 UI 元素。此渲染主要由 Render Mode 设置进行控制。
渲染具有三种可能的模式:
Background: 后置背景
Fill: 前置背景
Handle Slide: 手柄滑动控制前置背景覆盖后置背景
Interactable : 选中此项则用户不可以点击,不可以随机修改数值
添加此项,可以使被选择的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();
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 控制子对象的开关
PlaceHolder控制当用户没有输入任何东西时,显示的文本,当用户开始输入之后,PlaceHolder关闭
Text控制用户输入的字体
Content Type ,对用户的输入进行限制,验证用户的输入是否正确(正则表达式)
Transtion :控制按钮被点击或者被选中时的类型,可以设置为颜色,图片等
HighLighted Sprite : 按钮被选中时的图片
Pressed Sprite :按钮被点击时的图片
Selected Sprite:按钮被点击后的图片
Component[] comps = GameObject.Find("Canvas").GetComponentsInChildren();
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();
}
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 ,一直重复
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;
}
}