Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Unity

Crea un juego inspirado en Fruit Ninja con Unity

by
Read Time:19 minsLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Introducción

En este tutorial, aprenderá cómo crear un juego móvil en 3D usando C # y Unity. El objetivo del juego es cortar la fruta que aparece en el escenario usando la pantalla táctil.

Aprenderá sobre los siguientes aspectos del desarrollo de juegos de Unity en este tutorial:

  • importar modelos 3D
  • gestos de deslizamiento
  • renderizadores de línea
  • fuerzas físicas
  • Sprites 2D

La interfaz de usuario del juego es sencilla. La siguiente captura de pantalla le da una idea de la obra de arte que vamos a utilizar y cómo terminará buscando la interfaz de usuario final. Puede encontrar la ilustración y los recursos adicionales en los archivos fuente del tutorial en GitHub.

1. Configuración del proyecto

Paso 1: Crea un nuevo proyecto de Unity

Abra Unidad y seleccione Nuevo proyecto en el menú Archivo para abrir el nuevo diálogo del proyecto. Dile a Unity dónde quieres guardar el proyecto y configura el Predeterminado para: menú a 3D.

Paso 2: configurar la configuración de compilación

En el siguiente paso, se le presenta la interfaz de usuario de Unity. Configure el proyecto para el desarrollo móvil eligiendo Configuración de compilación en el menú Archivo y seleccionando su plataforma de elección.

Paso 3: ilustraciones

Lo primero que debemos hacer después de seleccionar la plataforma de destino es elegir el tamaño de la obra de arte que usaremos en el juego. Esto nos ayudará a seleccionar un tamaño adecuado para las texturas 3D y la GUI 2D sin emborronar la ilustración o usar texturas que sean demasiado grandes para el dispositivo de destino. Por ejemplo, la obra de arte debe tener una resolución más alta si se dirige a un iPad con pantalla de retina que a un Lumia 520.

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

Android

Debido a que Android es una plataforma abierta, existe una amplia gama de dispositivos, 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

Windows Phone & BlackBerry

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

Tenga en cuenta que el código que escribiremos en este tutorial se puede usar para dirigirse a cualquiera de las plataformas.

Paso 4: Exportar gráficos

Dependiendo de los dispositivos a los que se dirige, puede que necesite convertir la ilustración al tamaño recomendado y la densidad de píxeles. Puede hacer esto en su editor de imágenes favorito. He utilizado la función Ajustar tamaño ... en el menú Herramientas en la aplicación Vista previa de OS X.

Paso 5: configurar la interfaz de usuario de Unity

Antes de comenzar, asegúrese de que el botón 2D en el panel de escena no esté resaltado. También puede modificar la resolución que se muestra en el panel Juego.

Luego se le presentan los paneles del espacio de trabajo, que también usaremos en este tutorial. Tómese un momento para mirar los paneles de interfaz principales, como la escena, el juego, la jerarquía, el proyecto, los activos y el inspector. Los usaremos con frecuencia en este tutorial.

Paso 6: Lenguaje de programación

Puede usar uno de los tres lenguajes de programación cuando usa Unity, C#, UnityScript, una variación de JavaScript y Boo. Cada lenguaje de programación tiene sus pros y sus contras, y depende de usted decidir cuál prefiere. Mi preferencia personal va al lenguaje de programación C #, así que ese es el idioma que usaré en este tutorial.

Si decide utilizar otro lenguaje de programación, asegúrese de echar un vistazo a la Referencia de scripts de Unity para ver ejemplos.

2. Recursos

Efectos de sonido

Utilizaré varios sonidos para mejorar la experiencia auditiva del juego. Los efectos de sonido utilizados en este tutorial se obtuvieron de PlayOnLoop y Freesound.

Modelos 3D

Para crear el juego, primero necesitamos obtener algunos modelos 3D. Recomiendo 3docean para modelos y texturas de alta calidad, pero si está probando o aprendiendo, los modelos gratuitos funcionarán igual de bien. Los modelos de este tutorial se descargaron de SketchUp 3D Warehouse, donde puede encontrar una amplia variedad de modelos 3D.

