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

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

3.1.2 以小见大——从细节损失洞悉滤镜本质

把它再改回内斜角,边缘似乎光滑了些,但这种错觉仅仅是由于阴影与蓝色的对比度不够强烈,才会让边缘的粗糙不够显眼。把文字颜色调成浅紫以后,转角处的锯齿依旧一览无余。(图 3.6),而Photoshop应用同样的设置则不会出现同样的问题(图 3.7)。

图 3.6 模糊值为3的内侧斜角滤镜

图 3.7 大小等于3的斜面样式

如果认为这个斜面太小,看不清楚的话,那我们就用一个方块来做比较吧。大小100*100,浅紫色(#6633FF),斜面大小30像素(图 3.8,图 3.9)。

图 3.8 大小为30的斜面样式

图 3.9 模糊值为30的斜角滤镜

显然,Photoshop的质感与立体感都能完美地表现出来了,但是Flash却只出现了两团比较虚的光影。是品质问题吗?把品质设为高看看,果然不虚了,呈现出来的就是真正意义上的两团云雾。(图 3.10)

图 3.10 所谓的高品质斜角滤镜

而且,拼品质更是Photoshop的强项,图 2.94展示了雕刻清晰的效果。

图 3.11 雕刻清晰的内斜面

如果是因为模糊过度导致斜角变虚,那么,我们试着把模糊值调小,比如到10。效果如图 3.12所示。

图 3.12 模糊值设置为10后的效果

可以看到,转角处空出了一大块。再调成0,结果就更明显了。(图 3.13)

图 3.13 模糊值设置为0后的效果

再次证明了Flash内的斜角就是两块轮廓叠加的结果,此外,我们还看到相交的部分被挖空,否则,高亮区和阴影区将几乎铺满整个原始图像。

所以,从本质上说,投影和斜角滤镜的实现方式一模一样,图 3.14展示了外侧型滤镜的实现方式。跟投影相比,斜角仅仅是多复制了一次图形和多做了一次挖空的操作。

图 3.15则展示了内侧型滤镜的实现方式,处理方法跟外侧滤镜相似,所不同的只是要多创建一个镂空层(遮罩),以及距离偏移模式的微小差别。

图 3.14 外侧型滤镜实现过程图解

图 3.15 内侧型滤镜实现过程详解

以上实现过程,同样适用于其他几个简单滤镜,其中,发光(不含渐变发光)没有距离的偏移。而渐变发光和渐变斜角在上渐变色的时候会按着与轮廓垂直的方向进行颜色的渐变,其模糊值还用于控制渐变区域的大小。

而复制后进行的变色操作,用ColorTransform即可轻松完成,至于模糊的实现及具体算法,我会在后续章节中跟大家作进一步的探讨。

下面我分别用这6种简单滤镜对同一个文本进行设置,效果如图 3.16~图 3.21所示。

图 3.16 投影滤镜

3.17 模糊滤镜

图 3.18 发光滤镜

图 3.19 斜角滤镜

图 3.20 渐变发光滤镜

图 3.21 渐变斜角滤镜

不难看出,6种滤镜的构造模式都基本一致,注意到我把文本的不透明度调低至50%,以便观察不能修改距离的发光滤镜。另外,我们还可以把投影滤镜的距离设置为0,并且颜色改成红色来得到与发光滤镜完全一致的效果。(图 3.22)

图 3.22 距离设置为0以后的投影滤镜,跟发光滤镜如出一撤

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

时间: 2024-10-08 01:22:46

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.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 隐藏对象 可见,投影与文字本身