test(tileEngine): add tests to tileEngine.js

docs(examples): fix examples to use current api

examples/galaxian/js/galaxian.js

@@ -341,7 +341,7 @@ kontra.loadAssets(
     kontra.audios.kick_shock.currentTime = 0;
     kontra.audios.kick_shock.play();
 
-    player.position.init(280, 270);
+    player.position.init({x: 280, y: 270});
   };
 
   startGame();

examples/tileEngine/index.html

@@ -59,20 +59,20 @@
       frameHeight: 64,
       animations: {
         walk_up: {
-          frames: '104..112',
-          frameSpeed: 4
+          frames: '105..112',
+          frameRate: 12
         },
         walk_left: {
-          frames: '117..125',
-          frameSpeed: 4
+          frames: '118..125',
+          frameRate: 12
         },
         walk_down: {
-          frames: '130..138',
-          frameSpeed: 4
+          frames: '131..138',
+          frameRate: 12
         },
         walk_right: {
-          frames: '143..151',
-          frameSpeed: 4
+          frames: '144..151',
+          frameRate: 12
         }
       }
     });
@@ -81,8 +81,6 @@
     var player = kontra.sprite({
       x: 268,
       y: 268,
-      width: 64,
-      height: 64,
       speed: 3,
       startX: 268,
       startY: 268,
@@ -179,7 +177,7 @@
       },
     });
 
-    player.position.clamp(0, 0, kontra.canvas.width - player.width, kontra.canvas.height - player.height);
+    player.position.clamp(-16, -16, kontra.canvas.width - player.width + 16, kontra.canvas.height - player.height + 16);
 
     var loop = kontra.gameLoop({
       update: function() {

kontra.js

@@ -2785,7 +2785,7 @@ var kontra = (function(kontra, Math, undefined) {
      * @memberof kontra.tileEngine
      *
      * @param {object} properties - Properties of the image to add.
-     * @param {string|Image|Canvas} properties.image - Path to the image or Image object.
+     * @param {Image|Canvas} properties.image - Path to the image or Image object.
      * @param {number} properties.firstGrid - The first tile grid to start the image.
      */
     addTileset: function addTileset(properties) {
@@ -2803,7 +2803,7 @@ var kontra = (function(kontra, Math, undefined) {
             var tiles = (lastTileset.image.width / this.tileWidth | 0) *
                         (lastTileset.image.height / this.tileHeight | 0);
 
-            firstGrid = lastTileset.firstGrid + tiles - 1;
+            firstGrid = lastTileset.firstGrid + tiles;
           }
           // otherwise this is the first tile added to the tile map
           else {
@@ -2837,7 +2837,7 @@ var kontra = (function(kontra, Math, undefined) {
      * @param {string} properties.name - Name of the layer.
      * @param {number[]} properties.data - Tile layer data.
      * @param {boolean} [properties.render=true] - If the layer should be drawn.
-     * @param {number} properties.zIndex - Draw order for tile layer. Highest number is drawn last (i.e. on top of all other layers).
+     * @param {number} [properties.zIndex] - Draw order for tile layer. Highest number is drawn last (i.e. on top of all other layers).
      */
     addLayer: function addLayer(properties) {
       properties = properties || {};
@@ -2890,16 +2890,12 @@ var kontra = (function(kontra, Math, undefined) {
      * @returns {boolean} True if the object collides with a tile, false otherwise.
      */
     layerCollidesWith: function layerCollidesWith(name, object) {
-      // handle non-kontra.sprite objects as well as kontra.sprite objects
-      var x = (object.x !== undefined ? object.x : object.position.x);
-      var y = (object.y !== undefined ? object.y : object.position.y);
-
       // calculate all tiles that the object can collide with
-      var row = this._getRow(y);
-      var col = this._getCol(x);
+      var row = this._getRow(object.y);
+      var col = this._getCol(object.x);
 
-      var endRow = this._getRow(y + object.height);
-      var endCol = this._getCol(x + object.width);
+      var endRow = this._getRow(object.y + object.height);
+      var endCol = this._getCol(object.x + object.width);
 
       // check all tiles
       var index;

src/tileEngine.js

@@ -89,7 +89,7 @@ var kontra = (function(kontra, Math, undefined) {
      * @memberof kontra.tileEngine
      *
      * @param {object} properties - Properties of the image to add.
-     * @param {string|Image|Canvas} properties.image - Path to the image or Image object.
+     * @param {Image|Canvas} properties.image - Path to the image or Image object.
      * @param {number} properties.firstGrid - The first tile grid to start the image.
      */
     addTileset: function addTileset(properties) {
@@ -107,7 +107,7 @@ var kontra = (function(kontra, Math, undefined) {
             var tiles = (lastTileset.image.width / this.tileWidth | 0) *
                         (lastTileset.image.height / this.tileHeight | 0);
 
-            firstGrid = lastTileset.firstGrid + tiles - 1;
+            firstGrid = lastTileset.firstGrid + tiles;
           }
           // otherwise this is the first tile added to the tile map
           else {
@@ -141,7 +141,7 @@ var kontra = (function(kontra, Math, undefined) {
      * @param {string} properties.name - Name of the layer.
      * @param {number[]} properties.data - Tile layer data.
      * @param {boolean} [properties.render=true] - If the layer should be drawn.
-     * @param {number} properties.zIndex - Draw order for tile layer. Highest number is drawn last (i.e. on top of all other layers).
+     * @param {number} [properties.zIndex] - Draw order for tile layer. Highest number is drawn last (i.e. on top of all other layers).
      */
     addLayer: function addLayer(properties) {
       properties = properties || {};
@@ -194,16 +194,12 @@ var kontra = (function(kontra, Math, undefined) {
      * @returns {boolean} True if the object collides with a tile, false otherwise.
      */
     layerCollidesWith: function layerCollidesWith(name, object) {
-      // handle non-kontra.sprite objects as well as kontra.sprite objects
-      var x = (object.x !== undefined ? object.x : object.position.x);
-      var y = (object.y !== undefined ? object.y : object.position.y);
-
       // calculate all tiles that the object can collide with
-      var row = this._getRow(y);
-      var col = this._getCol(x);
+      var row = this._getRow(object.y);
+      var col = this._getCol(object.x);
 
-      var endRow = this._getRow(y + object.height);
-      var endCol = this._getCol(x + object.width);
+      var endRow = this._getRow(object.y + object.height);
+      var endCol = this._getCol(object.x + object.width);
 
       // check all tiles
       var index;

test/spriteSheet.spec.js

@@ -215,7 +215,7 @@ describe('', function() {
       kontra.logError.restore();
     });
 
-    it('should set default properties on the spriteSheet when passed an image', function() {
+    it('should initialize properties on the spriteSheet when passed an image', function() {
       var spriteSheet = kontra.spriteSheet({
         image: new Image(100, 200),
         frameWidth: 10,