Ahora mismo estoy queriendo realizar animaciones de sprites en javascript, y ya logré animar un sprite, pero tengo problemas a la hora de animar un segundo sprite, aquí les dejo mi código lo mejor explicada posible:
Código:
Con este código me anima mi primer sprite (pacman) sin ningun problema, pero el segundo sprite (ash) se queda parado sin hacer nada, lo cual no me explico. Si le echan un ojo al código podrán darse cuenta que los objetos sprites tienen una tributo llamado frame actual, que indica el frame actual de cada sprite, les puse este atributo por que si lo declaraba global me daba un conclicto pues los dos compartian frame actual y me animaba solo 4 frames para cada sprite (ash solo tiene 4 frames y pacman tiene 18), pero curiosamente los dos sprites se animaban. var fps = 16;//intervalo en el que consigo acutalizar cada animacion
var tiempoInicio = new Date().getTime();//obtengo el tiempo en el que mi programa arranca
var ash = new Sprite("ash", new Image(), "imagenes/ash.png", 3, 64, 0, 64, 64, 0, 0, 64, 64);// creo un objeto del tipo sprite, el cual, va a ser dibujado
var pacman = new Sprite("pacman", new Image(), "imagenes/pacman.png", 17, 50, 0, 50, 50, 80, 20, 50, 50);//creo otro objeto del tipo sprite que también será dibujado
setInterval("inicializar(pacman)",fps);//llamo al método que me dibuja y anima el sprite en un intervalo de 16 milisegundos
setInterval("inicializar(ash)",fps);//llamo al método que me dibuja y anima el segundo sprite en un intervalo de 16 milisegundos
function obtenerContexto(idCanvas){//este método lo uso para obtener el contexto del canvas, sobre el cual dibujo
canvas = document.getElementById(idCanvas);
if(canvas && canvas.getContext){
contexto = canvas.getContext('2d');
if(contexto){
return contexto;
}
}
return false;
}
function inicializar(sprite){// metodo que llama a mi funcion de animar sprite, me podria ahorrar esta funcion
tiempoActual = new Date().getTime();//obtengo el tiempo actual
lapso = tiempoActual - tiempoInicio;//con esto saco la diferencia de milisegundos desde que se arranco el programa hasta el tiempo actual
animarSprite(sprite);//llamo a mi clase de animar sprite
}
function modificarTiempoInicio(){//llamo a esta funcion para modificar el tiempo en el que se inicio el programa y lo cual me permite llevar con control en el tiempo en que se ejecuta cada animacion
tiempoInicio = new Date().getTime();
}
function animarSprite(sprite){//esta funcion es la que me anima el sprite
contexto = obtenerContexto('canvas');//obtengo el contexto del canvas
sprite.img.src = sprite.src;//le doy la ruta de mi imagen al objeto imagen que contiene mi sprite
contexto.clearRect(sprite.lienzoX,sprite.lienzoY,sprite.lienzoAncho,sprite.lienzoAlto);//borro el frame anterior
if(sprite.cuadroActual >= sprite.cuadros){//si la animacion se termina vuelvo a continuarla
sprite.cuadroActual = 0;//reinicio el numero de frame a dibujar
contexto.drawImage(sprite.img, sprite.cuadroActual*sprite.imgX, sprite.imgY, sprite.imgAncho, sprite.imgAlto, sprite.lienzoX, sprite.lienzoY, sprite.lienzoAncho, sprite.lienzoAlto);//dibujo frame actual
}else{
if(lapso > 75){//si el lapso de tiempo supera los 75 milisegundos paso al siguiente frame
sprite.cuadroActual++;//paso al siguiente frame
modificarTiempoInicio();//reinicio el tiempo inicial
contexto.drawImage(sprite.img, sprite.cuadroActual*sprite.imgX, sprite.imgY, sprite.imgAncho, sprite.imgAlto, sprite.lienzoX, sprite.lienzoY, sprite.lienzoAncho, sprite.lienzoAlto);//dibujo el frame
}else{
contexto.drawImage(sprite.img, sprite.cuadroActual*sprite.imgX, sprite.imgY, sprite.imgAncho, sprite.imgAlto, sprite.lienzoX, sprite.lienzoY, sprite.lienzoAncho, sprite.lienzoAlto);//dibujo el frame
}
}
}
function Sprite(nombre, img, src, cuadros, imgX, imgY, imgAncho, imgAlto, lienzoX, lienzoY, lienzoAncho, lienzoAlto){ //creo mi "clase" sprite
this.nombre = nombre; //nombre de mi "clase" sprite
this.img = img; //imagen que contiene mi "clase" sprite
this.src = src; //ruta de la imagen que contiene mi "clase" sprite
this.cuadroActual = 0;// frame inicial de animacion
this.cuadros = cuadros; //numero de frames que contiene cada animacion
this.imgX = imgX; //coordenada en el eje X en el que empieza a dibujar de la imagen
this.imgY = imgY; //coordenada en el eje Y en el que empieza a dibujar de la imagen
this.imgAncho = imgAncho; //ancho en el que empieza a dibujar de la imagen
this.imgAlto = imgAlto; //Alto en el que empieza a dibujar de la imagen
this.lienzoX = lienzoX; //coordenada en el eje X en el que empieza a dibujar en el canvas
this.lienzoY = lienzoY; //coordenada en el eje Y en el que empieza a dibujar en el canvas
this.lienzoAncho = lienzoAncho; //ancho en el que empieza a dibujar en el canvas
this.lienzoAlto = lienzoAlto; //Alto en el que empieza a dibujar en el canvas
}
Quizás estoy haciendo una burrada al animar los sprites, pero es algo que no se pues no he visto mucha información en internet, tampoco se si puedo ejecutar dos setInterval() sin que halla problemas, pero por lo visto en javascript no exciten los hilos y me hallo un tanto perdido la verdad.
Cualquier consejo me vale, espero que me puedan ayudar.
Un saludo
