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