Debido a que Unity no reconoce el formato de archivo de SketchUp, debemos convertirlo en algo que pueda importar. Primero tenemos que descargar la versión gratuita de SketchUp, que se llama SketchUp Make.

Abra el modelo 3D en SketchUp Make, seleccione Exportar > Modelo 3D en el menú Archivo y elija Collada (* .dae). Elija un nombre y una ubicación, y haga clic en Guardar. Esto creará un archivo y una carpeta para el modelo 3D. El archivo contiene los datos del objeto 3D mientras la carpeta contiene las texturas del modelo. En el siguiente paso, importaremos el modelo en Unity.

3. Importar activos

Antes de comenzar a codificar, debemos agregar los activos al proyecto de Unity. Puedes hacer esto de varias maneras:

  • seleccione Importar nuevo activo en el menú Activos
  • arrastre y suelte los activos en la ventana del proyecto
  • agregar los elementos a la carpeta de activos del proyecto

Después de completar este paso, debe ver los activos en la carpeta de activos de su proyecto en el panel Proyecto.

4. Configuración de la cámara y la iluminación

Paso 1: configurar la cámara

En este paso, posicionamos la cámara principal para crear la vista que queremos. Seleccione la cámara principal del panel Jerarquía y ajuste los valores de Transformar en el Inspector para que coincidan con los que se muestran a continuación.

No te preocupes si no ves ningún cambio. No hemos creado nada para que la cámara lo vea todavía.

Paso 2: Configuración de la luz

Para que nuestros objetos sean visibles en el mundo 3D, necesitamos agregar luz a la escena. Seleccione Crear Otro en el menú GameObject y seleccione Luz Direccional. Esto creará un objeto que produce un rayo de luz. Cambie sus valores de transformación como se muestra en la siguiente captura de pantalla para que ilumine la escena.

La luz debe ser visible en la escena como se muestra en la siguiente captura de pantalla.

5. Agregar fondo

Usaremos una textura Sprite como fondo. De forma predeterminada, las imágenes importadas a la carpeta de Activos se convierten en instancias de Textura que se pueden aplicar a objetos 3D. Necesitamos cambiar estas instancias de Textura a instancias de Sprite Texture para la imagen que queremos usar como fondo.

Seleccione la imagen que desea convertir en el panel Activos y abra el Inspector. Seleccione Sprite en el menú Tipo de textura.

Arrastre y suelte el fondo en el panel de Jerarquía. Debería aparecer automáticamente en el panel Escena. Ajuste los valores de Transformación en el Inspector como se muestra en la siguiente captura de pantalla.

6. Crea la GUI de Puntuación

Para mostrar la puntuación del juego, usaremos el texto GUI de Unity y un modelo 3D importado.

Paso 1: Agregar el modelo de Apple

Seleccione el modelo 3D importado de su elección del panel Activos y arrástrelo y suéltelo en la escena. Voy a usar un modelo de manzana. Ajuste los valores de Transformación en el Inspector para que coincidan con los que se muestran a continuación.

Esto colocará la manzana en la parte superior izquierda de la pantalla.

Paso 2: Agregar el texto de la GUI

Junto con el modelo de manzana, mostraremos un número que indica la puntuación del jugador. Este es el número de frutas que el jugador ha cortado.

Seleccione Crear otro > Texto GUI en el menú GameObject para crear un objeto de texto, colóquelo a la derecha del modelo de Manzanas y cambie el texto en el panel Inspector a 0.

Puede incrustar una fuente personalizada importándola en la carpeta Activos y cambiando la propiedad Fuente del texto en el Inspector.

7. Crea la GUI del temporizador

Utilizaremos un cronómetro para indicar cuándo se acabó el juego. Está compuesto por una textura GUI que muestra un icono y un texto GUI que muestra el tiempo restante.

Paso 1: Agregar el icono del reloj

Para agregar el ícono del reloj, seleccione la imagen que desea usar en el panel Activos y abra el Inspector. Seleccione GUI en el menú Tipo de Textura para convertirlo en una Textura GUI. Arrastre y suelte la imagen a la escena y cambie sus valores de transformación a los que se muestran a continuación.

La escena ahora debería verse así.

