![游戏开发实战宝典](https://wfqqreader-1252317822.image.myqcloud.com/cover/212/44175212/b_44175212.jpg)
3.2 颜色效果
在上一节,读者看到的都是图像的原始效果。本节将讲解如何对图像进行颜色上的变换。
3.2.1 混合模式
当两个位图重叠的时候,混合模式就起作用了。混合模式决定了重叠区域里像素变化的最终结果。下面的案例将展示混合模式的效果。
首先创建一个称为BlendMode的项目,删除src文件夹内的所有文件,然后添加一个名为Main.ts的类文件,并做出如下修改,参见二维码3-6:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/64_02.jpg?sign=1738904386-MtS5E8yqMNKA35esp1CGsNmDK4ZcrSPQ-0-45c8e8b5732b0432f16f5c892cf1e38a)
二维码3-6
运行调试播放器观看结果,如图3-9所示:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/64_03.jpg?sign=1738904386-ZKtjzkiRqdbV79Tebm4uxalVKme5ilia-0-7252ce7b93efed48e44f9c2e3888def2)
图3-9 观看结果
关键代码在第30行,如果将值改为egret.BlendMode.ADD,它表示将原色值添加到它的背景颜色中,结果如图3-10所示:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/65_01.jpg?sign=1738904386-mOJXziJGmQvRhlgRChDXtgqNi4xxusAF-0-04143d2ecda08e5ac919c6d475843331)
图3-10 添加原色值
如果改为egret.BlendMode.ERASE,它表示根据显示对象的Alpha值擦除背景,即不透明区域将被完全擦除。它的效果是这样的,如图3-11所示:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/65_02.jpg?sign=1738904386-4jod0cBXiZqiq7UYNmy5dOTBmWGnPQc1-0-b6332d35e8a8bea28f6b8aea87fa35b5)
图3-11 擦除背景
3.2.2 滤镜
滤镜可以在运行时通过程序改变纹理的效果,比如在游戏中给图片添加发光效果、颜色叠加效果、模糊效果或投影效果等。
(1)发光滤镜
下面的案例将展示多种滤镜的效果。
首先创建一个称为Filter的项目,删除src文件夹内的所有文件,然后创建一个名为Main.ts的类文件,并对其做出如下修改,参见二维码3-7:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/66_01.jpg?sign=1738904386-PdTYS01scn5CVKrXz1QJpS9iHHLFlgKw-0-79c8a2ddafb2cd09bda39617426d8b41)
二维码3-7
运行调试播放器观看结果,如图3-12所示:
白鹭发出红色的光晕。在代码的第36行定义了一个egret.GlowFilter对象,这个就是发光滤镜的类。该类的构造方法如下所示:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/66_02.jpg?sign=1738904386-fTL7V4eLFrB3FJdciEMg2wYt9UybxAn7-0-d0d4f052c24f4bbc1364234bb8d77896)
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/66_03.jpg?sign=1738904386-hoRieET0Pcm86V76V3agIVXZ3PuGDVvW-0-604b06604d29e2031d0b14a73814867a)
图3-12 发光滤镜
以下是对各个参数的解释:
● color:光晕颜色,采用十六进制格式 0xRRGGBB。默认值为0xFF0000。
● alpha:颜色的 Alpha 透明度值。有效值为0~1。例如,0.25 设置透明度值为25%。
● blurX:水平模糊量。有效值为0~255(浮点)。
● blurY:垂直模糊量。有效值为0~255(浮点)。
● strength:印记或跨页的强度。该值越高,压印的颜色越深,而且发光与背景之间的对比度也越强。有效值为0~255。
● quality:应用滤镜的次数。
● inner:指定发光是否为内侧发光。值 true 指定发光是内侧发光。值 false 指定发光是外侧发光(对象外缘周围的发光)。
● knockout:指定对象是否具有挖空效果。值为 true 将使对象的填充变为透明,并显示文档的背景颜色。
在代码的第44行,将这个发光滤镜放到bitmap对象的滤镜集合里。
(2)颜色矩阵滤镜
颜色矩阵滤镜可以改变图片的原始颜色。
继续之前的项目,给Main类添加一个新方法——drawColorMatrixFilter,参见二维码3-8:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/67_01.jpg?sign=1738904386-gWzrmE54XGIKXlJ1W8h47Vn8rhkRpv0D-0-fa551002a7780c1eb09931e5091f0f63)
二维码3-8
onGroupComplete方法也要做出相应的修改:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/67_02.jpg?sign=1738904386-kYM1Iu09rQpnkbVo1Dc1wPjKTYJgzDcb-0-a57c13cfaf8146d8705789815f3a8ce1)
启动调试播放器观看结果,如图3-13所示:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/67_03.jpg?sign=1738904386-7zk2bKQNl0qtp8DUI0LxtyS2WKIcBVEO-0-14ea7817150fa404784b0b6b0fa88ad1)
图3-13 颜色矩阵滤镜
白鹭的右侧绘制出一个灰度化的图片。
在代码的第2行定义了一个实现灰度化效果的颜色矩阵。下图3-14就是颜色矩阵的形式:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/68_01.jpg?sign=1738904386-DetZp6ndmSXOWxaFxmKZXDL7FpKas7HT-0-b77538b2c0d83e7439c532e02ce92eda)
图3-14 颜色矩阵(图片来源于Egret官方文档)
egret.ColorMatrixFilter类对象的构造依赖于下面的矩阵。颜色的最终值是由以下公式计算出来的,参见二维码3-9:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/68_02.jpg?sign=1738904386-qSj5DT7TY5P4NLs6BfBkRiMqQrx7ekEE-0-9c23cec6d0cda52a9fbeeade49a23bbe)
二维码3-9
公式中的srcR、srcG、srcB、srcA表示显示对象里像素的各颜色分量值,a是颜色矩阵。由公式可以看出,没有变化的颜色矩阵为:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/68_03.jpg?sign=1738904386-Pxy67j1Of0MkxDIO06KT6PPYsgE253bR-0-ca59d4e5f6fb7eb32100f8675b432cbb)
接下来让原图片变红。需要对drawColorMatrixFilter方法做出修改,参见二维码3-10:
运行调试播放器观看结果,如图3-15所示:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/68_04.jpg?sign=1738904386-y1Jhp4ajU735eig6tVVPNNcZ4Wy0amPU-0-6b83df8d43adf6e2d1b0f9fc54e3335a)
二维码3-10
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/68_05.jpg?sign=1738904386-FnlBZxFTadQMZoQD87SEPXzSpCEUmHyc-0-17f41bd4f38e394910e67624b89e97d8)
图3-15 图片变红
卡牌变成泛红色了。
(3)模糊滤镜
模糊滤镜可以使原图片变模糊。继续上一个项目,给 Main 类添加一个新方法——drawBlurFilter:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/69_01.jpg?sign=1738904386-ElXH7rzo906JjLjSawyjXPVIbsjGKF0Z-0-25f4f32c8c1598f532e142aa63a4c6f8)
onGroupComplete方法也要做出对应的修改:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/69_02.jpg?sign=1738904386-aAit1kAOjoOBEA9ufAmTNDUCBYpYaxm3-0-2ac02bda8bae44349d4c7f11eea20488)
运行调试播放器观看结果,如图3-16所示:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/69_03.jpg?sign=1738904386-Q8NLpyB7i8Gsb7QdITcShCG51a3hJWGR-0-d8ebcbd21fb00199407d917865144a53)
图3-16 模糊滤镜
新绘制的卡牌变模糊了。
在代码清单的第4行,定义了一个egret.BlurFilter对象,该类的构造函数原型如下:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/70_01.jpg?sign=1738904386-v9TttlySfiGLFRVMauCmWHTLyRh9mAgB-0-36a9b915365a063b1e33d42356db6a48)
以下是对各个参数的解释:
● blurX:水平模糊量。有效值为0~255(浮点)。
● blurY:垂直模糊量。有效值为0~255(浮点)。
● quality:应用滤镜的次数。
(4)投影滤镜
投影滤镜可以给原图片添加投影效果。
继续上一个项目,给 Main 类添加一个新方法——drawDropShadow Filter,参见二维码3-11:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/70_02.jpg?sign=1738904386-0V8hnWdqP0EoNtpqfGlqHY4upw9KJrRH-0-499ff7b0bdaa6a2ec17e9746a50b2590)
二维码3-11
onGroupComplete方法做出对应的修改:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/70_03.jpg?sign=1738904386-IbPdWs643PLvpD2ulp9xY5opzjEiRSji-0-a362a722030b23e2b060e46314d9a9d1)
运行调试播放器观看结果,如图3-17所示:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/70_04.jpg?sign=1738904386-1BzfssQN8HIi4BhSDHh83xDMSeQ2sMUF-0-354dda3ed2f76340d463986bd9319078)
图3-17 投影滤镜
右下侧的白鹭带有了投影效果。
在第一个代码清单的第12行,定义了一个egret.DropShadowFilter类的对象,该类的构造函数的原型如下:
![](https://epubservercos.yuewen.com/190630/23446275309889706/epubprivate/OEBPS/Images/71_01.jpg?sign=1738904386-iME0GagK2Gzo9xH3cmqb9i3xEAMb2cf9-0-13896b186b4f5727f9c909a55e2d36a3)
以下是对各个参数的解释:
● distance:阴影的偏移距离,以像素为单位。
● angle:阴影的角度,0~360度(浮点)。
● color:光晕颜色,采用十六进制格式 0xRRGGBB。默认值为0xFF0000。
● alpha:颜色的 Alpha 透明度值。有效值为0~1。例如,0.25 设置透明度值为25%。
● blurX:水平模糊量。有效值为0~255(浮点)。
● blurY:垂直模糊量。有效值为0~255(浮点)。
● strength:印记或跨页的强度。该值越高,压印的颜色越深,而且发光与背景之间的对比度也越强。有效值为0~255。
● quality:应用滤镜的次数。
● inner:指定发光是否为内侧发光。值 true 指定发光是内侧发光。值 false 指定发光是外侧发光(对象外缘周围的发光)。
● knockout:指定对象是否具有挖空效果。值为 true 将使对象的填充变为透明,并显示文档的背景颜色。
● hideObject:表示是否隐藏对象。如果值为 true,则表示没有绘制对象本身,只有阴影是可见的。默认值为 false(显示对象)。
课后作业:请读者尝试同时使用多种滤镜。