DEV Community

Tony Colston
Tony Colston

Posted on

3 2

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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay