100个 Unity小游戏系列一【Unity】实现 可拖拽+格子位置互换 的背包系统

已于 2024-05-28 09:40:59 修改
阅读量154 收藏
点赞数 1
分类专栏： 100个Unity小游戏系列  文章标签： unity 游戏引擎
于 2024-05-07 11:25:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61164038/article/details/138525270
版权

一、项目描述

二 、背包格子容器制作 通过Horizontal Layout Group组件里面放了几个image组件

2.1 在这里的话我只使用了一个Panel，然后拉伸成一个较宽的矩形做成容器。

并且给这个Panel添加Horizontal Layout Group组件（主要是为了方便给容器中的格子调整位置，按照你的需求来添加合适的就好。）

2.2 创建item预制体

这里我在Panel中添加了一个Item对象作为格子，颜色调整为随机颜色

2.3 item对象添加CanvasGroup组件

然后你需要给这个item对象添加CanvasGroup组件（后续使用的是射线检测，会用到这个组件）

2.4 预制体坐坐完成

2.5 ui框架的最终效果

三 、编写脚本

3.1 创建item的控制脚本

新建一个脚本（我就取名叫做“UIDrag.cs”）,然后将这个脚本拖拽给item预制体，这个脚本将控制item预制体实现拖拽效果。

3.2 创建变量 

这里我们需要创建四个变量，用于获取一些必要的组件和保存一些必要的数据。

using System.Collections;
using UnityEngine;
using UnityEngine.EventSystems;
 
public class UIDrag : MonoBehaviour
{
 
    public Vector2 originalPosition; //初位置
 
    public Vector2 offsetPostion; //拖动物体时候的产生的位置差
 
    private Transform parentTransform; //父级物体的Transform
 
    private CanvasGroup canvasGroup;
 
    private void Awake() {
        canvasGroup = GetComponent<CanvasGroup>();
        parentTransform = transform.parent;
 
        originalPosition = transform.position; //获得初位置的值
    }
}

3.3 实现推拽的三个接口

我们需要实现三个Unity提供的接口，分别是 IBeginDragHandler, IDragHandler,和IEndDragHandler

​
using System.Collections;
using UnityEngine;
using UnityEngine.EventSystems;
 
public class UIDrag : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
 
    public Vector2 originalPosition; //初位置
 
    public Vector2 offsetPostion; //拖动物体时候的位置差
 
    private Transform parentTransform; //父级物体的Transform
 
    private CanvasGroup canvasGroup;
 
    private void Awake() {
        canvasGroup = GetComponent<CanvasGroup>();
        parentTransform = transform.parent;
 
        originalPosition = transform.position; //获得初位置的值
    }
    
    //这下面是实现的接口的方法
 
    public void OnBeginDrag(PointerEventData eventData)
    {
 
    }
 
     public void OnDrag(PointerEventData eventData)
    {
 
    }
 
    public void OnEndDrag(PointerEventData eventData)
    {
        
    }    
}
 
​

3.4 开始拖拽OnBeginDrag接口实现

在这里我们需要在OnBeginDrag中需要实现逻辑如下

  • 将Item的父级设置为与父级同级（为了暂时的脱离父级容器，也就是那个Panel）

  • 获得鼠标与Item的位置差（为了拖拽的时候不会有鬼畜的抖动）

  • 被拖拽的物体禁用射线阻挡（方便射线射向底部的item）

​
​
using System.Collections;
using UnityEngine;
using UnityEngine.EventSystems;
 
public class UIDrag : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
 
    public Vector2 originalPosition; //初位置
 
    public Vector2 offsetPostion; //拖动物体时候的位置差
 
    private Transform parentTransform; //父级物体的Transform
 
    private CanvasGroup canvasGroup;
 
    private void Awake() {
        canvasGroup = GetComponent<CanvasGroup>();
        parentTransform = transform.parent;
 
        originalPosition = transform.position; //获得初位置的值
    }
    
    //这下面是实现的接口的方法
 
    public void OnBeginDrag(PointerEventData eventData)
    {
        //将Item的父级设置为与父级同级
        transform.SetParent(parentTransform.parent);
        //获得鼠标与Item的位置差
        offsetPostion = (Vector2)transform.position - eventData.position;
        //被拖拽的物体禁用射线阻挡，以方便鼠标发射的射线射向底部的UI
        canvasGroup.blocksRaycasts = false;
    }
 
     public void OnDrag(PointerEventData eventData)
    {
 
    }
 
    public void OnEndDrag(PointerEventData eventData)
    {
        
    }    
}
 
​

3.5 拖拽中OnDrag接口实现

这里我们需要在OnDrag方法中实现以下逻辑

  • 让item跟随鼠标移动
​
​
​
using System.Collections;
using UnityEngine;
using UnityEngine.EventSystems;
 
