Sprites

[xacarana]

Code: Select all

Los sprites (del inglés ‘duendecillos’) fueron popularizados por Jay Miner. Se trata de un tipo de mapa de bits dibujados en la pantalla de ordenador por hardware gráfico especializado (MSX, Atari 400/800, Commodore 64 y Commodore Amiga fueron unos de los pocos ordenadores que soportan sprites reales) sin cálculos adicionales de la CPU. A menudo son pequeños y parcialmente transparentes, dejándoles así asumir otras formas a la del rectángulo, por ejemplo puntero de ratón en ordenadores de la serie Amiga. Esto es posible ya que se podía hacer una operación lógica OR o AND entre la imagen original y otra, y dejar el resultado en otra posición de memoria. De esta manera era sencillo cambiar colores o eliminar el fondo mediante una "máscara". Típicamente, los sprites son usados en videojuegos para crear los gráficos de los protagonistas. Por ejemplo, los personajes de un Pac-Man podrían ser sprites. Generalmente son utilizados para producir una animación, como un personaje corriendo, alguna expresión facial o un movimiento corporal.

Este concepto que tiene sus origines en los videojuegos antigüos pero que todavía son vigentes, también se usan al crear documentos html, estos son muy populares y ayudan bastante en optimizar el rendimiento de la carga de un sitio o aplicación web, en el siguiente video se explica como crear un sprite de forma manual, es decir, sin usar herramientas que permitan automatizar el proceso.

[xacarana]

Herramienta para optimizar imágenes

shoe box

Permite crear un sprite, cortar imágenes y mucho más, como lo muestran los siguientes videos.







Insumo para el ejemplo de clase

[xacarana]

En la hoja de estilos se define la siguiente clase

Code: Select all

.bandera{
		background-image: url(img/sprite_idiomas.png);
		background-position: 1px 1px;
		background-repeat: no-repeat;
		width: 33px;
		height: 27px;
		background-color: white;
	}

Si esta editando el archivo main.css, debe poner en la url la imagen de la siguiente forma

Code: Select all

background-image: url(../img/sprite_idiomas.png);

En el html, se pone el contenedor de la imagen, en este caso es un div

Code: Select all

<div class="bandera"></div>

[xacarana]

Vamos a realizar un sprite, con base al siguiente grupo de imágenes de banderas de países



Banderas de paises

Tomado de iconarchive.com