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

Crea un juego de corredor sin fin desde cero: Obstáculos y enemigos

Scroll to top
Read Time: 11 mins
This post is part of a series called Corona SDK: Build an Endless Runner Game From Scratch.
Build an Endless Runner Game from Scratch: Adding Events
Build an Endless Runner Game from Scratch: Game Over & Scoring

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

¡Bienvenido a la sexta parte de nuestra serie de tutoriales del videojuego del corredor sin fin! Nuestro juego está empezando a mejorar y sentirse más pulido. Después de completar los pasos de hoy, será mucho más interactivo y divertido de jugar. Agregaremos dos eventos más que crearán nuevos y emocionantes desafíos para los jugadores. Primero, agregaremos la habilidad de que nuestro héroe pueda disparar un pequeño rayo para despejar los obstáculos que se le acerquen. Ten en cuenta que la pequeña imagen "azulada" está siendo disparada por nuestro monstruo. Las imágenes con las que estamos trabajando no tienen un aspecto especialmente profesional, ya que son solo para practicar. Una vez que el monstruo tenga la capacidad de disparar algunos rayos, también agregaremos eventos que enviarán obstáculos hacia él. Después de eso, crearemos dos tipos de obstáculos: el primero es una pared de púas que se asentará en el suelo y viajará a la misma velocidad que el suelo, y el segundo es un fantasma que volará desde el lado superior derecho de la pantalla hacia el jugador.

¡Así que empecemos! Lo primero que debemos hacer es asegurarnos de tener todos los recursos en el lugar correcto. Descarga el archivo adjunto a este tutorial, y en la carpeta "new" encontrarás tres nuevos recursos. También puedes simplemente hacer clic derecho en las imágenes y guardarlas en la carpeta correcta. Las imágenes deben llamarse spikeBlock.png, ghost.png y blast.png.

Abre tu archivo main.lua que se puede encontrar en la carpeta "old" de las descargas del tutorial. ¡Comenzaremos dando a nuestros jugadores la capacidad de disparar porque no queremos dejarlos indefensos mientras son bombardeados con nuevos desafíos! Podemos agregar esta habilidad en tres pasos. El primero será instanciar 5 rayos y ponerlos en un grupo. En lugar de crear y destruir objetos cada vez que queremos usarlos, podemos ser más eficientes preparándolos y almacenándolos fuera de la pantalla hasta que necesitemos usarlos. De hecho, vamos a hacer lo mismo para cada una de las tres imágenes diferentes, así que agrega este código entre donde declaramos la velocidad variable y donde creamos nuestros bloques.

Ten en cuenta que todos tienen algunas características comunes. Necesitamos revisarlos y nombrarlos en caso de que alguna vez queramos hacer referencia a ellos individualmente. Les damos una identificación y también nos da más opciones de referencia futura. Les damos sus coordenadas 'x' e 'y' fuera de la pantalla (apilamos imágenes similares una encima de la otra). Otra cosa que les damos a todos es la variable 'alive'. Esto se establece en falso de forma predeterminada, ya que estarán fuera de la pantalla. Dar a los sprites esta variable nos permitirá comprobar rápidamente si el sprite está en uso o no. El único objeto que tiene algo diferente es el objeto del fantasma. Para los sprites de los fantasmas, agregaremos una variable de velocidad para que podamos tener fantasmas moviéndose a velocidades aleatorias. También estableceremos el alfa de los fantasmas en .5 para que parezcan más, supongamos, ¡como fantasmas!

Las siguientes dos cosas que debemos hacer son crear sus respectivos grupos de visualización, luego agregar esos grupos al grupo de visualización de la pantalla para que podamos verlos en el juego. Agrégalos justo debajo de la instancia de los otros grupos de visualización.

A continuación, baja a la sección donde agregamos todo a la pantalla. Agrega esos grupos de visualización con el resto. Según el orden que he puesto se vería así:

Una vez que tengas todo allí, debería verse algo así si tuvieras que ejecutarlo en la perspectiva del iPhone 4:

Después de tener eso listo, agregaremos la función que actualiza todos los rayos que dispara nuestro monstruo. Agrega la siguiente función debajo de la función checkCollisions().

