Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Corona SDK
Code

Construye un juego de corredores sin fin desde cero: usando Sprites

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Corona SDK: Build an Endless Runner Game From Scratch.
Build an Endless Runner Game From Scratch: Background Motion
Build an Endless Runner Game From Scratch: Sprite Interaction

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

¡Bienvenido a la tercera entrega de nuestro juego de corredores sin fin! Este tutorial cubrirá cómo crear sprites a través de hojas de sprites y la animación de nuestro personaje del juego. Hasta ahora, en nuestro juego deberíamos tener una buena vista con tres capas de imágenes que se desplazan a diferentes velocidades, ¡lo que hace que sea un poco impresionante para el desplazamiento de Parrallax! El siguiente paso lógico para nosotros será agregar nuestro héroe al juego. Vamos a hacer esto en dos pasos. Este tutorial cubrirá el primer paso. El siguiente tutorial cubrirá en realidad agregar el héroe a nuestro juego existente y agregar controles para que siga cada uno de nuestros comandos.


Introducción a los Sprites y Hojas de Sprite

Ahora, antes de comenzar con el juego, hablemos rápidamente sobre sprites, hojas de sprite y animación en términos generales. Si tiene experiencia con gráficos, animaciones o desarrollo de juegos, este es probablemente un tema familiar para usted. Sin embargo, para nuestra discusión, asumiremos que no tiene experiencia con ninguno de los temas mencionados anteriormente. Entonces, comencemos con la animación. La animación en los juegos se realiza exactamente de la misma manera que se hace en dibujos animados y películas. Piensa en lo que sucede cuando vas al cine y ellos comienzan la película. Cuando está viendo la película, en realidad no está viendo a la gente moverse y hablar, pero está viendo una serie de imágenes parpadeantes con sonido que se reproduce a lo largo del carrete al mismo tiempo, dando la ilusión de que está viendo algo vivo y respirando. Esto es lo mismo que sucede con nuestros juegos. Creamos la ilusión de "vida" parpadeando rápidamente las imágenes en la pantalla. Cuando esto se hace lo suficientemente rápido, se convierte en una animación suave. Entonces, la pregunta es cómo podemos obtener estas animaciones suaves en nuestro juego. La respuesta es usar sprites. El Corona SDK proporciona la funcionalidad de sprites para nosotros, por lo que lo único que nos tiene que preocupar es crear nuestros sprites y asignarles nuestras animaciones. Echa un vistazo al siguiente gif animado:

Corona SDK Figure - Monster Run

Cuando ves esa animación, parece un pequeño monstruo corriendo y agitando los brazos. Lo que realmente está mirando es una serie de imágenes, tomadas de una sola hoja de sprites, que parpadean una y otra vez. Tenga en cuenta que la última imagen de la secuencia no se incluye en la animación. Esta es una hoja de sprites simple, y es así como configurarás las imágenes para tu juego también.

Monster Side Scrolling

Por lo tanto, la pregunta de por qué usamos las hojas de sprites probablemente se te ha ocurrido. La respuesta es doble y bastante simple: memoria y simplicidad. Quiero que veas las cuatro imágenes que hice a continuación. Todo muy simple, diseño de tablero a cuadros (aunque los sprites son muy pequeños por lo que no parecen ser eso, pero ábralos en cualquier programa y amplíelos y verá el tablero de ajedrez: D), con tamaños que van desde 8x8 todo el camino hasta 256x256.

Corona SDK Figure - Sprite Example 1
Corona SDK Figure - SpriteExample 2
Corona SDK Figure - Sprite Example 3
Corona SDK Figure - Sprite Example 4

La primera razón, la memoria, se hará muy evidente si descarga las imágenes y observa sus tamaños. Note que la diferencia de tamaño va desde 8x8 hasta 256x256. Si no quieres descargarlos, te ahorraré los 30 segundos que habría tomado.

Supongamos que todas nuestras imágenes tendrán una dimensión de 16x16 píxeles (por supuesto, esto no es realista, pero nuestro ejemplo también es válido para imágenes mucho más grandes). Las imágenes son 16x16 y ocupan la friolera de 2.74KB cada una. Digamos que tenemos 256 sprites que conforman nuestro personaje. Estas imágenes pueden incluirlo caminando en diferentes direcciones, saltando, disparando un arma o haciendo cualquier otra cosa que desees que hagan tus personajes. Si los pusiéramos en archivos PNG 16x16 individuales (PNG es un formato común para los juegos móviles, ya que tienen una huella de memoria muy pequeña), se necesitarían hasta 701.44 KB para mantener todas las imágenes. Eso no parece tan grande porque la mayoría de los dispositivos tienen mucha memoria, ¿verdad? Sí, pero recuerda que es probable que tengamos cientos de esas imágenes en nuestro juego. Aun así, 701K para una pequeña imagen en un dispositivo móvil es demasiado grande. En el iPhone, la mayoría de los juegos pequeños intentan mantenerse por debajo de 20 MB porque es el archivo más grande que puedes descargar a través de 3G. Los archivos más grandes se deben hacer a través de WiFi o descargarse a través de iTunes. Si crees que un límite de 20MB es malo, ¡solía ser de 10MB! Ahora, veamos por qué es beneficioso agrupar a nuestros sprites en hojas de sprites.

