Search code examples
javascriptbitmapcollision-detectioncollisionphaser-framework

Detect collision between sprite and bitmap in Phaser


How to detect collision between sprite and shape created by bitmap?

In example I have sprite:

this.player = this.add.sprite(0, 0, 'player')
this.player.anchor.setTo(0.5)
this.player.scale.setTo(0.1)

And bitmap: 

this.bmd = this.game.add.bitmapData(2000, 2000)
this.bmd.addToWorld()

And then I draw shape using bmd object:

this.bmd.rect(px, py + 15, 5, 500, 'rgba(255, 255, 255, 1)')

Then I call this method:

this.bmd.update()

It looks more or less like in image. Yellow ball is my sprite. White curved line is my shape created from bitmapdata. And I want detect collision between yellow object and white line.


Solution

  • I solved it - these examples are very helpful http://jsfiddle.net/4yh8ee1f/46/ and https://phaser.io/examples/v2/sprites/sprite-from-bitmapdata

    var bmd = game.add.bitmapData(128,128);
    
    bmd.ctx.beginPath();
    bmd.ctx.rect(0,0,128,128);
    bmd.ctx.fillStyle = '#ff0000';
    bmd.ctx.fill();
    
    var sprite = game.add.sprite(200, 200, bmd);
    

    When I have 2 sprites (player and bitmap) collision detection is very simple.