Egret change in color pictures, color matrix

reference:

Image processing: color matrix and the coordinate transformation matrix

Egret- filters

 

Before the interview I have asked how to change the color of the image. Flash looks like the time to do before done, there is no such demand after doing Egret, it has not been studied.

Now to get a get how to change the color of the image.

 

table of Contents

The color value of a pixel in the picture

Two filters

Three color matrix

Four scenarios

 

The color value of a pixel in the picture

Create a bitmap, and print bitmap color values

let bm:egret.Bitmap = new egret.Bitmap();
bm.texture = RES.getRes("preload_start_png");  
this.addChild(bm);
console.log(bm.texture.getPixels(0,0,bm.width,bm.height));

 

 

Export

 

You can see the picture colors are kept by the array. To change the color of the picture, my first thought was not to change the values ​​in the array will be able to change the picture color. But Egret does not provide an interface to change the value of the array, so give way.

 

Two filters

To add a picture dimmed effect

          let bm:egret.Bitmap = new egret.Bitmap();
          bm.texture = RES.getRes("preload_start_png");  
          this.addChild(bm);
          console.log(bm.texture.getPixels(0,0,bm.width,bm.height));

          var colorMatrix = [
            0.3,0.6,0,0,0,
            0.3,0.6,0,0,0,
            0.3,0.6,0,0,0,
            0,0,0,1,0
        ];
        var colorFlilter = new egret.ColorMatrixFilter(colorMatrix);
        bm.filters = [colorFlilter];

 

Before the filter is not used

After using filters

　　

So after using the filter, whether to change the texture color values ​​it, I bit output

          let bm:egret.Bitmap = new egret.Bitmap();
          bm.texture = RES.getRes("preload_start_png");  
          this.addChild(bm);
          console.log("使用滤镜前：")
          console.log(bm.texture.getPixels(0,0,bm.width,bm.height));

          var colorMatrix = [
            0.3,0.6,0,0,0,
            0.3,0.6,0,0,0,
            0.3,0.6,0,0,0,
            0,0,0,1,0
        ];
        var colorFlilter = new egret.ColorMatrixFilter(colorMatrix);
        bm.filters = [colorFlilter];
        console.log("使用滤镜后：");
        console.log(bm.texture.getPixels(0,0,bm.width,bm.height));

　

Output color values ​​found not changed. Guessing the color filter is based on the original value, before outputting color-matrix into the final image.　

 

 Three color matrix

 

We use several matrix to test next.

 

The original color values:

A = [ 1,0,0,0,0,

        0,1,0,0,0,

        0,0,1,0,0,

        0,0,0,1,0 ]

 

得出结果是

R’  = R

G’  = G

B’  = B

A’  = A

 

 

变灰色：

A = [ 0.3,0.6,0,0,0,

        0.3,0.6,0,0,0,

        0.3,0.6,0,0,0,

        0,0,0,1,0 ]

 

得出结果是

R’  = 0.3*R + 0.6*G 

G’  = 0.3*R + 0.6*G

B’  = 0.3*R + 0.6*G

A’  = A

 

 

 增加亮度：

A = [ 1,0,0,0,100,

        0,1,0,0,100,

        0,0,1,0,0,

        0,0,0,1,0 ]

 

得出结果是

R’  = R + 100 

G’  = G + 100

B’  = B

A’  = A

 

 

 

 

 

四 应用场景

1. 游戏中禁止使用某个按钮，需要将按钮变灰时。

    平时都是美术出一个普通按钮和一个灰色按钮。

2. 游戏中使用多张相同图片，但是仅仅是图片颜色不同时。