Question about animating Sprites

blackhawx

On this page, http://gamequeryjs.com/documentation/first-tutorial/first-tutorial-step-1/
it shows us how to animate the motion of the small, medium and large stars, which is clear....

//This is for the background animation
    $.playground().registerCallback(function(){
    //Offset all the pane:
    var newPos = (parseInt($("#background1").css("left")) - smallStarSpeed - PLAYGROUND_WIDTH) % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
    $("#background1").css("left", newPos);

    newPos = (parseInt($("#background2").css("left")) - smallStarSpeed + 1 - PLAYGROUND_WIDTH) % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
    $("#background2").css("left", newPos);

    newPos = (parseInt($("#background3").css("left")) - mediumStarSpeed - PLAYGROUND_WIDTH) % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
    $("#background3").css("left", newPos);

    newPos = (parseInt($("#background4").css("left")) - mediumStarSpeed + 1 - PLAYGROUND_WIDTH) % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
    $("#background4").css("left", newPos);

    newPos = (parseInt($("#background5").css("left")) - bigStarSpeed - PLAYGROUND_WIDTH) % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
    $("#background5").css("left", newPos);

    newPos = (parseInt($("#background6").css("left")) - bigStarSpeed + 1 - PLAYGROUND_WIDTH) % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
    $("#background6").css("left", newPos);

    }, REFRESH_RATE);

...why do we use NewPos as a variable name over and over again. Shouldn't be unique names like var smallStarPos, and mediumStarPos, and bigStarPos?

Any insight on this will be great!

blackhawx

Also how does background1.png knows that its animating with background2.png
background3.png with background4.png
and finally, background5.png with background6.png?

They appear to be grouped in design as well, for example background1.png and background2.png are the same size stars (small).

unless I am wrong it looks like background1.png starts, then background2.png loads, then background1.png and 2, etc..

the same thing for background3 and 4

and the same thing for background5 and 6

so there are 3 cycles going on with the stars, all at the same time. If this is all true, how does the smallstars know to start again at background1.png when it is done with background2.png?

Sorry if it seems I have a lot of questions. I'm just really pumped with getting my development on.

Thanks!

selim

newPos is just a temporary variable to hold the value we computed before assigning it the the element, it is purely cosmetic and you could get rid of it by writing:

$("#background1")
    .css("left", 
        (parseInt($("#background1").css("left")) - smallStarSpeed - PLAYGROUND_WIDTH) % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH);

The idea of background1.png and background2.png is to make the starts scrolling more varied but you could use background1.png both time. In this example there is tree "layers" one made of 1 and 2, one made of 3 and 4, one made of 5 and 6.

We use two sprites pre layers to allow one to move while the other is visible to give the impression of one endless sprite.

Ah and one remark, the xxxSpeed + 1 on every other line is an error and you could simply write xxxSpeed instead. If you look at the jsFiddle now it should be corrected.

blackhawx

awesome - what is the link to the jsfiddle demo you fixed?

blackhawx

so when you say "background1.png both times" how would I write code for that? can we reference background1,png and use the reference multiple times? rather than try to load background1.png over and over again? I'm trying to think of ways that reduce the weight...

Thanks for all the help Selim!

selim

I wasn't really clear there, what I meant was that the sprites background1 and background2 have the same animation "background1".

To answer you question, if two sprites share the same "image" they can simply share the same animation. But should you need to define two different animations (for example because the number of frame varies), the memory footprint wouldn't be much greater since only those informations is stored in an animation and not all the image's pixel.

selim

Oh and the jsFiddle staid the same, I just re-based it: http://jsfiddle.net/onaluf/tthGm/

blackhawx

Thank you Selim for the rich feedback. But there is still one thing that is confusing me. No where in that jsfiddle code is sprite background2 assigned to animation "background1".

This is what I see in the jsfiddle...


    .addSprite("background1", {animation: background1,
                                   width: PLAYGROUND_WIDTH,
                                   height: PLAYGROUND_HEIGHT})
        .addSprite("background2", {animation: background2,
                                   width: PLAYGROUND_WIDTH,
                                   height: PLAYGROUND_HEIGHT,
                                   posx: PLAYGROUND_WIDTH})

Once I have a grip on this subject, I should be good!

selim

No the jsFiddle is the version with the +1 bug corrected, there is the version with the proposed optimisation: http://jsfiddle.net/onaluf/tthGm/1434/

blackhawx

You are the man!
Thank you!

blackhawx

I changed the css to "top" instead of "left" to animate the stars up. It does work, but its not continuously connected. Any thoughts?

Thanks

Howdy, Stranger!

Categories