7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Corona SDK

Corona SDK: Construye un defensor de los monos

Read Time: 14 mins

Spanish (Español) translation by Esther (you can also view the original English article)

En este tutorial, vamos a crear un juego llamado Monkey Defender utilizando el Corona SDK. Este juego servirá como una gran base para un montón de diferentes géneros incluyen juegos de estilo de defensa. Así que, ¡comencemos!


Resumen del proyecto

En esta versión de Monkey Defender, el jugador tendrá que defender al mono disparando granadas de mono a las naves espaciales entrantes. Cada vez que el jugador acierte a una nave espacial enemiga, su puntuación aumentará en uno. Si no consiguen golpear la nave espacial enemiga antes de que llegue al mono, perderán un plátano, o una vida. Cuando el jugador se quede sin plátanos, ¡se acabó el juego!

Este juego fue construido con el Corona SDK y aquí están algunas de las cosas que aprenderás:

  • Cómo utilizar el Storyboard
  • Cómo utilizar los widgets
  • Cómo girar objetos en función del tacto
  • Cómo utilizar la colisión de Corona
  • Cómo crear un juego completo con el SDK de Corona

Requisitos previos de la tutoría

Para poder utilizar este tutorial, necesitarás tener el Corona SDK instalado en tu ordenador. Si no tienes el SDK, dirígete a http://www.coronalabs.com para crear una cuenta gratuita y descargar el software gratuito.

Para descargar los gráficos que utilicé para el juego, por favor descarga los archivos fuente adjuntos a este post. Los gráficos de este juego provienen de www.opengameart.org y www.vickiwenderlich.com. El gráfico de fondo viene de Sauer2 en Open Game Art y el resto de los gráficos vienen de Vicki Wenderlich. Si decides publicar este juego con estos gráficos, por favor asegúrate de acreditar a ambos artistas.


1. Construir la configuración

El primer paso para construir nuestro juego, Monkey Defender, es crear un nuevo archivo llamado build.settings y colocarlo dentro de la carpeta del proyecto. El archivo build.settings maneja todas las propiedades de tiempo de construcción dentro de nuestra aplicación. Para nuestro juego, solo tenemos que preocuparnos por la orientación del juego, y solo vamos a permitir el modo horizontal.


2. Configuración del tiempo de ejecución

A continuación, crearemos otro archivo llamado config.lua y lo colocaremos dentro de la carpeta del proyecto. El archivo config.lua maneja todas nuestras configuraciones de tiempo de ejecución tales como la altura, el ancho, el tipo de escala y la velocidad de los cuadros. Para nuestro juego, vamos a configurar nuestra aplicación para que sea de 320x480, esté en un buzón y tenga 30 cuadros por segundo.


3. Construyendo main.lua

Ahora que tenemos nuestro proyecto configurado, podemos seguir adelante con la creación de main.lua. El archivo main.lua es el punto de partida de cada aplicación construida con el Corona SDK, así que crea un nuevo archivo llamado main.lua y muévelo a tu carpeta de proyecto. Dentro de nuestro archivo main.lua, ocultaremos la barra de estado, añadiremos algunas variables globales y utilizaremos la función Storyboard de Corona para gestionar nuestras escenas.


4. Construir el menú

Con nuestro archivo main.lua configurado, vamos a pasar a nuestro menú. El menú para este juego será simple. Mostrará el título del juego y un botón para iniciar el juego.

Paso 1

Para empezar, crea un nuevo archivo llamado menu.lua y colócalo en la carpeta de tu proyecto. La primera adición a este archivo es añadir un guión gráfico y la biblioteca de widgets. Mientras que el storyboard nos permitirá gestionar fácilmente nuestra escena, la biblioteca de widgets nos permitirá añadir fácilmente elementos comunes a nuestra aplicación. En este caso, utilizaremos la biblioteca de widgets para añadir un botón a nuestro menú. Llegaremos a eso más tarde.

