Puzzle con Canvas

Curso de Unity 3D

21.  
22.  
27.  
38.  

Creamos la interfaz

  1. Creamos un canvas. Es fundamental que tenga el componente Graphic Raycaster asociado.
  2. Definimos la propiedad Render mode de su componente Canvas con valor Screen Space – Overlay.
  3. Añadimos un panel al canvas.
  4. 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.
  5. 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) {
		...
	}	
}
← Elige tu propia aventura con Unity3D
Crear corrutinas en Unity →

Aviso Legal | Política de privacidad