How do I get pixi to read 8 digit hex codes?

Question

I'm using Vuetify's color picker which has options for hexa, hsla and rgba. I am using hexa but am willing to use any option that will work.

It seems that Pixi can only understand 6 digits hex codes with 0x in front of it. I want to be able to use Vuetify's slider and translate the 8 digit hex code to pixi.

Here is what I've tried:

this.sketcher.color = this.color.replace(/\x23/g, '0') This removes the '#' (ascii 23) from the front and adds 0 in it's place. I read the 0x is for 6 digit hex and 0 is for octal; which I was hoping meant 8 digit hexa codes but it appears that's not correct.

I've also found a workaround to remove the last two digits from the hex value but that removes the transparency.

Is there a way to push over my 8 digit hexa value to pixi in a way that pixi will understand it and display it accordingly?? I'm using it to sketch shapes btw. Thanks!

Answer 1

For a color in string format '#RRGGBBAA' few operations need to be done so it can be used with PIXI. You need to convert the string to a number and also extract the alpha component to a separate variable. This can be done like this:

1. Remove the # symbol from the beginning of the color string: color.slice(1)
2. Convert color string to number type with the parseInt(...) global function.
3. Extract RGB values from color number with bit shifting.
4. Extract alpha component (last two characters) by bit manipulation.

// Convert color string to a number
const colorString = '#ffcc33aa';
const colorNumber = parseInt(colorString.slice(1), 16);

// Extract color components from color number
const rgb = colorNumber >>> 8;
const alpha = (colorNumber & 0xff) / 255;

// Apply obtained color components to a PIXI sprite
sprite.tint = rgb;
sprite.alpha = alpha;