Code Monkey home page Code Monkey logo

drag-and-drop's Introduction

Drag and Drop to drag and drop UI elements in Unity

Drag.and.Drop.para.arrastar.e.soltar.elementos.da.interface.do.usuario.UI.na.Unity.1.mp4

IDropHandler

IDropHandler é uma interface usada para implementar funcionalidades de manipulação de arrasto e soltar (drag and drop) entre objetos da cena

0° Criar Canvas do tipo imagem

Criar Canvas do tipo imagem > Create Empty > GameOject > Image > arrastar os sprites (apple and box)

1° Capturar o evento de clique do mouse no objeto

//Criar um script e anexar no GameOject apple (drag) que será arastado ate o GameOject box (drop)

*Importar o sitstema de evento 
*Herdar a class IpointerDownHandler (manipulador de entrada do mouse precionado ou clicado)
*Criar função que será chamada quando o mouse for precionado, enquanto estiver em cima do objeto
*fazer um log de depuração para fins de test function

using UnityEngine.EventSystems;

public class DragDrop : MonoBehaviour, IPointerDownHandler 
{
public void OnPointerDown(PointerEventDate eventData)
{
	Debug.Log("OnPointerDown");
}}

2° Capturar o evento(Calling Funciton) de quando o mouse estiver iniciando o arrasto e terminando de arrastar o GameOject

    //Criar funções para chamar os eventos abaixo:

*Herdar a interface IBeginDragHandler  (manipulador de entrada do mouse quando começar arrastar)
*Herdar a interface IEndDragHandler    (manipulador de entrada do mouse quando terminar de arrastar)
*Herdar a interface IDragHandler       (manipulador de entrada do mouse para conseguir arrasta a cada frame)



public class DragDrop : MonoBehaviour, IPointerDownHandler, IBeginDragHandler, IEndDragHandler, IDragHandler
    {
  
    public void OnBeginDrag(PointerEventData eventData)
    {
 	   Debug.Log("OnBeginDrag");
    }

public void OnEndDrag(PointerEventData eventData)
{
   Debug.Log("OnEndDrag");
}	

public void OnDrag(PointerEventData eventData)
{
       Debug.Log("OnDrag");
    }

public void OnPointerDown(PointerEventData eventData)
{
       Debug.Log("OnDownDrag");
    }}

3° Manipular o movimento do objeto na função chamando o metodo de arrastar

*referenciar o componente ReactTransform (moviment) 

*criar o metodo awake() para inicializar o objeto quando instaciado(criado)
*manipular a posição acessando o componente - reactTransform = GetComponent<ReactTransform>();

*modificar a posição ancora e nos dados do evento pegar o delta (evento quando um objeto da UI está sendo arrastado)

*ancora (a posição ancorada especifica onde um objeto sera posicionado em relação a um ponto específico)
*delta  (mudança entre valores em quadros consecutivos, seja no tempo, posição, rotação, etc)

*reactTransform.anchoredPosition += eventData.delta;


public class DragDrop : MonoBehaviour, IPointerDownHandler, IBeginDragHandler, IEndDragHandler, IDragHandler
{
     
    private RectTransform rectTransform;

    private void Awake()
    {
   rectTransform = GetComponent<RectTransform>();
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
       Debug.Log("OnBeginDrag");
    }

public void OnEndDrag(PointerEventData eventData)
{
        Debug.Log("OnEndDrag");
    }

    public void OnDrag(PointerEventData eventData)
    {
     Debug.Log("OnDrag");
     rectTransform.anchoredPosition += eventData.delta;
    }

public void OnPointerDown(PointerEventData eventData)
{
     Debug.Log("OnDownDrag");
    }}

4° Alterar o movimento exatamente na mesma taxa (proporcionalmente 1:1) que o ponteiro do mouse ou toque (tamanho da tela ou da resolução)

//Este método é chamado continuamente enquanto o usuário arrasta o objeto.
    //Se você arrastar o ponteiro do mouse 10 pixels em uma direção, o objeto também se moverá 10 pixels nessa mesma direção.

*referênciar o componente Canvas 	

*atribuindo referência a um componente RectTransform do objeto da UI
*anchoredPosition: É usado para mover o objeto mantendo sua relação com um ponto fixo.
*+=: Significa que estamos adicionando um valor à posição ancorada atual do objeto.
*eventData.delta: É a diferença entre a posição atual do arraste e a posição anterior do arraste. (vector q representa a quantidade de movimento que ocorreu.)
*/ canvas.scaleFactor: Dividindo o eventData.delta pelo scaleFactor do objeto canvas. (Feito para levar em consideração a escala do canvas.)

//ajustando a posição ancorada do objeto da UI com base na diferença de arrasto (movimento) do ponteiro do mouse ou toque, levando em consideração o fator de escala do canvas. 


    [SerializeField] private Canvas canvas;

public void OnDrag(PointerEventData eventData)
{
   rectTransform.anchoredPosition += eventData.delta / canvas.scaleFactor;
}

5° Manipular componente CanvasGroup p/ controlar a visibilidade e a interatividade de um grupo de objetos dentro de um Canvas

*Adicionar um novo componente do tipo "canvas group" no gameobject apple (drag)

*referenciar componente CanvasGroup no script DragDrop.cs

*Criar metodo Awake chamado quando o objeto ao qual o script está anexado é inicializado.
*Acessar e manipular o componente CanvasGroup por meio da variável canvasGroup.

private CanvasGroup canvasGroup;

private void Awake()
{
   canvasGroup = GetComponent<CanvasGroup>();
}

6° Desabilitar o item arrastavel na captura dos eventos (começando e terminando o arrasto)

//raycast é uma operação que permite detectar colisões e interações entre objetos.

//quando começar arrastar, entraremos no CanvasGroup e desabilitar o raycast	
public void OnBeginDrag(PointerEventData eventData)
{
   //modificar a cor
   canvasGroup.alpha = .6f;
   canvasGroup.blocksRaycasts = false;
}

//quando terminar arrastar, entraremos no CanvasGroup e habilitar o raycast 
public void OnEndDrag(PointEventData eventData)
{
    canvasGroup.alpha = .1f;
    canvasGroup.blocksRaycasts = true;

7° Interface IDropHandler usada nos eventos de arrastar e soltar para manipular o comportamento quando um objeto é solto em um alvo de soltar.

//A assinatura de um método em programação se refere à sua estrutura e formato (interface) 
//incluindo o nome do método, os parâmetros que ele recebe e o tipo de retorno (assinatura)


*Criar um novo script ItemSlot.cs e anexar no gameobject box (slot) 	
*Criar função OnDrop, que será chamada quando um objeto for inserido

public class ItemSlot : MonoBehaviour, IDropHandler

public void OnDrop(PointerEventData eventData)
{
       Debug.log("objeto e solto em um alvo de soltar");
}

8° Posicionar o objeto arrastado no local do objeto de soltar (arrastado e liberado)

//Acessar o metodo OnDrop quando um objeto é solto (arrastado e liberado) sobre um elemento que implementa a interface ID

//if (Verificar se há um objeto arrastado válido.)

//Depois obter o componente RectTransform do objeto arrastado. Permite que você acesse e modifique as propriedades do objeto arrastado.

// atribuição (a posição do objeto arrastado será ajustada para ser a mesma que a posição do objeto onde ele foi solto.)

public void OnDrop(PointerEventData eventData) 
    {
       if (eventData.pointerDrag != null)
       {
          eventData.pointerDrag.GetComponent<RectTransform>().anchoredPosition = GetComponent<RectTransform>().anchoredPosition;
       }
    }

drag-and-drop's People

Contributors

alfredo1995 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.