Unity UI拖选卡片

16 篇文章 0 订阅

目标需求:
在制定区域内部进行拖选,可以获得选中卡片的信息
靠近中间区域的会变大,两侧变小
松手的时候会返回到最靠近的一个卡片当中

在这里插入图片描述

在这里插入图片描述


Unity组件

在这里插入图片描述
在这里插入图片描述


代码:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events;
using UnityEngine.EventSystems;
public class UIDragComp : MonoBehaviour, IDragHandler, IEndDragHandler
{
  //-------------------------- Unity obj ------------
  public Transform contant;
  public Transform center;
  Transform _select;
  public List<Transform> objs;
  Coroutine moveToCenter;

  public Transform select { get { return _select; } }
  public int objCount { get { return objs.Count; } }
  public int selcetIndex { get { return objs.IndexOf(_select); } }

  Transform leftTrans;
  Transform rightTrans;
  //------------------------- init ------

  void Awake()
  {
    SetRightLeft();
    FindSelectObj();

  }


  private void Update()
  {
  }

  void SetRightLeft()
  {
    float right = -9999;
    float left = 9999;
    Transform rightObj = null;
    Transform leftObj = null;
    for (int i = 0; i < objs.Count; i++)
    {
      if (objs[i].position.x > right)
      {
        rightObj = objs[i];
        right = objs[i].transform.position.x;
      }
      if (objs[i].position.x < left)
      {
        leftObj = objs[i];
        left = objs[i].transform.position.x;
      }
    }
    leftTrans = leftObj;
    rightTrans = rightObj;
  }

  //------------------ function ---------


  Transform FindSelectObj()
  {
    Transform nearly = null;
    float minDis = 999;
    for(int i =0;i< objs.Count;i++)
    {
      float dis = Vector2.Distance(objs[i].position, center.position);
      if(dis < minDis)
      {
        nearly = objs[i];
        minDis = dis;
      }
    }
    _select = nearly;
    return nearly;
  }

  IEnumerator MoveToSelect()
  {
    Vector3 centerPos = center.position;
    Vector3 targetPos = _select.position;

    float distance = Vector3.Distance(centerPos, targetPos);
    while(distance > 0.03f)
    {
      centerPos = center.position;
      targetPos = _select.position;

      Vector3 pos = Vector3.Lerp(targetPos, centerPos, 0.3f);

      Vector3 contantMove = pos - _select.position;
      contant.Translate(contantMove);

      distance = Vector3.Distance(centerPos, _select.position);

      ScaleTheSize();
      yield return null;
    }
    moveToCenter = null;
  }

  void ScaleTheSize()
  {
    foreach (Transform trans in objs)
    {
      float distance = Vector2.Distance(trans.position, center.position);
      float tLerp = distance / (Screen.width / 2);
      float size = Mathf.Lerp(1f, 0.65f, tLerp);
      trans.localScale = new Vector3(1, 1, 1) * size;
    }
  }


  //------------------------- ui event ---------------
  public void OnDrag(PointerEventData data)
  {
    Vector3 delta = data.delta;
    float xMove = delta.x;

    if (leftTrans.position.x + xMove >= (center.position.x + Screen.width / 4))
      xMove = (center.position.x + Screen.width / 4) - leftTrans.position.x;
    if (rightTrans.position.x + xMove <= (center.position.x - Screen.width / 4))
      xMove = (center.position.x - Screen.width / 4) - rightTrans.position.x;

    contant.Translate(xMove * Vector3.right);
    FindSelectObj();
    ScaleTheSize();
    if (moveToCenter != null) StopCoroutine(moveToCenter);
  }

  public void OnEndDrag(PointerEventData data)
  {
    moveToCenter =  StartCoroutine(MoveToSelect());
  }
}

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Unity UI 旗帜可以理解为在Unity游戏引擎中使用的用户界面元素,用于展示和传递特定信息或功能。在开发游戏或其他交互应用程序时,UI 旗帜可以作为一个重要的组成部分。 首先,Unity UI 旗帜可以用于显示玩家的状态或信息。例如,在一个角色扮演游戏中,玩家可以在屏幕上看到他们的角色血条、能量条、经验条等信息,这些UI 旗帜可以实时反映角色的变化,并帮助玩家了解角色的状态。 其次,Unity UI 旗帜也可以用于菜单或选项界面,以便玩家可以与游戏进行交互或进行设置。玩家可以点击不同的UI 旗帜来选择游戏模式、音频设置、图形设置等。这些UI 旗帜可以提供直观的界面,使玩家能够轻松地进行操作和管理。 此外,Unity UI 旗帜还可以用于显示游戏中的任务或目标。比如,在一款冒险游戏中,玩家可以通过UI 旗帜来了解当前任务的进度、目标的位置等信息,从而引导他们在游戏中前进。 最后,Unity UI 旗帜还可以用于显示游戏中的提示或帮助信息。当玩家面临困难或不清楚下一步该做什么时,UI 旗帜可以提供相关的提示或帮助,使玩家能够更好地理解游戏规则或解决问题。 综上所述,Unity UI 旗帜在游戏开发中具有重要的作用,它可以用于显示玩家状态和信息、提供交互界面、显示任务和目标、以及提供提示和帮助。通过合理利用和设计,UI 旗帜能够提升游戏的交互性和用户体验,使玩家更好地享受游戏乐趣。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值