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 'Endless Runner' desde cero: Interacción de sprites

Scroll to top
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: Using Sprites
Build an Endless Runner Game from Scratch: Adding Events

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

Bienvenido al cuarto tutorial de nuestra serie sobre cómo crear un juego de carrera desde cero con Corona SDK. En esta sección, agregaremos gravedad, detección de colisiones y la capacidad de saltar al sprite del juego. ¡Vámonos!

Con suerte, los tutoriales hasta ahora han sido útiles y fáciles de seguir. Como siempre, si tienes alguna pregunta, ¡deja un comentario! La última vez repasamos cómo crear bonitos sprites a partir de hojas de sprites. Hoy, vamos a tomar lo que aprendimos en el último tutorial e incorporar ese monstruo de sprites a nuestro juego real. Una vez que estés dentro, aprenderemos cómo controlarlo y hacer que nuestro juego sea interactivo. La forma en que voy a hacer esto es tomar el código fuente que teníamos del tutorial de movimiento de fondo y agregar primero nuestro material de animación de monstruos. Si descargas los archivos para el tutorial, notarás que hay 2 carpetas, llamadas "old" y "new". 'Old' contiene todos los archivos del tutorial de movimiento en segundo plano que necesitas para empezar a trabajar en este tutorial. 'New' contiene todo el código y todo lo que tendrás una vez que hayas completado este tutorial. Entonces, continúa y descarga los archivos y abre el archivo main.lua de la carpeta anterior. Voy a dividir todo lo que hacemos en tres secciones. El primero cubrirá la organización de nuestro juego, al que haremos algunos cambios. El segundo cubrirá tomar lo que aprendimos en el tutorial de uso de sprites e implementarlo aquí. Repasaremos esa sección con bastante rapidez, ya que los detalles de lo que está sucediendo ya se han cubierto. ¡La tercera sección le dará a nuestro pequeño tipo gravedad, detección de colisiones y la capacidad de saltar!

Hasta ahora ponemos nuestras imágenes en el código en el orden en que queremos que aparezcan en pantalla. Cuanto antes se llamen, más atrás aparecerán en las capas de la pantalla. Esto funciona, pero hay una mejor manera de hacerlo. No siempre será realista poner cada imagen en el orden exacto en que deseas que aparezcan, y es posible que en algún momento desees cambiar el orden en que aparecen los objetos en la pantalla. Entonces, abre el archivo main.lua de la carpeta anterior y comenzaremos a hacer algunos cambios.

Lo primero que vamos a hacer es agregar la siguiente línea en la parte superior de la página justo debajo de la línea display.setStatusBar.

A continuación, agrega las siguientes dos líneas justo debajo de donde creamos los bloques del grupo de visualización:

El grupo 'player' de visualización será el grupo de visualización que contiene nuestro sprite héroe y el grupo 'screen' será un grupo de visualización que contiene todo lo demás. Pongamos más código y luego terminaré de explicar.

Inserta el siguiente código debajo del bucle 'for' donde instanciamos nuestros bloques de tierra:

Ahora, repasemos ese enorme bloque de código.

Las dos primeras secciones las vamos a saltar. Esas secciones solo crean nuestro sprite monstruo a partir de nuestra hoja de sprites. Si tienes alguna pregunta sobre lo que está sucediendo allí, haz una revisión rápida del último tutorial donde revisamos la creación de sprites a partir de hojas de sprites. En la siguiente sección, he creado una forma de rectángulo básica llamada collisionRect, así es como vamos a hacer nuestra detección de colisiones para que nuestro monstruo pueda interactuar con el mundo. Esencialmente, lo que está sucediendo es que estamos creando un cuadrado invisible que va frente a nuestro monstruo. Si haces que el rectángulo sea visible (es decir, simplemente cambia el alfa a 100), verás que se encuentra justo en frente del monstruo y flota un poco por encima del suelo.

Figure 1Figure 1Figure 1

