Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Corona SDK
Code

Cómo desarrollar Highway Dodge con Corona SDK

by
Difficulty:BeginnerLength:LongLanguages:

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

What You'll Be Creating

Introducción

En este tutorial, aprenderás a crear Highway Dodge, un juego simple pero adictivo. Highway Dodge es fácil de aprender y jugar, pero brinda la calidad adictiva de otros juegos populares en la App Store.

Highway Dodge comienza colocando al jugador en un auto de carreras en la carretera. Durante el juego, el jugador debe esquivar el tráfico que se aproxima en la carretera tocando en uno de los tres carriles disponibles. Por cada vehículo esquivado, el jugador recibe un punto y se termina el juego para el jugador cuando un coche que se aproxima golpea el coche de carreras. Con el tiempo, los autos que se aproximan salen cada vez más rápido para ofrecer un verdadero desafío al jugador.

Requerimientos

Este juego está construido usando Lua y el SDK Corona. Como mínimo, debes tener una cuenta con Corona Labs y el Corona SDK instalado. Puedes obtener el Corona SDK gratis en el sitio web de Corona Labs. Para este tutorial, utilicé la compilación 2015.2731 del Corona SDK.

1. Configuración de Highway Dodge

Saltemos y comencemos Highway Dodge creando una plantilla en blanco. Abre el simulador de Corona y elige Nuevo proyecto en el menú Archivo. Una vez que tengas abierta la ventana Crear nuevo proyecto, ingresa Highway Dodge como nombre del proyecto, elige una plantilla en blanco y establece el ancho en 400 y el alto en 600. Deja la orientación predeterminada establecida en Vertical.

Create New Project

Después de configurar tu proyecto, descarga las imágenes para Highway Dodge. Crea una nueva carpeta en tu nuevo proyecto, nómbrala como 'images' y agrega las imágenes a esta carpeta. Tu proyecto ahora debería verse así:

A Quick Look at the Project

2. Configuración del proyecto

Con el proyecto configurado, echemos un vistazo rápido a dos archivos importantes, build.settings y config.lua.

build.settings

Este archivo maneja las propiedades de tiempo de construcción del juego. Almacena información sobre la orientación de tu aplicación, información de iconos, configuración de iOS y configuración de Android. La configuración por defecto es adecuada para nuestro juego.

config.lua

Este archivo de configuración controla las propiedades de tiempo de ejecución del juego. Esto incluye width, height, scale, fps (cuadros por segundo) e imageSuffix. La propiedad que necesitamos ver es imageSuffix. La propiedad imageSuffix se usa para la selección dinámica de imágenes. En pocas palabras, le dice a la aplicación que use una imagen de mayor resolución cuando está en un dispositivo de mayor resolución.

He proporcionado imágenes de alta resolución en la carpeta de imágenes, por lo que debemos actualizar config.lua en consecuencia. El archivo config.lua de tu proyecto debería verse como el que se muestra a continuación. He omitido la sección de notificaciones push, que está comentada.

3. Punto de lanzamiento

Con el proyecto y la selección de imagen dinámica configurada, pasemos a main.lua. Este archivo es el punto de inicio de todas las aplicaciones creadas con Corona SDK. En nuestro juego, va a contener tres líneas de código.

Paso 1

La primera línea oculta la barra de estado en dispositivos iOS. Abre main.lua y agrega la siguiente línea después del comentario -- Tu código aquí.

Paso 2

A continuación, comenzamos a utilizar composer al requerir la biblioteca en nuestro juego. Hacemos esto agregando la siguiente línea:

Paso 3

A continuación, utilizamos composer para mover a la escena del menú. Movemos escenas llamando a la función composer.gotoScene(), pasando el valor "scene_menu" como parámetro. El valor "scene_menu" es el nombre de la escena y el nombre del archivo que creamos en la siguiente sección.

Una palabra sobre Composer

Composer es la biblioteca oficial de gestión de escenas de Corona. Composer permite a los desarrolladores crear fácilmente una escena y hacer una transición entre escenas. En dos líneas, pude pasar de la escena principal a la escena del menú. Si deseas obtener más información acerca de Composer, visita la Guía de la Biblioteca de Composer de Corona disponible en el sitio web de Documentos de Corona Labs.

4. Menú

La escena del menú de nuestro juego consistirá de solo un par de elementos. La escena contendrá un gráfico de fondo, un título y un botón de inicio. Usaremos la biblioteca de widgets incorporados de Corona para crear el botón de inicio. La biblioteca de widgets nos permite crear rápida y fácilmente elementos comunes de la interfaz de usuario. En nuestro juego, lo usaremos solo para la creación de botones.

