Unity使用UGUI实现某个UI控件进入某个区域后按格移动

最近项目需求,需要实现类似于暗黑破坏神背包那样的按格存放功能,在此之前先实现物体按格进入背包,然后触发相应的事件,减少后续的归位操作。

图片控制代码:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ImgControl : MonoBehaviour
{
    public BackGroundControl m_backGround;              //懒得弄了直接拖吧

    private bool m_isChoosed;

    private Vector3 m_mouseOldPos;
    private Vector3 m_transNextPos;
    private Vector3 m_transToMouseOffset;

    void Start()
    {
        m_isChoosed = false;

    }

    void Update()
    {
        if (m_isChoosed)
        {
            //先计算物体要移动的下个点
            m_transNextPos = this.transform.position + Input.mousePosition - m_mouseOldPos;
            m_transNextPos = m_backGround.ConfirmImgPos(m_transNextPos);

            //计算鼠标此时应在的位置
            m_mouseOldPos = m_transNextPos + m_transToMouseOffset;

            this.transform.position = m_transNextPos;
        }

        //抬起鼠标则不能移动
        if (Input.GetMouseButtonUp(0))
        {
            m_isChoosed = false;
        }
    }

    /// <summary>
    /// 选定图片,懒得绑定了,面板拖动
    /// </summary>
    public void ChooseImg()
    {
        m_mouseOldPos = Input.mousePosition;
        m_transToMouseOffset = Input.mousePosition - this.transform.position;
        m_isChoosed = true;
        m_backGround.ConfirmRect();
    }
}

背景面板控制代码:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BackGroundControl : MonoBehaviour
{
    public RectTransform m_imgRect;         //图片的Rect

    private Rect m_backGroundRect;          //放置区域的Rect
    private int m_boxWidth = 10;            //格格宽
    private int m_boxHeight = 10;

    /// <summary>
    /// 确定图片位置
    /// </summary>
    /// <param name="pos"></param>
    /// <returns></returns>
    public Vector3 ConfirmImgPos(Vector3 pos)
    {
        if (m_backGroundRect.Contains(pos))
        {
            //计算鼠标位置和边界的差值
            float x = pos.x - m_backGroundRect.x;
            float y = pos.y - m_backGroundRect.y;

            //求出移动的倍数
            int xRatio = Mathf.CeilToInt(x / m_boxWidth);
            int yRatio = Mathf.CeilToInt(y / m_boxHeight);

            pos.x = m_backGroundRect.x + xRatio * m_boxWidth;
            pos.y = m_backGroundRect.y + yRatio * m_boxHeight;
        }
        return pos;
    }

    /// <summary>
    /// 确定区域矩形
    /// </summary>
    public void ConfirmRect()
    {
        Rect transRect = this.GetComponent<RectTransform>().rect;
        Rect imgRect = m_imgRect.rect;

        m_backGroundRect.Set(this.transform.position.x + transRect.x + imgRect.x,
           this.transform.position.y + transRect.y + imgRect.y,
           transRect.width + imgRect.width, transRect.height + imgRect.height);
    }
}

源程序:源程序

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Unity的UGUI基础控件是设计界面和交互的重要组成部分,它们能够让开发者轻松地创建出各种各样的UI界面。其中,最常见的基础控件包括Button、Toggle、Slider、Scrollbar等。下面,我将详细介绍如何在Unity使用UGUI基础控件。 首先,我们需要了解如何创建UI控件。打开Unity编辑器,选择GameObject->UI->想要创建的控件(例如Button)即可创建一个新的UI控件。可以通过拖拽、调整属性等方式将其设置为想要的样式和功能。 接下来,我将用一个简单的血条和蓝条的实例来展示UGUI基础控件使用。首先,我们需要创建两个UI Image控件,用于显示血条和蓝条。在Inspector面板中,设置它们的颜色、位置、大小等属性,使它们符合我们想要的效果即可。 然后,我们需要创建一个Slider控件,用于控制血条和蓝条的填充量。在Inspector面板中,我们需要设置Slider的Value属性,使其在滑动时能够控制UI Image的填充量。同时,还需要将Slider的Direction属性设置为左向右或下向上,以符合我们想要的UI设计。 最后,我们需要编写一些简单的脚本来实现血条和蓝条的逻辑。在每一帧中,我们需要将Slider的Value值与UI Image的Fill Amount属性关联起来,使得它们随着Slider的滑动而变化。同时,还需要根据游戏的状态和变化来更新Slider和UI Image的Value和Fill Amount属性,从而实现动态的UI控件。 通过这个简单的实例,我们可以看到UGUI基础控件使用非常简单,只需了解每个控件的属性和使用方法,就能轻松创建各种各样的UI界面。同时,我们还需要注意UI控件的优化,以保证游戏的流畅性和性能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值