Paso 2

Después de los requerimientos, crearemos nuestra primera función llamada scene:createScene(). Esta función será llamada cuando la escena no exista y es un lugar perfecto para nuestro título y botón del juego.

Paso 3

Dentro de nuestra función scene:createScene(), crearemos un nuevo objeto de pantalla que se utilizará como fondo. Si aún no lo has hecho, asegúrate de descargar los archivos fuente de este tutorial y coloca todos los gráficos dentro de una carpeta llamada images en tu proyecto.

El objeto de visualización de fondo se centrará en la pantalla y se insertará en nuestra variable de grupo. Al insertar el objeto de visualización en nuestra variable de grupo, le estamos diciendo a Corona que este objeto pertenece a esta escena. Cuando cambiemos de escena, Corona sabrá eliminar este objeto u ocultarlo porque ya no estamos viendo la escena del menú.

Una mirada en profundidad a los storyboards está fuera del alcance de este tutorial, pero puedes leer más en la documentación oficial.

Paso 4

Después de nuestro objeto de fondo, colocaremos un objeto de texto que mostrará el título de nuestro juego. Este objeto de texto estará centrado en la pantalla y se insertará en la variable de grupo.

Paso 5

Nuestra última adición a la función scene:createScene() será un widget de botón. Este widget permitirá a los jugadores iniciar el juego. Antes de que podamos añadir el widget, necesitamos crear una función que maneje el evento táctil.

Cuando se toque el botón, se llamará a la siguiente función. Esta función enviará a los jugadores a la escena del juego, que crearemos más adelante.

Paso 6

Después de la función onPlayBtnRelease, añadiremos el botón a la escena del menú. Añadimos el botón utilizando widget.newButton con un par de parámetros. La propiedad label establecerá el texto de nuestro botón y la propiedad onRelease le dirá a nuestra aplicación qué función debe disparar cuando se toque. Luego, colocaremos el botón en el centro de la pantalla y lo insertaremos en la variable de grupo. El playBtn será la última pieza añadida a la función scene:createScene().

Paso 7

Justo después de la función scene:createScene(), vamos a añadir la función scene:enterScene(). Esta función será llamada después de que la escena sea creada y esté en la pantalla.

Paso 8

Para terminar nuestro archivo menu.lua, añadiremos dos escuchadores de eventos y devolveremos la variable de escena. Este es un paso importante porque los dos escuchadores de eventos dispararán las funciones apropiadas y devolverán la variable de escena para significar el final del archivo.


5. Lógica del juego

Por ahora, hemos completado la configuración, el archivo main.lua y el archivo menu.lua. A continuación, vamos a crear la lógica de nuestro juego.

Paso 1

La lógica del juego se mantendrá dentro de un archivo llamado game.lua. Para empezar, crea un nuevo archivo llamado game.lua y colócalo dentro de la carpeta de tu proyecto. Nuestra primera adición al nuevo archivo es requerir el Storyboard de Corona.

Paso 2

A continuación, añadiremos la física a nuestro juego. Utilizaremos la física para facilitar la detección de colisiones entre las balas y las naves enemigas. Justo después de añadir la capacidad física, la pondremos en pausa para que no interfiera con la creación de la escena.

Paso 3

Después de la física, predefiniremos las variables para nuestro juego.

Paso 4

El siguiente conjunto de variables se utilizará como ajustes para nuestro juego. Siéntete libre de cambiar las velocidades del juego o aumentar el número de vidas para el jugador.

Paso 5

Ahora crearemos nuestra función scene:createScene.

Paso 6

A continuación, crearemos una función que se disparará cuando se toque el objeto de la pantalla de fondo, y esta función contendrá la mayor parte de nuestra lógica de juego. Cuando se dispare, giraremos el mono hacia el evento de toque y dispararemos una bala hacia el mismo evento de toque.

