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

Craft Más Allá de los Básicos: Sprites

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Crafty Beyond the Basics.
Crafty Beyond the Basics: Mouse and Touch Events
Crafty Beyond the Basics: Sounds and Scenes

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En todos los tutoriales Crafty hasta este punto, has estado usando cajas cuadradas y rectangulares para entender diferentes conceptos como animación y eventos de teclado y táctiles. Mientras que esta es una gran manera de aprender más sobre la librería, probablemente usarás imágenes en tus juegos reales.

En este tutorial, aprenderás cómo cargar hojas de sprites para usar diferentes imágenes en tu juego. Después de eso, aprenderás cómo animar diferentes personajes usando animación de sprites.

Cargando una Hoja de Srpites

Para aquellos que no están familiarizados con hojas de sprites, son archivos de imagen que contienen varios gráficos más pequeños acomodados en una cuadrícula.

No puedes solo cargar directamente una hoja de sprites en Crafty y comenzar a usarla. También tendrás que decirle el ancho y alto de los diferentes azulejos o sprites en tu hoja de sprites. También puedes darle nombres específicos a imágenes individuales. Por ejemplo, un sprite con una pequeña piedra puede ser nombrado "piedra_pequeña" para fácil referencia. Recordar un nombre de azulejo es mucho más fácil que recordar las coordenadas reales de diferentes imágenes.

Vamos a usar la siguiente hoja de sprites por tokka en diferentes demos de este tutorial.

The sprites used in the tutorial

Tiene muchas imágenes que pueden ser usadas cuando el jugador está caminando, saltando, de pié, o recibiendo un disparo. En este caso, el ancho y alto de la mayoría de los azulejos son 80 px y 94 px respectivamente. Algunas hojas de sprites podrían tener también padding extra alrededor de azulejos individuales o la hoja de sprites completa. Estos pueden ser especificados mientras se carga la hoja de sprite usando las propiedades paddingXpaddingY, y paddingAroundBorder.

Aquí está el código que necesitamos cargar en nuestro juego:

Los azulejos son referenciados usando pares de números. El primer número determina la columna de nuestro sprite, y el segundo número determina su fila. Los números están basados en 0. Por ejemplo, el sprite en la primera columna y fila puede ser accedido usando [0,0]. De manera similar, el sprite en la tercera columna y cuarta fila puede ser accedido usando [2,3]. como mencioné antes, puedes darle diferentes nombres a sprites individuales para facilidad de uso.

Generando Sprites Estáticos

Una vez que has cargado una hoja de sprites, puedes generar las imágenes en la pantalla usando el siguiente código:

Los atributos x y y determinan la ubicación en la cuál serán generados los sprites. También puedes establecer el ancho y alto de sprites individuales usando los atributos w y h.

Ya que el sprite tiene un componente 2D, puedes aplicar todas las propiedades y atributos del componente 2D a estas imágenes. Por ejemplo, puedes voltear a nuestro héroe horizontalmente para que encare a la otra dirección usando this.flip("X"). De manera similar, puedes rotar un sprite usando el atributo rotation o hacerlo transparente usando el atributo alpha.

Digamos que necesitas  generar solo parte de un sprite dado sobre el lienzo. Puedes hacerlo con la ayuda del método .crop(Number x, Number y, Number w, Number h). Los primeros dos parámetros determinan los valores de compensación x y y del sprite. Los últimos dos parámetros determinan el ancho y alto del sprite recortado. Todos los valores deberían ser especificados en pixeles.

Animando Sprites

Hasta este punto, has estado moviendo diferentes entidades cambiando sus atributos x y y. No fue un problema ya que estabas moviendo solo cajas rectangulares la mayoría del tiempo. Sin embargo, mover a nuestro personaje principal deslizándolo así no se verá natural. Agregar animación a objetos como monedas que el jugador puede recolectar también hará más disfrutable el juego.

Toda las animaciones relacionadas con sprites requieren que agregues el componente SpriteAnimation a la entidad. Este componente trata a las distintas imágenes en un mapa de sprites como cuadros de animación.

