CanLaro: Helpers for HTML5 2D Canvas Game Development

Here are a few Javascript objects to help you get started: Sprite & Keyboard Input Handler. Resource Loader is still being worked out but usable.

Sprite

• Constructor:

  var sprite = new Sprite(imageURL, spriteWidth, spriteHeight, columns, rows)

• Adding Animations:

  bob.AddAnimation(animationIdentifier, arrayOfFrameIndexes, isLooping);

  • The animation identifier is used to tell the Sprite which animation to play.

  • A frame index is zero-indexed, from left to right, top to bottom. (by column & by row). Example:

    bob.AddAnimation("swalk", new Array(9,10,9, 11), true);

  • Note: When adding animations with a single frame, you must be careful as instantiating an array with: new Array(3) will create an array of size 3, and not an array with a single element 3.

  • Currently, the sprite is being put on the next frame of animation (if applicable) per Draw call.

Keyboard Input Handler

• Constructor:

  var keyboard = new KeyboardInput();

  Important: You must link OnKeyDown & OnKeyUp of the handler to the window events like:

  $(window).keydown( function(evt) { keyboard.OnKeydown(evt) });
  $(window).keyup( function(evt) { keyboard.OnKeyUp(evt) });

• Adding Watched Keys:

  keyboard.AddKey(keyIdentifier, keyCode);

  • The key identifier is best considered as an action or a "button".
  • The key code can be changed, but the keyIdentifier can stay the same throughout the game.
  • They key code is as given by the onkeydown/onkeyup event keyCode.
  • Example: keyboard.AddKey('jump', 32); //spacebar

• Checking if keys are pressed:

  keyboard.keyState.keyIdentifier

  • This is where the key identifier comes into play. This simply returns a boolean if the key assigned to that is being pressed or not.

  • Example:

    if (keyboard.keyState.jump) //'jump' key is pressed
    { /* jump code here */ }

• Adding Opposing keys:

  keyboard.AddOpposingKeys(keyIdentifier0, keyIdentifier1);

  • Opposing keys are basically overrides to existing key presses. You can't press up or down simultaneously so the latest one becomes true with the other is false.

  • Example:

    keyboard.AddOpposingKeys('up', 'down');

    Here, the up and down keys can't be pressed simultaneously. If you hold down up and then press down, only down will be set to true.