Page 1 of 1

Sprites

Posted: Mon Feb 15, 2016 8:59 pm
by 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.


Re: Sprites

Posted: Mon Sep 26, 2016 2:13 pm
by 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

Image

Re: Sprites

Posted: Mon Sep 26, 2016 2:48 pm
by 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>

Re: Sprites

Posted: Mon Sep 26, 2016 2:52 pm
by xacarana
Vamos a realizar un sprite, con base al siguiente grupo de imágenes de banderas de países

Image

Banderas de paises

Tomado de iconarchive.com