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: Movimiento del fondo

Scroll to top
Read Time: 12 mins
This post is part of a series called Corona SDK: Build an Endless Runner Game From Scratch.
Corona SDK: Build an Endless Runner Game From Scratch!
Build an Endless Runner Game From Scratch: Using Sprites

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

Bienvenido al segundo tutorial de nuestra serie sobre cómo crear un juego de corredor sin fin desde cero con Corona SDK. En esta sección, veremos cómo poner en marcha rápidamente un nivel básico de desplazamiento en segundo plano. ¡Abre tu editor de texto y comencemos!


Requisitos previos

Si aún no has visto el primer tutorial de esta serie, compruébalo muy rápido antes de pasar a este. Si tienes un poco de experiencia en programación, podrás saltar rápidamente todo el primer tutorial, pero si no la tienes, entonces deberías sacar tiempo para ver algunos de los conceptos básicos de la programación trabajando con Lua y el Corona SDK.


Configuración del proyecto

Entonces, lo primero que debemos cubrir es el archivo build.settings. Este es un archivo que debe ir en la misma carpeta que el archivo main.lua, y es lo que usamos para configurar algunas de las especificaciones de nuestra aplicación. Ahora, dependiendo de la plataforma con la que estés trabajando (Android o iOS), tu archivo build.settings se usará para configurar diferentes cosas. Por ejemplo, los desarrolladores de Android tienen que lidiar con el archivo de manifiesto de sus aplicaciones y sus permisos, mientras que los desarrolladores de iOS tienen que preocuparse por su archivo *.plist. El archivo build.settings es donde se manejarán muchas de esas configuraciones de nivel de aplicación. Una de las cosas buenas de Corona SDK es que podemos combinar nuestra información build.settings de Android e iOS en el mismo archivo build.settings. De esta manera, si estás trabajando en ambos tipos de dispositivos, no tienes que administrar varios archivos build.settings. Para nuestros propósitos en este momento, solo usaremos el archivo build.settings para configurar la orientación de nuestro dispositivo. Por lo tanto, crea un nuevo archivo llamado build.settings en la misma carpeta que vas a tener tu archivo main.lua y pon este código en él:

Esto nos da un dispositivo orientado de forma horizontal en dispositivos iOS y Android. El código es bastante sencillo y repasaremos más configuraciones que querrás usar en futuros tutoriales, pero por ahora esto debería ser todo lo que necesitamos para avanzar. Si deseas profundizar por tu cuenta, puedes encontrar todas las opciones de build.settings aquí. Para asegurarnos de que el archivo funcionó, hagamos una prueba rápida en el simulador. Abre tu archivo main.lua y pon este código allí:

Entonces, después de juntar todo eso, si tu build.settings está en el lugar correcto, deberías tener algo que se vea así:

Landscape OrientationLandscape OrientationLandscape Orientation

Si el dispositivo está en posición vertical (modo de retrato) y no está de costado como arriba (modo horizontal) significa que algo salió mal. Sin embargo, es de esperar que ese no sea el caso, ya que el código anterior es todo lo que hay que agregar. Entonces, ahora que eso está fuera del camino, podemos pasar a poner nuestro juego en funcionamiento. El objetivo de cada uno de los tutoriales es que tengamos una nueva sección de trabajo. Cada uno se basará en el anterior, pero después de cada iteración tendrás algo que debería ser jugable.


Agregar un fondo

Lo primero que vamos a querer hacer es mover nuestro nivel. Vamos a tener varias capas en nuestro juego que se desplazarán a diferentes niveles de velocidad. Esto nos dará la ilusión de lo que nos gusta llamar movimiento "parallax". Cuando estés ejecutando el programa en el simulador, continúa y selecciona iPhone por ahora (si aún no lo has hecho). Cambia esto yendo a Ventana > Ver como> iPhone en el simulador. Los recursos se han diseñado para un dispositivo que se ejecuta a una resolución de 480x320px. Hay, por supuesto, formas de asegurarse de que funcione para todas las resoluciones, pero para nuestros propósitos de prueba, ahora simplemente quédate con el simulador de iPhone. Continúa y coloca este código en tu programa:

Para que esto funcione, continúa y usa las imágenes que proporcioné. Para que el código funcione "tal cual", deberás colocar las imágenes en una carpeta llamada 'images'. La carpeta de imágenes debe estar en la misma carpeta que tu archivo main.lua y build.settings. Una vez que lo hagas, deberías obtener una pantalla que se ve así:

¿Observas cómo la imagen 'backgroundfar' está delante de la imagen 'backbackground'? Imagínate apilando varios platos uno encima del otro. Cuanto más apiles, más estarás cubriendo el primer plato en el que apilaste todo para empezar. Esto también es cierto con las imágenes y el texto que ingresas en tu código. Cada vez que desees agregar algo a la pantalla, a menos que se indique lo contrario, ese elemento agregado cubrirá todo lo que ya has apilado. Vamos a continuar y apilemos algunas cosas más en nuestra pantalla. Agrega esto a tu código debajo de las otras líneas:

Ahora, deberíamos tener otra capa apilada en la parte superior de la siguiente manera:

