Índice del curso de Unity 3D

  1. Introducción
  2. Instalación
  3. Interfaz
  4. Conceptos básicos
  5. Ejercicio: cubos
  6. Cambiar el color de algo
  7. Introducción a C#
  8. Conceptos para realización de juegos 2D
  9. Acceder a componentes desde código
  10. Uso del transform
  11. User Interface
  12. Elije tu propia aventura
  13. Acierta imagen
  14. Sprites
  15. Fall Down Game
  16. Galería de tiro
  17. Corrutinas
  18. Flappy Bird
  19. PONG
  20. Carreras
  21. Panel Animator
  22. Plataformas
  23. Plataformas
  24. Puzzle con Raycast
  25. Plataformas con RayCast
  26. Memory (juego de las parejas)
  27. Guardar y recuperar información almacenada
  28. Máscara
  29. Publicación
  30. Ejercicio: First Person Shooter
  31. Multijugador con Photon

User Interface

  1. Creamos un nuevo proyecto 2D.
  2. Panel jerarquía -> botón derecho -> UI -> Button. Cada vez que añadimos un UI a escena estará anidado bajo un único GameObject Canvas principal.

Componentes del canvas

Canvas

En el panel de jerarquías definiremos que elementos de la UI se verán por encima (lo que esté más arriba se verá por encima).

Rect Transform

Es un componente de todos los objetos UI.

El punto de anclaje de un rect transform (una cruceta compuesta de cuatro aspas independientes) determina respecto a qué puntos va a estar ubicado.

Puedo separar las aspas del punto de anclaje para definir el tamaño porcentual de la pieza respecto del canvas.

Pulsando en el icono cuadrado que se muestra en el panel de jerarquías puedo reubicar automáticamente los puntos de anclaje.

Propiedad Render Mode:

  • Screen Space - Overlay: hace que el canvas se adapte a todo el tamaño de la pantalla.
  • Screen Space - Camera: hace que el canvas se adapte a una cámara concreta. De esta forma, podremos usar varios canvas
  • World Space. Me permite integrar el canvas en el entorno de la escena (el mundo que estamos creando).

Canvas Scaller

Propiedad UI Scale Mode, que define como se van a comportar los componentes que hay dentro del canvas:

  • Constant Pixel Size: los componentes tendrán un tamaño fijo.
  • Match Width or Height: los componentes se deformarán con la pantalla, en función de su ancho o alto.

Captura de eventos

Al añadir un canvas a la pantalla, se crea un GameObject en la jerarquía llamado EventSystem, que es el que captura los eventos.

