UNITY 2D

Parte del manejo y estructura básica para un juego en 2D son parecidas al 3D, el motor tiene un
diseño que ayuda a colocar y editar cada paso para realizar nuestro proyecto, ya de por si
encontramos la pestaña proyecto donde encontraremos las diferentes carpetas y sub carpetas que
contendrán los assest, sprites, escenas ,códigos y demás, es de uso conveniente colocar el
contenido en una carpeta si es música que este en una carpeta para musica etc, en la pestaña
jerarquía podemos encontrar los gameobject donde podremos crear o modificar los que tengamos,
una forma rápida de crear un gameobject es solo arrastrando de la pestaña proyecto a jerarquía y
esto a su vez nos lo mostrara en #scene haciéndonos ver que fue creado. Un gameobject puede y
esta conformado por diferentes components.

Conceptos básicos
Los mas básico para un proyecto es que este tenga un Background y Player. Adicionalmente se
puede colocar un tercer objeto que puede ser algo que recoja pickup o obstáculo.
Unity ya nos crea en nuestra jerarquía un objeto que es la cámara. También encontramos que en
donde empezamos trabajando se le llama escena, se puede crear varias en un solo project pues
este se tomaría por lo que se llama nivel, estas escenas deben guardarse.
En el caso del background como ya se había dicho solo se tiene que jalar y estará creado lo mismo
para el player.

Configurando El GameObject Player

Cuando este es creado en la jerarquía tendrá la configuración básica de un GameObject, pero

todavía no se es posible; mover el objeto y hacer que interactue con otros, para eso nos vamos a la
pestaña inspector habiendo seleccionado al GameObject Player dando solo click sobre el y
podremos ver que tiene dos componentes; Transform y Sprite renderer. Entonces para modificar
nuestro Player necesitamos tres componentes mas; RigidBody2D, script usece en javascript o c# el
lenguaje que prefiera y un collider2D ,la forma de este dependerá de la forma de nuestro sprite de
Player.

Codigo de PlayerController

public class PlayerController : MonoBehaviour {
    public float speed;
    private Rigidbody2D rb2d;

    void Start()
    {
        rb2d = GetComponent<Rigidbody2D>();
    }

    void FixedUpdate()
    {
        float moveHorizontal = Input.GetAxis ("Horizontal");
        float moveVertical = Input.GetAxis ("Vertical");
        Vector2 mover = new Vector2 (moveHorizontal, moveVertical);
        rb2d.AddForce(mover * speed);
    }
}

Declaramos en el código el uso de RigidBody y hacemos instancia creando una variable, creamos
también una para velocidad o speed.
Luego inicializamos nuestra variable en la función Start y le cargamos valores aquí es donde
inicializaremos siempre los componentes y variables que creemos y usemos.
Generalmente en la segunda función se usa Update pero lo cambiamos a FixedUpdate.
Utilizaremos el metodo Input y de este el procedimeinto getAxis para capturar horizontal y vertical,
Unity cuenta en su nucleo con el diccionario de teclas y es a eso que estamos accediendo.
Utilizamos vector2 pues recibiremos dos parametros en este caso los inputs detectados el vector2
ayuda a menejar los datos.
Y por ulltimo de nuestra instacia de Rigidbody utilizaremos el procedmientos addForce este sera
multiplacdo por la variable que maneja el vector2 y la variable speed esta el datos se monifica en el
apartado de inspector/player.
Con eso ya nuestro GO player lograria moverse, pero hay un pequeño detalle pues debemos quitar
la gravedad en el RigidBody, sino nuestro GO player se “Caera”.
A cada GO creado en el proyecto hay que modificarle el sorting layer, por un ejemplo si estamos en
el player el sorting llayer le eligiremos Player.

Configurando el GameObject Background

Dependiendo como sera la perspectiva del proyecto a este se le debe configurar al igual que el
Player su collider2D esto para que el Player no salga fuera de los limites que queremos, y su
sorting layer.

