¿Qué es un sprite?
Un sprite es una animación cuyos fotogramas están integrados en el mismo archivo de imagen. Muchos videojuegos de dos dimensiones utilizan ésta técnica para animar a sus personajes.
Actualmente es común utilizar sprites en juegos para móviles.
Actualmente es común utilizar sprites en juegos para móviles.
¿Qué ofrece CSS y JavaScript?
CSS permite utilizar una imagen de fondo background-image, posicionarla en la zona que más nos interese con background-position y mostrar la zona visible mediante width y height.
Javascript nos permite modificar algunos de los parámetros de CSS a lo largo del tiempo para dar la sensación de animación.
Javascript nos permite modificar algunos de los parámetros de CSS a lo largo del tiempo para dar la sensación de animación.
El código
<div id="pacman" style="background: url('pacman.png') repeat scroll 400px 0px transparent;
width: 50px; height: 50px; left: -200px; top:50px; position:absolute;"></div>
<script type="text/javascript">
var marco = null;
var t = -50;
var x = 0;
var y = 0;
var delay = 20;
inicializar(50, 50);
animar();
function inicializar(ancho, alto) {
x = ancho;
y = alto;
marco = document.getElementById('pacman');
marco.style.width = x+'px';
marco.style.height = y+'px';
marco.innerHTML = '';
}
function animar() {
if (t<350) {
t++;
marco.style.backgroundPosition = (t%18)*50+'px 0px';
marco.style.left = t*100/18+'px';
setTimeout('animar()', delay);
} else {
marco.style.display = 'none';
}
}
</script>