public class UIDrag : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
 
    public Vector2 originalPosition; //初位置
 
    public Vector2 offsetPostion; //拖动物体时候的位置差
 
    private Transform parentTransform; //父级物体的Transform
 
    private CanvasGroup canvasGroup;
 
    private void Awake() {
        canvasGroup = GetComponent<CanvasGroup>();
        parentTransform = transform.parent;
 
        originalPosition = transform.position; //获得初位置的值
    }
    
    //这下面是实现的接口的方法
 
    public void OnBeginDrag(PointerEventData eventData)
    {
        //将Item的父级设置为与父级同级
        transform.SetParent(parentTransform.parent);
        //获得鼠标与Item的位置差
        offsetPostion = (Vector2)transform.position - eventData.position;
        //被拖拽的物体禁用射线阻挡，以方便鼠标发射的射线射向底部的UI
        canvasGroup.blocksRaycasts = false;
    }
 
     public void OnDrag(PointerEventData eventData)
    {
        //拖动改变位置
        transform.position = eventData.position+offsetPostion;
    }
 
    public void OnEndDrag(PointerEventData eventData)
    {
        
    }    
}

3.6 IEndDragHandler结束拖拽
这一步至关重要！！！因为要完成的逻辑特别的多！！！

我们要实现以下几个功能：

恢复被拖拽的Item所处的父级

检测当前射线所射向哪个对象，并进行空值处理

通过射线获得被拖拽的item位于哪个item之上

两个item交换位置

重新设置两个item的初始位置

​using System.Collections;
using UnityEngine;
using UnityEngine.EventSystems;
 
public class UIDrag : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
 
    public Vector2 originalPosition; //初位置
 
    public Vector2 offsetPostion; //拖动物体时候的位置差
 
    private Transform parentTransform; //父级物体的Transform
 
    private CanvasGroup canvasGroup;
 
    private void Awake() {
        canvasGroup = GetComponent<CanvasGroup>();
        parentTransform = transform.parent;
 
        originalPosition = transform.position; //获得初位置的值
    }
    
    //这下面是实现的接口的方法
 
    public void OnBeginDrag(PointerEventData eventData)
    {
        //将Item的父级设置为与父级同级
        transform.SetParent(parentTransform.parent);
        //获得鼠标与Item的位置差
        offsetPostion = (Vector2)transform.position - eventData.position;
        //被拖拽的物体禁用射线阻挡，以方便鼠标发射的射线射向底部的UI
        canvasGroup.blocksRaycasts = false;
    }
 
     public void OnDrag(PointerEventData eventData)
    {
        //拖动改变位置
        transform.position = eventData.position+offsetPostion;
    }
 
    public void OnEndDrag(PointerEventData eventData)
    {
        
        //结束拖动后，恢复Item所处的层级
        transform.SetParent(parentTransform);
        //如果不在背包上面或者射线检测到的是空值
        if(eventData.pointerCurrentRaycast.gameObject==null||
        !eventData.pointerCurrentRaycast.gameObject.CompareTag("Item"))
        {
            //允许射线阻挡
            canvasGroup.blocksRaycasts = true;
            //为本Item设置位置
            SetPosition(originalPosition);
        }
        //又如果检测到被拖拽的对象处于另一个item之上
        else if(eventData.pointerCurrentRaycast.gameObject.CompareTag("Item"))
        {
            //获得目标对象
            var target = eventData.pointerCurrentRaycast.gameObject;
            //预存储目标对象的原始位置
            Vector2 newPosition = target.GetComponent<UIDrag>().originalPosition;
            //设置目标Item的位置为自己的初始位置
            target.GetComponent<UIDrag>().SetPosition(originalPosition);
            //设置目标对象的新的原始位置
            target.GetComponent<UIDrag>().originalPosition = originalPosition;
            //设置本item的初始位置为目标Item的原初始位置
            originalPosition = newPosition;
            //允许射线阻挡
            canvasGroup.blocksRaycasts = true;
            //为本Item设置位置
            SetPosition(originalPosition);
        }
    }
 
    //设置Item位置
    public void SetPosition(Vector2 position)
    {
        //启动协程
        StartCoroutine(Move(position));
    }
 
 
    /// <summary>
    /// 协程：平滑移动
    /// </summary>
    /// <param name="position">要移动到的位置</param>
    /// <returns></returns>
    private IEnumerator Move(Vector2 position)
    {
        float elapsed = 0f,duration = 0.3f;
        while(elapsed<duration)
        {
            transform.position =   Vector2.Lerp(transform.position,position,elapsed/duration);
            elapsed+=Time.deltaTime;
            yield return null;
        }
        transform.position = position;
    }
 
}

四、 源码