Configurando el GameObject Main Camera

A la camera podemos hacer que siga nuestro Player. Se puede arrantrando en la jerarquia al GO
Player pero este tendria el incoveniente que el comportameinto del Player lo tendra la camara.
Para evitar eso agregaremos un script al GO Main Camera.

public class CameraController : MonoBehaviour {

    public GameObject player;

    private Vector3 offset;
    // Use this for initialization
    void Start () {
        offset = transform.position - player.transform.position;
    }
    
    // Update is called once per frame
    void LateUpdate () {
        transform.position = player.transform.position + offset;
    }
}

Configurando un GameObject obstaculo

Que pasaría entonces si necesitamos que nuestro Player interactue con otros GO?, para eso
necesitamos codificar en el script del player y configurar ese otro GO.
Lo primero sera diferenciar si solo habrá uno o varios, si habrá varios lo mas conveniente es crearlo
como prefat, para ello primero jalamos la imagen en cuestión a la jerarquía y luego lo volvemos a
arrastrar a la carpeta de sprites y esto nos creara un .prefat, a ese prefat que usaremos debemos
modificarle el valor Tag para que pueda detectarse al momento de codificar el detector de
colisiones en el codigo de Player.
void OnTriggerEnter2D(Collider2D other)
    {
        if (other.gameObject.CompareTag ("PickUp")) 
        {
            Destroy(other.gameObject);
        }
    }

Configurando Canvas o Interfaces de Usuario

En Unity se cuenta con componentes para crear mensajes en pantalla o UI. Para hacer usos de
ellos solo debemos irnos a la jerarquia > create > UI > canvas, esto nos creara un GO canvas al
cual podremos crear diferentes componentes, utilizaremos un text en este caso. Para ello debemos
tener seleccionado el GO canvas y de nuevo irnos a create> UI> text. Ahi a text podemos
modificarles sus propiedades como el color, tamaño de letra u estilo y posicionamiento en la
ventana. La codificacion se hace segun que interactue con ese text, en este caso sera el player y
ahi realizaremos la codificacion.

public class PlayerController : MonoBehaviour {
    public float speed;
    public Text countText;
    public Text winText;
    private Rigidbody2D rb2d;
    private int count;

    void Start()
    {
        rb2d = GetComponent<Rigidbody2D>();
        count = 0;
        winText.text = "";
        SetCountText ();

    }

    void OnTriggerEnter2D(Collider2D other)
    {
        if (other.gameObject.CompareTag ("PickUp")) 
        {
            Destroy(other.gameObject);
            count++;
            SetCountText ();
        }
    }

    void SetCountText()
    {
        countText.text = "Count: " + count.ToString();
        if (count >= 19) 
        {
            winText.text = "You Win!";
        }

    }
}

El codigo mostrado se crea dos variables publicas tipo text, estas nos ayudadran a idenficarlas en
las propiedades del GO al que lo establecimos. Seimpre se realiza de esta manera al trabajar con
ui tipo text. Luego las inicializamos con el apuntador .text y el valor que queramos que muestr si
tendra o no, sera asi como se interactue asi de con los text en cualquier parte del codigo, ahi solo
nos resta ponernos creativos. Segudio debemos ir al GO y en la propiedad codigo veremos los
nosmbres de las variable y un recuadro vacio a su par ahi daremos clik para selecionar en la
ventana emergente en scenes el GO del canvas por asi decir si creamos un GO text en canvas
llamado ImprimeMensaje ese lo deberemos seleccionar y listo.

Unity y Android

El motor gráfico dispone de una comunicación con android y diferentes plataformas siempre y
cuando este se configure, pero no solo se trata de configurar el programa para que reconozca la
otra plataforma también hay que preparar el proyecto con ligeras modificaciones. En el siguiente
apartado crearemos un UI para poder hacer diferentes interacciones y que estas se puedan
comunicar del móvil al proyecto.

