How to properly load a callback once an animation is done (has completly ended)

blackhawx

I have the following lines of code for a group/sprite up...

.addSprite("spritebg5", {animation: bg.ani5, width: pg.width, height: pg.height})
.addSprite("spritebg6", {animation: bg.ani5, width: pg.width, height: pg.height})
.addSprite("spritebg7", {animation: bg.ani5, width: pg.width, height: pg.height})
.addSprite("spritebg8", {animation: bg.ani5, width: pg.width, height: pg.height})
.addSprite("spritebg9", {animation: bg.ani5, width: pg.width, height: pg.height})
.addSprite("spritebg10", {animation: bg.ani5, width: pg.width, height: pg.height, posx: pg.width, callback: missionAccomplished()})
.end()

and a function that displays a console log...

function missionAccomplished() {
console.log('this text should load after a couple seconds...');
}

...but what I don't understand is why does the console.log displays the text right away, right when the game starts. Shouldn't the callback load at the end of the animation?

Thanks

selim

Does you animation has the $.gQ.ANIMATION_CALLBACK in its type option ?

blackhawx

I added that to my animation - now the console.log loads the text when the DOM is ready (even earlier).

This is what I have....
var bg = {
    ani1 : new $.gQ.Animation({imageURL: "http://dev.jquery/gamequery/mimages/bg1.png"}),
    ani2 : new $.gQ.Animation({imageURL: "http://dev.jquery/gamequery/mimages/bg2.png"}),
    ani3 : new $.gQ.Animation({imageURL: "http://dev.jquery/gamequery/mimages/bg3.png"}),
    ani4 : new $.gQ.Animation({imageURL: "http://dev.jquery/gamequery/mimages/bg4.png"}),
    ani5 : new $.gQ.Animation({imageURL: "http://dev.jquery/gamequery/mimages/bg5.png", type: $.gQ.ANIMATION_CALLBACK})
    };

Then I setup my group...

$.playground()
.addGroup("groupbg", {width: pg.width,height: pg.height})
.addSprite("spritebg1", {animation: bg.ani1, width: pg.width, height: pg.height})
.addSprite("spritebg2", {animation: bg.ani2, width: pg.width, height: pg.height})
.addSprite("spritebg3", {animation: bg.ani3, width: pg.width, height: pg.height})
.addSprite("spritebg4", {animation: bg.ani3, width: pg.width, height: pg.height})
.addSprite("spritebg10", {animation: bg.ani5, width: pg.width, height: pg.height, posx: pg.width, callback: missionAccomplished()})
.end()

and finally the callback function...

function missionAccomplished() {
console.log('this text should load after a couple seconds, but instead it loads right away');
}

I just don't know why there isn't a delay before the console log shows...

Thanks for any advice!

selim

If your animation has only one frame then the callback will be called immediately. I may be wrong but I think you're confusing an animated sprite (a sprite with changing images) and animating a sprite by moving it around (which is what is done with the background in the tutorial).

If what you want is to finish the game when the player reach a certain point defined by the fact the a given sprite is shown on screen then you should simply check it's position, corrected by the parent group position.

blackhawx

I never thought of that. Thank you for that big tip!

Howdy, Stranger!

Categories