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

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

3.2.5 更改渐变滤镜不透明度的变化趋势来加强立体感

在上一节的最后,我给出了一个用渐变发光制作立体字的小例子。方法是翻转渐变的透明度变化方向。(图 3.51)

图 3.51 利用渐变发光制作浮雕效果

虽然立体感已经出来,但是厚度部分看起来更像是一个线框,而非一个实实在在的立体字侧面。

究其原因,就在于渐变的终点为全透明,而且模糊作用区太小,导致有色的区域很少。

下面针对这两个问题对以上浮雕字进行修正。针对透明度问题,我先把所有渐变点(最左侧的点除外)的alpha调成100%(图 3.52)。

图 3.52 去掉透明渐变后的渐变发光效果

看起来更像投影多一点,因为几乎没有任何渐变。所以接下来需要调整渐变区的颜色。比如把渐变改为浅蓝到深蓝(图 3.53)。

图 3.53 从浅蓝到深蓝的渐变发光效果

层次感来了,但过渡区不太柔和,渐变的过渡有点突然,只有很少的两三个像素。究其原因,上一节已有提及,因为渐变的区域等于模糊值,而我们的模糊值只设置了5像素。

经测试,80号粗体微软雅黑在模糊值=10像素时表现最佳(模糊太大,超出字符粗细,会对轮廓造成比较严重的变形),我再给渐变条随意加了几种颜色,效果如图 3.54所示。

图 3.54 多色渐变发光

我们暂且不追究这一随性涂鸦作品的可观赏性,单看渐变范围,我们可调的空间有了很大程度的提升。如果模糊值=5,那么渐变就只能呈现出一条条很细的丝线。(图 3.55)

图 3.55 模糊值为5,渐变点数量大于等于5时的渐变发光效果

当然,利用渐变多和模糊值小这一矛盾,我们也同样可以进行一些奇葩的创作,也可以用它来制作一些像素风格的图画。

把渐变设置改为从浅蓝到深蓝,效果如图 3.56所示。

图 3.56 模糊值为10的浅蓝-深蓝渐变发光

一个侧面类似于球面的立体效果基本成型。读者可以自行调整里面的颜色,同时衬以投影进行美化。图 3.57,图 3.58是我调整后的效果,见笑了。

图 3.57 笔者对色调进行调整后的效果——塑料质感字体

图 3.58 笔者对色调进行调整后的效果——灯箱效果字体

如果认为边缘不够圆滑,就可以结合之前学习过的高强度发光滤镜(即描边)柔化边缘的转角,发光颜色跟文字颜色一致(图 3.59),但这做法不太地道,在讲到BitmapData的时候,我会给出一些相对高级的办法。

图 3.59 用发光滤镜柔化边缘

对于后一种灯箱字体,为了让灯光也能穿透字体的正面,我们可以多建一个内侧的渐变发光(这里不建议用全部,因为内外侧的模糊值和距离不一样)(图 3.60)

图 3.60 添加了内侧渐变发光的灯箱字体

我们已经尝试了在外侧创建浮雕,那么内侧的可以实现吗?

下面我们开始用内侧的渐变发光来做试验。

把现有的滤镜全部删掉,重新添加一个渐变发光滤镜,将类型更改为内侧(图 3.61)

图 3.61 默认的内侧渐变发光滤镜

白色的高光配以灰暗的阴影,浮雕样式已崭露头角,但高光效果偏弱,阴影效果偏强,可能是白色不透明度过小,黑色不透明度过大所致,将白和黑的不透明度都调整为75%之后便有所改善。(图 3.62)

图 3.62 将渐变不透明度都改为75%以后的效果

阴影区涵盖面仍然较大,甚至将文本原有的颜色完全覆盖,而且高光区的边缘也出现较明显的杂边与切迹,我们尝试在渐变中间添加一个全透明色,并且将白色渐变点调右,让高光更远离边缘的位置(图 3.63)。

图 3.63 用全透明渐变点弱化发光和阴影区

再一次出现渐变被挤压成线框的现象了,吸取以往的经验教训,我们把模糊值调大点看看(图 3.64)。

图 3.64 模糊值调大后的效果

只调大了3像素,高光轮廓就已经严重变形,俨然即将熔化的金属,虽说这奇葩并非我们目前想要的,但可为日后的创作带来灵感的启迪。

从整体上来观察,越靠近边缘的位置变形越严重,所以不妨再将白色渐变往右拉一下。(图 3.65)

图 3.65 白色渐变点再往右调一点

高光区的线条相对清晰了,但是渐变到透明的区域仍可看到变形,为了阻断这一渐变的发生,我在白色渐变点旁边添加一个全透明的渐变点(图 3.66)。

图 3.66 在距离白色渐变点很近的地方再加一点白色

白色光环再次被挤压,模糊值又无法调大,怎么办?只能打白色点右边的主意了。

我们把所有渐变点都往右移,再把黑白之间的透明点去掉,效果如图 3.67所示。

图 3.67 白色点继续右移的效果

再继续拖,恐怕连黑色都要给拖没了,但仍未得到满意的结果,常规做法已山穷水尽,非要把黑色也去掉吗?不妨试试,本节要做的就是打破常规!

我把黑色渐变条也改成白色。(图 3.68)

图 3.68 把黑色渐变点改成白色

再次取得新的突破!高光区在得到清晰轮廓的同时,也争取到了更大的有效面积,发挥的空间从此更加广阔!

根据平常的视觉习惯,高光应位于左上角,为此,我们用翻转法,把距离设置成负数。(图 3.69)

图 3.69 将高光调至人类习惯的角度

高光有点偏大了,可以调小点,把渐变点右移似乎是个不错的选择(图 3.70)。

图 3.70 渐变点继续右移

发现高光区仍然偏大,再往右将会再次出现被挤压的状况,引起恶性循环,这时,可以配合模糊值,距离等参数作出更细微的调整。(图 3.71)

图 3.71 细调后的效果

搭配上投影后的效果如图 3.72所示。

图 3.72 搭配上投影后的效果

立体效果成型以后,我们可以将渐变区域调大来创建更圆润的浮雕斜面(图 3.73)。

图 3.73 更圆润的斜面效果

图 3.72和图 3.73在打造质感的能力方面各有千秋,图 3.72适合于制作晶莹剔透的水晶字体(图 3.74),而图 3.73则更倾向于表面柔和的塑料或者石砖材质(图 3.75)。

图 3.74 在图 3.72基础上润色而成的水晶字体

图 3.75 在图 3.73基础上改造而成的塑料字体

时间: 2024-07-30 21:09:08

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

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