Unity 从UI中拖拽对象放置并拖动效果 附demo

需求:点击UI,在场景中生成3D对象,对象跟随鼠标移动,放置后可再次拖拽对象,改变其位置。做了一个小Demo,如下图所示:

实现大致思路:

  • 射线碰撞检测
  • 对象空间坐标变换(世界坐标->屏幕坐标、屏幕坐标->世界坐标)

首先为要生成3D对象的UI添加一个鼠标监听事件,脚本如下:

SelectImage.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
public class SelectImage : MonoBehaviour,IPointerDownHandler{
    //需要被实例化的预制
    public GameObject inistatePrefab;
    //实例化后的对象
    private GameObject inistateObj;

    // Use this for initialization
    void Start () {
        if (inistatePrefab==null)return;
        //实例化预制
        inistateObj=Instantiate(inistatePrefab) as GameObject;
        inistateObj.SetActive(false);
    }
    //实现鼠标按下的接口
    public void OnPointerDown(PointerEventData eventData)
    {
        inistateObj.SetActive(true);

        //将当前需要被实例化的对象传递到管理器中
        SelectObjManager.Instance.AttachNewObject(inistateObj);
    }
}

将脚本挂载到UI对象上。

创建一个对象放置管理器,用于处理拖动的放置的逻辑:

SelectObjManager.cs

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

public class SelectObjManager : MonoBehaviour {

    private static SelectObjManager _instance;
    public static SelectObjManager Instance {
        get { return _instance; }
    }
    //物体z轴距摄像机的长度
    public float _zDistance = 50f;
    //对象的缩放系数
    public float _scaleFactor=1.2f;
    //地面层级
    public LayerMask _groundLayerMask;
    int touchID;
    bool isDragging = false;
    bool isTouchInput = false;
    //是否是有效的放置(如果放置在地面上返回True,否则为False)
    bool isPlaceSuccess = false;
    //当前要被放置的对象
    public GameObject currentPlaceObj = null;
    //坐标在Y轴上的偏移量
    public float _YOffset=0.5F;

    void Awake () {
        _instance = this;
    }
    void Update () {
        if (currentPlaceObj == null) return;

        if (CheckUserInput()){
            MoveCurrentPlaceObj();
        }else if (isDragging){
            CheckIfPlaceSuccess();
        }
    }
    /// <summary>
    ///检测用户当前输入
    /// </summary>
    /// <returns></returns>
    bool CheckUserInput () {
        #if !UNITY_EDITOR&&(UNITY_ANDROID||UNITY_IOS)
        if (Input.touches.Length > 0) {
            if (!isTouchInput) {
                isTouchInput = true;
                touchID = Input.touches[0].fingerId;
                return true;
            } else if (Input.GetTouch (touchID).phase == TouchPhase.Ended) {
                isTouchInput = false;
                return false;
            } else {
                return true;
            }
        }
        return false;
        #else
        return Input.GetMouseButton (0);
        #endif
    }
    /// <summary>
    ///让当前对象跟随鼠标移动
    /// </summary>
    void MoveCurrentPlaceObj () {
        isDragging = true;
        Vector3 point;
        Vector3 screenPosition;
        #if !UNITY_EDITOR&&(UNITY_ANDROID||UNITY_IOS)
        Touch touch = Input.GetTouch (touchID);
        screenPosition = new Vector3 (touch.position.x, touch.position.y, 0);
        #else
        screenPosition = Input.mousePosition;
        #endif
        Ray ray = Camera.main.ScreenPointToRay (screenPosition);
        RaycastHit hitInfo;
        if (Physics.Raycast (ray, out hitInfo, 1000, _groundLayerMask)) {
            point = hitInfo.point;
            isPlaceSuccess = true;
        } else {
            point = ray.GetPoint (_zDistance);
            isPlaceSuccess = false;
        }
        currentPlaceObj.transform.position = point+new Vector3(0,_YOffset,0);
        currentPlaceObj.transform.localEulerAngles = new Vector3 (0, 60, 0);
    }
    /// <summary>
    ///在指定位置化一个对象
    /// </summary>
    void CreatePlaceObj(){
        GameObject obj=Instantiate(currentPlaceObj) as GameObject;

        obj.transform.position=currentPlaceObj.transform.position;
        obj.transform.localEulerAngles=currentPlaceObj.transform.localEulerAngles;
        obj.transform.localScale*=_scaleFactor;
        //改变这个对象的Layer为Drag,以便后续拖动检测
        obj.layer=LayerMask.NameToLayer("Drag");
    }
    /// <summary>
    ///检测是否放置成功
    /// </summary>
    void CheckIfPlaceSuccess(){
        if (isPlaceSuccess){
            CreatePlaceObj();
        }
        isDragging=false;
        currentPlaceObj.SetActive(false);
        currentPlaceObj=null;
    }
    /// <summary>
    /// 将要创建的对象传递给当前对象管理器
    /// </summary>
    /// <param name="newObject"></param>
    public void AttachNewObject(GameObject newObject){
        if (currentPlaceObj){
            currentPlaceObj.SetActive(false);
        }
        currentPlaceObj=newObject;
    }
}

