码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-08-28 16:16:49      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:actionscript 3.0   flash   图像处理   游戏   编程   

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

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

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


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


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


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

bubuko.com,布布扣

bubuko.com,布布扣

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


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

bubuko.com,布布扣

bubuko.com,布布扣

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


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


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

bubuko.com,布布扣

图 3.54 多色渐变发光


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

bubuko.com,布布扣

bubuko.com,布布扣

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


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


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

 

  bubuko.com,布布扣

bubuko.com,布布扣

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


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

bubuko.com,布布扣

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

 

 bubuko.com,布布扣

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


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

bubuko.com,布布扣

图 3.59 用发光滤镜柔化边缘


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

bubuko.com,布布扣

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


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


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


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

bubuko.com,布布扣

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


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

bubuko.com,布布扣
图 3.62 将渐变不透明度都改为75%以后的效果


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

 bubuko.com,布布扣

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


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

bubuko.com,布布扣

图 3.64 模糊值调大后的效果


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


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

 

bubuko.com,布布扣

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


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

bubuko.com,布布扣

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


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


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

bubuko.com,布布扣

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


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


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

bubuko.com,布布扣

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


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


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


 
bubuko.com,布布扣

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


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

bubuko.com,布布扣

图 3.70 渐变点继续右移


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

bubuko.com,布布扣

图 3.71 细调后的效果

 

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


 
bubuko.com,布布扣

图 3.72 搭配上投影后的效果


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

bubuko.com,布布扣

图 3.73 更圆润的斜面效果

 

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

bubuko.com,布布扣

bubuko.com,布布扣

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

 

bubuko.com,布布扣

bubuko.com,布布扣

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

 

 

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

标签:actionscript 3.0   flash   图像处理   游戏   编程   

原文地址:http://blog.csdn.net/iloveas2014/article/details/38898461

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!