Tilemap layer collision with player using Impact physic on Phaser 3.0.0-beta.12

[colorfield]

Hi there, I'm playing around with the v3 API and wondered how to collide with a layer of a tilemap.

Here is what I've already tried:

1) Get tiles data (there is probably a better way / API helper for that like forEachTile) and then use setCollision.

let tilesData = (this.platformLayer.data.gameObject.map.tiles)
this.map.setCollision(tilesData, true, false, this.platformLayer)

2) Do the opposite by excluding an empty array.

this.map.setCollisionByExclusion([], true, false, this.platformLayer)

3) API v2 style.

this.physics.arcade.collide(this.player, this.platformLayer);

Here is my game config, if someone have the time to spot what I'm doing wrong.

Thanks!

let config = {
  type: Phaser.AUTO,
  parent: 'content',
  width: 800,
  height: 600,
  pixelArt: true,
  backgroundColor: '#2d2d2d',
  physics: {
    default: 'impact',
    impact: {
      setBounds: true,
      debug: true
    },
  },
  scene: [
    Boot,
    Preload,
    TileMapTest
  ]
}

let game = new Phaser.Game(config)

And here is my Scene

/* globals __DEV__ */

class TileMapTest extends Phaser.Scene {
  constructor () {
    super({ key: 'TileMapTest' })
    if (__DEV__) {
      console.log('TileMapTest scene created.')
    }
    this.map = null
    this.player = null
    this.cursors = null

    this.rockLayer = null
    this.waterLayer = null
    this.platformLayer = null
    this.stuffLayer = null
  }

  preload () {
    // Hero
    this.load.image('hero', './assets/sprites/hero.png')
    // Tilemap
    this.load.image('kenny_platformer_64x64', './assets/tilemaps/tiles/kenny_platformer_64x64.png')
    this.load.tilemapJSON('multiple-layers-map', './assets/tilemaps/maps/multiple-layers.json')
  }

  create () {
    if (__DEV__) {
      console.log('TileMapTest scene entered.')
    }
    this.createTileMapLayers()
    this.createPlayer()

    this.cameras.main.startFollow(this.player)
    this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels)
    this.physics.world.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels)

    // ---> @todo collide with platformLayer
  }

  update (time, delta) {
    this.updatePlayer(time, delta)
  }

  createPlayer () {
    this.player = this.physics.add.sprite(200, 200, 'hero', 4).setOrigin(0, 0.15)
    this.player.setActive()
    this.player.setMaxVelocity(500)
    this.player.setFriction(1000, 100)

    this.player.body.accelGround = 1200
    this.player.body.accelAir = 600
    this.player.body.jumpSpeed = 500
    // this.player.body.collideWorldBounds = true

    this.cursors = this.input.keyboard.createCursorKeys()
  }

  createTileMapLayers () {
    this.map = this.make.tilemap({ key: 'multiple-layers-map' })
    let tiles = this.map.addTilesetImage('kenny_platformer_64x64')

    this.rockLayer = this.map.createStaticLayer('Rock Layer', tiles, 0, 0)
    this.waterLayer = this.map.createStaticLayer('Water Layer', tiles, 0, 0)
    this.platformLayer = this.map.createStaticLayer('Platform Layer', tiles, 0, 0)
    this.stuffLayer = this.map.createStaticLayer('Stuff Layer', tiles, 0, 0)
  }

  updatePlayer (time, delta) {
    let accel = this.player.body.standing ? this.player.body.accelGround : this.player.body.accelAir
    if (this.cursors.left.isDown) {
      this.player.setAccelerationX(-accel)
    } else if (this.cursors.right.isDown) {
      this.player.setAccelerationX(accel)
    } else {
      this.player.setAccelerationX(0)
    }
    // Jump
    if (this.cursors.up.isDown && this.player.body.standing) {
      this.player.setVelocityY(-this.player.body.jumpSpeed)
    }
  }
}

export default TileMapTest

 

[samid737]

Tilemap physics is recently implemented in 3.0.0 beta 13 . You can read trough the dev logs for details on other features as well.

[en20]

Hello, I am having a problem now, I also want to know how the player and the platform should collide. Could you please complete the code?