En primer lugar, vamos a crear la función tocada y crear una declaración condicional para que nuestra lógica solo se ejecute durante la fase de inicio.

Dentro de la declaración if-then, utilizamos la biblioteca matemática para determinar el ángulo entre el mono y el evento de toque. Esto se consigue utilizando una combinación de math.deg y math.atan2 para encontrar dónde hay que rotar el mono. Una vez encontrado el grado de rotación, giramos el mono a la posición adecuada.

Como esta función va a disparar una bala, tenemos que crear la bala como un objeto de visualización. Una vez creada, haremos el objeto de física para que pueda responder a las colisiones con los enemigos.

Ahora que tenemos nuestra bala, tenemos que averiguar dónde enviarla. Para ello, primero determinamos si tenemos que enviar la bala a la izquierda o a la derecha y, a continuación, utilizamos la fórmula y = mx + b para determinar la ubicación y. Nuestro último ejercicio matemático es encontrar la distancia entre los dos puntos para poder determinar la velocidad de proyección de la bala.

Ahora que sabemos la distancia y las coordenadas x/y del destino de la bala, podemos enviar nuestra bala al destino usando transition.to. También necesitaremos incluir un par de sentencias end para envolver la función tocada.

Paso 7

Después de todas esas matemáticas, los siguientes pasos son sencillos. Añadiremos un fondo a nuestro juego (adjuntaremos un oyente de eventos al fondo más tarde), el mono, y un objeto de texto para mostrar la puntuación.

También insertaremos tres plátanos para representar tres vidas del jugador en la parte superior derecha de la pantalla.

Paso 8

A continuación, crearemos una función que enviará a los tipos malos hacia nuestro jugador. Vamos a llamar a esta función createBadGuy y primero determinaremos desde qué dirección enviar al malo.

Después de haber determinado la dirección de la que vendrá nuestro chico malo, crearemos un nuevo objeto de visualización para nuestro chico malo y lo convertiremos en un objeto de física. Usaremos la física para detectar colisiones más adelante.

Luego, usaremos la Corona transition.to para mover al malo hacia el centro de la pantalla. Una vez realizada la transición y si el enemigo no ha sido golpeado, eliminaremos al malo y le restaremos una vida al jugador.

Si las vidas del jugador han llegado a 0 o menos, dejaremos de enviar a los malos y eliminaremos la capacidad del jugador de enviar más balas. También mostraremos dos objetos de texto para indicar que el juego ha terminado y dejar que el jugador vuelva al menú.

Paso 9

La última función dentro de scene:createScene es para la detección de colisiones. Cuando una bala y el chico malo colisionen, esta función se activará y ocurrirá lo siguiente:

  • Añade 1 a la puntuación del jugador y actualiza el objeto de texto de la puntuación.
  • Poner el alfa de ambos objetos a 0.
  • Cancela la transición en cada objeto para que no interfiera en el proceso de eliminación.
  • Finalmente, crearemos un temporizador que esperará 1 milisegundo antes de eliminar ambos objetos. Siempre es una mala idea eliminar los objetos de la pantalla en medio de la detección de colisiones.

Paso 10

Después de la escena:createScene, escribiremos nuestra función de entrada a la escena. Esta función se dispara después de crear la escena y pasarla a la pantalla. Dentro de la función de entrar en escena, iniciaremos todas las funciones que escribimos en la función de crear escena.

Paso 11

¡Ya casi hemos terminado! La última pieza de nuestro código es añadir los escuchadores de eventos de la escena y devolver la variable scene. Los escuchadores de eventos activarán nuestras funciones y la declaración de retorno permite a Corona saber que hemos terminado con esta escena.


Conclusión

¡Espero que hayas disfrutado de este tutorial sobre la creación de un juego Monkey Defender con el Corona SDK! ¡Hemos cubierto un montón de temas que van desde los storyboards a las fórmulas geométricas! Si tienes preguntas o comentarios, por favor déjalos abajo y gracias por leer.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.