Error when loading tilemaps

[Arbituz]

Very new to both javascript, Phaser, and Tiled so bare with me here. I'm trying to create a simple platformer for some practice. Using examples and bits and pieces of tutorials I've put together a simple game where I can move an animated penguin back and forth (yay!)

Last night I decided to give Tiled a go utilizing a JSON file and a tutorial I had watched a few days back. Now with the code in place, my game crashes when it gets to loading the tilemaps. I worked backwards commenting out code from the tilemap import section and have narrowed it down to this line causing the error (found in play.js). 

var map = game.add.tilemap('level');

The error comes after I click the canvas when it says "Click anywhere to start...". This is what the console spits out:

Quote

Uncaught TypeError: Cannot read property '2' of undefined
    at Object.parseTiledJSON (phaser.js:100648)
    at Object.parse (phaser.js:100029)
    at new Phaser.Tilemap (phaser.js:96652)
    at Phaser.GameObjectFactory.tilemap (phaser.js:47613)
    at Object.create (play.js:9)
    at Phaser.StateManager.loadComplete (phaser.js:28612)
    at Phaser.StateManager.preUpdate (phaser.js:28389)
    at Phaser.Game.updateLogic (phaser.js:35145)
    at Phaser.Game.update (phaser.js:35092)
    at Phaser.RequestAnimationFrame.updateRAF (phaser.js:62884)
    at _onLoop (phaser.js:62867)

Any ideas what could be causing this? I feel it may be an issue with something I'm doing in tiled as all of the code (including the structure of the code) follows this tutorial. I've also attached all of the files Tiled saved and the bitmap in case it's something with those. Any help would be greatly appreciated.

//game.js

var game = new Phaser.Game(800, 480, Phaser.AUTO, null, 'gameDiv');

//add each game state

game.state.add('boot', bootState);
game.state.add('load', loadState);
game.state.add('title', titleState);
game.state.add('play', playState);

//call the boot state
game.state.start('boot');

//boot.js

var bootState = {
  create: function() {

    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.state.start('load');
  }
};

//load.js

var loadState = {
  preload: function() {
    var loadingLabel = game.add.text(80, 150, 'loading...', {font: '30px Courier', fill: "#000000"});

    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.PageAlignHorizonally = true;
    game.scale.PageAlignVertically = true;
    game.stage.backgroundColor = '#ffffff';

    /****** Load graphics assets ******/
    game.load.tilemap('level', 'assets/maps/room1.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('tiles', 'assets/sprites/world.png');
    game.load.atlas('player', 'assets/sprites/player.png', 'assets/sprites/player.json');
  },
  create: function() {
    game.state.start('title');
  }
};

//title.js
var titleState = {
  create: function() {
    var nameLabel = game.add.text(160,80, 'Click anywhere to start', {
        font: '14px Arial', fill: '#000000'
      });
      game.input.activePointer.capture = true;

    },

    update: function() {
      if (game.input.activePointer.isDown) {
        game.state.start('play')
      }
    }
};

//play.js
var playState = {
  player: null,
  layer: null,

  create: function() {
    var self = this;
    // display tiles for maps
    var map = game.add.tilemap('level');
    map.addTilesetImage('world', 'tiles');

    self.layer = map.createLayer('Tile Layer 1');
    

    //initialize character data
    self.player = game.add.sprite(200,200, 'player');
    game.add.existing(self.player);
    self.player.anchor.setTo(.5,1);
    self.player.animations.add('player_idle', Phaser.Animation.generateFrameNames('sprite', 1, 3), 2);
    self.player.animations.add('player_walking', Phaser.Animation.generateFrameNames('sprite', 4, 6), 6);

    //setup physics and gravity
    game.physics.enable(self.player, Phaser.Physics.ARCADE);
    game.physics.arcade.gravity.y = 0;

    //load in key inputs
    cursors = game.input.keyboard.createCursorKeys();
    keyLeft = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
    keyRight = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
    jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);


  },

  update: function() {
    var self = this;
    self.player.body.velocity.x = 0;

    //react to player input and play correct animation
    if(keyLeft.isDown) {
      self.player.body.velocity.x = -150;
      self.player.scale.x = -1;
      if(!self.player.animations.play('player_walking')) {
        self.player.animations.play('player_walking');
      }
    }
    if(keyRight.isDown) {
      self.player.body.velocity.x = 150;
      self.player.scale.x = 1;
      if(!self.player.animations.play('player_walking')) {
        self.player.animations.play('player_walking');
      }
    }
    if(self.player.body.velocity.x == 0) {
      self.player.animations.play('player_idle');
    }

  }
};

//room1.json
{ "backgroundcolor":"#000000",
 "height":15,
 "layers":[
        {
         "data":"JAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAAJAAAACQAAAAkAAAA",
         "encoding":"base64",
         "height":15,
         "name":"Tile Layer 1",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":25,
         "x":0,
         "y":0
        }],
 "nextobjectid":1,
 "orientation":"orthogonal",
 "renderorder":"right-down",
 "tiledversion":"1.0.1",
 "tileheight":32,
 "tilesets":[
        {
         "firstgid":1,
         "source":"world.tsx"
        }],
 "tilewidth":32,
 "type":"map",
 "version":1,
 "width":25
}

 

level.tmx

room1.json

world.tsx

[bhudson91]

I am new as well and have encountered these same problems. I have a few things I would do. First i noticed that your base64 encoded because of the "data" line. You need go into tiled, and click "Map" on the bar at the top, click "Map Properties", change the "Tile Layer Format" from Base64 to CSV. Also this line should be a json file: "source":"world.tsx". You need to reimport your tilesheet and save it as a .JSON file instead of .tsx.

Just to be clear:

1. Click "Map" from the option bar > Click 'Map Properties" > Change "Tile Layer Format" to CSV

2. Reimport your tilesheet, but when the "save as filename" dialog pops up, save it as a .JSON instead of TSX.

3: After doing those 2, export the map again as a .json. If you still have problems with the tiles displaying, I would replace the source node in the tileset json directly with the tilesheet json.

"tilesets":[
        {
         "firstgid":1,
         "source":"world.tsx"
        }],

After you reimport your tilesheet as a .json, this line will read "source": "world.json". I sometimes have problems with it finding the file, and will just put the contents of that file directly in here. So it would look something like:

"tilesets":[{
"firstgid":330,
         "columns":16,
        "image":"assets\/worldTileSheet.png",
        "imageheight":512,
        "imagewidth":512,
        "margin":0,
        "name":"townTiles1",
        "spacing":0,
        "tilecount":256,
        "tileheight":32,
        "tilewidth":32,
        "type":"tileset"}]

 

Let me know if you have anymore problems.