Creamos la interfaz
- Creamos un canvas. Es fundamental que tenga el componente Graphic Raycaster asociado.
- Definimos la propiedad Render mode de su componente Canvas con valor Screen Space – Overlay.
- Añadimos un panel al canvas.
- Le añadimos un layout group de tipo grid. Una vez ordenados los objetos que contendrá, habría que desactivarlo. De lo contrario, cuando arrastremos un objeto, volverá a la posición inicial.
- Añadimos 8 imágenes de la UI al panel.
Arrastrar una pieza
using UnityEngine.EventSystems;
public class Pieza : MonoBehaviour,IDragHandler{
public void OnDrag(PointerEventData eventData){
transform.position = Input.mousePosition;
}
}
Soltar una pieza
OnBeginDrag
Aunque para resolver este ejercicio no sea necesario, tener en cuenta que también podemos detonar un evento mientras estamos arrastrando la pieza:
Cuando suelto la pieza, esta vuelve a su posición original
using UnityEngine.EventSystems;
public class Pieza : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler{
Vector3 startPosition;
public void OnDrag(PointerEventData eventData){
transform.position = Input.mousePosition;
}
public void OnBeginDrag(PointerEventData eventData){
Debug.Log ("Empieza");
startPosition = transform.position;
}
public void OnEndDrag(PointerEventData eventData){
Debug.Log ("Termina");
transform.position = startPosition;
}
}
Desordenar piezas
Si el panel dónde están las piezas tiene un horizontal o un vertical layout, habrá que desactivarlo para poder desordenar las piezas.
Pieza.cs
transform.position = new Vector2(Random.Range(0, Screen.width), Random.Range(0, Screen.height));
Encajar piezas
Habrá que desmarcar la check Raycast Target del componente Image para poder clickar de los paneles para poder clickar sobre los botones que están debajo.
public void OnEndDrag(PointerEventData eventData){
Debug.Log ("suelta" + Vector3.Distance (transform.position, posIni) );
if (Vector3.Distance (transform.position, posIni) <= margenError) {
...
}
}