1. Grid Layout Group（网格布局）
Hierachy:
Game:
属性和功能：
2. 根据鼠标位置旋转界面实现：
public class TiltWindow : MonoBehaviour
{
public Vector2 range = new Vector2(5f, 3f); Transform mTrans;
Quaternion mStart;
Vector2 mRot = Vector2.zero; void Start ()
{
mTrans = transform;
mStart = mTrans.localRotation;
} void Update ()
{
Vector3 pos = Input.mousePosition; float halfWidth = Screen.width * 0.5f;
float halfHeight = Screen.height * 0.5f;
float x = Mathf.Clamp((pos.x - halfWidth) / halfWidth, -1f, 1f);
float y = Mathf.Clamp((pos.y - halfHeight) / halfHeight, -1f, 1f);
mRot = Vector2.Lerp(mRot, new Vector2(x, y), Time.deltaTime * 5f); mTrans.localRotation = mStart * Quaternion.Euler(-mRot.y * range.y, mRot.x * range.x, 0f);
}
}
3. 按钮动画实现：
修改 Transisition 为 Animation，设置触发器
在 Animator 设计状态机
4. HorizontalLayoutGroup（垂直布局）
Hierachy:
Game:
属性和功能：
5. 拖拽功能实现
Hierarchy（其中 Panel 中 Image 绑定 DragMe，Panel2,Panel3 中 Image 绑定 DropMe）:
public class DragMe : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
public bool dragOnSurfaces = true; private Dictionary<int,GameObject> m_DraggingIcons = new Dictionary<int, GameObject>();
private Dictionary<int, RectTransform> m_DraggingPlanes = new Dictionary<int, RectTransform>(); // 开始拖拽
// 创建拖拽图片的 clone 体
public void OnBeginDrag(PointerEventData eventData)
{
var canvas = FindInParents<Canvas>(gameObject);
if (canvas == null)
return; // We have clicked something that can be dragged.
// What we want to do is create an icon for this.
m_DraggingIcons[eventData.pointerId] = new GameObject("icon"); m_DraggingIcons[eventData.pointerId].transform.SetParent (canvas.transform, false);
m_DraggingIcons[eventData.pointerId].transform.SetAsLastSibling(); var image = m_DraggingIcons[eventData.pointerId].AddComponent<Image>();
// The icon will be under the cursor.
// We want it to be ignored by the event system.
var group = m_DraggingIcons[eventData.pointerId].AddComponent<CanvasGroup>();
group.blocksRaycasts = false; image.sprite = GetComponent<Image>().sprite;
image.SetNativeSize(); if (dragOnSurfaces)
m_DraggingPlanes[eventData.pointerId] = transform as RectTransform;
else
m_DraggingPlanes[eventData.pointerId] = canvas.transform as RectTransform; SetDraggedPosition(eventData);
} // 正在拖拽
// 更新拖拽物位置
public void OnDrag(PointerEventData eventData)
{
if (m_DraggingIcons[eventData.pointerId] != null)
SetDraggedPosition(eventData);
} // 根据鼠标位置更新拖拽物位置和旋转
private void SetDraggedPosition(PointerEventData eventData)
{
if (dragOnSurfaces && eventData.pointerEnter != null && eventData.pointerEnter.transform as RectTransform != null)
m_DraggingPlanes[eventData.pointerId] = eventData.pointerEnter.transform as RectTransform; var rt = m_DraggingIcons[eventData.pointerId].GetComponent<RectTransform>();
Vector3 globalMousePos;
if (RectTransformUtility.ScreenPointToWorldPointInRectangle(m_DraggingPlanes[eventData.pointerId], eventData.position, eventData.pressEventCamera, out globalMousePos))
{
rt.position = globalMousePos;
rt.rotation = m_DraggingPlanes[eventData.pointerId].rotation;
}
} // 结束拖拽
// 销毁克隆体
public void OnEndDrag(PointerEventData eventData)
{
if (m_DraggingIcons[eventData.pointerId] != null)
Destroy(m_DraggingIcons[eventData.pointerId]); m_DraggingIcons[eventData.pointerId] = null;
} // 在父亲节点中寻找 T 组件
static public T FindInParents<T>(GameObject go) where T : Component
{
if (go == null) return null;
var comp = go.GetComponent<T>(); if (comp != null)
return comp; var t = go.transform.parent;
while (t != null && comp == null)
{
comp = t.gameObject.GetComponent<T>();
t = t.parent;
}
return comp;
}
}
public class DropMe : MonoBehaviour, IDropHandler, IPointerEnterHandler, IPointerExitHandler
{
public Image containerImage;
public Image receivingImage;
private Color normalColor;
public Color highlightColor = Color.yellow; public void OnEnable ()
{
if (containerImage != null)
normalColor = containerImage.color;
} // 放置图片
public void OnDrop(PointerEventData data)
{
containerImage.color = normalColor; if (receivingImage == null)
return; Sprite dropSprite = GetDropSprite (data);
if (dropSprite != null)
receivingImage.overrideSprite = dropSprite;
} // 鼠标移入
// 背景高亮
public void OnPointerEnter(PointerEventData data)
{
if (containerImage == null)
return; Sprite dropSprite = GetDropSprite (data);
if (dropSprite != null)
containerImage.color = highlightColor;
} // 鼠标移出
public void OnPointerExit(PointerEventData data)
{
if (containerImage == null)
return; containerImage.color = normalColor;
} // 得到拖拽图片
private Sprite GetDropSprite(PointerEventData data)
{
var originalObj = data.pointerDrag;
if (originalObj == null)
return null; var dragMe = originalObj.GetComponent<DragMe>();
if (dragMe == null)
return null; var srcImage = originalObj.GetComponent<Image>();
if (srcImage == null)
return null; return srcImage.sprite;
}
}
6. 拖拽改变面板位置（屏幕坐标到本地坐标的转换）
public class DragPanel : MonoBehaviour, IPointerDownHandler, IDragHandler {
private Vector2 originalLocalPointerPosition;
private Vector3 originalPanelLocalPosition;
private RectTransform panelRectTransform;
private RectTransform parentRectTransform;
void Awake () {
panelRectTransform = transform.parent as RectTransform;
parentRectTransform = panelRectTransform.parent as RectTransform;
}
public void OnPointerDown (PointerEventData data) {
originalPanelLocalPosition = panelRectTransform.localPosition;
// 屏幕坐标转成本地坐标
RectTransformUtility.ScreenPointToLocalPointInRectangle (parentRectTransform, data.position, data.pressEventCamera, out originalLocalPointerPosition);
}
public void OnDrag (PointerEventData data) {
if (panelRectTransform == null || parentRectTransform == null)
return;
Vector2 localPointerPosition;
if (RectTransformUtility.ScreenPointToLocalPointInRectangle (parentRectTransform, data.position, data.pressEventCamera, out localPointerPosition)) {
Vector3 offsetToOriginal = localPointerPosition - originalLocalPointerPosition;
panelRectTransform.localPosition = originalPanelLocalPosition + offsetToOriginal;
}
ClampToWindow ();
}
// 将面板限制在父组件之内
// Clamp panel to area of parent
void ClampToWindow () {
Vector3 pos = panelRectTransform.localPosition;
Vector3 minPosition = parentRectTransform.rect.min - panelRectTransform.rect.min;
Vector3 maxPosition = parentRectTransform.rect.max - panelRectTransform.rect.max;
pos.x = Mathf.Clamp (panelRectTransform.localPosition.x, minPosition.x, maxPosition.x);
pos.y = Mathf.Clamp (panelRectTransform.localPosition.y, minPosition.y, maxPosition.y);
panelRectTransform.localPosition = pos;
}
}7. 拖拽改变面板大小
public class ResizePanel : MonoBehaviour, IPointerDownHandler, IDragHandler {
public Vector2 minSize = new Vector2 (, );
public Vector2 maxSize = new Vector2 (, );
private RectTransform panelRectTransform;
private Vector2 originalLocalPointerPosition;
private Vector2 originalSizeDelta;
void Awake () {
panelRectTransform = transform.parent.GetComponent<RectTransform> ();
}
public void OnPointerDown (PointerEventData data) {
originalSizeDelta = panelRectTransform.sizeDelta;
RectTransformUtility.ScreenPointToLocalPointInRectangle (panelRectTransform, data.position, data.pressEventCamera, out originalLocalPointerPosition);
}
public void OnDrag (PointerEventData data) {
if (panelRectTransform == null)
return;
Vector2 localPointerPosition;
RectTransformUtility.ScreenPointToLocalPointInRectangle (panelRectTransform, data.position, data.pressEventCamera, out localPointerPosition);
Vector3 offsetToOriginal = localPointerPosition - originalLocalPointerPosition;
// 根据鼠标偏移改变窗口大小
Vector2 sizeDelta = originalSizeDelta + new Vector2 (offsetToOriginal.x, -offsetToOriginal.y);
sizeDelta = new Vector2 (
Mathf.Clamp (sizeDelta.x, minSize.x, maxSize.x),
Mathf.Clamp (sizeDelta.y, minSize.y, maxSize.y)
);
panelRectTransform.sizeDelta = sizeDelta;
}
}8. 根据滑动条调节光源颜色
效果图：
先设置 Slider 的 OnValueChange（其他两个同理） :
public class ChangeColor : MonoBehaviour, IPointerClickHandler
{
public void SetRed(float value)
{
OnValueChanged(value, );
} public void SetGreen(float value)
{
OnValueChanged(value, );
} public void SetBlue(float value)
{
OnValueChanged(value, );
} public void OnValueChanged(float value, int channel)
{
Color c = Color.white; if (GetComponent<Renderer>() != null)
c = GetComponent<Renderer>().material.color;
else if (GetComponent<Light>() != null)
c = GetComponent<Light>().color; c[channel] = value; if (GetComponent<Renderer>() != null)
GetComponent<Renderer>().material.color = c;
else if (GetComponent<Light>() != null)
GetComponent<Light>().color = c;
}
}
9. 面板切换
效果图：
面板管理代码：
public class PanelManager : MonoBehaviour {
public Animator initiallyOpen;
private int m_OpenParameterId;
private Animator m_Open;
private GameObject m_PreviouslySelected;
const string k_OpenTransitionName = "Open";
const string k_ClosedStateName = "Closed";
public void OnEnable()
{
// 根据参数名字得到id
m_OpenParameterId = Animator.StringToHash (k_OpenTransitionName);
if (initiallyOpen == null)
return;
// 打开初始面板
OpenPanel(initiallyOpen);
}
// 打开面板
public void OpenPanel (Animator anim)
{
if (m_Open == anim)
return;
anim.gameObject.SetActive(true);
var newPreviouslySelected = EventSystem.current.currentSelectedGameObject;
// 最先显示
anim.transform.SetAsLastSibling();
CloseCurrent();
m_PreviouslySelected = newPreviouslySelected;
m_Open = anim;
m_Open.SetBool(m_OpenParameterId, true);
GameObject go = FindFirstEnabledSelectable(anim.gameObject);
SetSelected(go);
}
static GameObject FindFirstEnabledSelectable (GameObject gameObject)
{
GameObject go = null;
var selectables = gameObject.GetComponentsInChildren<Selectable> (true);
foreach (var selectable in selectables) {
if (selectable.IsActive () && selectable.IsInteractable ()) {
go = selectable.gameObject;
break;
}
}
return go;
}
// 关闭当前面板
public void CloseCurrent()
{
if (m_Open == null)
return;
m_Open.SetBool(m_OpenParameterId, false);
SetSelected(m_PreviouslySelected);
StartCoroutine(DisablePanelDeleyed(m_Open));
m_Open = null;
}
// 关闭面板
IEnumerator DisablePanelDeleyed(Animator anim)
{
bool closedStateReached = false;
bool wantToClose = true;
while (!closedStateReached && wantToClose)
{
if (!anim.IsInTransition())
closedStateReached = anim.GetCurrentAnimatorStateInfo().IsName(k_ClosedStateName);
wantToClose = !anim.GetBool(m_OpenParameterId); // 关闭的时候可打断
yield return new WaitForEndOfFrame(); // 等待关闭动画播放完
}
if (wantToClose)
anim.gameObject.SetActive(false);
}
private void SetSelected(GameObject go)
{
EventSystem.current.SetSelectedGameObject(go);
}
}10. RenderTexure 在 UI 上显示模型
设置 Camera TargetTexture，将 相机内容渲染到 RenderTexure 中。
添加 RawImage，设置 Texture 为之前的 RenderTexture。
效果图：
11. 图片遮挡（Mask，ScrollRect）
Hierarchy:
在 GameObject 中添加组件：
效果图: