ActionScript3游戏中的图像编程(连载五十六,第3章完)

总目录:http://blog.csdn.net/iloveas2014/article/details/38304477

3.2.7 用冲破极限的数字打造图形纹理

Flash滤镜的参数虽然简单,但它们从各种几何规则的约束中解放了出来,比如模糊X可以不等于模糊Y,参数能容纳很大的数值,斜角的距离不再受大小的制约(当然Photoshop的阴影滤镜也如此),内外效果可以并存,等等,使Flash的滤镜返璞归真,重获自由,开发员和设计师都可随性地发挥个人的创造力,让艺术编程界百葩齐放。

图 3.95 简单滤镜生成的纹理效果

图 3.96 简单滤镜打造的巧克力效果

下面先来回顾一下Flash滤镜的本质:1.复制图形并叠加,2.对复制出来的图形进行上色,模糊等基本操作。

首先看看复制图形,为了让整个操作更加透明,我打算不通过滤镜来完成这件事情。

首先,把文字里所有的滤镜删掉,然后把文本框的不透明度调整为50%。(图 3.97)

图 3.97 去掉所有滤镜,并把alpha调至50%

然后就按照滤镜实现原理的第一步,用Ctrl+C,Ctrl+V复制出一堆文本框,并且改成不同的颜色,同时错开它们的位置(图 3.98)。

图 3.98 复制出一堆文本框

眼前尽是一片杂乱无章的景象,这多少让我对内侧滤镜的实现机制产生一些质疑——难道内侧滤镜的算法跟外侧不太一样?

没错,内侧型滤镜至少还做了另外一件事,就是给滤镜图形做了个遮罩,镂空的部分跟原始图形重合,换而言之,被复制出来的文字都只有跟原始文本框(即蓝色字)重叠的部分对用户可见。

所以我们要在Flash里做点图层的操作了。点中蓝色字,按Ctrl+C,然后通过菜单项“窗口”——“时间轴”(Ctrl+Alt+T)打开图层面板。点击面板左下方的新建图层按钮创建一个新图层,然后按Ctrl+Shift+V(粘贴到当前位置),蓝色字将会在原地复制出一个副本,但是它跟原来的文本框位于不同的图层。(图
3.99)

图 3.99 把原始文本框粘贴到新的图层(红框为新建图层按钮)

右击图层2,在弹出的菜单中选择“遮罩层”选项,效果如图 3.100所示。

图 3.100 设置了遮罩以后的效果

怎么样?是不是让你眼前一亮?色泽艳丽的迷彩花纹图案如同神一般地浮现出来。实际上,从刚才的演示来看,就知道其原理并不高深。它利用了文字轮廓复杂多变的特性,只要两个文字错位达到一定的程度,其轮廓就必然很难吻合,造成各种不规则的错位,再用遮罩裁剪一下边缘,文字就好像填充上了花纹一样。

读者可以尝试只复制一个文本来体验下这种天然的错位美。

尽管错位明显,我们依然可以察觉到某些轮廓的身影,比如黄色的a和s,透过F和l这两个字母依然清晰可见。

下面,就让模糊来弱化边缘的清晰度吧。

图 3.101展示了对复制出来的文本框设置模糊8像素后的效果。

图 3.101 对复制出来的轮廓使用模糊后的效果

也可以用渐变发光来丰富色彩,扭曲轮廓(图 3.102)。

图 3.102 对轮廓使用渐变发光后的效果

在上面的效果里,我们还没实现两个图形重叠部分的挖空,而斜角滤镜帮我们完成了这样的事情,下面就让我们改成纯滤镜的方法。

图 2.186,图 2.187分别展示了用斜角及渐变斜角制作出来的纹理效果。

图 3.103 用斜角滤镜实现的纹理

图 3.104 用渐变斜角滤镜实现的纹理

可以看出,渐变斜角更容易打造较线条复杂但明朗的纹理,比如天然木料,石面纹理等(图 3.105),因为渐变斜角的模糊值可以设置得比较大都不让边缘便软,而纯色斜角只能实现透明度有有到无的渐变淡出,所以无法拉得很大,不然纹理不清晰(当然,可以用增大强度来弥补这一不足,图 3.106)。但我们可以利用这一特性来制作一些边缘柔和的效果,比如云彩,烟雾一类的图案。(图 3.107)

图 3.105 用渐变斜角制作大理石纹理

图 3.106 强度增大的斜角滤镜

图 3.107 透过文字窗花的云彩图案

