Trabajando con las herramientas 2D de Unity

En este tutorial, te mostraré cómo aprovechar las nuevas herramientas 2D incluidas en Unity para crear un juego 2D.

1. Descripción de la aplicación

En este tutorial, aprenderá cómo crear un proyecto Unity 2D y crear un juego móvil con C # y Unity.

El objetivo del juego es disparar un rayo teletransportador a las vacas antes de que puedan alcanzar la seguridad del establo..

En este proyecto aprenderás los siguientes aspectos del desarrollo de Unity:

  • Configuración de un proyecto 2D en Unity.
  • familiarizarse con la interfaz de Unity
  • creando un Prefab
  • adjuntar guiones a objetos del juego
  • trabajando con colisiones físicas
  • usando temporizadores

2. Crea un nuevo proyecto de unidad

Abre Unity y selecciona Nuevo proyecto desde el Expediente Menú para abrir el nuevo cuadro de diálogo del proyecto. Selecciona un directorio para tu proyecto y configúralo.Configurar valores predeterminados para a 2D.


3. Crear configuraciones

En el siguiente paso, te presentan la interfaz de Unity. Configure el proyecto para el desarrollo móvil seleccionando Configuraciones de compilación desde el Expediente Menú y seleccionando su plataforma de elección..

Unity puede compilar para iOS, Android, BlackBerry y Windows Phone 8, lo cual es excelente si planea crear un juego móvil para múltiples plataformas.


4. Dispositivos

Ya que estamos a punto de crear un juego en 2D, lo primero que debemos hacer después de seleccionar la plataforma a la que nos dirigimos, es elegir el tamaño de la ilustración que usaremos en el juego..

iOS:

  • iPad sin Retina: 1024px x 768px
  • iPad con Retina: 2048px x 1536px
  • 3.5 "iPhone / iPod Touch sin Retina: 320px x 480px
  • 3.5 "iPhone / iPod con Retina: 960px x 640px
  • 4 "iPhone / iPod Touch: 1136px x 640px

Debido a que Android es una plataforma abierta, hay muchos dispositivos diferentes, resoluciones de pantalla y densidades de píxeles. Algunos de los más comunes se enumeran a continuación.

  • Asus Nexus 7 Tablet: 800px x 1280px, 216 ppi
  • Motorola Droid X: 854px x 480px, 228 ppi
  • Samsung Galaxy SIII: 720px x 1280px, 306 ppi

Y para Widows Phone y BlackBerry:

  • Blackberry z10: 720px x 1280px, 355 ppi
  • Nokia Lumia 520: 400px x 800px, 233 ppi
  • Nokia Lumia 1520: 1080px x 1920px, 367 ppi

Aunque nos enfocaremos en la plataforma iOS en este tutorial, el código se puede usar para apuntar a cualquiera de las otras plataformas.


5. Exportar Gráficos

Dependiendo del dispositivo al que te dirijas, es posible que tengas que convertir la ilustración al tamaño y densidad de píxeles recomendados. Puedes hacer esto en tu editor de imágenes favorito. He usado el Ajustar el tamaño ... función bajo el Herramientas menú en OS X's Avance solicitud.


6. Unity Interface

Asegúrese de hacer clic en el botón 2D en la Escena panel. También puede modificar la resolución que se está utilizando para mostrar la escena en el Juego panel.


7. Interfaz de juego

La interfaz de usuario de nuestro juego será simple. Puede encontrar la ilustración de este tutorial en los archivos de origen de este tutorial.


8. Idioma

Puedes usar uno de los tres idiomas en Unity, DO#, UnityScript, un lenguaje similar a JavaScript en términos de sintaxis, y Abucheo. Cada idioma tiene sus pros y sus contras, pero depende de usted decidir cuál prefiere. Mi preferencia va a la sintaxis de C #, así que ese es el lenguaje que usaré en este tutorial.

Si decide utilizar otro idioma, asegúrese de consultar la Referencia de guiones de Unity para ver ejemplos..


9. Gráficos 2D

Unity ha creado un nombre por ser una excelente plataforma para crear juegos 3D para varias plataformas, como Microsoft Xbox 360, Sony PS3, Nintendo Wii, la web y varias plataformas móviles..

