Etiqueta: Sprites

Chibi Center, crea personajes de videojuegos con sprites en unos minutos

Publicado el

por Sergio Asenjo

Chibi Center

Los aficionados al mundo de los videojuegos habréis oí­do hablar acerca de los sprites, dibujos en mapa de bits ampliamente utilizados en géneros como los juegos de rol. Recientemente hemos descubierto Chibi Center, una web gratuita que nos permite crear nuestros propios personajes de videojuegos a base de sprites en cuestión de unos pocos minutos.

Sin duda, una de las principales ventajas de Chibi Center es su sencillo funcionamiento. Para comenzar a dar forma a nuestro sprite tenemos que elegir qué personaje nos interesa utilizar, algo que podemos hacer desde la parte superior de la web (a dí­a de hoy hay 18 alternativas disponibles). A continuación tendremos que ir personalizando el acabado de nuestro personaje, algo que podremos hacer añadiendo diferentes armaduras, peinados y todo tipo de accesorios.

Continúa leyendo «Chibi Center, crea personajes de videojuegos con sprites en unos minutos»

SpriteCow – generando el código CSS de los Sprites en las imágenes

Publicado el

por Fco. José Hidalgo


SpriteCow es una sencilla herramienta que nos permitirá generar, de forma automática, el código CSS de los sprites que indiquemos en la imagen que subamos.
Para ello tendremos que subir una imagen cualquiera desde nuestro ordenador, y con el selector de color seleccionaremos el color de fondo para pasar posteriormente a señalar una porción de cualquier sprite donde automáticamente SpriteCow detectará toda su área, generándonos de forma automática el código CSS, que lo tendremos disponible en la parte inferior.

Optimiza el tiempo de carga de tu sitio utilizando Sprites CSS

Publicado el

por Fabián Figueredo

Una vieja técnica que se utilizaba en la construcción de juegos, se emplea hoy en dí­a para optimizar el tiempo de carga de los sitios webs. Los Sprites nacieron de las computadoras. Recuerdo que con mi vieja Commodore 64 podí­a generar sprites, que eran pequeños gráficos para luego crear animaciones, fondos, etc.
No obstante, esta antigua técnica se sigue usando en la actualidad, y la vemos en la técnica Sprites CSS, que consiste en utilizar una sola imagen para albergar allí­ todas las imágenes que se necesitarán en el sitio. Por ejemplo el fondo, menú, iconos, etc. Así­ cada vez que se acceda a nuestro sitio, sólo se descargará un archivo de imagen, evitando peticiones repetitivas al servidor.
Implementar esta técnica suele llevar algo de tiempo, especialmente cuando tenemos  muchos sprites. Pero para eso, existe SmartSprites, una aplicación que les permitirá crear, implementar y mantener Sprites CSS muy fácilmente.
SmartSprites es una aplicación open source y está construida en Java. Puedes utilizarla en Windows o Linux, aunque antes deberás instalar JDK 6.
Existen otras herramientas para generar Sprites CSS como por ejemplo Spritebox, una interesante aplicación web totalmente gráfica que nos ayudará a generar nuestros sprites css en pocos pasos.
Con SmartSprites, te ahorrarás muchas horas de trabajo en el armado de los sprites. Recomendable para optimizar sitios webs. El tiempo de carga de una página es un factor importante en el posicionamiento web, y más ahora que Google lo ha reconocido expresamente.

Spritely.net – Crea impresionantes animaciones con Javascript

Publicado el

por Javier Muñiz

Spritely.net es un plugin que nos permitirá añadir animaciones de calidad a nuestros proyectos web, para conseguir desde animaciones de personajes hasta complejos scrolls con varios planos, todo ello sólo a base de javascript.

Estas librerí­as son realmente sencillas de usar, ya que proporcionan únicamente dos funciones para estas tareas «sprite()» y «pan()», que básicamente se encargan de modificar el atributo background-image de cualquier imagen que tengamos en nuestro CSS, para conseguir la animación.

De esta manera, podremos utilizar imágenes PNG o GIF (con o sin transparencia) para crear estos espectaculares efectos visuales, que además son compatibles con la mayorí­a de navegadores web, iPad y teléfonos móviles.

Una herramienta excelente y gratuita para desarrolladores web, que sólo nos exige compartir bajo su misma licencia.