Existen varios métodos para obtener animaciones en una web. El más sencillo de todos es usar imágenes gif animadas. De esta forma no hay que escribir código adicional para el cambio de sprite y puede usarse con buenos resultados poniendo unos gifs encima de otros (se colgará en breve un juego 100% javascript usando este sistema).
Mediante javascript se puede cambiar la localización de una imagen cada cierto tiempo (el atriburo src del tag img). Se debe tener una imagen para cada fotograma de la animación, lo que provoca un elevado número de elementos a la hora de cargar la página, además de una carga para el navegador al invocar al cambio de un sprite a otro.
El método que se va a presentar se basa en tener todos sprites de la animación en una sola imagen. Esta imagen servirá de fondo para un div del tamaño del sprite, y simplemente estableciendo el inicio de la misma en el estilo del div se podrá cambiar de un sprite a otro.
Veamos un ejemplo. Teniendo esta imagen:
Y la siguiente entrada en la hoja de estilos:
Con width y height se establece el tamaño de los sprites. La ruta de la imagen está especificada en el atributo background-image. Y el último parámetro es la posición desde la que empieza esa imagen seleccionada. Modificando esta posición podemos ver los distintos sprites de la imagen.
Se muestran un par de ejemplos simples:
<div class='Bisho' style='background-position: 0px 0px;'></div>
|
<div class='Bisho' style='background-position: 0px 34px;'></div>
|
Para obtener una animación simplemente hay que modificar el parámetro background-position cada cierto tiempo. Con el siguiente fragmento de código conseguimos este efecto:
La variable bisho hace referencia al elemento del DOM que contendrá nuestro sprite. El paso actual se guardará en bishoStep y es la variable que sirve para calcular la primera coordenada de la posición del fondo. Se asegura que este valor no esté fuera de rango con la operación módulo. La segunda coordenada se obtiene con la variable bishoPosition (que en el ejemplo a continuación se modifica mediante el combo-box). Y finalmente se hace que esta función sea llamada dentro de un cierto tiempo mediante el setTimeout.