Si bien siempre ha sido posible usar Unity para el desarrollo de juegos en 2D, no fue hasta el lanzamiento de Unity 4.3 que incluyó el soporte nativo en 2D. Aprenderemos cómo trabajar con imágenes como sprites en lugar de texturas en los siguientes pasos.


10. Efectos de sonido

Usaré una serie de sonidos para mejorar la experiencia del juego. Los efectos de sonido utilizados en este tutorial se pueden encontrar en Freesound.org.


11. Importar activos

Antes de comenzar la codificación, debemos agregar nuestros activos al proyecto de Unity. Hay varias maneras de hacer esto:

  • seleccionar Importar nuevo activo desde el Bienes menú
  • agrega los elementos a la carpeta de activos en tu proyecto
  • arrastrar y soltar los activos en la ventana del proyecto

Después de completar este paso, debería ver los activos en el proyecto de su proyecto. Bienes carpeta en el Proyecto panel.

12. Crear escena

Estamos listos para crear la escena de nuestro juego arrastrando objetos a la JerarquíaEscena panel.


13. Antecedentes

Comience arrastrando y soltando el fondo en el Jerarquía panel. Entonces debería aparecer en el Escena panel.

Porque el Escena El panel está configurado para mostrar una vista 2D, se dará cuenta de que al seleccionar la Cámara principal en el Jerarquía muestra una vista previa de lo que la cámara va a mostrar. También puedes ver esto en la vista del juego. Para hacer visible toda la escena, cambia la tamaño valor de la Cámara principal a 1.6 en el Inspector panel.


14. Barco

La nave también es un elemento estático con el que el jugador no podrá interactuar. Colócalo en el centro de la escena..


15. granero

Seleccione el granero de la Bienes Panel y arrastrarlo a la escena. Colóquelo como se ilustra en la captura de pantalla a continuación..


16. Granjero colisionador

Para asegurarnos de que se notifique al granero cuando una vaca lo golpee, ingrese al granero, necesitamos agregar un componente, un Box Collider 2D para ser preciso.

Seleccione el granero en la escena, abra el Inspector panel, y haga clic en Agregar componente. De la lista de componentes, seleccione Box Collider 2D desde el Física 2D sección. Asegúrese de revisar el Es gatillo caja.

Queremos que la vaca reaccione cuando llegue a la puerta del establo, por lo que debemos hacer que el colisionador sea un poco más pequeño. Abre el Inspector y cambiar el tamaño y Centrar Valores del colisionador para mover la caja más cerca de la puerta del granero..


17. Gran Guión de colisión

Es hora de escribir algún código. Necesitamos agregar un script para que la aplicación pueda responder a la colisión cuando una vaca ingresa al establo.

Seleccione el granero y haga clic en el Agregar componente botón en el Inspector panel. Seleccionar Nueva secuencia de comandos y nombrarlo OnCollision. Recuerda cambiar el idioma a C #.

Abra el archivo recién creado y agregue el siguiente fragmento de código.

utilizando UnityEngine; utilizando System.Collections; clase pública OnCollision: MonoBehaviour void OnTriggerEnter2D (Collider2D otro) if (other.gameObject.name == "cow (Clone)") / * Reproduce el sonido de guardar vaca * / audio.Play (); / * Destruye la vaca * / Destruye (other.gameObject); 

El fragmento de código comprueba si hay una colisión entre el objeto al que está vinculado el script, el granero y un objeto denominado vaca (clon), que será una instancia de la vaca Casa prefabricada que vamos a crear más tarde. Cuando se produce una colisión, se reproduce un sonido y se destruye el objeto vaca..


18. Barn Sound

Para reproducir un sonido cuando una vaca golpea el establo, primero debemos adjuntar el sonido al establo. Selecciónelo de la Jerarquía o Escena ver, haga clic en el Agregar componente botón en el Inspector panel, y seleccione Fuente de audio desde el Audio sección.

Desmarcar Jugar en Awake y haga clic en el pequeño punto a la derecha, debajo del ícono del engranaje, para seleccionar el sonido del establo.

Puede aumentar el tamaño de los iconos en la interfaz de usuario de Unity (gizmos) haciendo clic en Gizmos en el Escena Panel y ajuste de la posición del deslizador..


19. rayo

