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: Fin del juego y puntuación

Read Time: 10 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: Obstacles and Enemies
Build an Endless Runner Game From Scratch: Boss Battles

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

En este tutorial crearemos dos características nuevas que realmente agregarán algo de brillo a nuestro juego: La puntuación y el fin del juego. Puede parecer mucho trabajo, pero nuestro juego está configurado para que esto sea rápido y fácil de hacer. ¡Así que incluyamos esas funciones y completemos nuestro juego!

La primera característica que abordaremos es el sistema de puntuación. Para tener un buen sistema de puntuación, necesitamos agregar un texto visualmente agradable a nuestro juego. Puedes comenzar descargando una nueva fuente de tu elección o descargando la que he incluido en el archivo de descarga de este tutorial. Si eliges el tuyo, asegúrate de descargar un archivo ".ttf". Hay muchos sitios excelentes disponibles con fuentes gratuitas; puedes comenzar simplemente buscando "fuentes gratuitas" y navega hasta que encuentres algo que te guste. El archivo de descargas se configura de la misma manera que en los proyectos anteriores. Hay una carpeta nueva y una vieja: la carpeta vieja contiene todo lo que hemos hecho hasta ahora, y la carpeta nueva contiene el proyecto tal como se verá al final de este tutorial.

Una vez que tengas eso en la carpeta que contiene tu archivo main.lua, continúa y abre tanto el archivo main.lua como tu archivo build.settings y hagámoslo funcionar. Lo primero que vamos a hacer es trabajar con nuestro archivo build.settings. Es a partir de aquí que le avisaremos al programa para que incluya la fuente personalizada.

Cambia tu archivo build.settings para que se vea así:

Ten en cuenta que esto será igual incluso si tienes un dispositivo Android. Soy principalmente un desarrollador de iOS cuando se trata de desarrollo de juegos, así que no lo he probado en un dispositivo Android. Sin embargo, este script exacto debería funcionar tanto en tu dispositivo Android como en tu dispositivo iOS. (Si algún usuario de Android que esté revisando este tutorial encuentra problemas, por favor que me avise para investigarlo más a fondo). Ahora que el código anterior está en su lugar, puedes continuar y cerrar ese archivo, ya que no necesitaremos tocarlo más. Verificaremos que funcionó agregando algo de texto al juego.

¡Abramos nuestro archivo main.lua y demos a nuestros jugadores un sistema de puntuación! Justo después de donde creamos nuestros grupos de visualización, inserta lo siguiente:

Lo siguiente que haremos es agregarlo a nuestra pantalla displayGroup. Pon esto después de que todos los otros grupos se hayan agregado al grupo de pantallas:

Adelante, ejecuta eso. Esto progresará muy rápidamente, así que asegúrate de que todo funcione correctamente antes de continuar. Deberías ver algo como esto:

Una vez que lo hayas probado para asegurarte de que funciona, actualizaremos la puntuación para que tenga un valor inmediato en nuestro juego. En la función updateBlocks() justo después de la línea que dice:

if((blocks[a]).x < -40) después, pon este código:

Esto simplemente actualizará nuestra puntuación en un punto cada vez que un bloque pase desde el lado izquierdo de la pantalla y se vuelva a insertar a la derecha. Esto se puede utilizar de muchas formas diferentes, por supuesto. Es una buena idea actualizar la puntuación aquí porque la mantendrá constante en todos los juegos. Basa las puntuaciones en la distancia que han recorrido los jugadores. De hecho, si quisiera registrar qué tan lejos han viajado, simplemente almacenarías la puntuación en la variable denominada distanceTraveled, meters o algo similar.

La siguiente característica que abordaremos aborda lo que sucede cuando un jugador muere. Lo haremos simple en este tutorial, pero deberías poder ver cómo puedes incorporar más en esto una vez que hayamos terminado. Ten en cuenta que aumentar la puntuación es muy sencillo de hacer. Digamos que querías aumentar la puntuación en cinco cada vez que matas un fantasma o cuando esquivas un obstáculo. Simplemente coloca el código anterior en la sección de detección de colisiones justo donde destruyes dichos objetos.

Cuando nuestro personaje muera vamos a hacer varias cosas:

1) Detener el movimiento del jugador.

2) Hacer que el jugador gire en círculos para lograr un efecto dramático. Estamos haciendo esto aquí porque solo quiero mostrarte la función de rotación para mostrar objetos. Por supuesto, puedes cambiar su muerte en lo que quieras que sea.