Paso 1

En la carpeta de proyectos de Highway Dodge, crea un nuevo archivo, scene_menu.lua, y ábrelo en el editor de texto que elijas. En lugar de empezar de cero, vamos a utilizar la plantilla de escena disponible en el sitio web de Corona Labs Docs. Con su plantilla, podremos movernos mucho más rápido. Ve a Corona Labs Docs y copia/pega la plantilla de escena en scene_menu.lua.

Paso 2

Agrega la biblioteca de widgets a nuestro juego agregando la siguiente línea, justo debajo de la biblioteca composer.

Paso 3

Añadimos nuestro background utilizando los gráficos que descargaste anteriormente. El fondo debe colocarse en el centro de la pantalla. En la función scene:create() y después de declarar la variable screenGroup, agrega el siguiente código:

Paso 4

A continuación, debemos agregar los tres carriles que representan la carretera. Hacemos esto usando una tabla para mantener los carriles y creando un bucle for que se ejecuta tres veces. Coloca este fragmento después del gráfico de fondo:

Para asegurarme de que los carriles estén siempre centrados, he colocado los carriles en el eje x usando un poco de matemáticas. Esto garantiza que los carriles permanezcan centrados, independientemente del dispositivo en el que se ejecuta el juego.

Paso 5

También agregamos su logotipo para Highway Dodge colocando un objeto de imagen cerca de la parte superior de la pantalla.

Paso 6

Antes de poder agregar nuestro widget de botón, debemos crear una función que responda cuando se toca el botón. Nombraremos la función handleButtonEvent() y moveremos el jugador a la escena del juego usando composer.gotoScene(). Solo responderemos cuando el jugador haya levantado el dedo del botón o en la fase final del evento.

Paso 7

Con la función agregada, podemos agregar el botón. Creamos el botón usando widget.newButton y pasándole algunos valores. Especificamos el ancho y la altura del botón, los archivos de imagen para el botón, el texto que se mostrará, el tipo de fuente, el tamaño de la fuente y el color de la fuente.

También le decimos a Corona a qué función llamar cuando se presiona el botón y lo colocamos en el centro de la pantalla. Los archivos de origen de este tutorial incluyen comentarios que explican cada uno de los valores utilizados para configurar el botón.

Paso 8

Para finalizar la escena del menú, debemos eliminar la escena del juego cuando se cierre. Cuando Corona se mueve entre escenas, no siempre elimina la escena anterior. Sin estas líneas, el juego siempre estará en un juego sobre escena después de que se haya jugado una vez.

Para eliminar la escena anterior, obtenemos el nombre de la escena y llamamos a composer.removeScene() para eliminarla si existe. Agrega el siguiente código a la escena: función show().

5. Creando la escena del juego

Ahora podemos empezar a trabajar en la escena del juego. Usaremos el mismo flujo de trabajo que usamos para crear la escena del menú. Crea aun nuevo archivo, scene_game.lua, y copia/pega la plantilla de escena disponible en los documentos de Corona Labs. Una vez que tengas el código en su lugar, abre scene_game.lua en tu editor de texto favorito.

Paso 1

Para facilitar la codificación de la escena del juego, utilizaremos la biblioteca de widgets y la biblioteca 'physics' . Este último se utiliza para la detección de colisiones. Agrega el siguiente código a scene_game.lua:

En la primera y segunda línea, requerimos la biblioteca de widgets y la biblioteca de física respectivamente. Entonces comenzamos la física y deshabilitamos la gravedad. No necesitamos la gravedad para nuestro juego en carretera, en lugar de eso, usaremos transition.to() para mover los autos.

Paso 2

En la función scene:create(), declaramos una serie de variables que usaremos en el juego. Estas variables serán responsables del carro del jugador, los carriles, los coches enemigos y la puntuación del jugador. Para hacer las cosas más fáciles de leer, he añadido algunos comentarios.

Paso 3

Debajo de las declaraciones de variables, configuramos las funciones para el juego. Implementaremos cada función en un paso posterior. Agrega el siguiente código después de las declaraciones de variables en la función scene:create().

Paso 4

Después de las funciones, agregamos el fondo y los carriles. Para los carriles, adjuntamos un detector de eventos a cada carril para que respondan a los eventos táctiles. Cuando se toca, el oyente llama a la función moveCar().

Paso 5

