Clarification for animation issues
-
Hi,
my first post here. I LOVE this library :)
Since i'm a gq beginner, there's something that i don't get for the animations.
My purpose is to have a character always animated such like:
- if player did nothigs, animate idle
- if player press a key, animate move
My problem is that if i have the setAnimation under a keyTrace function, the animation appears to be fixed on frame 1, not cycling. I thought it was a persistent renew so i put a control like "if this is the same key pressed don't set animation anymore", but it does not work.
And my other problem is that if i add sprites on playground with addsprites, they're ALL showed up in a big overlay on the background, so i found this function useless, because having a group named player where i set animation depending by user action should be enough.
I'm missing something for sure.
This is my code:var PLAYGROUND_HEIGHT = 400;
var PLAYGROUND_WIDTH = 600;
var background1 = new $.gameQuery.Animation({ imageURL: './imgs/PalcoProva.png' });
var keyPressed = 99;
var playerAnimation = new Array();
// Player1 s:
playerAnimation["idle"] = new $.gameQuery.Animation({ imageURL: './imgs/Breath.png',
numberOfFrame: 5, delta: 140, rate: 60,
type: $.gameQuery.ANIMATION_HORIZONTAL
});
playerAnimation["run"] = new $.gameQuery.Animation({ imageURL: './imgs/Run.png',
numberOfFrame: 6, delta: 140, rate: 60,
type: $.gameQuery.ANIMATION_HORIZONTAL
});
playerAnimation["jump"] = new $.gameQuery.Animation({ imageURL: './imgs/Jump.png' });
$('#playground').playground({ height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH, keyTracker: true })
.addGroup('background', { width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT })
;
var audio = {}; audio["bgm"] = new Audio();
audio["bgm"].src = "./snds/bgm.mp3";
//audio["bgm"].play();
$("#background")
.addSprite("background1", { animation: background1,
width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT
})
.addGroup("player", { posx: PLAYGROUND_WIDTH / 2, posy: (PLAYGROUND_HEIGHT / 2) + 35,
width: 140, height: 140
});
//register the main callback
$.playground().registerCallback(function(){
$("#lbl").text(keyPressed);
if($.gameQuery.keyTracker[65])
{
if (keyPressed != 65) { $("#player").setAnimation(playerAnimation["run"]); }
keyPressed = 65;
var newpos = parseInt($("#player").css("left")) - 10;
$("#player").css("left", "" + newpos + "px");
}
else
if($.gameQuery.keyTracker[68])
{
if (keyPressed != 68) { $("#player").setAnimation(playerAnimation["run"]); }
keyPressed = 68;
var newpos = parseInt($("#player").css("left")) + 10;
$("#player").css("left", "" + newpos + "px");
}
else
{ keyPressed = 99; }
}, 30);
//this is where the keybinding occurs
$(document).keyup(function (e) {
switch (e.keyCode) {
case 65: //this is left! (a)
$("#player").setAnimation(playerAnimation["idle"]);
break;
case 87: //this is up! (w)
$("#player").setAnimation(playerAnimation["idle"]);
break;
case 68: //this is right (d)
$("#player").setAnimation(playerAnimation["idle"]);
break;
case 83: //this is down! (s)
$("#player").setAnimation(playerAnimation["idle"]);
break;
}
});
$.playground().startGame(function(){
//$('#playground').remove();
});
I need that when user press a walk button, the walk animation cycles instead of keep herself fixed on first frame.
Thank you ♥ -
Hi,
For you first problem you could have a look at this http://forum.gamequeryjs.com/discussion/111/is-there-a-way-to-recall-the-current-animation-set-on-a-sprite#Item_2 . What I describe there is more or less what you're doing withkeyPressed. I don't see an obvious error but I would recommend to get rid of yourkeyupcallback and do something like that instead:$.playground().registerCallback(function(){
$("#lbl").text(keyPressed);
if($.gameQuery.keyTracker[65]) {
if (keyPressed != 65) {
$("#player").setAnimation(playerAnimation["run"]);
}
keyPressed = 65;
var newpos = parseInt($("#player").css("left")) - 10;
$("#player").css("left", "" + newpos + "px");
} else if($.gameQuery.keyTracker[68]) {
if (keyPressed != 68) {
$("#player").setAnimation(playerAnimation["run"]);
}
keyPressed = 68;
var newpos = parseInt($("#player").css("left")) + 10;
$("#player").css("left", "" + newpos + "px");
} else {
$("#player").setAnimation(playerAnimation["idle"])
keyPressed = 99;
}
}, 30);
Does the animation "run" works if you set it outside of the callback ? Do you change thte value ofkeyPressedsomewhere else ? Could you possibly create a jsFiddle (http://jsfiddle.net/) that reproduce the problem you're describing because when I try to run you code it works fine for me....
As for your second question I'm not sure I understand it. Do you mean all your sprites are one above the others or that they are in the same "layer" ? Maybe you could create a jsFiddle for this problem too ?
-
Hi Selim, hi created the fiddle http://jsfiddle.net/jzP6s/ to reproduce the problem.
Please replace the fixed links with url images that you know are animated.
thanks in advance :) -
Here is a corrected version. I did almost nothing to your code except:
- click the "tidyUp" button to make it readable
- included the gQ file
- change the animation to visible ones
- made the player a sprite and not a group
- corrected the$("#player").setAnimation(playerAnimation["idle"])where the$was missing
For me all is working well. Have a look and tell me if it works for you ?
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!