脚本中都有详细注释,我就不多解释了。

创建一个脚本,用于处理放置成功后,再次改变位置的逻辑:

DragObject.cs

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

public class DragObject : MonoBehaviour {
    //只针对指定的层级进行拖动
    public LayerMask _dragLayerMask;
    //指定当前要拖动的对象
    public Transform currentTransform;
    //是否可以拖动当前对象
    public bool isDrag = false;
    //用于存储当前需要拖动的对象在屏幕空间中的坐标
    Vector3 screenPos = Vector3.zero;
    //当前需要拖动对象的坐标相对于鼠标在世界空间坐标中的偏移量
    Vector3 offset = Vector3.zero;
    void Update () {

        if (Input.GetMouseButtonDown (0)) {
            //将鼠标输入点转化为一条射线
            Ray ray = Camera.main.ScreenPointToRay (Input.mousePosition);
            RaycastHit hitinfo;
            //如果当前对象与指定的层级发生碰撞,表示当前对象可以被拖动
            if (Physics.Raycast (ray, out hitinfo, 1000f, _dragLayerMask)) {
                isDrag = true;
                //将当前需要拖动的对象赋值为射线碰撞到的对象
                currentTransform = hitinfo.transform;
                //将当前对象的世界坐标转化为屏幕坐标
                screenPos = Camera.main.WorldToScreenPoint (currentTransform.position);
                //将鼠标的屏幕坐标转换为世界空间坐标,再与当前要拖动的对象计算两者的偏移量
                offset = currentTransform.position - Camera.main.ScreenToWorldPoint (new Vector3 (Input.mousePosition.x, Input.mousePosition.y, screenPos.z));
            } else {
                isDrag = false;
            }
        }
        if (Input.GetMouseButton (0)) {
            if (isDrag == true) {

                var currentScreenPos = new Vector3 (Input.mousePosition.x, Input.mousePosition.y, screenPos.z);
                //鼠标的屏幕空间坐标转化为世界坐标,并加上偏移量
                var currentPos = Camera.main.ScreenToWorldPoint (currentScreenPos) + offset;
                currentTransform.position = currentPos;
            }
        }
        if (Input.GetMouseButtonUp (0)) {
            isDrag = false;
            currentTransform = null;
        }
    }
}

主要是一些坐标空间的变换和计算。

多余的我就不说了,脚本中都有很详细的注释,Demo地址扫码后当前文章末尾获取。

