HTML5游戏引擎（十四）-颜色效果——混合模式 & 滤镜 & 颜色矩阵滤镜 & 矩阵数据说明

HTML5游戏引擎（十四）-颜色效果——混合模式 & 滤镜 & 颜色矩阵滤镜 & 矩阵数据说明

颜色效果

混合模式

混合模式是指同一个显示容器中的两个显示对象重叠时，重叠区域如何呈现的方式，也就是两个显示对象的重叠区域像素如何混合产生结果像素。

覆盖混合

覆盖混合，表示为”normal”，该显示对象出现在背景前面。显示对象的像素值将覆盖背景的像素值。在显示对象为透明的区域，背景是可见的。

通常不设置混合模式，默认就是覆盖混合。设置图片为覆盖模式的代码：
img.blendMode = egret.BlendMode.NORMAL;

使用覆盖混合的效果

叠加混合

叠加混合，表示为”add” ：将显示对象的原色值添加到它的背景颜色中，上限值为 0xFF。此设置通常用于使两个对象间的加亮溶解产生动画效果。

设置图片为覆盖模式的代码：
img.blendMode = egret.BlendMode.ADD;

擦拭混合

擦除混合，表示为”erase” ：根据显示对象的 Alpha 值擦除背景。即不透明区域将被完全擦除。

设置图片为覆盖模式的代码：
img.blendMode = egret.BlendMode.ERASE;

滤镜

使用 GlowFilter 类可以对显示对象应用发光效果。发光样式的选项包括内侧发光、外侧发光以及挖空模式。
这里创建一个函数用来对传入的显示对象用给定的参数进行发光滤镜处理。
在接下的示例代码中，要传给滤镜的参数，将首先以局部变量的方式定义，并把每个参数的含义在注释部分进行说明。然后将这些参数填充到滤镜的构造函数相应位置。注意，为了结构清晰便于理解代码，所定义的局部变量与滤镜的构造函数参数将一一对应，并且顺序也是完全一致的。

白鹭小鸟在程序中用一张位图表示：
var img:egret.Bitmap;

创建滤镜：

var color:number = 0x33CCFF;        /// 光晕的颜色，十六进制，不包含透明度
var alpha:number = 0.8;             /// 光晕的颜色透明度，是对 color 参数的透明度设定。有效值为 0.0 到 1.0。例如，0.8 设置透明度值为 80%。
var blurX:number = 35;              /// 水平模糊量。有效值为 0 到 255.0（浮点）
var blurY:number = 35;              /// 垂直模糊量。有效值为 0 到 255.0（浮点）
var strength:number = 2;            /// 压印的强度，值越大，压印的颜色越深，而且发光与背景之间的对比度也越强。有效值为 0 到 255。暂未实现
var quality:number = egret.BitmapFilterQuality.HIGH;        /// 应用滤镜的次数，建议用 BitmapFilterQuality 类的常量来体现
var inner:boolean = false;            /// 指定发光是否为内侧发光，暂未实现
var knockout:boolean = false;            /// 指定对象是否具有挖空效果，暂未实现
var glowFilter:egret.GlowFilter = new egret.GlowFilter( color, alpha, blurX, blurY,
    strength, quality, inner, knockout );

最后对位图对象应用发光滤镜：

img.filters = [ glowFilter ];

如图是使用滤镜前后的效果对比：

颜色矩阵滤镜

ColorMatrixFilter–颜色矩阵滤镜(egret.ColorMatrixFilter) 在颗粒等级上提供更好的控制显示对象的颜色转换方式。ColorMatrixFilter为 4行5列的多维矩阵(20个元素的数组)。下图为等效的矩阵。

下面是一个图片灰度化的示例。首先准备一张图片：

然后通过下面颜色转换矩阵代码添加一个“灰度化”的效果:

var hero:egret.Bitmap = new egret.Bitmap();
hero.texture = RES.getRes("hero_png");
this.addChild(hero);
//颜色矩阵数组
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);
hero.filters = [colorFlilter];

在上述示例中，首先新建了一个显示对象，然后新建了一个颜色转换矩阵 ColorMatrixFilter,并通过显示对象的 filters 属性来设置滤镜。显示对象的 filters 属性包含当前与显示对象关联的每个滤镜对象的索引数组。

实现效果的关键是颜色转换矩阵的设置。上面我们将每个颜色通道都乘相同的系数来实现灰度效果。

矩阵数据说明

在上面例子中我们实现了灰度图的效果，下面介绍颜色矩阵的含义：

实际的颜色值由下面的公式决定：

redResult   = (a[0] * srcR)  + (a[1] * srcG)  + (a[2] * srcB)  + (a[3] * srcA)  + a[4];
greenResult = (a[5] * srcR)  + (a[6] * srcG)  + (a[7] * srcB)  + (a[8] * srcA)  + a[9];
blueResult  = (a[10] * srcR) + (a[11] * srcG) + (a[12] * srcB) + (a[13] * srcA) + a[14];
alphaResult = (a[15] * srcR) + (a[16] * srcG) + (a[17] * srcB) + (a[18] * srcA) + a[19];

公式中 srcR、srcG、srcB、srcA 表示原始显示对象的像素值, a 是颜色矩阵。新的红绿蓝和alpha通道实际由颜色矩阵和原始图片的像素值同时决定。颜色矩阵中的 Off 可以直接设置偏移量加上相应的 R G B A 的值的乘积即为最终的颜色值。所以与原来完全相同的矩阵转换应该是下面这样的：

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

修改代码中的颜色矩阵数组，编译运行得到如下效果图：

需要注意的 R G B 通道对应的偏移量的值应该为 -255 ~ 255，Alpha 通道对应的偏移量取值范围为 -255 ~ 255.应避免传入除数字外其他类型的值，比如字符串等。

绿色加倍

如果想使绿色通道加倍,colorMatrix[6] 加倍即可：

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

增加亮度

增加亮度的最简单途径是给每个颜色值添加相同的偏移量。

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