straker · straker · Jul 12, 2024 · Jul 12, 2024 · Jul 12, 2024
diff --git a/examples/imgs/Attribution.txt b/examples/imgs/Attribution.txt
@@ -6,6 +6,7 @@ CC0 1.0 Universal
 
 Assets from:
     http://opengameart.org/content/platformer-tiles
+    https://opengameart.org/content/classic-hero
     https://www.kenney.nl/assets/ui-pack
     https://www.kenney.nl/assets/topdown-tanks-redux
 

diff --git a/examples/imgs/oldHero.png b/examples/imgs/oldHero.png
diff --git a/examples/spriteSheet/margin.html b/examples/spriteSheet/margin.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Animation Sprite</title>
+  <script src="../../kontra.js"></script>
+</head>
+<body>
+  <canvas id="game" width="600" height="400" style="background: #333331"></canvas>
+  <script id="code">
+    // initialize the game and setup the canvas
+    let { canvas, context } = kontra.init();
+
+    // set image path so we don't have to reference the sprite sheet by it's path
+    kontra.setImagePath('../imgs/');
+
+    // load the sprite sheet
+    kontra.load('oldHero.png').then(function() {
+
+      // create the sprite sheet and its animation
+      window.spriteSheet = kontra.SpriteSheet({
+        image: kontra.imageAssets.oldHero,
+        frameWidth: 16,
+        frameHeight: 16,
+        margin: 16,
+        animations: {
+          swim: {
+            frames: '21..26',  // frames 21 through 26
+            frameRate: 2
+          }
+        }
+      });
+
+      // pass the animations to the sprite
+      window.sprite = kontra.Sprite({
+        width: 16,
+        height: 16,
+        anchor: {
+          x: 0.5,
+          y: 0.5,
+        },
+        x: 300,
+        y: 200,
+        animations: spriteSheet.animations
+      });
+
+      // set the animation to play
+      sprite.playAnimation('swim');
+
+      // create the game loop to update and render the sprite
+      window.loop = kontra.GameLoop({
+        update: function() {
+          sprite.update();
+        },
+        render: function() {
+          sprite.render();
+        }
+      });
+
+      // start the loop
+      loop.start();
+    });
+  </script>
+  <script src="../prism/codeOutput.js"></script>
+</body>
+</html>
diff --git a/examples/tileEngine/margin/marginTiles.json b/examples/tileEngine/margin/marginTiles.json
@@ -1,20 +1,71 @@
-{ "height":25,
+{ "compressionlevel":-1,
+ "height":25,
  "infinite":false,
  "layers":[
         {
-         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 153, 151, 151, 151, 151, 151, 151, 151, 151, 154, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 210, 210, 210, 210, 210, 210, 210, 210, 180, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 266, 266, 266, 266, 266, 266, 266, 266, 180, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 181, 151, 151, 151, 151, 151, 151, 154, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 209, 210, 210, 211, 210, 210, 210, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 265, 266, 266, 267, 266, 266, 266, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 150, 151, 151, 151, 151, 151, 183, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 209, 210, 210, 210, 210, 210, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 265, 266, 266, 266, 266, 266, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 180, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 325, 180, 0, 0, 0, 0, 0, 0, 0, 0, 181, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 151, 182, 0, 0, 0, 0, 0, 0, 0, 0, 205, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 206, 208, 0, 0, 0, 0, 0, 0, 0, 0, 261, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 262, 264, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 158, 156, 156, 156, 156, 156, 156, 156, 156, 159, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 217, 217, 217, 217, 217, 217, 217, 217, 186, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 275, 275, 275, 275, 275, 275, 275, 275, 186, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 187, 156, 156, 156, 156, 156, 156, 159, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 216, 217, 217, 218, 217, 217, 217, 186, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 274, 275, 275, 276, 275, 275, 275, 186, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 155, 156, 156, 156, 156, 156, 189, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 216, 217, 217, 217, 217, 217, 186, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 274, 275, 275, 275, 275, 275, 186, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0,
+            0, 0, 0, 0, 186, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 336, 186, 0, 0, 0, 0,
+            0, 0, 0, 0, 187, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 156, 188, 0, 0, 0, 0,
+            0, 0, 0, 0, 212, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 213, 215, 0, 0, 0, 0,
+            0, 0, 0, 0, 270, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 271, 273, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":25,
+         "id":1,
          "name":"Tile Layer 1",
          "opacity":1,
          "type":"tilelayer",
          "visible":true,
          "width":25,
          "x":0,
          "y":0
-        },
+        }, 
         {
-         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 89, 0, 0, 163, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 117, 0, 0, 191, 196, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 86, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 141, 0, 35, 0, 0, 0, 0, 141, 0, 0, 0, 90, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 169, 0, 0, 0, 0, 0, 0, 169, 0, 0, 0, 118, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 115, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 92, 0, 0, 168, 173, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 121, 0, 0, 197, 202, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 89, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 146, 0, 36, 0, 0, 0, 0, 146, 0, 0, 0, 93, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 175, 0, 0, 0, 0, 0, 0, 175, 0, 0, 0, 122, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 32, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 119, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":25,
+         "id":2,
          "name":"Tile Layer 2",
          "opacity":1,
          "type":"tilelayer",
@@ -23,18 +74,28 @@
          "x":0,
          "y":0
         }],
+ "nextlayerid":3,
  "nextobjectid":1,
  "orientation":"orthogonal",
  "renderorder":"right-down",
- "tiledversion":"1.1.6",
+ "tiledversion":"1.10.2",
  "tileheight":16,
  "tilesets":[
         {
+         "columns":29,
          "firstgid":1,
-         "source":"roguelikeDungeon_transparent.json"
+         "image":"roguelikeDungeon_transparent.png",
+         "imageheight":315,
+         "imagewidth":502,
+         "margin":5,
+         "name":"roguelikeDungeon_transparent",
+         "spacing":1,
+         "tilecount":522,
+         "tileheight":16,
+         "tilewidth":16
         }],
  "tilewidth":16,
  "type":"map",
- "version":1,
+ "version":"1.10",
  "width":25
 }