3) Mostrar una pantalla sobre el juego que permite al jugador reiniciar el juego si así lo desea.

Primero, debemos asegurarnos de que la velocidad del juego esté establecida en 0. Luego, debemos agregar una variable a nuestro objeto de visualización del monstruo. Haz esto agregando la siguiente línea de código donde instanciamos 'monster':

Con eso en su lugar, verificaremos su estado en un par de lugares diferentes en el juego. El primer cambio que vamos a hacer es en updateMonster(), continúa y haz que updateMonster() se vea así:

Ten en cuenta que antes de actualizar la posición del monstruo, primero verificamos si el jugador está vivo o no. Si el jugador está vivo, simplemente avanzamos como lo haríamos normalmente. Si el jugador no está vivo, enviamos a nuestro monstruo a un giro sin fin. A continuación, debemos cambiar el estado de monster.isAlive. Ve a la función checkCollisions() y haremos los cambios. Dentro del controlador de colisiones, la posición de nuestro monstruo se compara con 3 elementos diferentes para detectar colisiones: bloques, fantasmas y picos. En cada una de estas secciones establecemos la velocidad del juego en 0 cuando se detecta una colisión. Lo que debes hacer ahora es agregar este código a cada una de las tres secciones justo después de que establezcamos la velocidad en 0.

Ahora está configurado para que cualquier animación que se esté reproduciendo se detenga cuando mueras. Además, el monstruo girará en su lugar debido al código que ya agregamos a updateMonster(). Ejecuta el juego de nuevo y deberías ver esto:

En este punto, hemos hecho dos de las tres cosas que necesitábamos para mejorar el proceso de muerte en nuestro juego. Lo último es hacer una pequeña pantalla de muerte que le permita al jugador reiniciar el juego si así lo desea. Vuelve a la parte superior del archivo donde agregamos todos los displayObjects y agregamos esto:

Debido a que este es un menú simple, me adelanté y lo convertí en una gran imagen. Utilicé el mismo método que hemos estado haciendo para el resto de las imágenes y lo guardé fuera de la pantalla para su uso posterior. Ahora lo que tenemos que hacer es mostrar esto en la pantalla cada vez que muere nuestro jugador. Regresa a la sección del código con la que acabamos de trabajar donde establecemos monster.isAlive = false. Justo debajo de eso, agrega lo siguiente a cada una de esas secciones:

Asegúrate de agregar:

a tu código para que gameOver se muestre correctamente. Ponlo como lo último que se agregará justo después del textScore. De esa forma seguro que será visible cuando lo movamos.

Esto pondrá la pantalla "Game Over" justo a la derecha del monstruo giratorio para que podamos ver nuestra puntuación final en la parte superior izquierda de la pantalla. Por último, para que todo esto funcione, debemos hacer que realmente haga algo cuando lo tocamos. Por lo tanto, lo siguiente que editaremos será la función touched(). Cambia tu función touched para que se vea así:

Observa que solo hicimos un cambio en esto: En lugar de verificar primero en qué lado de la pantalla está el toque (cómo determinamos el salto o el disparo), verificamos si se tocó el objeto gameOverdisplay. Si no fue tocado y el monstruo está vivo, sigue saltando y disparando como de costumbre. Pero si se tocó gameOver, significa que el juego terminó porque ahora está visible y simplemente llamamos a la función restartGame(). En algún lugar por encima de eso, agrega la función restartGame() y eso hará todo por nosotros.

Ejecuta eso y, con suerte, ahora deberías tener una pequeña función de pantalla de muerte que puedes tocar para reiniciar el juego.

¡Con esos pequeños cambios en su lugar, ahora deberíamos tener un juego completamente funcional! El jugador gana una puntuación y manejamos la muerte con un poco más de gracia. Todo lo que hicimos aquí fue muy simple, pero espero que ahora tengas una idea de cómo puedes crear menús más grandes o cómo puedes hacer una escena de muerte más intrincada cuando mueras. Una forma fácil sería simplemente agregar un par de animaciones nuevas que se ajusten a las diferentes muertes, pero te dejaré decidir cuál se adapta mejor a tu juego. Si tienes alguna pregunta sobre los cambios que hicimos, dímela en los comentarios. ¡Gracias por seguirnos!

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.