API Reference

You will find here a description of all the functions and objects offered by gameQuery.

$.gameQuery.Animation
playground()
startGame(function)
registerCallback(function, rate)
addSprite(name, options)
addGroup(name, options)
addTilemap(name, tileDescription, animationList, options)
setAnimation(animation, callback)
collision(filter)
loadCallback(callback)
setLoadBar(id, width, callback)
addSound(name, url)
playSound()
stopSound()
pauseSound()
muteSound(muted)
rotate(angle)
scale(ratio)

$.gameQuery.Animation

gameQuery allows you to declare animations. Animations are made of one image with a succession of frames just like in a css sprite. An animation in itself doesn't exist until it's associated with a sprite. These are the attributes an animation can have:

imageURL: the URL of the image
numberOfFrame: the total number of frame in the animation (for example for a 10x10 sprite with 15 frames your image will be 10x150 or 150x10)
delta: the width of height (depending on the type) of one frame
rate: the number of milliseconds between two frame
type: the type of animation, it's a binary OR of the following value:
- $.gameQuery.ANIMATION_VERTICAL for vertical, the various frames are stacked verticaly
- $.gameQuery.ANIMATION_HORIZONTAL for horizontal, the various frames are layed horizontaly
- $.gameQuery.ANIMATION_ONCE if you don't want the animation to loop
- $.gameQuery.ANIMATION_CALLBACK a function executed at the end of each animation cycle
- $.gameQuery.ANIMATION_MULTI if your image file contain more than one animation side by side
distance: the distance between two image when using multi-animations
offsetx: the offset along the x-axis for the position of the first frame in the image (for use with sprite-sheets)
offsety: the offset along the y-axis for the position of the first frame in the image (for use with sprite-sheets)

example:

var myAnimation = new $.gameQuery.Animations({ imageURL: "./myAnimation.png",
                                               numberOfFrame: 10,
                                               delta: 60,
                                               rate: 90,
                                               type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_ONCE});

playground(options)

This function defines the div to be used to display the game. All the objects to be added to the DOM by gameQuery will be added to this element or on of its child. If more than one element results from the expression only the first will be used. Options may contain:

height: the height of the game area (320 by default)
width: the width of the game area (480 by default)
refreshRate: the refresh rate in milliseconds(30 by default)

example:

$("#someId").playground({refreshRate: 60});

playground()

Called without any parameters the playground function returns the current playground.

startGame(function)

This function will prepare the game to be started by pre-loading the resources and will start the main loop. If a function is given as a parameter it will be called once everything is loaded.

example:

$("#startbutton").click(function(){ $.playground().startGame(function(){ $("#welcomeScreen").remove(); }); })

registerCallback(function, rate)

This function registers a function to be called at a regular interval. The rate is the number of milliseconds between two successive calls to the function given as argument. This function will be called as long as the return value is false.

addSprite(name, options)

This function adds a sprite to the current selected element. This element is expected to be the playground, a group or another sprite. Any sprite created this way will automatically animate itself. The sprite will stay hidden as long as the start() function hasn't been called.

Options may include:

animation: an animation
height: the height of the sprite (32 by default)
width: the width of the sprite (32 by default)
posx: the position on the x axis (0 by default)
posy: the position on the y axis(0 by default)
callback: a callback that will be called at the end of the animation. (Only if the animation type is $.gameQuery.CALLBACK)

example:

$(document).playground("#playground", {height: playgroundHeight, width: playgroundWidth})
     .addSprite("sprite1",{animation: animation1});

##addGroup(name, options)

This function behaves almost in the same way as the addSprite one but it creates a transparent sprite.

Options may include:

overflow: visibility of elements outside of the group (visible by default)
height: the height of the group (32 by default)
width: the width of the group (32 by default)
posx: the position on the x axis (0 by default)
posy: the position on the y axis(0 by default) example:

$(document).playground("#playground", {height: playgroundHeight, width: playgroundWidth})
    .addGroup("group1",{overflow: "visible"})
        .addSprite("sprite1",{animation: animation1})
        .addSprite("sprite2",{animation: animation1});

addTilemap(name, tileDescription, animationList, options)

This function creates a tilemap using the animations from animationList and arranging them according to the tileDescription. animationList can be an array of animation or a multi-animation. tileDescription can be an array of integer where the value of each point is the index of the animation in the animationList (or the multi-animation index) or a function taking as parameter a x and y index and returning the index of the animation for this point. Tiles created by this method are marked by the "tileType_x" class where x is the animation index (this may be useful for collision). Remark: this doesn't work if the tilemap is transformed (rotation or scaling)

Options may include:

sizex: the number of column of tiles
sizey: the number of row of tiles
height: the height of a unique tile
width: the width of a unique tile
posx: the position on the x axis (0 by default)
posy: the position on the y axis(0 by default)

example:

var multiAnimation = new $.gameQuery.Animation({imageURL: "m.png",
                         type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_MULTI,
                         numberOfFrame: 3,
                         delta: 10,
                         distance: 10,
                         rate: 300});
$.playground().addTilemap("myTilemap", tileDef, multiAnimation,
                         {width: 10,
                          height: 10,
                          sizex: 3,
                          sizey: 3,
                          posx: 0});

setAnimation(animation, callback)

This function allow to change the animation of the element on which it's called. This element is expected to be a sprite. Callback is a function to call at the end of each animation cycle. It's an optional parameter that will only be used if the animation is of type $.gameQuery.CALLBACK. Called without any parameter this function remove the animation from the selected sprite.

If the currently assigned animation is a multi-animations the animation argument can be the index of the animation you want to choose amongst one of the multi-animations.

collision(filter)

This method returns the list of elements colliding with the selected one but only those that match with the filter given as parameter. example:

$("#spaceship").collision(".missiles").each(function(){
    killspaceship();
    explodemissil(this);
});

setLoadBar(id, width, callback)

warning deprecated in 0.5

This function sets the div to use as a loading bar. This div will see its width increase progressively from 0 to width as the items on the preload list are loaded and each time the callback function will be called with the current progress (in percent) as argument.