Paso 2: Agregar el texto de la GUI

Repita los pasos para agregar el texto del puntaje para agregar el texto del temporizador. No olvides configurar el texto a la hora correcta.

8. Alert Prefab

La alerta es una Textura GUI que mostraremos cuando el temporizador llegue a 0. Mostrará un juego sobre el mensaje en el centro de la pantalla.

Para crear la alerta, convierta su imagen de alerta en una textura GUI usando el Inspector. Arrástrelo desde el panel Jerarquía al panel Activos para convertirlo a Prefab.

9. Clase Timer

Vamos a implementar ahora la clase Timer. Seleccione el texto de la GUI de tiempo, haga clic en el botón Agregar componente en el panel Inspector y elija Nueva secuencia de comandos. Nombre el script Timer y no olvide cambiar el idioma a C #. Abra el archivo recién creado y siga los próximos pasos.

Paso 1: Declarar variables

Comenzamos creando una serie de variables que usaremos en la clase Timer.

Echemos un vistazo a cada una de las variables.

  • timeTF: una referencia al texto GUI de tiempo    
  • alertReference: una referencia a la alerta prefabricada

Utilizaremos estas referencias para acceder a la hora y alertar a los objetos del juego y cambiar sus valores. Configure el prefab de alerta en el Inspector.

Paso 2: Configuración

Con las variables declaradas, establecemos el valor de timeTF accediendo a la propiedad guiText del objeto de juego actual. Esto nos permitirá modificar el valor del texto más tarde.

También llamamos al método InvokeRepeating, que invocará el método ReduceTime cada segundo.

Paso 3: Implementa ReduceTime

El método ReduceTime se encarga de actualizar el texto del temporizador y mostrar el mensaje de alerta. El juego termina cuando el tiempo llega a 0. Agrega el siguiente bloque de código a la clase Timer.

Comenzamos probando si el tiempo está por terminar. Si es true, pausamos el juego cambiando la propiedad timeScale a 0, creamos una instancia de la alerta y jugamos el juego sobre el sonido.

Si el tiempo no está por terminar, simplemente reducimos su valor en 1. Para hacer esto, usamos el método int.Parse para convertir la cadena de tiempo en un número, restar 1 y llamar a ToString para convertir el resultado. a una cadena.

Paso 4: Método Reload

Esta es la última parte de la clase Timer. En el método Reload, llamamos LoadLevel en la clase Application y volvemos a cargar el nivel actual, restableciendo cada objeto y variable a su estado inicial.

Así es como se verá la clase completa cuando haya terminado.

10. Manzana Prefab

La manzana es uno de los elementos más importantes del juego y es uno de los objetos interactivos de la pantalla. El jugador puede usar la pantalla táctil del dispositivo para cortar la manzana, aumentando su puntaje.

Arrastre la manzana desde el panel de Activos a la escena. No se preocupe por su posición, porque lo convertiremos en un Prefab en un momento y lo eliminaremos de la Jerarquía.

Paso 1: Agregar cuerpo rígido

Para detectar una colisión con la manzana, necesitamos agregarle un cuerpo rígido Rigidbody. Para agregar uno, seleccione Agregar componente en el panel Inspector y elija Física > Cuerpo rígido. Puede dejar la configuración en sus valores predeterminados.

Paso 2: agregar el colisionador de cuadros

También necesitamos agregar un colisionador de caja a la manzana para detectar colisiones. Este colisionador definirá el área de golpe de la manzana. Haga clic en el botón Agregar componente en el panel Inspector, elija Física > Colisionador de cuadros y modifique sus valores como se muestra en la captura de pantalla siguiente.

En el panel Escena, debe aparecer un cuadro verde alrededor de la manzana, que representa el colisionador de cuadro que acabamos de agregar.

11. Saplicaduras Prefab

El prefabricado de salpicaduras se usará como un efecto visual para cuando el jugador corte la fruta. Aparecerá en el escenario por cada fruta que el jugador corte y desaparece lentamente con el tiempo. Convierta la imagen a un Sprite como se describió anteriormente y agréguela a la escena.

