Pixi.js: ColorMatrixFilter how to use by color

Created on 14 Jan 2018 · 3Comments · Source: pixijs/pixi.js

hello, i want to use a picture by use ColorMatrixFilter with color "#e73b37", how can i use by matrix Array, how to calculation? thanks a lot

Source

neciszhang

👍1

Most helpful comment

Not exactly sure what you're looking for but:

Here's an approach which basically replicates tint using ColorMatrixFilter.

const color = new PIXI.filters.ColorMatrixFilter();
const tint = 0xe73b37;
const r = tint >> 16 & 0xFF;
const g = tint >> 8 & 0xFF;
const b = tint & 0xFF;
color.matrix[0] = r / 255;
color.matrix[6] = g / 255;
color.matrix[12] = b / 255;

https://jsfiddle.net/bigtimebuddy/4612gq30/1/

I used an approach with PixiAnimate: https://github.com/jiborobot/pixi-animate/blob/master/src/mixins/DisplayObject.js#L143-L153

The above code would allow you to do additive color as well as multiply tint.

bigtimebuddy on 14 Jan 2018

👍4

All 3 comments

Not exactly sure what you're looking for but:

Here's an approach which basically replicates tint using ColorMatrixFilter.

const color = new PIXI.filters.ColorMatrixFilter();
const tint = 0xe73b37;
const r = tint >> 16 & 0xFF;
const g = tint >> 8 & 0xFF;
const b = tint & 0xFF;
color.matrix[0] = r / 255;
color.matrix[6] = g / 255;
color.matrix[12] = b / 255;

https://jsfiddle.net/bigtimebuddy/4612gq30/1/

I used an approach with PixiAnimate: https://github.com/jiborobot/pixi-animate/blob/master/src/mixins/DisplayObject.js#L143-L153

The above code would allow you to do additive color as well as multiply tint.

bigtimebuddy on 14 Jan 2018

👍4

@bigtimebuddy My problem has been successfully solved! Thanks a lot! Sincerely wish you

neciszhang on 15 Jan 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.