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

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

3.1.1 Flash简单滤镜的共性分析

在模拟Photoshop样式的过程中,我们发现两个毫不相干的滤镜居然会有很多参数出奇地一致。实际上,好多个简单滤镜都有重复,下面我把它们整理成表格供大家查看。


滤镜名称


模糊


强度


距离


颜色/渐变


品质


内外


挖空/隐藏


投影









发光







模糊




斜角









渐变发光









渐变斜角








其中,颜色包含了透明度。

经过这样的一个表进行比对之后,结果相当的惊人,各具特色的6个滤镜所用的参数几乎完全一样。

网上不少文章说,Flash提供了非常丰富的滤镜供我们使用。但在这里,我可以很负责任地告诉大家,以上6个功能各异的简单滤镜,它们由始至终都只在做两件事,一件是复制一个或多个图形轮廓,下一件是对图形轮廓进行变色以及模糊/锐化!

至于为什么我会这样说,我拿之前用到的投影和斜角滤镜来说明这个问题。

投影滤镜(这里先不谈内阴影),基本上一眼可以看得出来,把图形给复制了一层,转成黑色,对边缘做了一下模糊处理之后,错开一定的像素衬于图形下方即可完成。

至于斜角,继续用回上一节的实例。先隐藏掉投影滤镜(点击滤镜工具条的按钮即可),同时将品质设置为低,减少模糊次数对效果造成的影响。

隐藏后的效果如图 3.1所示。

图 3.1 只有斜角滤镜的效果

为了证明那两团云雾状的物体正是文字的轮廓,我再把模糊设成0。距离拉到了16(图 3.2)。

图 3.2 内侧斜角滤镜:距离被拉大后的效果

是不是已经看出一些端倪来了?我们再把类型改成外侧,距离再拉大些(图 3.3)。

图 3.3 外侧斜角滤镜:距离被拉大后的效果

至此,真相已被揭开,所谓的斜角,不过就是把图形复制了两遍,进行上色以后,错位地叠加到原始文字之下。

所以,当我们把距离重新调小的时候,转角处的边缘必然不会圆滑。(图 3.4)

此处我再次把背景改成深绿色,以便看清楚白色高亮区的轮廓。

图 3.4 外侧斜角滤镜:距离重新拉小后的效果

然后,为了让转角处可以顺利地衔接起来,Flash用了一个很狡猾的偷懒方式:模糊,我们不妨把模糊也设置回3。(图 3.5)

图 3.5 外侧斜角滤镜:设置了模糊参数后的效果

可以看到,在边缘平滑的问题上,Flash滤镜试图通过简易的障眼法来蒙混过关。

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

时间: 2024-10-10 10:43:12

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

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

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

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

总目录:http://blog.csdn.net/iloveas2014/article/details/38304477 3.1.2 以小见大--从细节损失洞悉滤镜本质 把它再改回内斜角,边缘似乎光滑了些,但这种错觉仅仅是由于阴影与蓝色的对比度不够强烈,才会让边缘的粗糙不够显眼.把文字颜色调成浅紫以后,转角处的锯齿依旧一览无余.(图 3.6),而Photoshop应用同样的设置则不会出现同样的问题(图 3.7). 图 3.6 模糊值为3的内侧斜角滤镜 图 3.7 大小等于3的斜面样式 如果认为

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

总目录:http://blog.csdn.net/iloveas2014/article/details/38304477 3.1.3 用内侧滤镜验证Flash简单滤镜的实现原理 以上测试都在外侧进行,为了证实内侧滤镜的实现机制与外侧并无大异,我再次用一个方块让内阴影滤镜在方块上移动.(图 3.23) 图 3.23 内阴影滤镜的效果 阴影层似乎并非从复制出来的轮廓,因为方块的边缘并不存在这种内转角的结构.但是,当我把距离调回到0的时候,真相终于浮出水面.(图 3.24) 图 3.24 距离为0的

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