以上我们用奇葩的距离值来收获不一样的惊喜,如果换成让模糊值奇葩呢?

首先把当前的滤镜全部删除,文字恢复蓝色,添加一个渐变斜角,并将渐变调为高光白色,阴影黑色(图 3.108)

图 3.108 基础的渐变斜角

把模糊值调到15,有点云里雾里的感觉了(图 3.109)

图 3.109 模糊值增大后的渐变斜角滤镜

效果还不错,但纯色斜角足以胜任,我们要充分发挥渐变斜角的长处,不如把渐变另一端的不透明度都调大看看(图 3.110)

图 3.110 拉取渐变后的效果

虽然变得难看了很多,但世界从来不缺乏美,如果您拥有一双善于发现美的眼睛,您就会察觉出,文字在浮雕的表面变形了。您可以拿来做什么?饱经风霜的铜制雕塑,沉积千年的熔岩地貌,还是香气逼人的奶油蛋糕呢?只要您想象力足够丰富,并且大胆地尝试各种参数数值,我相信这样的一些简单滤镜一定能为你的作品增色不少。比如图 3.111就展示了一款用渐变斜角制作出来的巧克力字体。

图 3.111 用渐变斜角实现巧克力字体

本章我们站在定性的角度对简单滤镜的实现机制进行了分析,得出了“简单滤镜确实很简单”的一个结论。不过简单并不意味着简陋,只要理解了它们的作用机制,或者多做不同的尝试,我们也一样可以把简单滤镜给玩得出神入化。

不过话说回来,之所以能用简单滤镜来实现奇葩效果,一个很重要的原因就是使用了超越滤镜算法承受能力的参数,才使得滤镜形态发生一些预料之外的扭曲变形,这导致简单滤镜的可控性较差,毕竟极限以外的数字并不是那么容易掌握。

另一方面,从纹理的生成过程中也不难看出,所谓的纹理,实际上就是字符轮廓的错位,因此它对字符本身的依赖性较强。

综上所述,简单滤镜的表现力比较有限,在需要精确控制某些细腻的效果时,我们仍然需要一些有规可循的算法作进一步的指导,这当中就包含下一章提到的复杂滤镜。而矩阵又是复杂滤镜的核心,所以下一章我会从矩阵数学开始,和大家共同探讨矩阵数学与复杂滤镜的那些事。

时间: 2024-07-28 16:39:44

ActionScript3游戏中的图像编程(连载五十六,第3章完)的相关文章

ActionScript3游戏中的图像编程(二十)

1.4.2 灰度的计算方法 回过头来看RGB,站在科学的角度来解释,它们确实也有更明亮的理由,因为下面一排色彩反射出来的色光总量是上一排色的两倍. 为此,作者曾自作聪明地发明了一条"原创"的灰度公式: Gray=(r+g+b)/3 哈哈,用色光总量来表达颜色的灰度想必就比较准确了吧!沾沾自喜一番以后,我还试着用这条自创的定律来转换这张测试图片,上下色块的灰度果然拉开了,可是很不幸地,左右相邻,边界分明的色块依然粘连在一块(图 1.30). 图 1.30 笔者"自创"

ActionScript3游戏中的图像编程(连载十五)

1.3.1 HSB模式的色彩空间模型及其分支 第一次接触HSB模式的原理,是从以下这个地址开始的. http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4 图 1.21是我从上面的文章拷过来的一张色彩空间示意图,可见HSB在业界至少还可以细分成HSL和HSV两种模式.它们都使用了三维坐标系来描述色彩值的分布. 图 1.21 色彩空间示意图 第一个属性是色相,它代表颜色的种类,如红,黄,绿属于

ActionScript3游戏中的图像编程(连载五)

1.1.2 Flash中的ARGB模式与不透明度的关系 ARGB是Flash,svg等矢量处理软件特有的一种色彩模式,事实上我觉得它有点扯淡,A(alpha)不应该作为一个通道存在于色彩模式中,它更适合作为一个独立的属性从色彩模式中抽离出来并应用到其他的色彩模式(如HSB,CMYK,LAB等)中.Alpha不之所以Flash这么用,个人认为有3个原因: 1 Flash并非专业的图形软件,将它与RGB一视同仁,可以帮助AS3程序员更方便地使用颜色,实践证明,易用性确实比单独抽离出来要高. 2 AS

ActionScript3游戏中的图像编程(连载四十五)