Agregue una secuencia de comandos y vuelva a arrastrarlo al panel Activos para crear una Prefab. Abra la clase recién creada.

12. Clase Splash

La clase Splash maneja las imágenes creadas cuando se corta la fruta.

Paso 1: Declarar variables

Estas variables se usan para calcular y establecer un valor alfa para el splash prefab. Al cambiar su propiedad alfa, podemos desvanecer el prefabricado a medida que pasa el tiempo.

Paso 2: Configuración

En este método calculamos un valor alfa aleatorio de 0.3 a 0.5 y almacenamos ese valor en la variable randomAlpha. Luego establecemos el alfa resultante en la propiedad de color del objeto del juego.

En la última línea de código, invocamos el método que disminuirá ese valor cada 300 milisegundos, creando un efecto de desvanecimiento.

Paso 3: reduce el alfa y destruye

Para reducir el alfa, primero necesitamos obtener el valor actual. La variable actualAlpha almacena este valor. Luego restamos 0.1 de ese valor y reasignamos el nuevo alfa al objeto del juego. La imagen se elimina cuando es casi invisible.

Así es como se ve la clase Splash.

13. Clase Apple

Con nuestro splash prefab creado, ahora podemos continuar con la clase Apple. Esta clase manejará acciones, como la detección de colisión, la actualización de la puntuación y la eliminación de la manzana de la escena.

Paso 1: Declarar variables

Tres variables se declaran en la clase Apple:    

  • splashReference: referencia al splash prefab
  • randomPos: posición para el splash prefab    
  • scoreReference: referencia al texto GUI del puntaje

Paso 2: obtener la referencia de puntuación

Para obtener una referencia al texto del puntaje, usamos el método Find. Este método busca los objetos del juego activo y devuelve el objeto que estamos buscando, el texto GUI de puntuación en este caso.

Con la variable scoreReference establecida, ahora podemos aumentar su valor cuando se corta una fruta.

Paso 3: Destruir en fuera de escenario

En el método Update, verificamos si la fruta ya no es visible en la pantalla accediendo a su posición y quitándola si es true. Esto nos ayuda a liberar memoria al destruir objetos del juego no utilizados.

Paso 4: manejar colisiones

El siguiente código usa el método OnCollisionEnter para detectar cuándo la fruta es rebanada por el jugador. Cuando esto sucede, reproducimos el sonido de corte y eliminamos la fruta. A continuación, creamos una nueva instancia de splash prefab y actualizamos el puntaje.

Así es como se ve la clase completa Apple.

14. Clase FruitSpawner

La clase FruitSpawner crea una instancia y mueve las frutas a la escena. Está unido a la cámara principal.

Paso 1: Declarar variables

Estas son las variables declaradas en esta clase.

  • appleReference: referencia a la manzana prefabricada    
  • throwForce: la fuerza utilizada para empujar los frutos hacia arriba

Paso 2: invocar Spawn

En las siguientes líneas de código, llamamos al método InvokeRepeating para invocar el método SpawnFruit cada seis segundos. Esto agregará nuevas frutas a la escena cada seis segundos, dando al jugador tiempo para cortarlas antes de que la fruta caiga al final de la escena.

Paso 3: Método SpawnFruit

El método SpawnFruit crea las frutas y las empuja hacia arriba para que el jugador las corte. Usamos un enunciado for para crear una instancia de las frutas, colocarlas al azar en la escena y aplicar una fuerza física usando el método addForce.

Esta es la clase completa FruitSpawner.

15. Controles táctiles

Implementemos ahora los controles táctiles. El jugador podrá usar la pantalla táctil para cortar las frutas. Visualizaremos esto dibujando una línea usando la clase LineRenderer y luego comprobando si la fruta colisiona con el gesto deslizante del jugador.

Paso 1: Declarar variables

Comenzamos creando algunas variables.

  • c1, c2: estas variables establecen el color de la línea    
  • lineGO: este objeto del juego mantendrá el renderizador de la línea
  • lineRenderer: la instancia del renderizador de línea
  • i: un valor int utilizado para establecer el tamaño y el índice de la línea

Paso 2: Configuración

