Help: keydown animate sprite

[rachid]

hi, i'm new to Pixi.js .

i really need help to proceed ... 

i created an animated  character that can be animated by mousedown event , 
i want to do it on keydown too be it doesnt animate it only shows the first frame of the sprite.
here is the page: http://kibghit.net/test/

 

JS script

<script>	
	// create a renderer instance.
	renderer = PIXI.autoDetectRenderer(800, 600);
	
	// Listen for mouse events on canvas
	renderer.view.addEventListener("mousedown", mouseDownHandler, true);
	renderer.view.addEventListener("mousemove", mouseDownHandler, true);
	renderer.view.addEventListener("mouseup", mouseUpHandler, true);
	window.addEventListener("keydown", checkKeyPressed, true);


	// add the renderer view element to the DOM
	document.body.appendChild(renderer.view);
		
	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0xAAAAAA);
	var texture = PIXI.Texture.fromImage("assets/bondif-sprite.png").baseTexture;
	var xsize = 184;
	var ysize = 325;
	var allDirections = [];
	var tempTexture;
	var currentAnimation;
	var isMouseDown = false;
	for (var i = 0; i < 2; i++) {
		var animationTextures = [];
		for (var j = 0; j < 8; j++) {
			tempTexture = new PIXI.Texture(texture, {x:j*xsize, y: i*ysize, width:xsize, height:ysize});
			PIXI.TextureCache[(i*2)+j] = tempTexture;
			animationTextures.push(tempTexture);
		};
		var oneWayAnimation = new PIXI.MovieClip(animationTextures);
		oneWayAnimation.stop();
		oneWayAnimation.visible = false;
		if (i == 1)
		{
			oneWayAnimation.stop();
			oneWayAnimation.visible = true;
			currentAnimation = oneWayAnimation;
		}
		oneWayAnimation.position.x = 400-40;
		oneWayAnimation.position.y = 300-40;
		stage.addChild(oneWayAnimation);
		allDirections.push(oneWayAnimation);
		console.log(allDirections);
	};
	
	// start animating
	requestAnimFrame( animate );
	var framesPerSecond = 12;
    var msPerFrame = 1000 / framesPerSecond;
    var walkCycleFrameCount = 8;
    var dirIndex = 1;

	function animate() {
        var animationAgeInMs = new Date().getTime();
        if (isMouseDown)
        	currentAnimation.gotoAndStop((Math.floor(animationAgeInMs / msPerFrame)  % walkCycleFrameCount));
	    renderer.render(stage);
	    requestAnimFrame( animate );
	}

	 
	function checkKeyPressed(e) {
	    console.log(e.keyCode);


		if (e.keyCode == "39")
            dirIndex = 1; // looking down
        else if (e.keyCode == "37")
            dirIndex = 2; // bottom left

        currentAnimation.stop();
		currentAnimation.visible = false;
        currentAnimation=allDirections[dirIndex-1];
		currentAnimation.visible = true;
		e.preventDefault();


	}


	function mouseDownHandler(e) {

		if (e.type == "mousedown")
		isMouseDown = true;
		if (!isMouseDown)
			return;
		
		var x = e.offsetX==undefined?e.layerX:e.offsetX;
		var y = e.offsetY==undefined?e.layerY:e.offsetY;
		var angle = Math.atan2((x - currentAnimation.position.x - 40) , (y - currentAnimation.position.y - 40));
		console.log("delta["+angle+"]: " + (x - currentAnimation.position.x - 40) + "/" + (y - currentAnimation.position.y - 40));


		if (angle < 0.4 && angle > -0.4)
            dirIndex = 1; // looking down
        else if (angle < -0.4 && angle > -1.2)
            dirIndex = 2; // bottom left
        else if (angle < -1.2 && angle > -2.0)
            dirIndex = 2; // left
        else if (angle < -2.0 && angle > -2.8)
            dirIndex = 2; // top left
        else if ((angle < -2.8 && angle > -3.2) || (angle < 3.2 && angle > 2.8))
            dirIndex = 1; // up
        else if (angle < 2.8 && angle > 2.0)
            dirIndex = 1; // right top
        else if (angle < 2.0 && angle > 1.2)
            dirIndex = 1; // right
        else if (angle < 1.2 && angle > 0.4)
            dirIndex = 1; // right bottom

        currentAnimation.stop();
		currentAnimation.visible = false;
        currentAnimation = allDirections[dirIndex-1];
		currentAnimation.visible = true;
		e.preventDefault();
	}
	function mouseUpHandler(e) {
		isMouseDown = false;
		e.preventDefault();
	}
</script>

 

[ivan.popelyshev]

//first problem: its not guaranteed that you can pass something other than rectangle here
tempTexture = new PIXI.Texture(texture, new PIXI.Rectangle(j*xsize, i*ysize, xsize, ysize));

//second problem: i*2+j -> i*8+j
PIXI.TextureCache[(i*8)+j] = tempTexture;