Creacion del objeto de tipo Canvas

Lo primero que haremos será crear un objeto de tipo ‘Canvas‘ en la jerarquía de objetos de nuestra
escena. Para ello, dentro del menú desplegable «Create» de la sección «Hierarchy«,
encontraremos una sección llamada «UI» y dentro de ella diferentes elementos, seleccionamos
«Canvas» y lo renombramos por ejemplo a «GUIControladorTactil«.
 Crear un objeto de tipo ‘Canvas’
Veremos que en nuestra escena se ha creado una zona rectangular que corresponde a nuestro
canvas y que contiene una serie de propiedades configurables. Observaremos que no se trata de
un GameObject común ya que no cuenta con un componente de tipo ‘Transform‘ y por lo tanto
carece de escala y posición. No nos preocupemos. También veremos que, aparte del objeto de tipo
canvas, en nuestra jerarquía se habrá creado un objeto llamado «EventSystem«. De él sólamente
decir que se trata de un objeto que siempre deberá existir cuando estemos haciendo uso de
elementos de tipo UI en nuestra escena, ya que es el que se encarga de gestionarlos internamente.

Creacion de los botones UI que formaran el controlador

tactil
Para ello seleccionaremos en la jerarquia de nuestro objeto GUIControladorTactil y, al igual
que antes, nos iremos al menú «Create» -> «UI»  pero ahora seleccionaremos el elemento
«Button«. A continuación veremos que se nos ha añadido un botón dentro de nuestro canvas con
las siguientes propiedades:
 Propiedades de un UI Button
* Observemos que al crear el objeto de tipo button, dentro de este se ha agrego automaticamente, como objeto
hijo, otro objeto llamado Text. Como en este tutorial vamos a hacer uso de imagenes para representar a cada uno
de los botones, vamos a eliminar ese objeto ya que no nos ser necesario.

Entre las propiedades de este objeto «Button» observamos que, a diferencia del objeto canvas,
este ya sí que cuenta con un componente «Rect Transform» en el que podemos configurar su
posición dentro del canvas, su escala, rotación, etc. También vemos que tiene otros componentes
como «Canvas Renderer«, «Image» y «Button«, todos ellos configurables para darle a nuestro
botón el aspecto y el comportamiento que deseemos.
En este caso vamos a configurarlo para que el aspecto del botón sea directamente una imagen
(.png) seleccionada por nosotros y además añadiremos un pequeño efecto visual para cuando
pulsemos y despulsemos el botón. Ni que decir tiene que queda a libre elección del desarrollador el
configurar el aspecto del botón como desee.
 Configuración del botón
Con esto lo que hemos hecho ha sido:

 Ponerle un nombre descriptivo a nuestro botón.

 Width / Height: Especificarle una anchura y una altura específica.
 Source Image: Indicarle la imagen que queremos que cargue.
 Transition -> Normal Color: Indicarle que cuando el botón esté en estado de reposo le aplique
un poco de transparencia alfa.
 Transition -> Highlighted Color: Indicarle que cuando pasemos por encima del botón (con el
dedo o con el ratón) le siga aplicando la misma transparencia alfa.
 Transition -> Pressed Color: Indicarle que cuando pulsemos el botón (con el dedo o con el
ratón) elimine su transparencia y se convierta en color sólido.
Una vez hecho esto, creamos el resto de botones
(btnIzqda, btnArriba, btnAbajo, btnAction1 y btnAction2) exactamente igual que hemos hecho
con «btnDcha» y los colocamos a nuestro gusto dentro del canvas, de tal manera que quede algo
como esto:

Observemos que la posición y el tamaño de los elementos UI es justo el que le hemos indicado en
sus propiedades, sin embargo, si probamos a cambiar la resolucion de la pantalla observamos
que los botones se quedan estaticos en cuanto a posicion y tamano. Esto puede ser un
problema ya que suponemos que nuestro juego podra lanzarse en diferentes resoluciones y
por tanto querremos que los botones se adapten a ellas. No tendría sentido que con una
resolución pequeña los botones se vieran a un determinado tamaño y en una resolución el doble de
grande se sigan viendo igual que en la resolución más baja.