En el método Start, configuramos los objetos y propiedades necesarios para la línea. Comenzamos creando una nueva instancia de GameObject que contiene LineRenderer. Luego usamos algunos de los métodos de renderizado de líneas para establecer la forma en que se verá.

La mayoría de las propiedades establecidas en este bloque de código son fáciles de entender, SetColor cambia el color de la línea y SetWidth establece su ancho. Preste especial atención a la línea SetVertexCount. Este método especifica el número de puntos de la línea. Al llamar a este método con un mayor número de puntos, podemos aumentar el tamaño de la línea. Esto se aclarará en el siguiente paso.

Paso 3: Crear línea

La línea se crea en el método de actualización Update. Primero probamos si el jugador está tocando la pantalla recuperando la propiedad touchCount de la clase Input. Si la propiedad es mayor que 0, significa que hay al menos un dedo en la pantalla del dispositivo.

Mantenemos una referencia al objeto Touch para facilitar el acceso y verificar en qué fase se encuentra actualmente. Necesitamos que esté en la fase Moved para poder crear la línea.

Si el jugador mueve su dedo por la pantalla, podemos comenzar a crear un segmento de línea en esa posición. Invocamos el método SetVertexCount nuevamente para aumentar la cantidad máxima de segmentos de la línea.

Paso 4: agregar colisionadores

Con la línea en su lugar, le agregamos un colisionador para ayudarnos a detectar una colisión con cualquiera de las frutas. El siguiente fragmento de código crea y agrega un colisionador de cuadro a la línea usando el método AddComponent y establece su posición en la posición actual de lineRenderer. La última línea de código cambia el tamaño predeterminado del colisionador para que coincida con el tamaño de la línea.

Paso 5: Eliminar línea

Quitamos la línea cuando el jugador ya no está tocando la pantalla. Esto evita cualquier colisión no deseada con las manzanas.

En el siguiente fragmento de código, verificamos si la fase actual del objeto Touch es Ended y establece el recuento de vértices del lineRenderer en 0. Esto eliminará los segmentos de línea actuales, pero no destruye el objeto, lo que nos permite reutilizar eso mas tarde. También reiniciamos la variable i para permitir su uso posterior.

Paso 6: destruir colisionadores

Una vez que se quita la línea, ya no necesitamos los colisionadores conectados a ella. Primero creamos una matriz de objetos BoxCollider, almacenando los colisionadores del objeto del juego de línea. Luego recorremos la matriz y destruimos el colisionador de cada caja.

Echemos un vistazo a la implementación completa de la clase LinesHandler.

16. Pasos finales

Paso 1: Prueba

Es hora de probar el juego. Presione Command-P para jugar en Unity. Si todo funciona como se espera, entonces estás listo para los pasos finales.

Paso 2: configuración del jugador

Cuando esté satisfecho con su juego, es hora de seleccionar Configuraciones de compilación en el menú Archivo y hacer clic en el botón Configuración del jugador. Esto debería mostrar la Configuración del jugador en el panel Inspector, donde puede establecer los parámetros para su aplicación.

Estas configuraciones son datos específicos de la aplicación que incluyen el creador o la compañía, resolución de la aplicación y modo de visualización, modo de renderizado (CPU, GPU), compatibilidad del sistema operativo del dispositivo, etc. Configure los ajustes según los dispositivos a los que se dirige y la tienda o mercado donde planea publicar la aplicación.

Paso 3: iconos e imágenes

Usando los gráficos que creó anteriormente, ahora puede crear un icono agradable y una imagen de bienvenida para su juego. Unity le muestra los tamaños requeridos, que dependen de la plataforma para la que está construyendo.

Paso 4: compila y juega

Una vez que su proyecto esté configurado correctamente, es hora de revisar las Configuraciones de compilación y hacer clic en el botón Compilar. Eso es todo lo que se necesita para construir tu juego para probar y / o distribuir.


Conclusión

En este tutorial, hemos aprendido a usar controles táctiles, fuerzas físicas, Texturas GUI y otros aspectos del desarrollo de juegos en Unity. Te animo a experimentar con el resultado y personalizar el juego para que sea tuyo. Espero que les haya gustado este tutorial y lo haya encontrado útil.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.