Arrastre el gráfico de rayos de la Bienes Panel a la escena y añadir un colisionador a ella. Esto es necesario para detectar una colisión con la vaca desafortunada. Comprobar elEs gatillo opción en el Inspector panel.

20. Ray Script

Cree un nuevo script repitiendo los pasos que describí hace unos momentos. Nombra el guion Balay reemplaza su contenido con el siguiente fragmento de código:

utilizando UnityEngine; utilizando System.Collections; Clase pública Bullet: MonoBehaviour public AudioClip cowSound; // Use esto para la inicialización void Start () renderer.enabled = false; / * Hace que el objeto sea invisible * / // La actualización se llama una vez por fotograma nula Update () / * Obtener entrada principal * / if (Input.GetButton ("Fire1")) renderer.enabled = true; / * Hace que el objeto sea visible * / / * Reproduce el sonido de rayos * / audio.Play ();  if (renderer.enabled == true) transform.position + = Vector3.down * (Time.deltaTime * 2);  / * Compruebe si hay límites * / if (this.transform.position.y < -1.5)  transform.position = new Vector2(0.08658695f, 0.1924166f); /* Return bullet to original position */ renderer.enabled = false;   void OnTriggerEnter2D(Collider2D other)  if (other.gameObject.name == "cow(Clone)")  AudioSource.PlayClipAtPoint(cowSound, transform.position); /* Destroy the cow */ Destroy(other.gameObject); transform.position = new Vector2(0.08658695f, 0.1924166f); /* Return bullet to original position */ renderer.enabled = false;   

Eso es mucho código, pero no es complicado. Vamos a ver qué está pasando. Primero, creamos un Segmento de audio instancia nombrada vacaSonido, que utilizaremos para almacenar un archivo de audio. Esta es solo otra técnica para reproducir un sonido si no desea agregar dos componentes de audio al objeto. Declaramos la variable como pública para que podamos acceder a ella desde el Inspector. Haga clic en el pequeño punto a la derecha de vacaSonido y selecciona el archivo de audio.

Entonces hacemos el rayo invisible deshabilitando su renderizador. Usamos el mismo objeto para poder ahorrar recursos, que es una optimización importante para dispositivos menos potentes.

Detectamos toques en la pantalla, lo que hace que el rayo sea visible y reproduzca el sonido del rayo (ver más abajo). Si el objeto es visible, significa que debería bajar para golpear a una vaca..

También hay un código para detectar si el rayo está fuera de los límites de la escena. Si este es el caso, lo reposicionamos, listo para disparar nuevamente (verifique los rayos X y y valores en el Inspector).

La última parte comprueba si el rayo golpea una vaca. Si lo hace, reproduce el sonido de la vaca y destruye a la vaca. El rayo se vuelve invisible y se vuelve a colocar en su posición original, listo para disparar de nuevo..


21. Fuente de audio de Ray

Para agregar el audio para el rayo, selecciónelo en el Jerarquía o Escena ver y hacer clic Agregar componente en el Inspector panel. Seleccionar Fuente de audio desde el Audio sección. Desmarcar Jugar en Awake y haga clic en el pequeño punto a la derecha para seleccionar el archivo de sonido.


22. Añadir una vaca

Arrastra el gráfico para la vaca desde el Bienes Panel y posicionarlo en la escena como se muestra a continuación.


23. Cuerpo rígido 2D

Para detectar una colisión, al menos uno de los objetos en colisión debe tener una RigidBody2D componente asociado a ella. Como la vaca puede chocar tanto con el granero como con el rayo, es mejor agregar el componente a la vaca.


24. Cow Collider

También necesitamos agregar un colisionador a la vaca para que podamos detectar colisiones con el establo y el rayo. Asegúrese de revisar el Es gatillo casilla de verificación en el Inspector.


25. Mover vaca Script

Agregue un componente de script a la vaca y reemplace su contenido con lo siguiente:

utilizando UnityEngine; utilizando System.Collections; MoveCow de clase pública: MonoBehaviour public Vector3 moveSpeed; flotador público spawnTime = 2f; float público spawnDelay = 2f; // Use esto para la inicialización void Start () moveSpeed ​​= Vector3.left * Time.deltaTime; InvokeRepeating ("ChangeSpeed", spawnDelay, spawnTime);  void ChangeSpeed ​​() moveSpeed ​​= new Vector3 (Random.Range (-1, -2), 0, 0) * 0.05f;  // Se llama a la actualización una vez por cuadro. Actualización () transform.position + = moveSpeed; 

