Tutorial 1 - jquery.gamequery.js - question about tilemaps

blackhawx

From a front-end visual perspective, what are the following codes doing or how do they relate...?

From line 762:

    tilemapCssClass: gQprefix + "tilemap",

From line 800:

var tilemapFragment = $("<div class='"+$.gameQuery.tilemapCssClass+"' style='position: absolute; display: block; overflow: hidden;' />");

From line 1061:

      var tileSet = tilemapFragment.clone().attr("id",name).css({
                    top: options.posy, 
                    left: options.posx, 
                    height: options.height*options.sizey, 
                    width: options.width*options.sizex
                });

I'm just trying to wrap my mind around it. Thats all.

Thanks

selim

Yea it's a kind of optimisation. What you have here is a DOM fragment.

HTML takes time to parse, so we create a generic DOM element that contains the common code that you will find in every tilemaps (but you will find similar code for groups and sprites). This DOM element is in fact not part of the page, it's juste pared and stays in the browser memory, that's why it's called a fragment. That's what the extract from line 800 does.

Then when the user want to create a tilemap we have to insert the fragment into the page. To do this we need to clone it first otherwise we will include the fragment itself and any reference we have to it (tilemapFragment here) would represent the inserted element. Then we change the properties of the newly cloned fragment to reflect the part of the tilemap that is not similar between all tilemaps. That's what the extract from line 1061 does.

The tilemapCssClass is simply use to have one single place in the code where we specify the CSS classes used by gQ. This has two advantages:

it makes changing the class easier
it allows the user to retrieve the class if he so wishes

Furthermore the classes is prefixed with a namespace to minimize the risk of collision with any user-defined classes. That's what the extract of line 762 does.

blackhawx

Ok, but now the prefix in 0.7 is gQ instead of gQprefix, right?

I understand the fragment aspect, but I still need a grip on timemapCssClass. When you say "it makes changing the class easier and it allows user to retrieve the class if he so wishes" can you give a small example of this?

Thanks!

selim

There is a small confusion there. In 0.7 two things changes both concerning two different namespaces:

The CSS Classes are now prefixed with "gQ_"
There is now a shortcut for the $.gameQuery javascript namespace called $.gQ. The old one remains in place!

When I say "it makes changing the class easier" I mean for the developer working on gQ since there is one single place where the css classes string is present and all the other places where it's now needed are a reference to this one.

As for the "it allows user to retrieve the class if he so wishes" this is what I mean: In the past (gQ < 0.7) if for some reason you needed to access, let say, all sprites you would have to look at qQ's code and realize that all the sprites where "marked" with the class sprite.

This wasn't optimal because it wasn't part of the exposed API and that if for som strange reason it changed in gQ then you would have to change it in your code. Now you will simply find all the DOM element marked with the css class $.gQ.spriteCssClass. If for some reason I'll have to change the value of this in gQ's code the variable would remain the same and your code would work with the new version.

Furthermore you now have a list of all CSS classes and Ids as part of the API which makes it more visible that you can relie on those (most likely in your .collision() filters).

Howdy, Stranger!

Categories