Group & Tilemap Collision & Issues

[LTNGames]

I've been having a hard time getting my objects I created from a TileD json to collide with tile layer.  Basically, I have an extended sprite class for my objects and on instantiation of extended sprite class, I add them to the group on my Level State I've also enabled collideWithWorld.

It collides with the world bounds but it won't collide with the tilemap, so a few issues I have, whenever I enable the body on the group the box image of the sprite won't show up but the console tells me they are colliding with the worldBounds. Whenever I disable the body it still tells me it's colliding with the world bounds but the box image shows up for me.  Don't mind the code I been doing a lot of testing with Phaser and trying to get used to the API so I have a lot of things mixed up but should be readable enough. Thank in advanced for any help or suggestions, I could use whatever you have in mind for me.

// Shortended version to show how I created the group
Game.State_Level.prototype.create = function(){
	this.boxGroup = this.game.add.group();
	this.boxGroup.enableBody = true;
	this.boxGroup.enableBodyDebug = true;
	this.boxGroup.collideWorldBounds = true;
};
// A function to make the collide method shorter lol
Game.State_Level.prototype.collide = function(sprite, group){
	this.game.physics.arcade.collide(sprite, group);
};

//The update function to check collision
Game.State_Level.prototype.update = function(){
	// Collision between player and ground tilemap
	this.collide(this.player, this.layers.groundLayer);
	//Object group collision
	if(this.collide(this.boxGroup, this.layers.groundLayer)){
		console.log('Boom');
	}
	if(this.boxGroup.collideWorldBounds){
		console.log('Colliding with world bounds');
	}
};

//The functions I use to instantiate the Sprite_Object

Game.State_Level.prototype.createObjects = function(){
	if(this.map.objects.hasOwnProperty('objectLayer')){
		this.map.objects.objectLayer.forEach(this.createObjectSprite, this);
	}
};

Game.State_Level.prototype.createObjectSprite = function(object){
	this.mapObjects = {};
	var x = object.x + (this.map.tileHeight / 2);
	var y = object.y + (this.map.tileWidth  / 2);
	var mapObject;
	switch(object.type) {
		case 'box':
			mapObject = new Game.Sprite_Object(this.game, x, y, object, this);
			break;
		case 'gem':
			mapObject = new Game.Sprite_Object(this.game, x, y, object, this);
			break;
	}
// I did this to see if I could collide with an object containig all sprites, still did nothing.
	this.mapObjects[object.name] = mapObject;
};


//this is the extended sprite
Game.Sprite_Object = function () {
	this.init.apply(this, arguments);
};

Game.Sprite_Object.prototype = Object.create(Phaser.Sprite.prototype);
Game.Sprite_Object.prototype.constructor = Game.Sprite_Object;

Game.Sprite_Object.prototype.init = function (game, x, y, object, state) {
	var key = object ? object.properties.sprite : '';
	Phaser.Sprite.call(this, game, x, y, key);
	this.setProperties(object);
// This is where I add sprite to the boxGroup
	state.boxGroup.add(this);	
};

 

[nicoloko02]

Hello, maybe you are forgeting to set what tiles can be collidable.

Take a look at  some of these functions:

Phaser.Tilemap.setCollisionByIndex(index, collides, layer, recalculate) : void;

Phaser.Tilemap.setCollisionByExclusion(indexes, collides, layer, recalculate) : void;

Phaser.Tilemap.setCollisionBetween(start, stop, collides, layer, recalculate) : void;

Phaser.Tilemap.setCollision(indexes, collides, layer, recalculate) : void;

I was with a problem like that, and it worked very well.

[LTNGames]

It's a bit different from the tile layer, basically, all I'm doing is iterating through the object layer in the TileD JSON and then making them into their own sprites with a separate image depending on the type/ They're separate from the tiles themselves, so they don't actually have anything to do with the tilemap, thanks for the trying, though. I'm pretty sure the problem lies with they way I'm adding them to a group and checking collision on the group itself. I'll do more testing to see if I can pinpoint the exact issue, I hope someone else has some ideas for me though, it will be less hair pulling for me lol.

[LTNGames]

Okay so I finally pinpointed the issue, I have to stop following tutorials because most of them are probably outdated lol, anyway the problem was the whole addition of tileHieght and tileWidth, I read somewhere that this had to be added in because the way phaser reads the tilemap or something. So I did sprite and tilemap collision then worked my way up to the group removing things as I went along and when I removed the tileMap & tileHieght additions it started to work. I'm assuming it was placing the objects in random spots on the map and most of the time within the collision bounds of the map making it seem like it's not actually colliding when it was colliding. Anyway the solution is below in case someone else runs into this issue, also be careful when following tutorials, Phaser has improved greatly since some of them have been written.

// Wrong!
Game.State_Level.prototype.createObjectSprite = function(object){
	this.mapObjects = {};
	var x = object.x + (this.map.tileHeight / 2);
	var y = object.y + (this.map.tileWidth  / 2);
};

// Correct !
Game.State_Level.prototype.createObjectSprite = function(object){
	this.mapObjects = {};
	var x = object.x;
	var y = object.y;
};