37 Sprite / Gift*
Un Sprite Sheet es una imagen que contiene animaciones, fondos, objetos, etc.
Puede utilizarse simplemente para recopilar todas las acciones posibles de un personaje, o para crear un personaje que va a ser animado creando un GIF en movimiento.
GIF es un formato sin pérdida de calidad para imágenes con hasta 256 colores, limitados por una paleta restringida a este número de colores. Por ese motivo, con imágenes con más de 256 colores, la imagen debe adaptarse reduciendo sus colores, produciendo la consecuente pérdida de calidad.
Es utilizado tanto para imágenes como para animaciones animaciones cortas que se reproducen continuamente.
Creación de personajes
El trabajo de un concepto previamente pensado o croquis, ¡que le ahorrará tiempo y dolores de cabeza!
Cree tantas piezas enteras como sea posible. Los usuarios (con frecuencia) pedirán cambios de colores y formas. Es mucho más fácil, a largo plazo, si se crean piezas enteras que se pueden cambiar fácilmente. Es recomendable partir de la lista de formas que proponemos para personajes.
En términos generales, de un mismo personaje hará falta su ilustración en direcciones como las siguientes:
Sur, Sudeste, Oeste, Noroeste, Norte, Norte-Este, Este y Sudoeste
También es recomendable la creación de diferentes situaciones con estos personajes, como: pidiendo, comprando, estando sentado, acostado, etc.
Veamos como quedaría un ejemplo de un Sprite de Mario y Luigi.
GIF animado
La animación en la web se realiza de la misma manera que se hace en los dibujos animados y películas. Cuando usted está viendo una película no está realmente viendo la gente que se mueve y habla, lo que está viendo es una serie de imágenes intermitentes con el sonido que se está reproduciendo a lo largo de la bobina al mismo tiempo, dando la ilusión de que está viendo algo que está vivo. Esto es lo mismo que sucede con nuestras animaciones. Nosotros creamos la ilusión de la “vida” al parpadear 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 conseguimos estas animaciones fluidas en nuestra web. La respuesta es utilizar Sprites. Lo único en lo que tenemos que preocuparnos es en la creación de nuestros Sprites y en asignarles nuestras animaciones. Echa un vistazo al GIF animado a continuación:
Cuando ves esta animación parece que el personaje está rotando. Pero en realidad, lo que estas viendo es una serie de imágenes que se muestran en orden y a un intervalo de tiempo preasignado. En este caso en concreto, hemos utilizado las ocho imágenes del punto anterior.
Esta técnica puede servir para crear pequeñas animaciones en las que se muestre una situación comunicativa, un personaje dando los buenos días a otro o, si queremos animar nuestros textos con pequeños elementos que tengan vida, como sería el caso de una ilustración en un horno en el que las tartas echan humo.
Software que se puede utilizar
- http://gifmaker.me/
- http://www.aseprite.org/
- http://www.aseprite.org/older-versions/
- http://www.gimpshop.com/
- http://www.cosmigo.com/promotion/index.php?Downloads
- http://spritetools.com/index.php/software
- http://www.humanbalance.net/gale/us/
- http://www.pencil2d.org/pencil2d/
- http://www.piskelapp.com/
- http://www.drpetter.se/project_animape.html
- http://www.mobinodo.com/spritemaster/
- https://www.codeandweb.com/texturepacker
- http://www.emezeta.com/articulos/32-editores-graficos-gratuitos