#游戏unity-音之国度#战斗系统中图鉴UI

#游戏unity-音之国度#战斗系统中图鉴UI

在对战时，如果对面出现了不熟悉的音符兽，我们希望可以查询对面的音符兽情况，所以就需要一个战斗图鉴。我们需要实时点开进行查询。所以做了一个可拖拽的图鉴UI，如下图所示（背景图是随意找的）——

这个图鉴框是可拖拽的，按住右下角的三角可以对UI进行大小的等比例调节，在战斗时并不会影响战斗效果。
接下来，我们来详解是如何做成的；
首先当然是新建UI系统，来安置Button和Panel，这里就不详细操作了；
接着，因为需要进行缩放和拖拽，所以，要对可进行最大范围进行限制，以免出了游戏界面，新建一个Panel命名为可拖拽区域，在其中的子物体新建如下图

主要需要实现的两个功能是需要绑上另外的脚本的，其他的例如按钮的点击功能、关闭对话框等功能很基础就不赘述了。

拖拽功能的实现

基本是实现了两个接口IPointerDownHandler, IDragHandler，来判断点击事件是来自屏幕还是按钮，而其中的IPointerDownHandler的主要方法是 OnPointerDown，可以将即时数据作为传入的参数。不懂的同学可以前往unity官网查看API 时空门
而在代码中写UI主要的一点就是进行坐标的转换，主要是关于本地坐标和相对屏幕的坐标之间的转换，其中还需要用到Math库中的方法函数，所以大多是计算的代码了。逻辑上主要就是根据实现的两个接口来实现。代码如下，绑定在Drag Zone 上

using UnityEngine;using UnityEngine.UI;using UnityEngine.EventSystems;using System.Collections;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 ();    }    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;    }}

放缩功能的实现

与拖拽功能相似，也是实现了那两个接口；逻辑上也很清晰，主要是还是运算，代码如下——

using UnityEngine;using UnityEngine.UI;using UnityEngine.EventSystems;public class ResizePanel : MonoBehaviour, IPointerDownHandler, IDragHandler {    public Vector2 minSize = new Vector2 (100, 100);    public Vector2 maxSize = new Vector2 (400, 400);    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;    }}

以上就是全部内容了，想要资源包的可以评论，博主会私发的~