Phaser Isometric: Tile positioning

[bobbydabrain]

I am struggling to understand how to develop tiles for my phaser game using Adobe Illustrator.  Attached is an Isometric Grid template I created for Illustrator.  Each square in the grid is 32x32 pixels projected at 30 degrees.  I have also attached my tile.png, a picture of the output, and a code sample for how I am attempting to render the floor:

 

Illustrator template:

 

http://i.imgur.com/8ixyQCz.jpg

 

Game output:

 

http://i.imgur.com/AVnD7zI.png

 

Javascripts:

 

game.js :

window.onload = function() {    var h = window.innerHeight,        w = window.innerWidth;    window.Game = new Phaser.Game(w, h, Phaser.AUTO, 'test', null, true, false);    var game = window.Game;    var BasicGame = function (game) {};    BasicGame.Boot = function (game) {};    var isoGroup, player;    BasicGame.Boot.prototype = {        preload: function () {            game.load.pack('tutorial',null, window.tutorial, this);            game.time.advancedTiming = true;            game.plugins.add(new Phaser.Plugin.Isometric(game));            // Set the world size            game.world.setBounds(0, 0, 2048, 1024);            // set the middle of the world in the middle of the screen            game.iso.anchor.setTo(0.5, 0);            // Start the IsoArcade physics system.            game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE);        },        create: function () {            // Create a group for our tiles, so we can use Group.sort            isoGroup = game.add.group();            game.physics.isoArcade.gravity.setTo(0, 0, -300);            var floor = new Floor({ 'group': isoGroup });                        // Create another cube as our 'player', and set it up just like the cubes above.            player = game.add.isoSprite(300, 300, 0, 'cube', 0, isoGroup);            player.tint = 0x86bfda;            player.anchor.set(0.5);            game.physics.isoArcade.enable(player);            player.body.collideWorldBounds = true;            // Set up our controls.            this.cursors = game.input.keyboard.createCursorKeys();            this.game.input.keyboard.addKeyCapture([                Phaser.Keyboard.LEFT,                Phaser.Keyboard.RIGHT,                Phaser.Keyboard.UP,                Phaser.Keyboard.DOWN,                Phaser.Keyboard.SPACEBAR            ]);            var space = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);            space.onDown.add(function () {                player.body.velocity.z = 300;            }, this);        },        update: function () {            // Move the player at this speed.            var speed = 160;            if (this.cursors.up.isDown) {                player.body.velocity.y = -speed;            }            else if (this.cursors.down.isDown) {                player.body.velocity.y = speed;            }            else {                player.body.velocity.y = 0;            }            if (this.cursors.left.isDown) {                player.body.velocity.x = -speed;            }            else if (this.cursors.right.isDown) {                player.body.velocity.x = speed;            }            else {                player.body.velocity.x = 0;            }            // Our collision and sorting code again.            game.physics.isoArcade.collide(isoGroup);            game.iso.topologicalSort(isoGroup);        },        render: function () {            game.debug.text("FPS: " + game.time.fps || '--', 2, 14, "#a7aebe");        }    };    game.state.add('Boot', BasicGame.Boot);    game.state.start('Boot');};window.onresize = function() {    window.Game.width = window.innerWidth;    window.Game.height = window.innerHeight;};

floor.js :

Floor = function(opts) {    this.group = opts['group'];    this.map = {        'mapWidth': 3,        'mapHeight': 3    };    this.sprite = window.Game.cache.getImage('tile3');    this.render();};Floor.prototype.render = function() {    var size = this.sprite.width / (2 * Math.cos(window.Game.iso.projectionAngle))        + this.sprite.height / (2 * Math.sin(window.Game.iso.projectionAngle));    size = size / 2;    for(var x = 0; x < size * this.map.mapWidth; x+= size) {        for(var y = 0; y < size * this.map.mapHeight; y+= size) {            this.createTile(x, y);        }    }};Floor.prototype.createTile = function(map_x, map_y) {    var tile = window.Game.add.isoSprite(map_x, map_y, 0, 'tile3', 0, this.group);    tile.anchor.set(0);    window.Game.physics.isoArcade.enable(tile);    tile.body.collideWorldBounds = true;    tile.body.moves = false;    tile.body.immovable = true;};