Sprites/es

From Open Surge Engine Wiki
Jump to: navigation, search
Languages: Bahasa IndonesiaČeštinaDeutschEnglishEspañolFrançaisItalianoNederlandsPolskiPortuguêsРусский

Introducción

Todos los objetos con animación son referidos como sprites (o texturas). Un sprite es una imagen con todos los fotoramas necesarios para ser mostrados en una animación. En Open Surge, un sprite está compuesto por dos cosas:

  • Una imagen (también conocido como spritesheet), normalmente en formato PNG. Estos archivos se colocan en la carpeta images/.
  • Un archivo SPR, es un archivo de textos que le indica al motor como mostrar el sprite correctamente. Estos archivos se colocan en la carpeta sprites/ y pueden ser abiertos y editados con un editor de textos.

Todas las imágenes tienen un color transparente. Éste cambia dependiendo del juego, pero en Open Surge usa el magenta (RGB 255, 0, 255) como color transparente.

Estudio de caso: el sprite de un anillo

Aprenderemos con un ejemplo. Considera el siguiente spritesheet:

images/rings.png (click para cambiar el tamaño)

Veamos como Open Surge lee los datos de las imágenes para que puedan ser mostradas en el juego. Tomaremos el archivo SPR incluido en el juego (sprites/rings.spr).

...

// Ring
sprite "SD_RING"
{
   source_file     "images/rings.png"
   source_rect     0 128 176 16
   frame_size      16 16
   hot_spot        8 12
   
   // spinning
   animation 0
   {
       repeat      TRUE
       fps         16
       data        0 1 2 3 4 5 6 7
   }
   
   // disappearing
   animation 1
   {
       repeat      FALSE
       fps         8
       data        8 9 10
   }
}

...

En el archivo de arriba, hay varias cosas que recalcar:

  • Hay líneas que comienzan con //. Éstas están puestas para tu conveniencia y son ignoradas por el motor.
  • sprite "SD_RING": éste es el nombre de la textura, debes asegurarte que no haya más de una con el mismo nombre.
  • source_file: Ésta es la ubicación de la imagen. El motor asume que las imágenes se encuentran en algún lugar de la carpeta del juego, entonces no necesitas especificar la ruta completa. Sólo donde se encuentra la imagen dentro la carpeta del juego.
  • source_rect: Los primeros dos números dan las coordenadas X e Y, respectivamente, de la esquina superior izquierda de la imagen que estás definiendo. Los otros dos restantes, anchura y altura, respectivamente, dando un rectángulo imaginario que encierra todos los fotoramas de la animación. Estos números son dados en pixeles.
  • frame_size: Define al tamaño de cada fotorama de tu animación. En este ejemplo, el tamaño del rectángulo imaginario es de 176x16 pixeles, pero cada fotorama mide sólo 16x16 pixeles.
  • hot_spot: Cada objeto en el motor tiene una posición X e Y en la pantalla, ¿pero está en la esquina superior izquierda? ¿O está en el centro? Este es el apartado que el motor usa para determinar la posición x e y de tu objeto. También es lugar donde el editor de niveles agarra tu objeto cuando lo seleccionas.
  • animation <NÚMERO>: Éstas son las animaciones que tu objeto puede tener. Asumiendo que tu objeto tiene N animaciones, <NÜMERO> puede variar entre 0 y N-1. Por ejemplo, si estás creando un objeto con cinco animaciones, necesitas esespecificar la animación 0, animación 1, ..., animación 4. Hay varios factores que las animaciones necesitan para ser definidas completamente.
    • repeat: ésto le indica al motor si se quiere repetir la animación mientras que sea la selecionada por el juego. En este caso, mientras el anillo esté inactivo continuará girando porque repeat tiene el valor TRUE en la animación 0. Sin embargo, cuando la animación activa cambia a 1 (cuando el jugador toca el anillo), se reproducirá la animación sólo una vez antes de desaparecer.
    • fps: Ésto define que tan rápido el motor reproduce la animación. En este caso la animación 0 se reproduce a 16 fotoramas por segundo y la animación 1 se reproduce a 8 fotoramas por segundo.. Mientras más alto el número, más rápida la animación.
    • data: Este apartado define qué fotorama quieres que se muestre en un determinado momento. En este caso se reproducen los fotoramas 0-7 y luego se repiten en la animación 0, y se reproducen los fotoramas 8-10 una vez en la animación 1.

Estudio de caso: modificando el sprite del anillo

Una vez que hemos examinado un archivo SPR y determinado cada uno de sus componentes y que hacen, reemplazaremos los anillos estándar por el tuyo propio. Puedes crearlo tu mismo con un editor de imágenes (como GIMP o Photoshop), buscar uno ya existente en nuestro foro o en otra página, o bien usar la imagen de abajo.

Advertencia: Cambiar los archivos de sprite provocan un cambio mayor en el juego. Asegúrate de hacer una copia de seguridad de los archivos del juego.

images/my_collectibles.png (diseño por lunarrush)

Ahora editaremos sprites/rings.spr y modificaremos el sprite SD_RING (este script sirve para la imagen de arriba, si usas tu propia imagen es probable que tengas que los valores de algunos atributos sean diferentes):

...

// Anillo
sprite "SD_RING"
{
   source_file     "images/my_collectibles.png"
   source_rect     1 1 176 16
   frame_size      16 16
   hot_spot        9 12
   
   // Bucle
   animation 0
   {
       repeat      TRUE
       fps         16
       data        0 1 2 3 4 5 2 6
   }
   
   // Fin
   animation 1
   {
       repeat      FALSE
       fps         8
       data        7 8 9 10
   }
}

...

Ahora que entendimos como el motor interpreta estos archivos, es más fácil saber que entrada debemos darle y en que orden para que nuestras texturas sean mostradas correctamente en el juego.

S007.png