Con el fondo y los carriles configurados, es hora de crear un objeto de texto para mantener la puntuación del jugador y crear el carro del jugador. El puntaje estará en la parte superior de la pantalla y el carro del jugador se ubicará en el carril de la izquierda. Además, haremos del coche del jugador un objeto de física dinámica.

Paso 6

A continuación, configuramos un temporizador para enviar un automóvil según el valor de la variable sendEnemyFrequency y creamos un detector de eventos en tiempo de ejecución para colisiones globales.

6. Agregando Funcionalidad del Juego

Finalmente podemos agregar funcionalidad a nuestro juego. Esta sección agregará código adicional a cada función que declaramos en la sección anterior. Comenzaremos con incrementScore() y terminaremos con onGlobalCollision().

incrementScore()

Esta función se llama cuando un automóvil enemigo pasa por el jugador y la transición se completa. Cuando se le llama, la puntuación del jugador aumenta en 1. Agrega la siguiente implementación a la función incrementScore().

moveCar()

La función moveCar() se llama cuando se toca un carril. En la fase final del evento, tomamos el identificador de carril y movemos el automóvil al carril correcto. Devolvemos true al final para indicar un evento táctil exitoso. Agrega la siguiente implementación a la función moveCar().

sendEnemyCar()

La función sendEnemyCar() crea un automóvil enemigo, asigna el automóvil a un carril, une un cuerpo de física al automóvil y utiliza la función transition.to(). Para enviar el automóvil hacia la parte inferior de la pantalla. Para empezar, vamos a crear el objeto del coche enemigo.

A continuación, configuramos la ubicación x e y del coche enemigo. También creamos una declaración if-then para asignar el carro enemigo al mismo carril que el carro del jugador en el 50% del tiempo. Esto obligará al jugador a moverse más a menudo y hará que el juego sea más divertido.

También necesitamos rotar el carro enemigo para que esté hacia abajo y agregar un tipo de cuerpo de física cinemática al carro enemigo.

Con el automóvil enemigo configurado, usamos la función transition.to() para enviar el automóvil enemigo por uno de los carriles. Cuando se completa la transición, el juego llama a una función para eliminar el objeto. También incremento la variable enemyCounter en 1 para hacer un seguimiento de la cantidad de coches enemigos en el juego.

Finalmente, queremos que el juego se acelere con el tiempo. Para cada otro automóvil que se envíe, el juego volverá a crear el temporizador y lo pondrá 200ms más rápido.

onPlayAgainTouch()

La función más corta, onPlayAgainTouch(), devuelve al jugador al menú principal. Así es como se ve la implementación de la función onPlayAgainTouch().

onGlobalCollision()

La función onGlobalCollision() se usa para detectar colisiones entre dos objetos físicos en la pantalla. En nuestro juego, solo tenemos dos tipos de objetos de física:

  • el carro del jugador
  • el carro enemigo

Cuando estos dos objetos chocan, el juego detiene todos los temporizadores, transiciones y escuchas de eventos. Además, el juego muestra un juego sobre escena que le permite al jugador volver a jugar.

Paso 1

Primero, creamos una sentencia if-then que escucha la fase iniciada llamada began.

Paso 2

En la sentencia if-then, paramos el juego. Hacemos una pausa en todas las transiciones, cancelamos el temporizador, hacemos una pausa en la física (incluso si no es necesario, es una buena llamada de limpieza) y eliminamos el detector de eventos de los tres carriles. Agrega el siguiente código dentro de la sentencia if-then:

Paso 3

Después de que los mecánicos del juego se hayan detenido, agregamos un rectángulo opaco y un objeto de texto que dice "¡Game Over!". Esto da una buena indicación visual de que el juego ha terminado.

Paso 4

Para finalizar la función de colisión global, agregamos el botón de reproducción nuevamente que envía al jugador de vuelta al menú.

Prueba de conducción

Ejecuta la aplicación para ver si todo funciona como se espera. Debes poder jugar el juego, los coches enemigos deberían aparecer desde la parte superior de la pantalla, y tu puntuación debería incrementarse por cada coche enemigo que esquives con éxito.

Conclusión

Gracias por leer mi tutorial sobre la creación de Highway Dodge con el SDK Corona. Puedes descargar los archivos de origen para este juego desde GitHub. Tómate un momento para pensar cómo puedes mejorar aún más el juego. Si estás buscando algunas sugerencias, te recomendaría agregar otro carril, agregar más tipos de enemigos e incluso agregar algunos potenciadores geniales.

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.