Collision with sprite and tilemap

[hoskope]

Hey,

Can somebody tell me what i'm doing wrong?. I want that my potion collides with the wooden box.

 

Below Game.js

FallingDown.Game = function (game) {}

FallingDown.Game.prototype = {

  init: function () {
    this.scale.pageAlignHorizontally = true;
    this.physics.startSystem(Phaser.Physics.ARCADE);
    this.physics.arcade.gravity.y = 300;

  },

  preload: function () {

  },

  create: function () {
    this.map = this.add.tilemap('levelMap')
    this.map.addTilesetImage('spritesheet', 'spritesheet')
    this.level = this.map.createLayer('Level')
    this.level.resizeWorld()
    // Sets 1 and 3 tiles for collision!
    this.map.setCollision([1, 3])

    player = this.add.sprite(32, this.world.height - 150, 'character-walking')
    player.animations.add('right', Phaser.Animation.generateFrameNames('character-walking', 1, 4))
    player.animations.add('left', Phaser.Animation.generateFrameNames('character-walking', 5, 8))
    this.physics.arcade.enable(player)
    player.body.collideWorldBounds = true
    player.body.gravity.y = 800

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

  update: function () {
    
    this.physics.arcade.collide(player, this.level)
    player.body.velocity.x = 0

    this.physics.arcade.collide(this.energyPotion, this.level)
    this.physics.arcade.overlap(player, this.energyPotion, this.collectEnergyPotion, null, this)

    this.movePlayer()

    },

  movePlayer: function () {
    // Moving player to the left
    if (cursors.left.isDown) {
      player.body.velocity.x = -150
      player.animations.play('left')
    } 
    // Moving player to the right
    else if (cursors.right.isDown) {
      player.body.velocity.x = 150
      player.animations.play('right')
    } 
    // Jumping the player
    else if (cursors.up.isDown && player.body.blocked.down) {
      player.body.velocity.y = -350
    }
    else {
      player.animations.stop()
    }
    
  },

  createEnergyPotion: function() {
    var energyPotion = this.add.sprite(258, 509, 'energy-potion')
    this.physics.arcade.enable(energyPotion)
    energyPotion.body.enable = true
    energyPotion.body.bounce.y = 0.7 + Math.random() * 0.2
    energyPotion.body.collideWorldBounds = true
  },

  collectEnergyPotion: function(player, energyPotion) {
    energyPotion.add.tween(energy-potion).to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true, 1, 1000, true);
    energyPotion.destroy()

  },

  render: function () {
    
    }
}

 

EDIT: Now that i'm looking the code, do i need to create boxes at new layer in tiled and then make them as group, and that way use it in collide?

Question 2: What are the best pratices implementing collectable items for platformer like this? So many ways, include them in the tilemap objects layers, or seperate spritesheet and so on..

[drhayes]

In your method "createEnergyPotion", you never assign energyPotion to this like you expect it to be in your update method.

Try adding "this.energyPotion = energyPotion;" at the end of createEnergyPotion.

[hoskope]

6 hours ago, drhayes said:

In your method "createEnergyPotion", you never assign energyPotion to this like you expect it to be in your update method.

Try adding "this.energyPotion = energyPotion;" at the end of createEnergyPotion.

Hey thanks, good catch. Even i've studied 'this' a lot, still makes my head go around..