总目录:http://blog.csdn.net/iloveas2014/article/details/38304477 3.1.1 Flash简单滤镜的共性分析 在模拟Photoshop样式的过程中,我们发现两个毫不相干的滤镜居然会有很多参数出奇地一致.实际上,好多个简单滤镜都有重复,下面我把它们整理成表格供大家查看. 滤镜名称 模糊 强度 距离 颜色/渐变 品质 内外 挖空/隐藏 投影 √ √ √ √ √ √ √ 发光 √ √ √ √ √ 模糊 √ √ 斜角 √ √ √ √ √ √ √ 渐

[原创]ActionScript3游戏中的图像编程(连载三十五)

2.2.8 Photoshop品质初探——杂色 重新回到Photoshop的品质选项,首先,杂色一项似乎更容易理解,我们尝试拖到30%,可以看到投影上多了一些杂点(图 2.29).数值越大,杂色越多,很适合用来模拟锈迹或者羊皮纸等粗糙的表面. 图 2.29 设置30%的杂色 杂色上方的等高线可谓Photoshop图层样式最最精华之处了,下面我们就来探讨一下. 现在先把杂点一项重置为0. [原创]ActionScript3游戏中的图像编程(连载三十五)

ActionScript3游戏中的图像编程(连载三十五)

2.2.8 Photoshop品质初探--杂色 重新回到Photoshop的品质选项,首先,杂色一项似乎更容易理解,我们尝试拖到30%,可以看到投影上多了一些杂点(图 2.29).数值越大,杂色越多,很适合用来模拟锈迹或者羊皮纸等粗糙的表面. 图 2.29 设置30%的杂色 杂色上方的等高线可谓Photoshop图层样式最最精华之处了,下面我们就来探讨一下. 现在先把杂点一项重置为0. ActionScript3游戏中的图像编程(连载三十五)

ActionScript3游戏中的图像编程(连载二十五)

2.1.2 斜面和浮雕样式的制作 现在的文字看起来更像是一张漂浮于半空的小纸片,略显单薄.下面的图层模式中,名字看起来比较有立体感的选项要数“斜面和浮雕”了,我们点一下看看.(图 2.4) 图 2.4 给文字添加斜面和浮雕样式 文字凸起来了,如果觉得有点厚,不好看,怎么办?从上往下看,大小这个属性似乎最容易理解,它大概代表斜面的尺寸.我把大小调整到3,文字确实变薄了.(图 2.5) 图 2.5 斜面大小设置为3的效果 ActionScript3游戏中的图像编程(连载二十五)

ActionScript3游戏中的图像编程(连载二十)

1.4.2 灰度的计算方法 回过头来看RGB,站在科学的角度来解释,它们确实也有更明亮的理由,因为下面一排色彩反射出来的色光总量是上一排色的两倍.      为此,作者曾自作聪明地发明了一条“原创”的灰度公式: Gray=(r+g+b)/3 哈哈,用色光总量来表达颜色的灰度想必就比较准确了吧!沾沾自喜一番以后,我还试着用这条自创的定律来转换这张测试图片,上下色块的灰度果然拉开了,可是很不幸地,左右相邻,边界分明的色块依然粘连在一块(图 1.30). 图 1.30 笔者“自创”的灰度转换 显然此法

ActionScript3游戏中的图像编程(连载二十一,第1章完)

1.4.3 用灰度/明度指导色彩搭配 试着只通过调整不等于0的通道,让上一排的色彩在灰度上保持一致,把三个颜色分别代入到心理学公式.得 Gray(red) = r * 0.299      Gray(green) = g * 0.587      Gray(blue) = b * 0.114 让它们灰度相等,则 r * 0.299 = g * 0.587 = b * 0.114 可见,b值一定最大,不妨让b取最大值255,求得r=97, g=50.把这两个值分别应用到红和绿两个色块上. 绿色不再

ActionScript3游戏中的图像编程(连载十九)

1.4 浅析亮度与灰度/明度的关系 进入正题之前,先来了解一下灰度/明度. 1.4.1 灰度/明度的概念及其与HSB亮度的异同 在很多场合,灰度与明度的概念完全等价. “灰度”最初来源于摄影领域,在彩色显像技术问世以前,拍摄出来的照片只有黑,白,灰三类颜色,在这种黑白照片里,只有白色.黑色以及灰色的点能完好无损地显示出来,其它颜色将根据其亮度呈现出不同深度的灰色.亮度越大灰色越浅,反之越深.把黑与白色之间分成若干级,称为“灰度等级”.能呈现的灰度等级愈多,画面的层次感就愈丰富. 所以,从彩色转黑