Usage of .end() in the Background creation of the tutorial

In the code for Background in the tutorial, aren't the sprites supposed to be added to the #background rather than the corresponding sprite before that. Or does the .end() hold true only for the groups and not spites?

So the code would be this

$("#background").
           .addSprite("background1", {animation: background1, 
                       width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()
           .addSprite("background2", {animation: background2,
                       width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT,
                       posx: PLAYGROUND_WIDTH}).end()
           .addSprite("background3", {animation: background3, 
                      width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()
           .addSprite("background4", {animation: background4, 
                      width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT,
                      posx: PLAYGROUND_WIDTH}).end()
           .addSprite("background5", {animation: background5,
                      width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()
           .addSprite("background6", {animation: background6,
                      width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT,
                      posx: PLAYGROUND_WIDTH});

Also why is posx used for every second usage of addSprite()?

selim

It's exactly like you said, .end() only applies for groups. The idea is the following:

If you create a group it's very likely that you may want to add something to it. So we added the group to the jQuery chain so that the next call applies to the group. If you don't want to work with this group you have to call end() to go back one level in the chain.

If you create a sprite it's not often that you would want to nest another sprite into it. It is possible of course but not likely. For this reason we don't change the jQuery chain after the addSprite() function and the next call will apply to the same element as the last one. If you want to add a sprite to another one or manipulate a sprite you will have to select it manually later.

Those are just arbitrary choice made in the API in order to optimize for the most usual situation. In order to differentiate the two situation I tired to wrote in the comment for every functions (in the source code) if they are destructive (ie they modify jQuery's chain) or not (leave the currently selected object as is). Maybe I should also include this information in the API documentation.

We use posx only for every second because each background is present two time in order to create the impression of an endless background. So background2 is really the following of background1. If you look at the images in the corresponding animations you will see that the size of the stars are the same for background1 and background2. And likewise for background3 with background4 and background5 with background6.

Since the default value of posx is 0 it's not explicitly written but maybe we should just to make the example more readable.

selim

Ps.: if you want your code to be syntax highlighted in the forum you can simply switch to the HTML mode of the editor and surround your cited code with <pre lang='Javascript'></pre>

Got it thanks.

Howdy, Stranger!

Categories