Para solucionar esto es tan simple como irnos a las propiedades de nuestro canvas y, en su
componente «Canvas Scaler«, seleccionamos UI Scale Mode -> Scale With Screen Size. Esto,
automáticamente, hará que todo el contenido de nuestro canvas se reescale según el tamaño de
nuestra pantalla, ¡así de sencillo!
 Cambiamos la propiedad UI Scale Mode para que el canvas se auto-reajuste

Creacion de eventos
Ya tenemos terminado lo que será el aspecto visual de nuestro controlador táctil, pero aún nos falta
lo más importante, que es darle funcionalidad.

Para ello, el nuevo sistema UI de Unity pone a nuestra disposición un componente llamado «Event
Trigger«, con el que seremos capaces de indicarle a cualquiera de nuestros elementos UI que
respondan ante cualquier evento sobre ellos como por ejemplo podría ser la acción de
ser presionados, ser arrastrados, pasar por encima con el dedo o ratón, etc.

Empecemos por irnos a las propiedades de uno de nuestros botones y, a través del botón «Add
Component«, añadamos el componente «Event Trigger«.

Añadir el componente ‘Event Trigger’ a cada botón

Ahora pinchamos sobre el botón «Add New Event Type» del nuevo componente que hemos
añadido y nos saldrá un listado con todos los eventos que soporta un elemento UI. Dichos eventos
responderán a diferentes acciones que realicemos sobre el botón al que se lo apliquemos.
 Lista de eventos UI

En nuestro caso vamos a añadir estos cuatro eventos:

Pointer Down: Será el correspondiente a cuando pulsemos el botón con el dedo (o ratón).
Pointer Up: Será el correspondiente a cuando dejemos de pulsar el botón con el dedo (o ratón).
Pointer Enter: Será el correspondiente a cuando arrastremos el dedo (o ratón) desde fuera del
botón a dentro de él.
Pointer Exit: Será el correspondiente a cuando arrastremos el dedo (o ratón) desde dentro del
botón hacia fuera de él.
Añadimos los cuatro eventos dentro del componente ‘Event Trigger’
* Aquí el lector podría preguntarse: «¿por qué necesitamos los cuatro eventos si con sólo dos de ellos
(‘Pointer Down’ y ‘Pointer Up’) sería suficiente para recoger las pulsaciones en nuestro controlador?». Pues
en teoría tendría razón, pero en este tutorial recomendamos contemplar también los dos eventos de ‘Pointer
Enter’ y ‘Pointer Exit’ para mejorar la experiencia en una pantalla táctil. Controlar los cuatro eventos nos
permitirá poder pulsar los botones tanto de manera puntual (clickeando) como arrastrando el dedo, sin
levantarlo, hasta ellos.
Haremos exactamente lo mismo para el resto de botones de nuestro controlador.

Como vemos, hemos dejado nuestros botones listos para configurar los comportamientos que

queramos que ocurran cada vez que se dé cualquiera de esos cuatro eventos sobre ellos, pero
esto aún no lo vamos a hacer, ya que antes vamos crear el script que se encargará de
realizar los comportamientos necesarios.

Creacion del script ControlarObjeto.cs

El objetivo de este tutorial no es centrarnos en la implementación de los scripts que realizarán las
acciones de los botones (ya que cada desarrollador los implementarán de un modo u otro en
función de las necesidades de su juego) si no de mostrar cómo asociar dichos scripts a nuestro
sistema de UI y, por tanto, a modo de ejemplo, vamos a crear un script sencillo que sea capaz de
realizar tan solo las siguientes acciones:
 Mover un objeto en el eje X y en el eje Y.
 Aumentar o disminuir al escala de dicho objeto.

