Defining a Sprite to the DGM

In order to define a Sprite to the Digipiph Game Manager, one will need to provide several attributes shown below. These attributes contain everything the framework will need to recognize your sprite and to perform the basic animations and collisions.

• id: Required. The unique id of your sprite.
• nameplate: A name to accompany the character
  • name: The displayed name
  • size: Font size (INTEGER ONLY)
  • font: The font name recognized by CSS
  • color: The font color, maybe HEX or named (Ex: "#F00" or "red")
  • location: "top" or "bottom" (Default: "top")
• x: The x coordinate of your sprite.
• y: The y coordinate of your sprite.
• images: The image path or a list of image paths to be used for the sprite. For a more detailed explanation, see EaselJS.
• framerate: This specifies the framerate that will be set. For a more detailed explanation, see EaselJS.
• animations: Animation definitions. Define a consecutive range of frames (begin to end inclusive). You may also define a "next" animation to sequence to (or false to stop) and a playback "speed". For a more detailed explanation, see EaselJS.
• frames: Define frame width/height, and optionally the frame count and registration point x/y. For a more detailed explanation, see EaselJS.
• movement: Define the sprites movement properties of the sprite.
  • type: (linearLR, linearUD, 4dir, 8dir), "8dir" is currently the only one being used at the moment. To restrict movement to left and right, simply configure the left and right movement buttons only. The other movement types will come into play when automated movement is added to the DGM.
  • distanceOnPress: The distance in pixels the sprite will move per frame.
  • keycodeUp: The javascript keycode for the UP movement. See a list of Keycodes here.
  • keycodeDown: The javascript keycode for the DOWN movement. See a list of Keycodes here.
  • keycodeLeft: The javascript keycode for the LEFT movement. See a list of Keycodes here.
  • keycodeRight: The javascript keycode for the RIGHT movement. See a list of Keycodes here.
• collisionObject: True or False, if set to True, other objects will not be allowed to pass through it.
• collisionType: Pixel or Default, pixel collision occurs when pixels from your image collide with pixels from another image. Default collision occurs when the area of your image collides with the area of another image. For a more detailed explanation, see IndieGamr.
• collisionAlphaThreshold: Default is 0, set to higher value to ignore collisions with semi transparent pixels. For a more detailed explanation, see IndieGamr.
• onCollision: The function to handle when the object is collided with. This function is passed the Sprite Object and the Collision Object.

var character_sprite_data = {
  "id": "character",
  "nameplate":
    {
      "name": "Character",
      "size": 14,
      "font": "Comic Sans MS",
      "color": "red",
      "location": "bottom"
    },
  "x": 100,
  "y": 100,
  "images": 'images/character.png',
  "framerate": 32,
  "animations":
    {
      "down": [0, 3, "down", 0.25],
      "left": [4, 7, "left", 0.25],
      "right": [8, 11, "right", 0.25],
      "up": [12, 15, "up", 0.25],
      "downLeft": [16, 19, "downLeft", 0.25],
       "downRight": [20, 23, "downRight", 0.25],
      "upLeft": [24, 27, "upLeft", 0.25],
      "upRight": [28, 31, "upRight", 0.25]
    },
  "frames":
    {
      "height": 32,
      "width":32,
      "regX": 0,
      "regY": 0,
      "count": 32
    },
  "movement":
    {
      "type" : '8dir',
      "distanceOnPress" : 4,
      "keycodeUp" : 38,
      "keycodeDown" : 40,
      "keycodeLeft" : 37,
      "keycodeRight" : 39
    },
  "collisionObject": true,
  "collisionType": "pixel",
  "collisionAlphaThreshold": 10,
  "onCollision": function(spriteObj, collisionObj) {
    console.log(spriteObj.id + ' was hit by ' + collisionObj.id);
  }
};
 
//set the sprite to the canvas
var character = dgm.configSprite(character_sprite_data, gameCanvas);