Help solving a couple of problems? My map seems to force itself to the topmost, and I can't get a extended sprite object working correctly.

[Teonnyn]

Hey! I'm fairly new to these forums and to Phaser in general. I have a two-fold issue at hand here, and I wasn't sure if I need to create two separate threads for it or not but decided to present them as one.

So far, I'm enjoying Phaser and it's been working great. However, I keep hitting little snags and I've finally found two I can't fix. 

 

First one: I've got a state-based game set up, and after a few primary states (Boot, Preload), it switches over to the Engine. 

The engine builds the main game, sets up the map and the foreground aesthetics. However... once the map loads, it seems

to be determined to stay on top of everything else and I cannot figure out why. It is a TILED map - one that I only really use

to provide a default 'fill' of tiles before the game remaps it to something dynamically generated. This is my code for this segment 

thus far:

GameObject.Engine = function() {};GameObject.Engine.prototype = {	init : function()	{ 		this.map;		this.cursors;		this.mapLayer = game.add.group();		this.mapLayer.z = 0;				this.asteroidShadowGroup = game.add.group();		this.asteroidShadowGroup.z = 200;				this.mapSizeWidth = 1280;		this.mapSizeHeight = 960;		this.bufferZone = 60;						game.world.setBounds(0, 0, this.mapSizeWidth, this.mapSizeHeight);		this.initPhysics();    },	initPhysics :function()	{		game.physics.startSystem(Phaser.Physics.ARCADE);        this.asteroidShadowGroup.enableBody = true;        this.asteroidShadowGroup.physicsBodyType = Phaser.Physics.ARCADE;			},	create : function()	{		this.map = game.add.tilemap('World');		this.map.addTilesetImage('Textures', 'Background');				this.map.createLayer('BaseWorld');		this.cursors = game.input.keyboard.createCursorKeys();				this.createPlayer();				this.buildAsteroids();	},	update: function() {				this.asteroidShadowGroup.forEachExists(this.Boundaries, this);				if (this.cursors.up.isDown)		{			game.camera.y -= 4;		}		else if (this.cursors.down.isDown)		{			game.camera.y += 4;		}		if (this.cursors.left.isDown)		{			game.camera.x -= 4;		}		else if (this.cursors.right.isDown)		{			game.camera.x += 4;		}	},	createPlayer: function()	{		this.humanPlayer = new Player(this.game, 20, 20, 'white', false);			},    Boundaries: function (sprite) {        if (sprite.x < -this.bufferZone) {            sprite.x = this.mapSizeWidth + this.bufferZone;        } else if (sprite.x > this.mapSizeWidth + this.bufferZone) {            sprite.x = -this.bufferZone;        }         if (sprite.y < -this.bufferZone) {            sprite.y = this.mapSizeHeight  + this.bufferZone;        } else if (sprite.y > this.mapSizeHeight  + this.bufferZone) {            sprite.y = -this.bufferZone;        }    },    buildAsteroids: function () {        for (var i=0; i < 8; i++ ) {            var x = game.rnd.integerInRange(0, this.mapSizeWidth);            var y = game.rnd.integerInRange(0, this.mapSizeHeight);            this.createAsteroid(x, y);        }	    },    createAsteroid: function (x, y) {        var asteroid = this.asteroidShadowGroup.create(x, y, 'asteroids', game.rnd.integerInRange(0, 12));        asteroid.anchor.set(0.5, 0.5);        asteroid.angularVelocity = game.rnd.integerInRange(0, 360);        var randomAngle = game.math.degToRad(game.rnd.angle());        var randomVelocity = game.rnd.integerInRange(10, 40);        game.physics.arcade.velocityFromRotation(randomAngle, randomVelocity, asteroid.body.velocity);    }}

I have double-checked this and seen that the asteroids, for instance, are generated 'under' the map but cannot figure out why, as is the player (when the player works, which brings me to the second issue):

 

I decided to build my player into a reusable object so that once the basics of the game are done, I can then add multiplayer. This works fine, to a point, but I've seen this error reported elsewhere as well.

When I try to add animations to this object, I get this error: 

 

Uncaught TypeError: Cannot read property 'index' of undefined

 

Beyond the map issue, the above code segment also shows how I'm creating the player as well. Here's the code for the player object - it's based off a sprite extension:

'use strict'; // without this the animation.add will not workvar Player = function(game, x, y, PlayerColor, Network) {		        Phaser.Sprite.call(this, game, x, y, PlayerColor);	game.add.existing(this);	this.anchor.setTo(0.5, 0.5);	    // Player Properties	this.owner = "";	this.isNetwork = false;	this.animationSpeed = 15;	this.hitpoints = 100;	this.level = 0;	this.exp = 0;	this.playerState = 0;		// 0 = Idle	// 1 = WalkArmed	// 2 = Walk Weapon Down	// 3 = Walk Scanner	// 4 = Walk    	// Establish Animations //		this.animations.add('Idle', [11], 0, true);	this.animations.add('WalkArmed', [2,3,4], this.animationSpeed, true);    this.animations.add('WalkWeaponDown', [5,6,7], this.animationSpeed, true);	this.animations.add('WalkScanner', [8,9,10], this.animationSpeed, true);	this.animations.add('Walk', [12,13,14], this.animationSpeed, true);    // enable physics    game.physics.enable(this, Phaser.Physics.ARCADE);	}// Players are a type of Phaser.SpritePlayer.prototype = Object.create(Phaser.Sprite.prototype);Player.prototype.constructor = Player;

I've tried a couple solutions already, making sure I used "this.game" and "use strict", but nothing has worked yet. I'm using Phaser version v2.4.4

[Teonnyn]

DOH! So, figured out the second issue. The code was perfect for the situation, but I managed to be off by a single number. I'm still trying to figure out the first with the map, however.