BitmapData, Phase 3

Phaser 3
1 
Hi, How I can make this code compatible with Phaser 3 :

   function createTile (WORD,COLOR) {

            var tile = this.game.add.bitmapData(this.tileWidth, this.tileHeight);

            tile.ctx.rect(5, 5, this.tileWidth - 5, this.tileHeight - 5);
            tile.ctx.fillStyle = COLOR;
            tile.ctx.fill();

            tile.ctx.font = '30px Arial';
            tile.ctx.textAlign = 'center';
            tile.ctx.textBaseline = 'middle';
            tile.ctx.fillStyle = '#fff';

            tile.ctx.fillText(WORD, this.tileWidth / 2, this.tileHeight / 2);

            return tile;

        }

Thanks
2

As far as I’ve heard, the closest Phaser 3 equivalent of Bitmap Data is the Canvas Texture. You can create one with the addCanvas method of the Texture Manager (which is available as this.textures from a Scene).

I’ve never used Canvas Textures, but you should be able to replace tile.ctx with tile.getContext(), assuming you assign tile to your Canvas Texture. As far as I can tell, there’s no way to add the texture to the display list like you can with Bitmap Data, so you’ll probably have to use another Game Object to display it, such as an Image.

2 Likes
3

textures/create canvas

4

does not work with addCanvas I have this error : TextureManager.js: 171 Texture key already in use: text_s

var text = this.scene.make.text({
        add: false,
        x: 0,
        y: 0,
        text: letter,
        style: {
            fontSize: '30px',
            fontFamily: 'Arial',
            color: color,
            align: 'center',
            backgroundColor: '#ff00ff'
        }
    });
    
        let tile = this.scene.textures.addCanvas('text_'+letter, text.canvas);
        tile.canvas.width = this.tileWidth
        tile.canvas.height = this.tileHeight
        tile.context.rect(5, 5, this.tileWidth - 5, this.tileHeight - 5);
        tile.context.fillStyle = color;
        if(color == '#ffffff'){
            tile.context.fillStyle = '#000000';
        }

I think of leaning towards Game Object to display it ?

5

You should use thix.textures.createCanvas(), rather than .addCanvas().