added tileEngine.js for tileset support

straker · Jun 10, 2015 · e740891 · e740891
1 parent 240203b
commit e740891
Show file tree

Hide file tree

Showing 15 changed files with 1,202 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ Kontra.js does provide some more advance data structures like object pools and q
 
 Kontra.js prides itself in being:
 
-- **lightweight**: under 20K minified.
+- **lightweight**: under 25K minified.
 - **modular**: pick and choose what modules you want to use using `gulp build`. very few inter-dependencies.
 - **extensible**: everything is customizable and can be extended.
 - **fast**: all logic has been removed from the update and render cycles.

diff --git a/examples/extendingSprite.html b/examples/extendingSprite.html
@@ -92,7 +92,7 @@
     };
 
     // call kontra.sprite set function
-    kontra.sprite._proto.set.call(this, properties);
+    kontra.sprite.prototype.set.call(this, properties);
   };
 
   var setSprite = createSetSprite();

diff --git a/examples/tileEngine/index.html b/examples/tileEngine/index.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tile Engine</title>
+  <style>
+  canvas {
+    background: black;
+  }
+  </style>
+  <script type="text/javascript" src="../../kontra.js"></script>
+</head>
+<body>
+  <canvas width="600" height="600"></canvas>
+  <script>
+  kontra.init();
+
+  kontra.loadAssets('terrain.json', 'man.png', 'terrain.png').then(function() {
+    var terrain = kontra.data.terrain;
+
+    // setup tile engine
+    var tileEngine = kontra.tileEngine({
+      tileWidth: terrain.tilewidth,
+      tileHeight: terrain.tileheight,
+      width: terrain.width,
+      height: terrain.height,
+      sx: terrain.width * terrain.tilewidth / 2 - kontra.canvas.width / 2,
+      sy: terrain.height * terrain.tileheight - kontra.canvas.height
+    });
+
+    // add all tilesets
+    for (var i = 0, tileset; tileset = terrain.tilesets[i]; i++) {
+      tileEngine.addTileset({
+        image: kontra.images[tileset.image],
+        firstGrid: tileset.firstgrid
+      });
+    }
+
+    // add all layers
+    for (var i = 0, layer; layer = terrain.layers[i]; i++) {
+      tileEngine.addLayer({
+        name: layer.name,
+        data: layer.data,
+        render: (layer.properties ? JSON.parse(layer.properties.render) : true),
+        zIndex: i,
+      });
+    }
+
+    // create the walking man sprite sheet and animations
+    var spritesheet = kontra.spriteSheet({
+      image: kontra.images.man,
+      frameWidth: 64,
+      frameHeight: 64,
+      animations: {
+        walk_up: {
+          frames: '104..112',
+          frameSpeed: 4
+        },
+        walk_left: {
+          frames: '117..125',
+          frameSpeed: 4
+        },
+        walk_down: {
+          frames: '130..138',
+          frameSpeed: 4
+        },
+        walk_right: {
+          frames: '143..151',
+          frameSpeed: 4
+        }
+      }
+    });
+
+    // create the player
+    var player = kontra.sprite({
+      x: 268,
+      y: 268,
+      width: 64,
+      height: 64,
+      properties: {
+        speed: 3,
+        startX: 268,
+        startY: 268
+      },
+      animations: spritesheet.animations,
+      update: function() {
+        // create a smaller bounding box for the player's collision
+        var collisionBox = {
+          y: this.position.y + 43,
+          x: this.position.x + 28,
+          width: 6,
+          height: 22
+        };
+
+        if (kontra.keys.pressed('up')) {
+          // change the animation
+          this.playAnimation('walk_up');
+
+          // update the animation
+          this.advance();
+
+          // don't move the player if he collides with the collision layer
+          collisionBox.y -= this.speed;
+          if (tileEngine.layerCollidesWith('collision', collisionBox)) {
+            return;
+          }
+
+          // player will walk in the center of the map so long as he doesn't
+          // reach the edge
+          if (tileEngine.sy >= 0 && this.position.y <= this.startY) {
+            tileEngine.sy -= this.speed;
+          }
+          // otherwise the map will stop moving and the player will move from
+          // the center
+          else {
+            this.position.add({y: -this.speed});
+          }
+        }
+
+        else if (kontra.keys.pressed('down')) {
+          this.playAnimation('walk_down');
+
+          this.advance();
+
+          collisionBox.y += this.speed;
+          if (tileEngine.layerCollidesWith('collision', collisionBox)) {
+            return;
+          }
+
+          if (tileEngine.sy <= tileEngine.mapHeight - kontra.canvas.height &&
+              this.position.y >= this.startY) {
+            tileEngine.sy += this.speed;
+          }
+          else {
+            this.position.add({y: this.speed});
+          }
+        }
+
+        else if (kontra.keys.pressed('left')) {
+          this.playAnimation('walk_left');
+
+          this.advance();
+
+          collisionBox.x -= this.speed;
+          if (tileEngine.layerCollidesWith('collision', collisionBox)) {
+            return;
+          }
+
+          if (tileEngine.sx >= 0 && this.position.x <= this.startX) {
+            tileEngine.sx -= this.speed;
+          }
+          else {
+            this.position.add({x: -this.speed});
+          }
+        }
+
+        else if (kontra.keys.pressed('right')) {
+          this.playAnimation('walk_right');
+
+          this.advance();
+
+          collisionBox.x += this.speed;
+          if (tileEngine.layerCollidesWith('collision', collisionBox)) {
+            return;
+          }
+
+          if (tileEngine.sx <= tileEngine.mapWidth - kontra.canvas.width &&
+              this.position.x >= this.startX) {
+            tileEngine.sx += this.speed;
+          }
+          else {
+            this.position.add({x: this.speed});
+          }
+        }
+      },
+    });
+
+    player.position.clamp(0, 0, kontra.canvas.width - 64, kontra.canvas.height - 64);
+
+    var loop = kontra.gameLoop({
+      update: function() {
+        player.update();
+      },
+      render: function() {
+        kontra.context.clearRect(0,0,kontra.canvas.width,kontra.canvas.height);
+
+        tileEngine.render();
+        player.render();
+
+        // draw the topmost layer above the payer so he will go behind the trees
+        tileEngine.renderLayer('decoration_edges');
+      }
+    });
+
+    loop.start();
+  });
+  </script>
+</body>
+</html>
diff --git a/examples/tileEngine/man.png b/examples/tileEngine/man.png
diff --git a/examples/tileEngine/terrain.json b/examples/tileEngine/terrain.json
diff --git a/examples/tileEngine/terrain.png b/examples/tileEngine/terrain.png
diff --git a/examples/tileEngine/terrain.tmx b/examples/tileEngine/terrain.tmx
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.0" orientation="orthogonal" width="100" height="55" tilewidth="32" tileheight="32">
+ <tileset firstgid="1" name="terrain" tilewidth="32" tileheight="32">
+  <image source="terrain.png" width="1024" height="1024"/>
+ </tileset>
+ <layer name="ground_base" width="100" height="55">
+  <data encoding="base64" compression="gzip">
+   H4sIAAAAAAAAA+2bS3IcRRCGu3sgOIfEw/IFLG95elgifAEMeMwS4UAcASOzIXQFwpZsb4EbyFjmEPgFHps7UMV0hnNSmVlZ1dVdPYMWf7inp7oe+eWjqjXemFTVR01VXQpoY7KsP+uqeuT02OmJcv2Ja7sz0dvg66f16bE0/VbFtZf0u1vjA0Z3mXsnzaL99/VC8Jl7PlYbiTxqd69xmji9plx/7druTvQ2+Pp1Zqwckrg9qxaKsSfH43kHBi8TeJxi4j5vOr3p9JZyDfGhtcHXb/fEQxLw8PacO91DNvrHyONOs1CXGIE49HO66v79u47j8a77/J7T+04fKNcQH1obfP0hwyNXTuqStzQeNGdRjj9GcIF5xOassdSP3HGCedxtYwbHDfB43kqrIVztycWDzn/V6kds3pq39rnT+jfY+ia6j9u+YHhY6oXEQ8tZ/vtNuobGVg+Ax1jrB9WNZqEfmlc1+sjpD2K3E9Ruv2UWquk0j0H84HyG53LVEBuQy4esH12VWn8OFdt6HoctK1BsTT9R4sPr14h5f+aeveL0udMXyjXw0Nrg6y878LDa/VSsM3krtAeOqelSfgrxCK3pl0g/8xwOnK631ztGm5RULh4WPTTw6Cpq591Wnsll9Lm03S2iZxILj1ANCe25Un0/JkZAB4jNqjDxoj7/UuDBnQtjzh5cfLzj7p3roC0h5nZQfOD89ekI7C1pVi3E5SDuDJL6Lou+L8GyvjuR9IbCBVhQXRbuw3d7A57PrTweoFjoyoPGB67hXXmApkKc7DKieQw4HEzGUXMk+0KMzNvPHI85eeZFo9cYOrY/g8wa2/us1DihXMDm3zAxdICuS8WJtx9X072OSJxgHnBmxHx825tKDElz6CNOYs5llNV/Oa1aVukYgbyPazuNjyPyzMOGP+9jHtxZoO+8RSWdRYHLT218QIwMyUOqIfNm+d0V3vPCd1Jc4XiR3pdgWd/BW3lYz39aO+CxZ4wP2td3ie+OZ+Q9IzD4uQrLygbiRfPT1Bj5q17UIK9rxviIkZVHTnG2fmYUZaNx0eYQwyM3g5nr71qrrxi/HpqH1fYWNjTWsLi1gmCvZRHHANtUsy3X/mO0p58y/XCifdPxtbFTeHDro+OFYoZqmjhfbq9E54dtim3LjTMT2t9n7kmi3Gh/dK1Qi2L8RvKZC84fLzptN/J4lvjR5hubVzh7WuxGn91yuo10PoJJCjvJb7At/F5A8pmLiMGxcH9a27hI6+VshhkBBzy/Y9JHil39M4fEF26RfjhpfW+R7+8nspP8bR8J37vQyH1Rf9+rl9drsVXIpygDzq50HMqMPiOJ1nPo+1jokzLV5gHfUf+ShG3vr31c7AeembZMzgnrvUXmEuNDGgNpnFj7czy2Gd6hPr+tw/OgttC0jWxP49Dq31ptsMYKZpFq0y7ieOQWlyepbWiNsNRQ6ushLiEmMfHg1cffZofgkcNfY3QjMk6AQ9/xEOLnOZTi4ffH1nyG/dbSfsqsB9siNddb/vbb9TegpXiEfJbm8Uv1cvsQl1Jr6YNHid+sSHtxzXc5LseZeQz5m2eJx6qJ49Klv5jfz53xCHO5HVhP7t8A5exvnXhIGutvBjUe684Eq0tN6DuX/R95SBpLHA2Rs/r63WZprdMZ/UzxPFL9emzxUHIPm5PHmV5pKB8bisfQZ91VnV/uPVYfflTaVpbxz86FNuW001B1KCVGhqzZuePD23XoPUfs3njMMVJ6v1Zi/HU9F47l3J2bh2RLnFNL193Q/EJK8Ze+asoY85XG18q+dK7rwqP0HNZFOWLmelXu/7LlXEeKutSYrvG3yawb/i9ICR4agxy5xsKYjhPjF33Wj1x9jbGu9y0txkLMOL9b9fqxqnVbEscjJdYlDRkz/wL8xDpu8FUAAA==
+  </data>
+ </layer>
+ <layer name="ground_edges" width="100" height="55">
+  <data encoding="base64" compression="gzip">
+   H4sIAAAAAAAAA+2cXVIbMQzHDbkCnekzZwDaI/StDyWUG8AbD5l20lP0oRQOwkzgPLxwja4GNCiubMu7/rZ/M5osyeJs9I8ka9cbpWR8Odz/eyv8P19+Ol4/m2wz2Q+PMc/mH06x5NZjR7ZdeuwM25RHn4MqkNx6fJts/bat6/G8et/nnLG1ao/ceoAGJ+rVv6dkmxo8fzTZrWZ/Ix1rLl4OlLrOrMcf9e7fD4r3O/W9KU/VDqcFkFKPnfbI1Q98zVW7W6sbSCo9uJpgyleSmkH1qCGGrg73jYsNIJUeNE9J8hXNW5y/a48PE58m++6wS7L/hWB/sM+W97TlqyW02J9wgGaoyd1kHwONG1qPnqB5DTS5VzJdbLk9pB56/oKxHwKOXxqY12juWhorMeMDxoba1FrPokNzF+ATKzo2PZbWgp5yoa4JgLqYjNMrhM9M+bAnPQAuf9ng4sjHZ1gfTHHD1Y+e9EBc82Vdr4sDcz8Y8nwh9Dut1445SOIIe8Lhv3SgLtAn0v4cMOUVrA2t9uKlsXl79K0h0ucHfvjqYaOXcyUxCakHx4gbf74azjv78hRmmO65CaSHjREncn4n0KNEttPn/tXpZx8MaiT2/Gqwj6uOxtRj9Pb+jPjIC3dOHAitx5Pa70dG7y7DpAeXY3SfcvscrxYfUtekzFc1rJnLgX6/ASDRI6Y/H5W87rc8PwA9IA/lqOe+NaXmXCj9LsfKVz6+Xhp3LcWLRI+S5kbStRSlIu0HYU1DrHuffH1F79+K9R6lAmtA9Gvors8WO4+b1gn1cn1lbg3Rc4fJXy799HF6XbeFlHbOZOjxSik+0PXoJU9hnShJD6jlsGayhGPJRYo5lg38/qMWS+9RKGl+PgdujpUD2/0iNh/X2rfb5rG5YwSPoac8ZTsvESNGpHkD78PuvW7ohKrr0vxBdRjr6/8n1Txr6CAjhR50DhVCh9rnUjZi6xFqPtsLdI5l+z2TuTa08AP1cP2eyRIbWsgp6byJhFr7QClL9Wi5tuagtmu3Lv4Bp9/HAPBVAAA=
+  </data>
+ </layer>
+ <layer name="cliffs_base" width="100" height="55">
+  <data encoding="base64" compression="gzip">
+   H4sIAAAAAAAAA+3ZMQ6CMBiGYVh08RwmJt7DQTbv4KBs3kES4uYVdFEPaUkgNCjhp7S0Sd8n+WOHEki/tLWQJPF6qNqp2hhcW6Zt+5b294NcVv+uDK4lD/ts5bFX7ZxMJstVFXWNXbfKzvgzR+wxmScvNf5b1iwnTNetKpN3XR/ysEZftxCO6v/vsy7JXnJSc+KsFXu6XZnWXgv6s6e7RR5hqfaRRdrWEPIISzcPzoXuZMNdfs4gFeaIG0dhP9aseVxVLQX7SHMmbOZJLHkcfD/AgDKyPC4e7y05G8aWx93jvcecRWLJwydJHv+YfHfEMBvvGcnGHslZRIpcpuvLoxAU7NO/j4wd66av5H0Y5tNkSi5h6ZtrrG8AAAAAAAAAAAAAAAAAAAAAgJB8AUF2ojrwVQAA
+  </data>
+ </layer>
+ <layer name="cliffs_edges" width="100" height="55">
+  <data encoding="base64" compression="gzip">
+   H4sIAAAAAAAAA+3VwQnCMBgG0IJX5xDUzlEPdg4vdi2ncBSXsZdgUsRQoSbF9+CngaTwwUfapgFgLdrSAQBm2pYOAMDq+ZfUpRvnNM6+dBASu9IBSOijLvqoiz7q0pUOQOJSOgCJ/sPe4WcpCIbm9c26TeaYebeNzrK8c2Y/vluhG5Yzp4+wju/Mu+F718z+EK37yZOyQjf6qMuQPwIAwOi+KZ2A2EMfAAAAAAAAAADwd55Ejp948FUAAA==
+  </data>
+ </layer>
+ <layer name="decoration_base" width="100" height="55">
+  <data encoding="base64" compression="gzip">
+   H4sIAAAAAAAAA+2aO28TQRDH79EBDQEBRUiBQgM0PJoo+QSAREtIRQsNFVRAb4mSQAPUOEBBghPxBSAElADiJYqUYFt0CIhEwaziE6fV3Xpmdm9v1vZPGiVx9m7P85+dmV07ivjsTqNoDGwP2LyF5e+TMRVH0eG0fO48h5DjpmP6e4y1a34k9HtwuJiafxaR9+OYhZXpoZjpvfa2wA9lem3kxuav4+hBpYOMjTwrTI3Pa9dh9HgK1ywmdD1mwXdfkc+1jnw/FD2eO1oHj+A+HbDH2v30daavQwVlbSgweryDed8z9FBMOYxnldMyPWY95RzFWm+uVQ9zStVjMi1eM0qP6/D6DbCbHvyjYv41zNMEe8OcD7s2FMdhzAmwk4yciblPpkfmW/VzUhuT/W/D8H4netcoPe7BuPtgD5j+2Uzsa7qeCztaTtPrghRc5itFVfXcptZ0e9c+ZN7DZ+611UPvybB6NEper6LXbSR8Lai5dz0u/h0LVo+i/cdywTisHk3cMDSmflbp0WbqYZt7qaie94Jmc7H5/yabs9SjqCe1oQV+XEi2Ncn3XxOW9dglPvNhGa8c3quD2GfY9F9V4rMXtQG7n3a197iS8s0G3/mwatYKclFRT8A9L6FeK7WPVvjKi03DPNh+7VZqbxLJziZDyYvDgk1epO5BWgXjN0v25/04l9qbT3z3Zth9uUnDbmK3J5RKqDlogXhe0kjtzITLeHbdm1GfbR72FXfA7jL2jKaar+D0RdQzNW48f+nzd4ZNT8F5thbosAy2gtSDexb2JMUZFW48b0XbGmS2RZ+6L5xn+wg6fAL77OBM5ZqHz5Vd8jdnUvgFPvwN9icwX2bYxIBEPfbBWtoPdiCwfsIF0vR4UZKvV4Xui12iakZej7J6LoE2QY8dsK52Bri2VP0ej/9bFfWcw7ec78vWi4nToMUZhB6ZbrsC1M4HLx3lpEvg38sIHx+BMUfBjtWsh+uzEFf3++65RmTr6GyNerg+Cwn1bEXRhhzdAesy+lNXMej6LGSQPve6itQl5Bik8lPzye0CH2H9VhXUGJwR1KtT1/VebfyzQPfoVcPJl5x1fUob+6GPHhK+Q+Mbbr6surYMUx7PI7VmS32uEdUxLagWDxrDWGukUmetCSEOfD9jXbWmrjig+DeUvshFzNQRB1T/htAX+Y4Zyd8PkoDP9xRKvhgWBiWeQ+hbJIH11zjsuQ4S912jNU6jan9JXOO+1qtpnrLvw0r0V5X4Wq+jvIADG3/91tBiHEVLhs8YKHE+OnszM4ptWQxbDh/hhjr2ETZzDvK+p46cajOn5BoQ6vmnzZxSa4DkOMn4B8KbuBjwVQAA
+  </data>
+ </layer>
+ <layer name="decoration_edges" width="100" height="55">
+  <properties>
+   <property name="render" value="false"/>
+  </properties>
+  <data encoding="base64" compression="gzip">
+   H4sIAAAAAAAAA+2aTU7DQAyFE+YUhZNAV70BN2MBq16iZc2iB+AInIQ/iUFRJRYB4sT2PMfvk6xGUaqZep7/onbdwK78/dmax4vpzx5/PCv5HtHhIPD5a991b9Xee7v9aGERG/syGAqbenaX1a4YN678FjPX9f5NtW2Q80CrG9+cfTvm4/O9o5N/T0DnGCn3ZkCae+/68Wsv1t5bSXPvoR+/JjFgPsSCvSgW0XpRL27LfIsA8yIWzItYMC/aEykHIc34VjAHLUNbz5o5KFKsaYGsZ+S9WYFcU5H3RgghhJD18VQGIxi8lME80Z7PIs57z0B71Z7PMs57mhrUns8yznsZNYhMVA1GrC0RmOtX67jOet5z/Wod11nzOGq+RN0XIdHIWmtQaVVrIuigxR5b1ZoWOpD6N0JfpKWZFjqQ+jdCX+SpGeT/B6Hg+Zsi5ItMrEHPEfoWJKz9xRiXIfHXR33mE+zdmBSveJ27Dpq/rPGKV+aFaUzRn0YMZdO5JVO0fV/P6oE9igvUNpHSYo5Ysuba554W/cKSNVH7m8jvP5esiVoDUHWSFVSdkP9pVQO/AOZF897wVQAA
+  </data>
+ </layer>
+ <layer name="collision" width="100" height="55" visible="0">
+  <properties>
+   <property name="render" value="false"/>
+  </properties>
+  <data encoding="base64" compression="gzip">
+   H4sIAAAAAAAAA+2Za27DMAyDff9T8ij7swKZpgdty3aa6AOExDZFqg2GFW1r42CiN/LL9tY8cakZr5F+1t+6ej3ZM2jePVmWj+YJZX8mYycyV64z/dHhP6pDy3seIx5shrxG+uz8Xf7XfTjnjFdP7ypwuc7W1U/6z8ym7Wk5UPYjf4j1CiCukfZTs5maj5xFy/HOWI2V73nJPqaXJdMrE2z2y857Gkjuj/xg3Ht6WbvpyYRxvyIrww/GPevH9HwzMCo69yrK0+4ZPdvD6Ht93gAGNEzPt4HTA/yCFv9NybNIX4yDxj0Pee7pT4NgfWfQ+v/naOuCA0k6tL/PjfUtxkCnTuq1ftaz+A9a32ctRvsWsMiT8YW4FmtA476HtCprhh3syhkB4t6qyIPV3h00/bVA0e2YJcPjU6uzmBmuxeqj/d4zL9sjw8Pyiio7y9Kw+5rOWkf51pnWZ83CzJgFWv+zyeiRvdGZ9BrB8vfOLW0m0TzRWuvVNJHWm8fz6JljFCYjEysLQXlemsbbi3yvem0N5Z4paw4meyVo3PsR9Ub9UjuSx3j3aGWP5cP4ZoPO3F79NwGjTs0RnUe6THblRKDd55nA2H8baNz7AKWyckf8ZvPvDlr8uUbbs3qKeeAU01Pkg2Dt9X3qDeD0AAZQ1lD2i6LIB6cHKIpN4PQAxS3A6QEIcHqAh4PTAywApwcojoHTAxRFQYE2/ltqwYPTA7wQnB7gRuBhOUXud9NZPk8GpwcoiqJ4EPiyzJneorgLP4OckvTwVQAA
+  </data>
+ </layer>
+</map>
diff --git a/gulpfile.js b/gulpfile.js
@@ -52,6 +52,7 @@ gulp.task('build', function() {
       '     quadtree - 2D spatial partition for storing objects by their positions',
       '       sprite - Object for drawing rectangles, images, and sprite sheet animations',
       '  spriteSheet - Sprite sheets and sprite animations',
+      '   tileEngine - Tile engine for rendering tilesets',
       '        store - Local Storage interface for ease of use'
     ];
 
@@ -111,15 +112,16 @@ gulp.task('build', function() {
     '/*',
     ' * Kontra.js v' + package.version + ' (Custom Build on ' + date + ') | MIT',
     ' * Build: --files ' + originalSrc,
-    ' */\n\n'
+    ' */\n'
   ]
 
   return gulp.src(src)
     .pipe(concat('kontra.build.js'))
-    .pipe(concat.header(header.join('\n')))
+    .pipe(concat.header(header.join('\n') + '\n'))
     .pipe(size())
     .pipe(gulp.dest('.'))
     .pipe(uglify())
+    .pipe(concat.header(header.join('\n')))
     .pipe(rename('kontra.build.min.js'))
     .pipe(size())
     .pipe(gulp.dest('.'))