Ahora, cuando mires esto, notarás que aunque agregamos 2 instancias de bgnear2.png, solo una de ellas aparece en la pantalla. La razón por la que hacemos cosas así se hará un poco más obvia cuando comencemos a mover todo. Por ahora, continúa y cambia tu vista de iPhone a iPhone 4 de la misma manera que lo hicimos antes. Debido a que diseñamos nuestras imágenes con la resolución de un iPhone sin retina (por ejemplo, 480x320px), si cambiamos a una resolución más alta como el iPhone 4 (por ejemplo, 960x640px), todo se reduce y podemos ver más de lo que está sucediendo. Cambia a la resolución del iPhone 4 y deberías ver esto ahora:

Siempre que queramos ver qué está sucediendo, cambiar a la vista más grande será muy útil. Ten en cuenta que el hecho de que no puedas ver algo no significa que no esté pasando nada. Ahora que tenemos esas imágenes de fondo, hagamos que se muevan. A medida que avance en los tutoriales, intentaré documentar todo lo que está sucediendo dentro del código, así que si alguna vez no estás seguro de lo que el código hace, ¡asegúrate de leer los comentarios en el código! Ahora, debajo del código agregado anteriormente incluye esto:

Cuando ejecutes esto, ejecútalo primero mientras aún estás en la vista del iPhone 4. Esto te permitirá ver lo que realmente está sucediendo con todos los diferentes sprites por los que nos movemos. Una vez que lo hayas mirado en esta vista, continúa y vuelve a la vista normal de iPhone para que puedas ver cómo se ve realmente. ¡Con todo eso allí, ahora deberías tener todo en movimiento! Ahora un par de cosas para mirar antes de continuar. ¿Observas que solo hay una instancia de backgroundfar, pero hay dos instancias de backgroundnear? Esto es algo que depende completamente de ti. La razón por la que hay dos es porque para el fondo más cercano (por ejemplo, árboles volando), queremos que se repita una y otra vez. Para el fondo lejano, quería que fuera algo que pasara muy lentamente y que no se repitiera (por ejemplo, normalmente solo hacer esto para fondos que están muy atrás, le da a los niveles una sensación única). Esto es algo que harías cuando tu nivel de desplazamiento va a terminar. Si realmente quisieras un desplazamiento interminable, querrías adoptar el mismo enfoque que utilizaste para el fondo cercano y colocar dos (uno al lado del otro). Al colocar dos (uno al lado del otro), o tres, o tantos como quieras, te permite crear mundos aparentemente grandes con recursos mínimos. Lo único que tenemos que hacer es mover el sprite al otro lado de la pantalla.

Lo siguiente que vamos a hacer es agregar el suelo. Esto tomará un par de pasos más, pero iremos despacio y nos aseguraremos de que todo se coloque en el lugar correcto. Si no hiciste el primer tutorial y no entiendes cómo usar grupos o no entiendes qué son, ahora sería un buen momento para revisarlo. Aquí está el código para incluir (colócalo justo debajo del código donde configuramos backgroundnear2, antes de la función 'update'):

Los comentarios en el código deberían ayudarte a comprender qué hace todo hasta ahora. Con suerte, lo que estás viendo ahora se parece a esto:

Forth BackgroundForth BackgroundForth Background

Ahora, lo último que tenemos que hacer es empezar a mover los bloques. Vamos a seguir y agreguemos el código para eso. Coloca este código después del final de la función 'update':

Antes de que algo se mueva realmente, debemos estar seguros de que realmente llamamos a la función desde la función de actualización. Por lo tanto, dentro de la función 'update' debajo de la línea updateBackgrounds(), llama a la función updateBlocks(). Con eso ahí, deberíamos tener todo en movimiento ahora. Observa que en lugar de mover manualmente los bloques, usamos la función de traducción. Esta función está disponible para cualquier objeto que creamos a través de la llamada newImage. Cualquiera de los métodos funcionará, así que usa uno u otro, o usa una mezcla. Otra cosa que debes notar es que hay un espacio entre algunos de los bloques. Esto sucede porque estamos configurando la ubicación de los nuevos bloques justo al lado de la ubicación anterior del último bloque. El problema es que cuando lo hacemos de esta manera, intentamos colocarlo junto a un objeto en movimiento, por lo que es posible que no siempre golpeemos justo al lado. Este problema se agrandará aún más una vez que intentemos aumentar la velocidad de desplazamiento de los bloques, cuanto más rápido se muevan, mayor será la brecha. Este problema se puede solucionar simplemente agregando una variable de velocidad y haciendo nuestros cálculos basados en esa velocidad. Regresa a las líneas de código donde inicializamos las variables groundMin y groundMax, y agrega esto:

A continuación, reemplaza las funciones updateBlocks() y updateBackgrounds() por estas:

¡Con esas funciones actualizadas, tus bloques deberían moverse bien sin espacios entre ellos!

Una última cosa para hacer esto más parecido a un juego. Regresa a la función 'update' y coloca esta línea de código después de las funciones de actualización:

Una vez que estés allí, podrás ver cómo el nivel se acelera ante tus ojos. El valor exacto, por supuesto, es solo un ejemplo, la rapidez con la que actualices el juego dependerá de tu juego y de tu audiencia. Todo lo que queda en este punto es lanzar un héroe y algunos obstáculos y tenemos un juego. Sin embargo, eso vendrá más tarde, ya que esto concluye el proyecto por ahora. Hacer que todo eso se ejecutara no fue tan malo, y continuaremos agregando muchas funciones en cada iteración. Asegúrate de volver a consultar el siguiente tutorial y, si tienes alguna pregunta o comentario, házmelo saber en los comentarios a continuación.

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.