Digamos que coloca esos 256 sprites 16x16 en una sola hoja de sprites. ¿Qué tan grande crees que sería el archivo resultante? Si descargó los archivos y miró los tamaños, sabe que la imagen de 256x256 es de solo 3.42KB. ¡Eso es un ahorro de 698.02KB! ¡¿¡Pero, cómo es posible!?! La respuesta tiene que ver con la forma en que las imágenes se escalan y se comprimen y muchas otras cosas técnicas que no vamos a analizar. Lo importante para quitar es que duplicar una imagen en tamaño no necesariamente la duplica en la memoria. De hecho, si observa los otros tamaños de las imágenes, notará que el tamaño de las imágenes del sprite 16x16 a 128x128 solo se mueve hasta 2.98KB, y el 256x256 solo se mueve hasta 3.43KB. Lo sé, genial, ¿verdad?

La segunda razón por la que hacemos esto es por simplicidad. Las hojas de Sprite proporcionan una buena manera de organizar todas nuestras imágenes. Si alguna vez has jugado un juego en Atari, NES, Sega Saturn, SNES, Gameboy o casi cualquier cosa que sea 2D, entonces has visto hojas de sprites en el trabajo. Algunos de esos juegos tienen miles y miles de sprites en ellos. Participa en un juego como Final Fantasy 3 en la Super Nintendo (que todos sabemos que es realmente Final Fantasy 6, ¿verdad?). Tienen docenas de personajes, cientos de enemigos, hechizos, objetos, tipos de terreno y probablemente varias docenas de otras cosas que no menciono. Entonces, ¿cómo hacen un seguimiento de todos esos sprites individuales? Una vez más, la respuesta es hojas de sprites. Imagina que en lugar de tener docenas de sprites o spritas para cada personaje, tenían todas las imágenes de cada personaje en 1 hoja. De esa manera siempre sabían exactamente a qué referirse. La vida se vuelve exponencialmente más fácil cuando se trabaja en grandes proyectos. Como referencia rápida, busque en la imagen de Google "Finaly Fantasy 6 Sprite Sheets" y consulte algunas de las hojas de sprites de Final Fantasy para tener una idea de cómo se usan en los juegos grandes.

El proceso general de creación de sprites con animaciones es un proceso bastante simple. Abre un archivo en blanco y llámalo main.lua. Lo primero que debemos hacer es configurar nuestro controlador de sprites. Adelante y pon el siguiente código en:

Como Corona ya ha hecho la mayor parte del trabajo por nosotros, nos queda un proceso bastante simple. Esto es lo que necesitas recordar. Desde nuestro controlador de sprites creamos una hoja de sprites. Desde nuestra hoja de sprites creamos 'conjuntos'. Desde nuestros sets, creamos animaciones y objetos de sprites. Para que este método de creación de hojas de sprites funcione, cada sprite debe tener la misma dimensión. Así que cada cuadro de nuestro pequeño monstruo es 100x100. En este ejemplo hay una larga hoja de sprites. Para que esto funcione de la mejor manera y de la manera más eficiente, las hojas de sprites se deben hacer siempre en potencias de 2. 2x2, 4x4, 16x16, 32x32, 64x64, etc ... Por supuesto, nunca usarás nada tan pequeño en su mayor parte , pero esto es válido hasta 1024x1024. Teóricamente, puedes ir incluso más grande que eso, sin embargo, cada dispositivo tiene un tamaño máximo de textura y, si superas ese tamaño, tu aplicación no podrá cargar las hojas de sprites. Por lo tanto, antes de agregar hojas de sprites que sean 4096x4096, ¡asegúrese de hacer su investigación para asegurarse de que su dispositivo de destino pueda manejarlo! Otra cosa a tener en cuenta es que cuando tenga sus imágenes en un cuadrado, las leerá de la misma manera que lo haría con un libro. De arriba a abajo, de izquierda a derecha, así:

1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

Así que cuando le digas a tu sprite que mire los marcos 6 a 12, sabrá automáticamente dónde ir.

Agregue este código a su proyecto debajo de la línea requerida:

Ahora que hemos creado nuestra hoja de sprites y hemos hecho un objeto de spritis a partir de eso, inicialicemos algunos de los conceptos básicos que necesitaremos para él.

Agregue esto debajo del último bit de código que ingresó:

Ese código colocará nuestro sprite en el centro de la pantalla. A continuación agregue este código:

Ejecuta este código y deberíamos tener nuestro pequeño monstruo corriendo en su lugar en el centro de la pantalla. Eso es realmente todo lo que hay para crear sprites animados a partir de hojas de sprites. Los usaremos un poco más en profundidad en los siguientes tutoriales. Para obtener una referencia completa en las hojas de sprites, puede consultar la referencia de Corona SDK. Esto es todo lo que vamos a cubrir sobre el tema por ahora, ¡así que espero que sea suficiente para que comience! Para obtener un efecto final antes de que hagas que nuestro monstruo corra por la pantalla, agrega el siguiente código al final de tu código:

Cosas fáciles Elimina todos los comentarios que hice en el código que explica las cosas y verás lo fácil que Corona hace que coloque bonitos dibujos animados. Si tiene alguna pregunta o comentario ¡hágamelo saber!

Corona SDK - Running Figure
Advertisement
Advertisement
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.