diff --git a/examples/tileEngine/margin/marginTiles.tmx b/examples/tileEngine/margin/marginTiles.tmx
@@ -1,54 +1,59 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<map version="1.0" tiledversion="1.1.6" orientation="orthogonal" renderorder="right-down" width="25" height="25" tilewidth="16" tileheight="16" infinite="0" nextobjectid="1">
- <tileset firstgid="1" source="roguelikeDungeon_transparent.tsx"/>
- <layer name="Tile Layer 1" width="25" height="25">
+<map version="1.10" tiledversion="1.10.2" orientation="orthogonal" renderorder="right-down" width="25" height="25" tilewidth="16" tileheight="16" infinite="0" nextlayerid="3" nextobjectid="1">
+ <editorsettings>
+  <export target="marginTiles.json" format="json"/>
+ </editorsettings>
+ <tileset firstgid="1" name="roguelikeDungeon_transparent" tilewidth="16" tileheight="16" spacing="1" margin="5" tilecount="551" columns="29">
+  <image source="roguelikeDungeon_transparent.png" width="502" height="315"/>
+ </tileset>
+ <layer id="1" name="Tile Layer 1" width="25" height="25">
   <data encoding="csv">
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,153,151,151,151,151,151,151,151,151,154,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,180,210,210,210,210,210,210,210,210,180,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,180,266,266,266,266,266,266,266,266,180,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,180,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,180,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,180,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,181,151,151,151,151,151,151,154,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,209,210,210,211,210,210,210,180,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,265,266,266,267,266,266,266,180,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,325,325,325,325,325,325,325,180,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,325,150,151,151,151,151,151,183,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,325,209,210,210,210,210,210,180,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,325,265,266,266,266,266,266,180,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,325,325,325,325,325,325,325,180,0,0,0,0,
-0,0,0,0,180,325,325,325,325,325,325,325,325,325,325,325,325,325,325,325,180,0,0,0,0,
-0,0,0,0,181,151,151,151,151,151,151,151,151,151,151,151,151,151,151,151,182,0,0,0,0,
-0,0,0,0,205,206,206,206,206,206,206,206,206,206,206,206,206,206,206,206,208,0,0,0,0,
-0,0,0,0,261,262,262,262,262,262,262,262,262,262,262,262,262,262,262,262,264,0,0,0,0,
+0,0,0,0,158,156,156,156,156,156,156,156,156,159,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,186,217,217,217,217,217,217,217,217,186,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,186,275,275,275,275,275,275,275,275,186,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,186,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,186,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,186,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,187,156,156,156,156,156,156,159,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,216,217,217,218,217,217,217,186,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,274,275,275,276,275,275,275,186,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,336,336,336,336,336,336,336,186,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,336,155,156,156,156,156,156,189,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,336,216,217,217,217,217,217,186,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,336,274,275,275,275,275,275,186,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,336,336,336,336,336,336,336,186,0,0,0,0,
+0,0,0,0,186,336,336,336,336,336,336,336,336,336,336,336,336,336,336,336,186,0,0,0,0,
+0,0,0,0,187,156,156,156,156,156,156,156,156,156,156,156,156,156,156,156,188,0,0,0,0,
+0,0,0,0,212,213,213,213,213,213,213,213,213,213,213,213,213,213,213,213,215,0,0,0,0,
+0,0,0,0,270,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,273,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
 </data>
  </layer>
