Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/07/2011, 21:06
Avatar de uziel5
uziel5
 
Fecha de Ingreso: mayo-2011
Mensajes: 23
Antigüedad: 13 años, 6 meses
Puntos: 1
Problemas en animacion y setInterval()

Hola, pues verán, ahora mismo estoy queriendo realizar juegos en HTML5 y javascript, yo normalmente utilizo java y para mi, javascript es algo nuevo, por lo que de repente se me vienen algunos problemas de los cuales la mayoría puedo resolver pero otro no, como en este caso.

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:
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
}
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.

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