到此这篇关于Unity 从UI中拖拽对象放置并拖动的文章就介绍到这了,更多相关Unity UI拖拽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Unity UGUI控制text文字间距

    Unity ugui相比ngui,提供的功能少之又少,好多特性得需要自己实现.真不知道unity写这个插件后来是不是就没有更新过.发了句牢骚.如果我想控制文字的显示间距,ngui 有两种办法.1:文字之间加空格.2:调节spacing 的x值. 但对于ugui,第二种方法却没有.以前我使用ngui,这种方法用的多了,也方便,因此很想也把它这个特性转到ugui上. 思考了半天,最终想出来了解决方法,以下是实现方式: 1.定义扩展效果类 [RequireComponent(typeof(Text))

  • Unity实现UI光晕效果(发光效果)

    Unity中,我们怎么制作UI物体发光的渐隐渐现的效果呢? 比如说我们有一张月亮光晕的精灵图片 我们可以给它添加一个CanvasGroup组件 我们可以发现,组件上的Alpha值可以控制图片的透明度,从0到1 那么我们可以在代码中通过控制Alpha值循环的变化实现发光的光晕效果 以下是代码: using System.Collections; using System.Collections.Generic; using UnityEngine; public class MoonFlash :

  • Unity3D UGUI实现缩放循环拖动卡牌展示效果

    本文实例为大家分享了Unity3D UGUI实现缩放循环拖动卡牌展示的具体代码,供大家参考,具体内容如下 需求:游戏中展示卡牌这种效果也是蛮酷炫并且使用的一种常见效果,下面我们就来实现以下这个效果是如何实现. 思考:第一看看到这个效果,我们首先会想到UGUI里面的ScrollRect,当然也可以用ScrollRect来实现缩短ContentSize的width来自动实现重叠效果,然后中间左右的卡牌通过计算来显示缩放,这里我并没有用这种思路来实现,我提供另外一种思路,就是自己去计算当前每个卡牌的位

  • Unity UGUI实现滑动翻页效果

    本文实例为大家分享了Unity UGUI实现滑动翻页效果的具体代码,供大家参考,具体内容如下 这个问题真的是老生常谈的事情了,不过在这里还是要说一下,以便以后之需 首先看一下效果图 最后在Content下面是一些Image using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using

  • Unity UI拖拽模型选择功能

    指定一块区域,玩家鼠标or手指拖拽这个区域,模型会进行偏移,并用于进行人物.道具的选择 给模型定义一些属性 using System.Collections; using System.Collections.Generic; using UnityEngine; public class UIModelUtil : MonoBehaviour { public Animator animator; public int id; public int index; } 模型控制 using Sy

  • Unity UGUI实现简单拖拽图片功能

    这一篇博客我们来使用 UGUI 实现图片的拖拽功能. 说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标.),这两个坐标是不一样的,所以拖拽是就需要转换.因为鼠标的移动是屏幕坐标,而 UI 的移动是ugui坐标.转换的方法: RectTransformUtility.ScreenPointToLocalPointInRectangle ( - );这个方法可以把屏幕坐标转换成 ugui 坐标.至于

  • Unity 从UI中拖拽对象放置并拖动效果 附demo

    需求:点击UI,在场景中生成3D对象,对象跟随鼠标移动,放置后可再次拖拽对象,改变其位置.做了一个小Demo,如下图所示: 实现大致思路: 射线碰撞检测 对象空间坐标变换(世界坐标->屏幕坐标.屏幕坐标->世界坐标) 首先为要生成3D对象的UI添加一个鼠标监听事件,脚本如下: SelectImage.cs using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngin

  • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

    本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • jQuery手机浏览器中拖拽动作的艰难性分析

    本文实例分析了jQuery手机浏览器中拖拽动作的艰难性.分享给大家供大家参考.具体如下: 本想在手机网页中实现一个如iphone可以随意拖动的控制按钮的,但是最后发现竹篮打水一场空, 虽然拖拽动作在手机浏览器中司空见惯,但是在手机浏览器中,要想实现可以被拖拽的组件,却是一件不可能的事情. 先来看看在PC网页中,拖拽动作是怎么做的, 首先,我们有一个按钮,点击有动作,一直按着不放,可以随意拖动,就像iphone可以随意拖动的控制按钮一样, 如上图的灰色图层,写出来也不甚容易, 首先,要把灰色图层的

  • Unity实现UI渐变效果

    本文实例为大家分享了Unity实现UI渐变效果的具体代码,供大家参考,具体内容如下 在做背包系统时,在提示面板中想实现的更加炫酷点,决定使用渐变效果来提示档次 渐变效果实现采用改变该UI的透明度来控制其显示和隐藏 在UI对象上添加Canvas Group组件 通过控制Alpha改变其透明度来控制显示和隐藏(Alpha=0隐藏:Alpha=1显示)(Blocks Raycasts=true可以交互:Blocks Raycasts=false无法交互) 添加一个脚本改在到该UI对象上 using U

  • Unity实现UI渐隐渐显效果

    本文实例为大家分享了Unity实现UI渐隐渐显效果的具体代码,供大家参考,具体内容如下 1.在UI对象上添加组件:CanvasGroup; 2.在对象上添加脚本:UI_FadeInFadeOut 脚本: 脚本信息: (Blocks Raycasts=true可以交互:Blocks Raycasts=false无法交互) using System.Collections; using System.Collections.Generic; using UnityEngine; /// <summa

  • 详解JavaScript面向对象实战之封装拖拽对象

    目录 概述 1.如何让一个DOM元素动起来 2.如何获取当前浏览器支持的transform兼容写法 3.如何获取元素的初始位置 5.我们需要用到哪些事件? 6.拖拽的原理 7. 我又来推荐思维导图辅助写代码了 8.代码实现 part1.准备工作 part2.功能函数 part3.声明三个事件的回调函数 9.封装拖拽对象 概述 为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖

  • unity实现UI元素跟随3D物体

    本文实例为大家分享了unity实现UI元素跟随3D物体的具体代码,供大家参考,具体内容如下 在Canvas不同的渲染模式(RenderMode)下实现UI跟随3D物体 当Canvas.RenderMode为Screen Space-Overlay时 利用WorldToScreenPoint(worldPos)将物体的世界坐标转换成屏幕坐标,实时更新UI的坐标: using UnityEngine; using System.Collections; public class FollowWorl

  • Vue组件大全包括(UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例)

    Vue是一款比较流行的JS库,本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目 一.Vue常用UI组件 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2

  • jquery拖拽排序简单实现方法(效果增强版)

    本文实例讲述了jquery拖拽排序简单实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 原来没有新建动作,分析代码后发现很容易增强~~ 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title

  • Unity之跑马灯抽奖效果单抽与连抽(附demo)

    本文主要介绍了Unity之跑马灯抽奖效果单抽与连抽,分享给大家,具体如下: 效果图 单次抽奖效果 跳过动画抽奖效果 三连抽抽奖效果 设计思路 点击按钮 ,根据需求(概率)计算本次抽奖获得物品模拟转动 (先加速后减速), 一段时间后停止连抽的情况下等所有奖品动画都表演完成才结束跳过动画设计,有跳过时抽奖速度直接到最大,并进入可中奖 场景搭建 一个按钮,一个组奖品放到一个父物体上. 奖品元素,有两种状态,一种旋转状态,一种中奖状态. 代码 using System; using System.Col

随机推荐