DEV Community

Tony Colston
Tony Colston

Posted on

quick textures without extra files in Phaser3

A really quick simple trick to generate textures to use in Phaser3.

You can use simple arrays of strings. The values are hexadecimal. You call another method that will generate the texture from the strings.

export let  bar = [
  "11111111111111111111",
  "1.FEDCBA9876543210.1",
  "11111111111111111111",
];
this.textures.generate("bar", {
    data : bar,
    pixelWidth : 16
});
this.textures.generate("bar8", {
    data : bar,
    pixelWidth: 8
});

Enter fullscreen mode Exit fullscreen mode

Once you have the textures generate with the keys. Then you can use these as if they were image files all along.

let img = this.add.image(0,0,"bar");
img.setOrigin(0,0);

let img2 = this.add.image(0,64,"bar8");
img2.setOrigin(0,0);
Enter fullscreen mode Exit fullscreen mode

The palette values look like they come from here
https://androidarts.com/palette/16pal.htm

The Phaser3 documentation calls this Arne16. See here: https://photonstorm.github.io/phaser3-docs/Phaser.Textures.TextureManager.html

Discussion (0)