How to use PIXI ColorMatrixFilter

じ☆ve冰风

Who this tutorial is for:​

This tutorial is for those who have been coding in MV/MZ, might have been messing around with PIXI's features, seen that one of the available filters is PIXI.filters.ColorMatrixFilter but have no idea what it means when PIXI's documentation says it's a "5x4 transformation matrix".

I was unable to find an explanation online when I first discovered it so I could only use built-in presets. Much later, I took a class in linear algebra and now I was able to figure out what it does, and how it does. Here, I'll break down the basics of how to read this type of math.

What is this filter?​

It converts the color of every pixel based on that pixel's red, green, blue, and alpha channels.

Here's an example script call you can put into your game to apply a ColorMatrixFilter on to a map. This one inverts every color:

                Code:       
var scene = SceneManager._scene;scene.filters = [new PIXI.filters.ColorMatrixFilter()];scene.filters[0].matrix = [    -1, 0, 0, 0, 0.5,    0, -1, 0, 0, 0.5,    0, 0, -1, 0, 0.5,    0, 0, 0, 1, 0];


And this is what the script call above does to my game:

What do these numbers mean?​

Essentially, it's an abstracted equation.

The first row (or the first five numbers) gives us an equation of what the new red component of each pixel should be.
The second row (or the next five numbers) tells us what the new green color should be.
The third row is for the blue channel.
The fourth row is for the alpha channel.

Values range from 0 to 1 (basically 0% through 100%). Each row takes in five arguments. They are in order: red, green, blue, alpha, constant.

                Code:       
[    -1, 0, 0, 0, 0.5,    0, -1, 0, 0, 0.5,    0, 0, -1, 0, 0.5,    0, 0, 0, 1, 0];


So, the matrix from the above example code is a way of saying:
                Code:       
Red   = -1 * red +  0 * green +  0 * blue + 0 * alpha + 0.5Green =  0 * red + -1 * green +  0 * blue + 0 * alpha + 0.5Blue  =  0 * red +  0 * green + -1 * blue + 0 * alpha + 0.5Alpha =  0 * red +  0 * green +  0 * blue + 1 * alpha + 0

So by inverting each color component with a -100% muliplication and adding 50%, I've created a color inversion filter!

Other example matrices:​

Red-Green Colorblindness. This just blends the red and green channels together.
                Code:       
var scene = SceneManager._scene;scene.filters = [new PIXI.filters.ColorMatrixFilter()];scene.filters[0].matrix = [    0.5, 0.5, 0, 0, 0,    0.5, 0.5, 0, 0, 0,    0, 0, 1, 0, 0,    0, 0, 0, 1, 0];


High Contrast
                Code:       
var scene = SceneManager._scene;scene.filters = [new PIXI.filters.ColorMatrixFilter()];scene.filters[0].matrix = [    2, 0, 0, 0, -1,    0, 2, 0, 0, -1,    0, 0, 2, 0, -1,    0, 0, 0, 1, 0];


Increased saturation
                Code:       
var scene = SceneManager._scene;scene.filters = [new PIXI.filters.ColorMatrixFilter()];scene.filters[0].matrix = [    2, -0.5, -0.5, 0, 0,    -0.5, 2, -0.5, 0, 0,    -0.5, -0.5, 2, 0, 0,    0, 0, 0, 1, 0];


You can even write these matrices as mathematical functions! Here's example code that you could save as a .js file and install as a plugin:

Spoiler: Pulsation

This one animates from normal contrast to high contrast:
                Code:       
(function(){var matrixAnimationCount = 0;getMatrixPulsation = function() {    matrixAnimationCount++;    const PERIOD = 300 / (2 * Math.PI);    const max = 3;    const min = 1;    const strength = (min - max) / 2;    var phase = matrixAnimationCount / PERIOD;    return getMatrixContrast(strength * (Math.cos(phase) + 1) + max);};getMatrixContrast = function(strength) {    var offset = 0.5 * (1 - strength);    return [        strength, 0, 0, 0, offset,        0, strength, 0, 0,  offset,        0, 0, strength, 0,  offset,        0, 0, 0, 1, 0    ]};_aliasSceneBaseUpdate = Scene_Base.prototype.update;_applyUpdatingFilter = function(method) {    Scene_Base.prototype.update = function() {        _aliasSceneBaseUpdate.call(this);        this.filters[0].matrix = method();    };}_applyUpdatingFilter(getMatrixPulsation);_aliasSceneBaseCreate = Scene_Base.prototype.create;Scene_Base.prototype.create = function() {    _aliasSceneBaseCreate.call(this);    var filter = new PIXI.filters.ColorMatrixFilter();    if (this.filters == null) {        this.filters = [filter];    } else {        this.filters = this.filters.concat([filter]);    }}})()

Spoiler: Color Cycling 1

                Code:       
(function(){var matrixAnimationCount = 0;getMatrixTrippy = function() {    matrixAnimationCount++;    const PERIOD = 120;    var getAmount = function(phase) {        return Math.abs(1 - 2 * (phase % 1));    }    var phase = matrixAnimationCount / PERIOD;    var amounts = [0, getAmount(phase), getAmount(phase-0.5)];    return [        amounts[0], amounts[1], amounts[2], 0, 0,        amounts[2], amounts[0], amounts[1], 0, 0,        amounts[1], amounts[2], amounts[0], 0, 0,        0, 0, 0, 1, 0    ]};_aliasSceneBaseUpdate = Scene_Base.prototype.update;_applyUpdatingFilter = function(method) {    Scene_Base.prototype.update = function() {        _aliasSceneBaseUpdate.call(this);        this.filters[0].matrix = method();    };}_applyUpdatingFilter(getMatrixTrippy);_aliasSceneBaseCreate = Scene_Base.prototype.create;Scene_Base.prototype.create = function() {    _aliasSceneBaseCreate.call(this);    var filter = new PIXI.filters.ColorMatrixFilter();    if (this.filters == null) {        this.filters = [filter];    } else {        this.filters = this.filters.concat([filter]);    }}})()

Spoiler: Color Cycling 2

                Code:       
(function(){var matrixAnimationCount = 0;getMatrixTrippy2 = function() {    matrixAnimationCount++;    const PERIOD = 120;    var getAmount = function(phase) {        return Math.max(0, Math.abs(1.5 - phase % 3) - 0.5);    }    var phase = 3 * matrixAnimationCount / PERIOD;    var amounts = [getAmount(phase), getAmount(phase-1), getAmount(phase-2)];    return [        getAmount(phase), getAmount(0.5 * phase + 1), getAmount(0.25 * phase + 2), 0, 0,        getAmount(phase - 1), getAmount(0.5 * phase + 2), getAmount(0.25 * phase), 0, 0,        getAmount(phase - 2), getAmount(0.5 * phase), getAmount(0.25 * phase + 1), 0, 0,        0, 0, 0, 1, 0    ]};_aliasSceneBaseUpdate = Scene_Base.prototype.update;_applyUpdatingFilter = function(method) {    Scene_Base.prototype.update = function() {        _aliasSceneBaseUpdate.call(this);        this.filters[0].matrix = method();    };}_applyUpdatingFilter(getMatrixTrippy2);_aliasSceneBaseCreate = Scene_Base.prototype.create;Scene_Base.prototype.create = function() {    _aliasSceneBaseCreate.call(this);    var filter = new PIXI.filters.ColorMatrixFilter();    if (this.filters == null) {        this.filters = [filter];    } else {        this.filters = this.filters.concat([filter]);    }}})()

本贴来自国际rpgmaker官方论坛作者:Gensun处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/how-to-use-pixi-colormatrixfilter.181109/