- <layer name="Tile Layer 2" width="25" height="25">
+ <layer id="2" name="Tile Layer 2" width="25" height="25">
   <data encoding="csv">
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,0,0,89,0,0,163,168,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,0,0,117,0,0,191,196,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,92,0,0,168,173,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,121,0,0,197,202,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,0,0,0,0,0,0,86,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,89,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,0,141,0,35,0,0,0,0,141,0,0,0,90,0,0,0,0,0,0,0,0,
-0,0,0,0,0,169,0,0,0,0,0,0,169,0,0,0,118,0,0,0,0,0,0,0,0,
+0,0,0,0,0,146,0,36,0,0,0,0,146,0,0,0,93,0,0,0,0,0,0,0,0,
+0,0,0,0,0,175,0,0,0,0,0,0,175,0,0,0,122,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,0,0,0,0,0,0,31,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
-0,0,0,0,0,0,0,115,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,119,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,

diff --git a/examples/tileEngine/margin/roguelikeDungeon_transparent.png b/examples/tileEngine/margin/roguelikeDungeon_transparent.png
diff --git a/src/animation.js b/src/animation.js
@@ -38,7 +38,12 @@ import { getContext } from './core.js';
  */
 class Animation {
   constructor({ spriteSheet, frames, frameRate, loop = true, name }) {
-    let { width, height, margin = 0 } = spriteSheet.frame;
+    let {
+      width,
+      height,
+      spacing = 0,
+      margin = 0
+    } = spriteSheet.frame;
 
     Object.assign(this, {
       /**
@@ -91,7 +96,14 @@ class Animation {
       height,
 
       /**
-       * The space between each frame. Taken from the [frame margin value](api/spriteSheet#frame) of the sprite sheet.
+       * The space between each frame. Taken from the [frame spacing value](api/spriteSheet#frame) of the sprite sheet.
+       * @memberof Animation
+       * @property {Number} spacing
+       */
+      spacing,
+
+      /**
+       * The border space around the sprite sheet image. Taken from the [frame margin value](api/spriteSheet#frame) of the sprite sheet.
        * @memberof Animation
        * @property {Number} margin
        */
@@ -222,8 +234,8 @@ class Animation {
 
     context.drawImage(
       this.spriteSheet.image,
-      col * this.width + (col * 2 + 1) * this.margin,
-      row * this.height + (row * 2 + 1) * this.margin,
+      this.margin + col * this.width + (col * 2 + 1) * this.spacing,
+      this.margin + row * this.height + (row * 2 + 1) * this.spacing,
       this.width,
       this.height,
       x,