You are here

Home

Collision Object Detection

This example shows Spritify's collision detection. Use the arrow keys to move the demo character to the right. For Spritify to detect these objects simply define the "collisionObjs" in Spritify's setup.

 
(use arrow keys to move character)
 

Page Javascript

$(document).ready(function() {
 
    //define canvas
    var canvasElement = document.getElementById('canvas');
    var canvas = canvasElement.getContext("2d");
 
    //define objects
    var box1 = spritify({ movement : false, animation : false, image : '/sites/all/themes/epiphany/scripts/spritify/box.png', posY : 32, posX : 32 });
    var box2 = spritify({ movement : false, animation : false, image : '/sites/all/themes/epiphany/scripts/spritify/box.png', posY : 32, posX : 336 });
    var box3 = spritify({ movement : false, animation : false, image : '/sites/all/themes/epiphany/scripts/spritify/box.png', posY : 184, posX : 184 });
    var box4 = spritify({ movement : false, animation : false, image : '/sites/all/themes/epiphany/scripts/spritify/box.png', posY : 336, posX : 32 });
    var box5 = spritify({ movement : false, animation : false, image : '/sites/all/themes/epiphany/scripts/spritify/box.png', posY : 336, posX : 336 });
    var character = spritify({ movementType : '8dir', image : '/sites/all/themes/epiphany/scripts/spritify/spritify2-character.png', posX: 0, posY : 184, collisionObjs : 'collisionObjs' });
 
    //define collision objects
    window.collisionObjs = new Array();
    window.collisionObjs[0] = box1;
    window.collisionObjs[1] = box2;
    window.collisionObjs[2] = box3;
    window.collisionObjs[3] = box4;
    window.collisionObjs[4] = box5;
 
    function draw() {
      canvas.clearRect(0, 0, 400, 400);
      canvas.fillStyle = "green";
      canvas.fillRect(0, 0, 400, 400);
 
      //draw/update character
      character.spritifyObj.update();
      character.spritifyObj.draw();
 
      //draw/update collisionObjs
      if (window.collisionObjs) {
        for(var x = 0; x < window.collisionObjs.length; x++) {
          window.collisionObjs[x].spritifyObj.update();
          window.collisionObjs[x].spritifyObj.draw();
        }
      }
 
    }
 
    setInterval(function() {
      draw();
    }, 1000/30);
 
  });

Page HTML

<canvas id="canvas" width="400px" height="400px"></canvas>