La función anterior tendrá dos responsabilidades principales. La primera es actualizar la posición de la explosión y verificar si chocó con algo. Puedes ver que cuando chocas con algo, la forma en que lo destruimos es simplemente moverlo fuera de la pantalla y establecer 'isAlive' en falso. Esto hará que el rayo esté listo para usarse nuevamente. Otra cosa que habrás notado es que solo instanciamos cinco rayos. Entonces, ¿qué sucede si los cinco rayos ya han sido usados y el usuario intenta disparar otra ráfaga? ¡Nada! Con la forma en que está configurado en este momento, el usuario está limitado a tener solo cinco explosiones activas a la vez. Esto es fácil de cambiar al crear más instancias al comienzo del juego, pero te muestra cómo establecer límites para los jugadores. Este es también un método que usaremos para asegurarnos de que los 50 fantasmas no se generen al azar todos a la vez en la pantalla, matando instantáneamente al jugador.

A continuación, debemos bajar a la función 'touched' para darle al jugador la capacidad de disparar. Cambia la función 'touched' para que coincida con lo siguiente:

Por último, asegúrate de agregar updateBlasts() a la función de actualización principal y deberías haber terminado. ¡Pruébalo y descubre el increíble poder que tiene nuestro monstruo ahora! Después de ejecutarlo, deberías ver algo como esto:

Ahora que los jugadores pueden defenderse, continuemos y vamos a ofrecer algunos desafíos. Ambos eventos siguientes se superarán con solo dispararlos una vez. Sin embargo, una vez que estén en su lugar, te resultará fácil cambiarlos para adaptarlos a tu propio proyecto. Empezaremos por la pared de púas.

La pared con púas simplemente se colocará sobre el suelo actual y se moverá a la misma velocidad constante que el suelo a su alrededor. Lo primero que debes hacer es agregar la función updateSpikes. Justo debajo de la función updateBlasts() agrega el siguiente código:

Esto hará lo mismo que nuestra función updateBlast. Simplemente actualizará la posición de la pared con púas y verificará si se salió de la pantalla (lo que actualmente no puede hacer porque golpearía primero al jugador). Sin embargo, por si acaso, lo comprobaremos para asegurarnos. Lo último que tenemos que hacer es crear un evento para ello. En checkEvent() debajo de las otras comprobaciones agrega esto:

De hecho, vamos a agregar nuestro muro en la función updateBlocks(). De esa manera, estamos seguros de tener el nivel de tierra actual. Justo antes de llamar a checkEvent() inserta lo siguiente:

Lo último que hay que hacer para que esto funcione es agregar la detección de colisiones para ver si nuestro jugador se encontró con ella o no. Pon esto justo debajo de la sección en checkCollisions() donde verificamos las colisiones entre los bloques y el monstruo.

¡Asegúrate de agregar updateSpikes() a la función de actualización principal nuevamente y pruébalo! Ahora deberías tener estos picos en el camino de tu monstruo.

Date una vuelta por el juego y practica derribar los obstáculos. Recuerda hacer una prueba para asegurarte de que las colisiones estén funcionando correctamente con las explosiones. También asegúrate de que chocar contra las paredes para realmente asesinar al jugador. Una vez que lo hayas probado y estés listo para más, comienza a poner el código en su lugar para el fantasma.

Poner el fantasma es bastante idéntico a poner la pared. La mayor diferencia entre los dos es que para el fantasma vamos a aleatorizar dónde entra y qué tan rápido viaja. También haremos que los fantasmas se muevan hacia arriba y hacia abajo para que siempre se muevan hacia donde está el jugador. Detalles especiales como ese harán que los obstáculos se sientan completamente diferentes para el usuario, a pesar de que funcionan de manera similar.

Comencemos de nuevo agregando la función updateGhosts(). Mientras lo haces, también agrega updateGhosts() a la función de actualización principal.

Luego regresa a la función checkEvent() y agrega esto debajo de las verificaciones anteriores:

Esta vez, en lugar de hacer que los fantasmas se muevan desde la función updateBlocks, lo haremos en la función runEvent(). Agrega esto debajo de las otras declaraciones if:

Una vez que estés allí, debemos verificar si hay colisiones entre el monstruo y los fantasmas. Agrega esto a checkCollions() justo después de que hagamos el trabajo para las paredes con púas:

Ahora deberías tener todo en su lugar, ¡incluidos los fantasmas para esquivar!

El juego ahora debería ser mucho más divertido y desafiante para los usuarios. En el siguiente tutorial, agregaremos dos cosas más que harán que nuestro juego se sienta más completo: (1) un sistema de puntuación y (2) ¡la muerte de los monstruos! Cubrimos mucho en este tutorial, por lo que si tienes alguna pregunta, cuéntame en los comentarios a continuación. ¡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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.