CODEWITHSUNDEEP
pixi.js
Julio Rodrigues
Julio Rodrigues

Reputation: 3413

In PIXI.js how can I increase the brightness of a sprite?

I have a sprite created through new PIXI.Sprite.fromImage(path), how can I increase the brightness of it in realtime?

Upvotes: 8

Views: 6445

Answers (2)

Splendiferous
Splendiferous

Reputation: 763

PixiJS API Documentation: PIXI.filters.ColorMatrixFilter

let filter = new PIXI.filters.ColorMatrixFilter();

// Darken
filter.matrix = [ 
    1, 0, 0, 0, -0.25, 
    0, 1, 0, 0, -0.25, 
    0, 0, 1, 0, -0.25, 
    0, 0, 0, 1, 0
]; 

// Lighten
filter.matrix = [ 
    1, 0, 0, 0, 0.25, 
    0, 1, 0, 0, 0.25, 
    0, 0, 1, 0, 0.25, 
    0, 0, 0, 1, 0
];

container.filters = [filter];

Upvotes: 1

imcg
imcg

Reputation: 2649

You can do this using the PIXI ColorMatrixFilter:

var colorMatrix =  [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,1
];
var filter = new PIXI.ColorMatrixFilter();
filter.matrix = colorMatrix;
stage.filters = [filter];

Darker:

var colorMatrix =  [
    1,0,0,-0.5,
    0,1,0,-0.5,
    0,0,1,-0.5,
    0,0,0,1
];

Lighter:

var colorMatrix =  [
    1,0,0,0.5,
    0,1,0,0.5,
    0,0,1,0.5,
    0,0,0,1
];

See a quick demo here: http://codepen.io/ianmcgregor/pen/LcjBw

Upvotes: 11

Related Questions