You are here

Home

Setting Up Spritify

Spritify is real easy to setup, all you need to do is initialize Spritify to a javascript object within the jQuery $(document).ready function. You will then also need to execute the javascript object's update() and draw() functions.

Initialize Spritify

$(document).ready(function() {
 
  //setup canvas
  var canvasElement = document.getElementById('canvas');
  var canvas = canvasElement.getContext("2d");
 
  //setup Spritify object
  var character = spritify();
 
  function draw() {
    //clear canvas for re-drawing
    canvas.clearRect(0, 0, 400, 400);
 
    //update spritify object
    character.spritifyObj.update();
 
   //re-draw spritify object
    character.spritifyObj.draw();
  }
 
  setInterval(function() {
    draw();
  }, 1000/30);
 
});
<canvas id="canvas" width="400px" height="400px"></canvas>

The above code will initialize Spritify on the "character" javascript object into the "canvas" element. By default the Spritify object will be drawn into the "canvas" element with the id of "canvas".

Spritify Options

$(document).ready(function() {
 
  //Spritify default options
   var character = spritify({
      canvas              :        'canvas', //id of the canvas
      width               :              32,
      height              :              32,
      posX                :               0,  //starting X position within the canvas
      posY                :               0, //starting Y position within the canvas
      movement            :            true, //if set to 'false' object will not move
      animation           :            true, //if set to 'false' object will not animate
      distanceOnPress     :             2.5, //applies if movement is 'true'
      movementType        :          '4dir', //8dir, 4dir, linearLR, linearUD
      image               : 'character.png',
      upControl           :            'up',
      rightControl        :         'right',
      downControl         :          'down',
      leftControl         :          'left',
      upDisableDefault    :            true, //disables the browser's default button functionality for the 'upControl'
      downDisableDefault  :            true, //disables the browser's default button functionality for the 'downControl'
      leftDisableDefault  :            true,  //disables the browser's default button functionality for the 'leftControl'
      rightDisableDefault :            true,  //disables the browser's default button functionality for the 'rightControl'
      FPS                 :              30,
      animationFPS        :               6,
      collisionObjs       :           false
  });
 
});