Jump to content

Trouble with collission between map and player


Recommended Posts

I've successfully created and loaded a tilemap using Tiled, but I'm having trouble handling collision between my player sprite and the tiles on my map.  I've searched the forums, but unless I'm overlooking something, it seems like I'm doing everything that's recommended both on the forums and in the example code.  I've also been referencing this tutorial: http://www.gamedevacademy.org/html5-phaser-tutorial-top-down-games-with-tiled/  Here's what I'm working with:

'use strict';function Play() {    this.player = null;    this.enemy = null;    this.map = null;    this.layer = null;}Play.prototype = {    preload: function () {        var Player = require('../entities/player');        this.player = new Player(this.game);        this.player.preload();        var Enemy = require('../entities/enemy');        this.enemy = new Enemy(this.game);        this.enemy.preload();        this.game.load.tilemap('map1', 'assets/maps/map1.json', null, Phaser.Tilemap.TILED_JSON);        this.game.load.image('mapSprites', 'assets/maps/spritesheet.png');    },    create: function () {        this.game.physics.startSystem(Phaser.Physics.ARCADE);        this.player.create();        this.enemy.create();        this.map = this.game.add.tilemap('map1');        this.map.addTilesetImage('Level', 'mapSprites');        this.layer = this.map.createLayer('Tile Layer 1');        this.map.setCollisionBetween(1, 1000, true, 'Tile Layer 1');        this.layer.resizeWorld();    },    update: function () {        this.game.physics.arcade.collide(this.player, this.layer);        this.player.update();    }};module.exports = Play;

In my Player class, I'm setting gravity on the player and using velocity for movement in my update() function (eg, "velocity.x = this.playerSpeed").


This may be a silly question, and it doesn't seem like this is the case based on the tutorial I linked, but should the player sprite be contained within the tileset or be linked to it somehow in order for collision between the player and the tiles to happen?

Link to comment
Share on other sites

  • 3 months later...

I experienced a similar issue and after a lot of testing and reading I figured out that I was overriding the "type" attribute on the sprite. I realized that because I printed both objects and checked each attribute. In my case, the sprite had width = 0 and height = 0, reason why there was no collision.


I would print your objects like this:

update: function () {    console.log('player ---->', this.player);    console.log('layer ----->', this.layer);    this.game.physics.arcade.collide(this.player, this.layer);    this.player.update();}

Check that your player has bounds (width and height) and that everything looks normal.



Another trick that could help to debug is verify if there is any collision indeed. Use something like this:

update: function () {    this.game.physics.arcade.collide(this.player, this.layer, this.onCollision, this.onProcess);    this.player.update();},onCollision: function(self, object) {    console.log('onCollision', self, object);},onProcess: function(self, object) {    console.log('onProcess', self, object);}

That would print console logs for the process callback (before the collision is detected) and for the collision callback (after the collision is detected).


I hope that helps

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...