using UnityEngine;
 
public class ControlarObjeto : MonoBehaviour
{
    // En esta variable configuraremos la velocidad a la que se moverá el objeto
    public float Velocidad = 5.0F;
 
    private bool derecha = false;
    private bool izquierda = false;
    private bool arriba = false;
    private bool abajo = false;
    private bool aumentar = false;
    private bool disminuir = false;
 
    void Update ()
    {
        if(derecha)
        {
            // Movemos el objeto hacia la derecha
            this.transform.Translate(Vector3.right * Time.deltaTime * Velocidad);
        }
 
        if (izquierda)
        {
            // Movemos el objeto hacia la izquierda
            this.transform.Translate(Vector3.left * Time.deltaTime * Velocidad);
        }
 
        if (arriba)
        {
             // Movemos el objeto hacia arriba
            this.transform.Translate(Vector3.up * Time.deltaTime * Velocidad);
        }
 
        if (abajo)
        {
            // Movemos el objeto hacia abajo
            this.transform.Translate(Vector3.down * Time.deltaTime * Velocidad);
        }
 
    }
 
    /******************** FUNCIONES PÚBLICAS ********************/
 
    public void MoverDerecha()
    {
        derecha = true;
    }
 
    public void MoverIzqda()
    {
        izquierda = true;
    }
 
    public void MoverArriba()
    {
        arriba = true;
    }
 
    public void MoverAbajo()
    {
        abajo = true;
    }
 
    public void Detener()
    {
        derecha = false;
        izquierda = false;
        arriba = false;
        abajo = false;
    }
}

Una vez tenemos creado nuestro script, se lo asociamos al objeto de nuestra escena el cual
querremos controlar mediante nuestro controlador táctil. En este caso hemos creado un
simple cubo y le hemos añadido como componente nuestro script.

Asignaremos nuestro script al objeto de tipo cubo

Una vez hecho esto, ya tenemos todo preparado para volver a nuestro sistema UI y configurar sus
eventos para que realice las diferentes acciones.

Configuracion de las acciones en los eventos

Ya solo nos queda configurar cada uno de los eventos que añadimos anteriormente en el «Event
Trigger» de cada botón de nuestro controlador táctil. Para ello seleccionamos uno de los botones,
por ejemplo «btnDcha«, y configuramos su Event Trigger del siguiente modo:

Configuración del componente ‘Event Trigger’ del botón ‘btnDcha’

Como vemos, dentro de cada uno de los eventos, hay tres campos configurables:

 El primer desplegable siempre lo dejaremos con el valor ‘Runtime Only‘.

 En el campo de más abajo deberemos arrastrar el objeto que contiene el script con las
funciones públicas que se encargarán de realizar las acciones. En nuestro caso, obviamente,
será nuestro cubo.
 En el campo de la derecha, al desplegarlo, nos saldrá una lista de componentes, entre los
cuales veremos que aparece el nombre de nuestro script «ControlarObjeto«. Si lo
seleccionamos se nos desplegará otra sub-lista con todas las funciones públicas que
contiene nuestro script que son justamente las que necesitamos.
Observemos que la lista de componentes a elegir en la lista de acciones de la derecha va a
depender siempre del objeto que asignemos en el campo de abajo a la izquierda.

Si ahora ejecutamos nuestro juego veremos que al colocar el dedo (o ratón) encima del botón
derecho de la cruceta, el cubo comenzará a moverse y, si dejamos de pulsar, éste se detiene.

¡Así de sencillo es! Ahora sólo nos queda configurar, al igual que hemos hecho con este botón, los
eventos del resto de botones de la cruceta. Los pasos a seguir serán exactamente los mismos que
para el botón «btnDcha» pero teniendo en cuenta que en los eventos «Pointer Down» y «Pointer
Enter«, en vez de asignarle la función MoverDerecha() de nuestro script, le asignaremos la
correspondiente a cada botón.