Ejercicios Canvas

  1. Botones

    Poner cuatro botones en pantalla, ocupando cada uno un cuarto de la misma. Simplemente crearemos un botón, lo modificaremos para que ocupe un cuarto de la pantalla y lo duplicaremos hasta obtener los cuatro botones.

    Tener en cuenta que si queremos lograr el efecto snap en un elemento de canvas, debemos modificarlo arrastrando sus esquinas, en lugar de simplemente desplazarlo.

    El botón será verde al pasar el cursor por encima y rojo al ser pulsado.

    botones en la user interface de unity3d Descargar ejercicio botones
  2. Ejercicio: UI Paneles

    Los paneles sirven para definir grupos de Game Objects. Es posible definir el tamaño de lo que contienen desde el propio panel.

    1. Crear un panel con cuatro botones dentro y probar a asignarle diferentes tipos de layouts. Un layout es un componente:
      • Horizontal Layout
      • Vertical Layout
      • Grid Layout
      . Ajustar las opciones del layout para que los botones ocupen el 100% del mismo.
    2. Tras haber realizado el paso anterior, probar a añadir más botones el layout y ver que pasa.
    hacer layouts con la user interface de unity
  3. Ejercicio - Hacer un piano

    1. Creamos un nuevo proyecto 2D.
    2. Creamos una carpeta "sounds", e importamos en ella los sonidos del piano. sonidos del piano
    3. Creo un panel con layout horizontal. Podemos eliminarle el componente Image (no tendrá una imagen de fondo).
    4. Añado a este panel un botón al que le elimino el texto.
    5. Añado al botón un componente de tipo audio source, que vinculo con el sonido DO.
    6. Modificando el componente button del botón, hacer que al pulsar sobre él se reproduzca el sonido ( play() ) de su audioSource.
    7. Duplico 6 teclas más dentro del panel (re, mi, fa, sol, la, si) y les asigno a todas su correspondiente audio source.
    8. Añadimos un nuevo panel para los tonos sostenidos. Podemos eliminarle el componente Image (no tendrá una imagen de fondo).
    9. Añadimos los botones para los sostenidos a este último panel. Tendrán color negro. Ajustamos su posición y tamaño manualmente.
    piano con unity3d
  4. Recupera y modifica un texto

    recoger valor de la UI con Unity 3D Descargar ejercicio UI
    1. Ubicamos en pantalla un UI -> Input Field, un UI -> Button y un UI -> Text.
    2. Vamos a trabajar usando el tamaño de la cámara para el canvas. Para ello:
      1. Seleccionamos el canvas en el panel de jerarquía.
      2. Componente Canvas -> Render mode: World Space.
      3. Vamos a ajustar el canvas a la escena. Para ello:
        1. Lo desplazamos: x:0, y:0, z:0.
        2. Lo escalamos (es importante no cambiar su width y height o se verá pixelado). x:0.4, y:0.4, z:0.4.
    3. Creamos un GameObject de tipo Empty y le vinculamos el siguiente código:
      using UnityEngine;
      using UnityEngine.UI; // Si estás programando elementos del camvas, no te olvides de importar esta librería
      
      public class GameController : MonoBehaviour
      {
          public void mostrarValor()
          {
              string valor = GameObject.Find("TextoDelInput").GetComponent().text;
              GameObject.Find("Resultado").GetComponent().text = valor;
          }
      
      }
    4. Seleccionamos el Button -> Componente Button -> On Click -> Seleccionamos en la pestaña escena que se despliega al pulsar el circulito el empty con el script asociado -> Seleccionamos la función mostrarValor().
  5. Acierta número secreto

    acierta número secreto con unity 3d Descargar ejercicio acierta número secreto

    Debemos genarar un número secreto cuando se inicialice el juego. Para ello, declararemos una variable global n y la inicializaremos dentro del método Start():

    void Start(){
    	n = Random.Range(1, 3);
    	Debug.Log(n);
    }

    Debemos comparar el valor introducido por el usuario con el almacenado en la variable n. Como el número introducido por el usuario será de tipo texto, y n es de tipo numérico, pasaremos el valor de n a texto en la comparación:

    if( ""+n == valor)
  6. Hacer un puzzle usando el Canvas de Unity 3D

    Descargar puzzle con canvas

    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.
    puzzle con canvas

    Arrastrar piezas

    Pieza.csusing UnityEngine.EventSystems;
    public class Pieza : MonoBehaviour,IDragHandler{
    	public void OnDrag(PointerEventData eventData){
    		transform.position = Input.mousePosition;
    	}
    }

    Cuando suelto la pieza, esta vuelve a su posición original

    Pieza.csusing UnityEngine.EventSystems;
    
    public class Pieza : MonoBehaviour, IDragHandler, IEndDragHandler{
    	Vector3 startPosition;
    
    	public void OnDrag(PointerEventData eventData){
    		transform.position = Input.mousePosition;
    	}
    
    	public void OnEndDrag(PointerEventData eventData){
    		Debug.Log ("Termina");
    		transform.position = startPosition;
    	}
    }

    OnBeginDrag

    Aunque para resolver este ejercicio no sea necesario, tener en cuenta que también podemos detonar un evento mientras estamos arrastrando la pieza:

    public class Pieza : MonoBehaviour, IBeginDragHandler{
    
    public void OnBeginDrag(PointerEventData eventData){
    	Debug.Log ("Empieza");
    	startPosition = transform.position;
    }

    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.cstransform.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) {
    		...
    	}	
    }
icono de mandar un mailPreguntame lo que quieras!
Pablo Monteserín
contacta conmigoPablo Monteserín

El servicio de resolución de dudas técnicas es sólo para los usuarios premium. Si tienes cualquier otra duda, usa el formulario de contacto. ¡Gracias!