API Reference

$.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});

more to come...