首页 > 代码库 > ActionScript3游戏中的图像编程(连载四十七)
ActionScript3游戏中的图像编程(连载四十七)
总目录:http://blog.csdn.net/iloveas2014/article/details/38304477
3.1.3 用内侧滤镜验证Flash简单滤镜的实现原理
以上测试都在外侧进行,为了证实内侧滤镜的实现机制与外侧并无大异,我再次用一个方块让内阴影滤镜在方块上移动。(图 3.23)
图 3.23 内阴影滤镜的效果
阴影层似乎并非从复制出来的轮廓,因为方块的边缘并不存在这种内转角的结构。但是,当我把距离调回到0的时候,真相终于浮出水面。(图 3.24)
图 3.24 距离为0的内阴影滤镜
是不是感觉到一个矩形模糊的轮廓形象了?只不过这个轮廓的边缘模糊方式不是由阴影色淡出到透明,而是恰恰相反,从透明淡入到阴影色。而图形本身被挖空了,图形以外的区域被阴影色填充了上去。如果认为不够明显,就可以换一个复杂点的图形,并且将强度调大(图 3.25)。
图 3.25 复杂形状的滤镜效果
这种似是而非的轮廓是如何实现的呢?实际上它也是一个镂空的操作。只不过镂空前,边缘做了模糊而已。
这个过程可以利用ColorTransform的反色来实现,不过这次反色的不是rgb,而是alpha。
图 3.26,图 3.27展示了这个镂空的变换过程。其中,图 3.27的变换相当于alphaMultiplier=-1,alphaOffset=255的ColorTransform。
图 3.26 一个被模糊了的图形
图 3.27 用alpha反色实现镂空效果
可见,内侧滤镜的实现原理仍是外侧的那一套,只是阴影多做了一次反色镂空的操作。
下面再来分析一下两个渐变滤镜。可以说,发光/斜角实质上就是渐变发光/渐变斜角的一个特例,以渐变发光为例进行分析,我们可以看到,发光跟渐变发光都在图形下方衬上了一个图形的影子,那么,现在就尝试把渐变发光的影子调到跟发光的一致。
首先,距离必然要调成0。由于渐变的另一端是白色,跟背景相同,为了加强对比,我暂时把背景调成深绿色(图 3.28)。
图 3.28 距离为0的渐变发光滤镜
看到了从黑到白扩散的发光效果,接下来,我们把渐变两端的颜色都调成红色,同时将背景恢复回白色。图 3.29)
图 3.29 将渐变调为红色后的渐变发光滤镜
与发光和投影滤镜调出来的效果几乎完全一致,读者可以自行测试一下渐变斜角和斜角的这种关系,不过需要注意的一点是,渐变斜角的渐变条在Flash IDE里被划分成了两个区域,一个区域代表高光区,另一区域则为斜角的阴影。
我们已经看到,发光和投影都是渐变发光的一个特例,其渐变模式都是从指定透明度到0的一个单色线性渐变。
所以,Flash滤镜种类丰富的特点仅仅是表象,6种简单滤镜实际上可以合并为3种:模糊,渐变发光和渐变斜角,而且3种滤镜的本质差异仅仅是图形的层数的不同,分别为1,2,3,其实现的途径也完全一致。而Photoshop的图层样式虽然大多数也有经过类似的预处理(如之前我们看到的斜面和浮雕),但事后都会针对不同样式作出不同的个性化操作,使效果更为精细并趋于完美。
然而,我们也不能否认这6种简单滤镜的存在意义,毕竟投影,发光,斜角都给简单的Flash滤镜效果提供了一个简易便捷的途径,在把它转为ActionScript的时候,不用被太多的渐变数组参数搞得晕头转向。
另一方面,由于Flash的滤镜需要运行时进行渲染,所以它必须在性能和视觉效果的矛盾中寻求最合适的平衡点,细节处理的运算量往往是复制轮廓,简易模糊等算法的几百甚至几千倍,在很多场合,Flash交互程序不需要做得过于精细,但是FlashPlayer并没有因此阻断我们追梦的脚步,我们依然可以用BitmapData等方法去让自己的作品更加细腻和完美。关于这些知识,我将在后续章节再作介绍。