Share
En todos los tutoriales de Crafty hasta este punto, has estado utilizando casillas cuadradas o rectangulares para entender diferentes conceptos como animación y teclado o eventos táctiles. Si bien esta es una excelente manera de aprender rápidamente sobre la biblioteca, lo más probable es que te guste usar 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 la animación de sprites..
Para aquellos que no están familiarizados con las hojas de sprites, son archivos de imágenes que contienen varios gráficos más pequeños dispuestos en una cuadrícula. Cada uno de estos gráficos o sprites más pequeños se puede usar solo o junto con otras imágenes para animar diferentes objetos..
No puedes cargar directamente una hoja de sprites en Crafty y comenzar a usarla. También tendrás que decirle el ancho y la altura de diferentes azulejos o sprites en tu hoja de sprites. También puede dar nombres específicos a imágenes individuales. Por ejemplo, un sprite con una pequeña piedra puede ser llamado "small_stone" para una fácil referencia. Recordar un nombre de mosaico es mucho más fácil que recordar las coordenadas reales de diferentes imágenes.
Vamos a utilizar la siguiente hoja de sprites por tokka en diferentes demostraciones de este tutorial..
Tiene muchas imágenes que se pueden usar cuando el jugador camina, salta, permanece inactivo o recibe un disparo. En este caso, el ancho y el alto de la mayoría de los mosaicos son 80 px y 94 px respectivamente. Algunas hojas de sprites también pueden tener relleno adicional alrededor de los azulejos individuales o la hoja de sprites como un todo. Estos se pueden especificar al cargar la hoja de sprites usando el rellenoX, relleno, y paddingAroundBorder propiedades.
Aquí está el código que necesitamos para cargar la hoja de sprites anterior en nuestro juego:
var game_assets = "sprites": "hero_spritesheet.png": tile: 80, tileh: 94, map: hero_idle: [0, 0], hero_walking: [1, 1], hero_jumping: [2, 3] , hero_sitting: [0, 4]; Crafty.load (game_assets);
Se hace referencia a los mosaicos utilizando un par 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 cero. Por ejemplo, se puede acceder al sprite en la primera columna y la primera fila usando [0, 0]. Del mismo modo, se puede acceder al sprite en la tercera columna y la cuarta fila usando [2, 3]. Como se mencionó anteriormente, puede dar diferentes nombres a los sprites individuales para facilitar su uso.
Una vez que haya cargado una hoja de sprites, puede renderizar las imágenes en la pantalla usando el siguiente código:
Accentsconagua
var idle_hero = Crafty.e ("2D, Canvas, hero_idle") .attr (x: 10, y: 10);los X y y los atributos determinan la ubicación en la que se representarán los sprites. También puede establecer el ancho y la altura de los sprites individuales utilizando el w y h atributos.
Dado que el sprite tiene una 2D componente, puede aplicar todas las propiedades y atributos de la 2D Componente a estas imágenes. Por ejemplo, puedes voltear a nuestro héroe horizontalmente para que mire hacia la otra dirección usando este.flip ("X"). De manera similar, puedes rotar un sprite usando el rotación atribuirlo o hacerlo transparente mediante el uso de la alfa atributo.
var sitting_hero = Crafty.e ("2D, Canvas, hero_sitting") .attr (x: 440, y: 250) .flip ("X");Digamos que necesita representar solo parte de un sprite dado en el lienzo. Puedes hacerlo con la ayuda del .recorte (Número x, Número y, Número w, Número h) método. Los primeros dos parámetros determinan los valores de desplazamiento x e y del sprite. Los dos últimos parámetros determinan el ancho y la altura del sprite recortado. Todos los valores deben especificarse en píxeles..
Hasta este punto, ha estado moviendo diferentes entidades cambiando sus X y y atributos No fue un problema ya que estabas moviendo solo cajas rectangulares la mayor parte del tiempo. Sin embargo, mover a nuestro personaje principal al deslizarlo de esta manera se verá muy poco natural. Agregar animación a objetos como monedas que un jugador puede recolectar también hará que el juego sea más divertido.
Todas las animaciones relacionadas con sprite requieren que agregues SpriteAnimation Componente a la entidad. Este componente trata las diferentes imágenes en un mapa de sprites como cuadros de animación..
La información sobre una animación se almacena en el carrete objeto. El objeto de carrete tiene cinco propiedades diferentes:
carné de identidad cual es el nombre del carretemarcos Array que tiene una lista de cuadros para la animación en el formato. [xpos, ypos] currentFrame Propiedad que devuelve el índice del cuadro actual.facilitando propiedad que determina cómo la animación debe avanzarduración Propiedad que establece la duración de la animación en milisegundos.Hay cuatro eventos diferentes que pueden ser activados por una animación de sprite. Estos son:
Todos estos eventos reciben la carrete objeto como parámetro.
junto al carrete objeto, también hay una .carrete() Método que se utiliza para definir animaciones de sprites. Puedes usar el .animar() Método para reproducir cualquiera de las animaciones definidas..
El proceso de animación de sprites comienza creando un sprite estático en el lienzo..
var walking_hero = Crafty.e ('2D, Canvas, hero_walking, SpriteAnimation') .attr (x: 40, y: 20);los hero_walking La imagen en el caso anterior es la primera imagen que el usuario ve antes de la animación. Los atributos se utilizan para especificar la ubicación de la entidad actual. Una vez que la entidad ha sido creada, puede utilizar el .carrete() Método para definir la animación real..
walking_hero.reel ("walking", 1000, [[0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1]]);Este método acepta tres parámetros. El primer parámetro es el Carné de identidad de la animación que se está creando. El segundo parámetro se usa para establecer la duración de la animación en milisegundos, y el tercer parámetro es una matriz de matrices que contiene la columna (x) y la fila (y) de los cuadros sucesivos. En este caso, la matriz contiene la posición de todos los sprites en la segunda fila..
Otra versión de este método requiere cinco parámetros. Los dos primeros parámetros son el carrete. Carné de identidad y duración de la animación. Los parámetros tercero y cuarto se utilizan para establecer la posición inicial de x e y para la animación en el mapa de sprites. El último parámetro establece el número de cuadros secuenciales en la animación. Cuando se establece en un valor negativo, la animación se reproducirá hacia atrás.
La animación del carrete anterior también se puede crear utilizando el siguiente código:
walking_hero.reel ("walking", 1000, 0, 1, 6);Si bien esta versión es sucinta, es un poco limitada. Este método solo es útil si todos los sprites que desea incluir en la animación están en una sola fila. Además, la animación mostrará estas imágenes en el orden en que aparecen en la hoja de sprites..
Una vez que haya definido la animación, puede reproducirla utilizando el .animate (reel_Id [, loopCount]) método. El primer parámetro es la animación que desea reproducir, y el segundo parámetro determina el número de veces que desea reproducir esta animación. Las animaciones se reproducen una vez por defecto. Ajuste loopCount a -1 reproducirá la animación indefinidamente.
En ciertas situaciones, es posible que desee reproducir una animación solo una vez basada en un evento. Por ejemplo, se debe reproducir una animación de salto cuando el usuario presiona un botón para que el jugador salte. Puedes probarlo en la demo anterior. Presionando el Flecha arriba La clave hará saltar al segundo sprite. Aquí está el código para detectar la pulsación de la tecla:
jumping_hero.bind ('KeyDown', function (evt) if (evt.key == Crafty.keys.UP_ARROW) jumping_hero.animate ("jumping", 1););También puede pausar y reanudar las animaciones a medio camino utilizando el .pauseAnimation () y .resumeAnimation () metodos.
Si un solo sprite tiene varias animaciones adjuntas, puede determinar si una animación específica se está reproduciendo actualmente usando el .isPlaying ([String reelId]) método. Si no Carné de identidad se proporciona, verificará si alguna animación se está reproduciendo en absoluto.
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 lugar de varios rectángulos. Ahora también puede aplicar diferentes animaciones a una entidad en función de diferentes eventos. Debo recordarte que he usado la versión 0.7.1 de Crafty en este tutorial y que las demostraciones podrían no funcionar con otras versiones de la biblioteca..
JavaScript se ha convertido en uno de los idiomas de facto de trabajar en la web. No deja de tener sus curvas de aprendizaje, y también hay muchos marcos y bibliotecas para mantenerte ocupado. Si está buscando recursos adicionales para estudiar o usar en su trabajo, vea lo que tenemos disponible en el mercado de Envato.
En el siguiente tutorial, aprenderá cómo agregar sonidos en su juego.