La razón por la que hacemos esto es que nos proporcionará un sistema de colisión que es fácil de manejar. Debido a que estamos haciendo un juego de carreras sin fin, nos preocupa principalmente lo que sucede justo en frente del monstruo (normalmente, lo que viene detrás de él no lo matará). Además, lo levantamos un poco del suelo para que la caja nunca choque con el suelo debajo del monstruo, solo cosas frente a él. El propio monstruo se encargará de las colisiones con el suelo, solo necesitamos algo para manejar las colisiones con objetos externos que podrían golpearlo de frente. Esto tendrá aún más sentido en los próximos dos tutoriales a medida que agreguemos cosas para que nuestro monstruo se encuentre.

La siguiente sección es donde insertamos todo en la pantalla. Por lo tanto, la pantalla es solo un grupo de visualización, no tiene nada de mágico. Sin embargo, al hacer esto, nos da una gran ventaja sobre cómo colocamos las cosas en la pantalla antes, y así es como tenemos control sobre cómo se ordenan las cosas. Ahora, independientemente de cuándo creamos los sprites, ahora aparecerán en el orden en que los coloquemos en la pantalla del grupo screen. Entonces, si decidimos que el monstruo debe ir detrás del fondo cerca de los objetos, simplemente necesitaríamos insertarlos en el grupo 'screen' después de haber insertado el monstruo.

Figure 2Figure 2Figure 2

A continuación, modifica tu función update() para que se parezca a esta:

Esto llamará al resto de las funciones que necesitamos ejecutar para asegurarnos de que todo esté bien actualizado. Una cosa a tener en cuenta al trabajar con la función de actualización es que el orden sí importa. Para nuestro pequeño juego de carrera, el orden no es tan importante, ya que se llama treinta veces por segundo, por lo que cualquier cosa que se actualice se detectará extremadamente rápido. Además, no hay datos cruciales de que las funciones se puedan realizar entre sí. Sin embargo, habrá ocasiones en las que deberás tener cuidado con el orden en el que colocas las cosas. Esto es especialmente cierto cuando tienes varias funciones que actualizan las mismas variables de diferentes maneras. Por lo general, sin embargo, esto es solo una cuestión de usar el sentido común y podrás pasar lógicamente qué cosas deben manejarse primero.

Aquí están el resto de funciones que harán el trabajo que acabamos de llamar desde la función de actualización. Ponlos debajo de la función de actualización. Asegúrate de leer los comentarios, ya que los usaré para describir lo que está sucediendo.

Observa que la función 'touched' nunca se llama. En la parte inferior del código justo debajo de donde usa el temporizador que llama a la función de actualización, coloca este código:

Repasemos un par de cosas del código que acabamos de introducir. La función 'touched' pasa en un evento. Cada "evento" tiene sus propiedades. Cuando decimos event.phase == "began", le estamos diciendo a Corona que queremos ser notificados tan pronto como el usuario toque la pantalla. Por el contrario, si hubiéramos dicho "finalizar" en lugar de 'comenzar', le estaríamos diciendo a Corona que no nos notifique hasta que el usuario haya levantado el dedo de la pantalla. También se almacenan en el evento las coordenadas del toque. Ésta es la razón por la que es importante usar comenzó y terminó. ¿Quieres conocer la ubicación de cuándo el usuario toca la pantalla por primera vez o cuándo la suelta? En la mayoría de las situaciones de juego, querrás saber tan pronto como el usuario toque la pantalla, pero no siempre. Para obtener una referencia completa de los eventos táctiles, puedes ir aquí (https://developer.anscamobile.com/reference/index/events/touch).

Entonces, cuando ejecutes esto, notarás que solo saltas si tocas el lado izquierdo de la pantalla. La razón por la que lo hacemos es porque queremos reservar el lado derecho de la pantalla para otras cosas, como disparar bolas de fuego. Eso no está incluido en el alcance de este proyecto, ¡pero llegaremos pronto! Con todo eso allí, ahora deberíamos estar listos para comenzar.

Figure 3Figure 3Figure 3

¡Con todo en su lugar, ahora deberías tener un monstruo que pueda correr y saltar desde el suelo! ¡Poco a poco, nuestro pequeño tutorial empieza a parecer un juego! Como siempre, si tienes alguna pregunta, dímela en la sección de comentarios a continuación y ¡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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.