los MoveCow La clase anima a la vaca a través de la pantalla usando una variable llamada Velocidad de movimiento. los Invocar repitiendo El método cambia la velocidad de la vaca para hacerla correr desde el momento en que llega al centro de la escena. Esto hace que el juego sea más desafiante..


26. Crear vaca prefabricada

Con los componentes necesarios añadidos a la vaca, es hora de convertirla en un Casa prefabricada. ¿Qué es un Prefab? Consultemos el Manual de Unidad:

"Un Prefab es un tipo de activo: un GameObject reutilizable almacenado en Project View. Los Prefabs se pueden insertar en cualquier número de escenas, varias veces por escena. Cuando agrega un Prefab a una escena, crea una instancia de él. Todos los Prefab las instancias están vinculadas al Prefab original y son esencialmente clones de él. No importa cuántas instancias existen en su proyecto, cuando realice cambios en el Prefab verá que el cambio se aplica a todas las instancias ".

Si viene de Flash y ActionScript, esto debería sonar familiar. Para convertir la vaca en un prefab, arrastre la vaca desde la Jerarquía panel para el Bienes panel. Como resultado, el nombre en el Jerarquía se pondrá azul.

La conversión de la vaca a una casa prefabricada nos permite reutilizarla, lo cual es conveniente ya que contiene los componentes necesarios..


27. Script Spawner

El script Spawner es el responsable de que aparezcan las vacas. Abra MonoDevelop o su editor de C # favorito y cree un nuevo script:

utilizando UnityEngine; utilizando System.Collections; Generador público de clase: MonoBehaviour public float spawnTime = 2f; float público spawnDelay = 2f; GameObject público vaca; // Use esto para la inicialización void Start () InvokeRepeating ("Spawn", spawnDelay, spawnTime);  void Spawn () / * Crea una instancia de cow * / GameObject clone = Instantiate (cow, transform.position, transform.rotation) como GameObject; 

Llamamos al Invocar repitiendo Método para engendrar vacas usando los valores establecidos por spawnTime y spawnDelay. los GameObject vaca se establece en público y se crea utilizando la Inspector. Haga clic en el pequeño punto a la derecha y seleccione la vaca Prefab.


28. Objeto de juego Spawner

Para crear una instancia de la casa prefabricada de la vaca, utilizaremos el gráfico de la vaca que hemos agregado a la escena hace unos minutos. Selecciónelo y elimine sus componentes. A continuación, agregue el script Spawner.


29. Pruebas

Es hora de probar el juego. prensa Comando + P para jugar el juego en la unidad. Si todo funciona como se espera, estás listo para los pasos finales..


30. Configuración del jugador

Cuando estés satisfecho con tu juego, es hora de seleccionar Configuraciones de compilación desde el Expediente menú y haga clic en el Ajustes del jugador botón. Esto trae la Ajustes del jugador en el Inspector Panel donde puede ajustar los parámetros para su aplicación..


31. Icono de aplicación

Con los gráficos que creaste anteriormente, ahora puedes crear un bonito icono para tu juego. Unity le muestra los tamaños requeridos, que dependen de la plataforma para la que está construyendo..


32. Splash Image

La imagen de inicio o de inicio se muestra cuando se inicia la aplicación.

33. Construir

Una vez que su proyecto esté correctamente configurado, es hora de volver a visitar el Configuraciones de compilación y haga clic en el Construir Botón. Eso es todo lo que se necesita para construir tu juego para prueba y / o distribución.

34. Xcode

Si está compilando para iOS, necesita Xcode para compilar el binario final de la aplicación. Abre el proyecto Xcode y elige Construir desde el Producto menú.

Conclusión

En este tutorial, hemos aprendido sobre las nuevas capacidades 2D de Unity, detección de colisiones y otros aspectos del desarrollo de juegos con Unity..

Experimenta con el resultado y personalízalo para que el juego sea tuyo. Espero que te haya gustado este tutorial y te haya resultado útil..