La información sobre una animación está almacenada en el objeto reel. El objeto reel tiene cinco propiedades diferentes.

  • un id que es el nombre del reel
  • un arreglo frames que tiene una lista de fotogramas para la animación en el formato [xpos, ypos]
  • una propiedad currentFrame que devuelve el índice del fotograma actual
  • una propiedad easing que determina cómo la animación debería continuar
  • una propiedad duration que establece la duración de la animación en milisegundos

Hay cuatro diferentes eventos que pueden ser disparados por una animación de sprite. Estos son:

  • StartAnimation: Este evento es disparado cuando la animación comienza a reproducirse o se reanuda desde un estado pausado.
  • AnimationEnd: Este evento es disparado cuando una animación termina.
  • FrameChange: Este evento es disparado cada vez que el fotograma en el carrete actual cambia.
  • ReelChange: Este evento es disparado cuando el carrete mismo es cambiado.

Todos estos eventos reciben el objeto reel como parámetro.

Además del objeto reel, también hay un método .reel() que es usado para definir animaciones de sprites. Puedes usar el método .animate() para reproducir cualquiera de las animaciones definidas.

El proceso de animación de sprites comienza creando un sprite estático en el lienzo.

La imagen hero_walking en el caso de arriba es la primer imagen que el usuario ve antes de la animación. Los atributos son usados para especificar la ubicación de la entidad actual. Una vez que la entidad ha sido creada, puedes usar el método .reel() para definir la animación actual.

Este método acepta tres parámetros. El primer parámetro es el Id de la animación siendo creada. El segundo parámetro es usado para establecer la longitud de la animación en milisegundos, y el tercer parámetro es un arreglo de arreglos conteniendo la posición de columna (x) y fila (y) de fotogramas sucesivos. En este caso, el arreglo contiene la posición de todos los sprites en la segunda fila.

Otra versión de este método requiere cinco parámetros. Los primeros dos parámetros son el Id del carrete y longitud de animación. El tercer y cuatro parámetros son usados para establecer la posición inicial x y y para la animación en el mapa de sprite. El último parámetro establece el número de fotogramas secuenciales en la animación. Cuando se establece a un valor negativo, la animación se reproducirá al revés.

La animación del carrete de arriba podría también ser creada usando el siguiente código:

Mientras esta versión es sucinta, es un poco limitada. El método solo es útil si todos los sprites que quieres incluir en la animación están en una solo fila. Además, la animación mostrará estas imágenes en el orden en que aparecen en la hoja de sprites.

Después de que has definido la animación, puedes reproducirla usando el método .animate( reel_Id [, loopCount]). El primer parámetro es la animación que quires reproducir, y el segundo parámetro determina el número de veces que quieres reproducir esta animación. Las animaciones son reproducidas una vez por defecto. Establecer loopCount a -1 reproducirá la animación de manera indefinida.

En ciertas situaciones, podrías querer reproducir una animación solo una vez basado en un evento. Por ejemplo, una animación de salto debería ser reproducida cuando el usuario presiona un botón para hacer saltar al jugador. Puedes probarlo en el demo de arriba. Presiona la tecla Flecha Arriba hará al segundo sprite saltar. Aquí está el código para detectar la presión de la tecla:

También puedes pausar y reanudar a medio camino usando los métodos .pauseAnimation() y .resumeAnimation().

Si un solo sprite tiene múltiples animaciones adjuntas a este, puedes determinar si una animación específica se está reproduciendo actualmente usando el método .isPlaying([String reelId]). Si no se proporciona Id, revisará si cualquier animación se está reproduciendo en absoluto.

Conclusión

Después de completar este tutorial, deberías poder cargar tus propias hojas de sprites en Crafty y usarlas para representar diferentes entidades de juego en vez de varios rectángulos. También puedes aplicar diferentes animaciones a una entidad basado en diferentes eventos. Debería recordarte de que he usado Crafty versión 0.7.2 en este tutorial, y los demos podrían no funcionar con otras versiones de la librería.

JavaScript se ha vuelto uno de los lenguajes de-facto para trabajar en la web. No es sin sus curvas de aprendizaje, y hay muchos frameworks y librerías para mantenerte ocupado, también. Si estás buscando recursos adicionales para estudiar o usar en tu trabajo, revisa lo que tenemos disponible en el Envato marketplace.

En el siguiente tutorial, aprenderás cómo agregar sonidos en tu juego.

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.