Sprites

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 1213
Joined: Fri Jan 15, 2016 6:13 pm

Sprites

Post by xacarana » Mon Feb 15, 2016 8:59 pm

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.

Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1213
Joined: Fri Jan 15, 2016 6:13 pm

Re: Sprites

Post by xacarana » Mon Sep 26, 2016 2:13 pm

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
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1213
Joined: Fri Jan 15, 2016 6:13 pm

Re: Sprites

Post by xacarana » Mon Sep 26, 2016 2:48 pm

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>
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1213
Joined: Fri Jan 15, 2016 6:13 pm

Re: Sprites

Post by xacarana » Mon Sep 26, 2016 2:52 pm

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
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply