[Vuejs]-How do I get pixi to read 8 digit hex codes?

by

0👍

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;

Leave a comment