总目录:http://blog.csdn.net/iloveas2014/article/details/38304477 3.1.4 简单滤镜中的渐变原理探讨 我们再简单的看一下滤镜里的渐变条. 为了尽可能地减少复杂的文字轮廓所造成的干扰,我再次使用方块进行试验. 我画了一个紫色的方块(啥颜色其实都无所谓了),然后添加渐变发光滤镜,把模糊和距离值都调大,以便看清楚渐变的轮廓,然后给渐变条随意地加上几种颜色(图 3.30) 图 3.30 模糊范围较大的渐变发光 可以看到,渐变条上的色彩从右往左地

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

2.3.2 Photoshop斜面样式的精雕细琢VS Flash斜面滤镜的粗制滥造 下面我们先把没对应上的参数一一列出来. Photoshop:样式,方法,深度&方向,软化,阴影高度,(等高线) Flash:强度,距离,类型,(挖空) 做到这一步,我就纳闷了,为什么Flash斜角滤镜的参数又是这些,跟投影好像没啥两样. 括号部分的参数我暂时先排除掉,等高线我们没有编辑过,它默认也用线性图,暂时认为它没有影响,而挖空几乎与滤镜效果无关,也能排除. Photoshop的样式显示为内斜面,以下拉框的形

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

2.3.3 Photoshop深度==Flash强度? 下一个是深度,用排除法我对应上了强度.这次跟投影的不一样,深度可以小于100%.但不管如何,我们先把深度调很大看看,比如都调到1000%.(图 2.62,图 2.63) 图 2.62 强度1000%的Flash斜角滤镜 图 2.63 深度1000%的Photoshop斜面 Photoshop里,浮雕的高度明显增大,而且轮廓相当美观.Flash虽然也明显地凸了起来,但已经彻底失控了,又是数值过大所致? 数值调小点吧,150%?200%?效果始

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

2.3.4 Photoshop高度==Flash距离? 剩下高度一项了,跟距离相对应吗? 但是,高度以角度为单位,但距离却是像素,似乎拉不上关系.不过我们照样做下试验:先试一下Photoshop的高度.在调整的过程里发现,浮雕的厚度并没随着高度的增加而变大.只感觉到光影往某个方向微妙地移动着. 图 2.69~图 2.75展示了不同高度下的效果. 图 2.69 高度=0° 图 2.70 高度=15° 图 2.71 高度=30° 图 2.72 高度=45° 图 2.73 高度=60° 图 2.74

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

1.3 HSB模式及其与RGB间的转换 从上两节的讨论可知,RGB模式是一个数理性质较强的概念,对于大部分色彩来说,您很难通过RGB的数值得知它代表什么颜色,以及它的明暗和鲜艳程度. <忆江南>的景观之所以能直接用最简单的三原色来渲染,完全是因为他所描绘的江南美景足够的清澈纯净,而且颜色的种类较少. 实际上,大多数情况下,颜色的种类远不止红绿蓝三种,例如北宋的苏东坡在以歌咏残秋季节景物为主题的<赠刘景文>一诗中就有这样的一句:“一年好景君须记,最是橙黄桔绿时.” 类似的诗句举不胜举

ActionScript3游戏中的图像编程(连载四十四,第3章开始)

3.1 Flash简单滤镜真相大揭秘 上一章,我们用Flash的滤镜仅仅模拟了Photoshop里面的两个简单样式(当然只是我们的参数设置得比较简单,Photoshop样式远比我们想象中的复杂),就已经困难重重,一波三折了,而且效果还不如Photoshop的细致.那么,到底是什么原因导致Flash的简单滤镜如此受限?Flash简单滤镜是如何实现的? 进入本节之前,先明确下简单滤镜的概念,在ActionScript中,滤镜可以分为两大类,简单滤镜和复杂滤镜,前者指可以通过Flash IDE直接设置

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

2.2.7 关于Photoshop的图层挖空投影 在Photoshop里面,不管图层挖空投影的复选框是否处于勾选状态,显示出来的效果都几乎没有任何差别.那这个挖空的作用何在?不急,我们看看Flash里的挖空选项. Flash里的挖空很明显,图 2.23展示了挖空后的效果. 图 2.23 Flash的挖空投影 Flash的投影滤镜把常规显示的像素颜色都掏空了.从挖空的现象和隐藏对象的字面意思来看,两者含义似乎一致,但结果却出乎我的意料.(图 2.24) 图 2.24 隐藏对象 可见,投影与文字本身