Convert bitmapData in Phaser 2 to the one for Phaser 3

Phaser 3
1

Hi all,

I am trying convert the Phaser coding tip 2 to Phaser 3. There are 2 things I have trouble with:

  • The first is draw png file to bitmap, in Phaser 2:
    this.land = this.add.bitmapData(992, 480);
    this.land.draw(‘land’);
    this.land.update();
    this.land.addToWorld();
  • The 2nd is creat a hole when the bullet touch the land:
    this.land.blendDestinationOut();
    this.land.circle(x, y, 16, ‘rgba(0, 0, 0, 255’);
    this.land.blendReset();
    this.land.update();
    this.removeBullet();
    Does anyone have any ideas? Thank you
2

:wave:

Phaser 3 has CanvasTexture (a texture) and RenderTexture (a game object).

Look at

1 Like
3

Thanks samme, and How about blendDestinationOut(), blendReset(), update(), circle() function in Phaser 3?

4

In Phaser 3 you have to do the Canvas 2d operations directly, but if you look at the BitmapData source you can probably figure it out.

Phaser 3 has canvasTexture.refresh().

const ctx = canvasTexture.getContext();

// Erase mode
ctx.globalCompositeOperation = "destination-out";

// Circle
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();

// Copy mode (default)
ctx.globalCompositeOperation = "source-over";

// Refresh for WebGL
canvasTexture.refresh();
1 Like
5

Thank you very much, samme. But I have one trouble with:
var x = Math.floor(this.bullet.x)
does it in phaser 3 is: var x = Phaser.Geom.Point.floor(this.bullet.x)

6

Use the same,

var x = Math.floor(this.bullet.x);

Also this is all in

1 Like