leluckys
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Unity拖动背包物品/技能图标位置互换效果
05-08
助力快速用 UGUI 完成图标互换，数据互换 为初学者节省宝贵的时间，避免采坑！ 文档地址：https://blog.csdn.net/ChinarCSDN/article/details/89932238
用 Unity 实现的 2048 小游戏+源代码
06-03
总结，Unity引擎为我们提供了一个高效且灵活的平台来实现2048这样的2D游戏。通过深入研究这个项目，不仅可以提升Unity的使用技能，也能掌握游戏开发的基本流程和方法，对于想要进入游戏开发领域的初学者来说，这是一...
unity2D生成9*9格子
2301_76156790的博客
03-14 535
5.运行游戏就可以看到9*9的格子了（可以调整摄像机的位置让画面显示得更全面）2将格子做成预制体（直接将格子拖到这里即可，拖了过后删掉原来的格子）3.创建脚本并将脚本拖到空对象上。1.创建一个空对象和格子。4.将预制体拖到这里。
Unity UI 专项一 可拖拽+格子位置互换 的背包系统
m0_61164038的博客
05-06 115
Unity UI 专项Unity UI 专项。
【Unity】实现 可拖拽+格子位置互换 的背包系统
qq_47009853的博客
04-01 1186
本文详细介绍了通过Unity的内置接口和CanvasGroup以及射线检测的方式来实现背包格子可拖拽的效果
Unity UI：网格布局
小云同志你好的博客
01-02 185
在本文中，我们将介绍如何利用网格布局组 UI 组件创建奖励游戏。该游戏将生成 10 个项目，这些项目将随机挑选 5 个不同的宝石值并将它们填充到网格中。用户只需点击 3 次即可挑选卡片以获得最多积分
Unity背包系统一：实现物品获取效果
qq_74418765的博客
03-19 2054
实现物品拾取效果
Unity常用的三种拖拽方法（内置方法 + 接口 + Event Trigger组件）
m0_63330263的博客
12-03 8071
目录内置方法OnMouseDrag【对象含有Collider组件】配对小游戏Event Trigger组件接口窗口小案例OnMOuseOver()检测鼠标是否进入到这个2D贴图经验：只会在2D场景贴图和3D场景中使用OnMouseDrag等内置方法 调整Sorting Layer渲染层顺序Event Trigger—>Add New Event Type根据不同的事件类型实现不同的交互效果 引用 using UnityEngine.EventSystems命名空间接口中方法没有方法体的，接口的成
unity instantiate_Unity入门：快速做一个上瘾的小游戏
weixin_39958631的博客
11-21 354
本文转自Unity Connect博主 Michael Wang主要学习的知识点：Joint 2D 组件Line Renderer 组件Gizmos.Draw 可视化范围随机生成平台的方法Joint 2D 组件Unity自带了非常多的2D物理组件，避免我们绞尽脑汁写方法来实现某些效果。今天以2个例子简单介绍一下：Hinge Joint 2D 铰链Hinge Joint 2D 能够帮助我们轻松实现一...
unity 2D游戏拖拽
Monkey_Xuan的博客
06-03 414
脚本不要每个物体都挂在，我挂在了相机上。 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class SetCurrentClickObject : MonoBehaviour { public Transform _obj; public bool _objTrigger; //忽略第10层（当Sprite作
高分项目，基于Unity3D开发实现的背包系统，内含完整源码+资源
06-15
高分项目，基于Unity3D开发实现的背包系统，内含完整源码+资源 背包容量:背包系统需要设置一定的背包容量限制,以确保玩家在游戏中无法无限制地获得物品。当背包已满时,玩家需要根据策略选择是否丢弃物品、扩大背包...
高分项目，基于Unity3D开发实现的画风可爱的射击小游戏，内含完整源码+资源+unitypackage
06-11
高分项目，基于Unity3D开发实现的画风可爱的射击小游戏，内含完整源码+资源+unitypackage 射击小游戏是一种以射击为主的小游戏，通常不包括网游、页游等大型射击游戏，而是一种flash小游戏。这类游戏可以分为第一...
C#本科毕业设计基于Unity的餐厅经营游戏的设计实现项目源码+论文+使用教程
06-25
C#本科毕业设计基于Unity的餐厅经营游戏的设计实现项目源码+论文+使用教程，含有代码注释，新手也可看懂，个人手打98分项目，毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。...
GAMES104：05游戏引擎中的渲染系统2：渲染中的光照、材质和shader-学习笔记
噗噗噗的博客
07-24 1096
PBR+IBL。
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
100多个unity游戏项目.docx
09-16
Unity是一款流行的游戏开发引擎，可以用于开发各种类型的游戏项目。如果有100多个Unity游戏项目，那么可以说是非常繁忙和多样化的工作。这些项目可能涵盖不同的游戏类型，如冒险、射击、益智、模拟等等。 每个游戏项目都有其独特的需求和目标，需要开发团队经过大量的努力和创意来完成。他们将使用Unity引擎的各种功能和工具，如场景编辑器、物理引擎、动画系统等来实现游戏的功能和效果。 在这100多个项目中，可能会有一些小型的短期项目，也可能有一些更大规模的、长期的项目。对于每个项目，开发团队需要根据游戏设计文档和需求，进行游戏逻辑的编写、关卡设计、角色设计、美术资源的制作等等。 此外，还需要进行游戏的测试和优化工作，确保游戏的稳定性和流畅性。开发团队可能会进行白盒测试、黑盒测试、性能测试等等，以确保游戏在不同平台上运行良好。 总之，100多个Unity游戏项目是一个庞大而充满挑战的任务。需要一个高效的团队来管理和完成这些项目，同时在开发过程中与客户和合作伙伴进行紧密沟通，确保游戏项目按时交付并达到预期的质量标准。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值