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 色彩空间示意图

第一个属性是色相,它代表颜色的种类,如红,黄,绿属于不同种类的颜色。色相值的大小来源于物理学中的可见光谱(也就是我们常说的七色彩虹)。其中,位于两端的红光与紫光在颜色形态上(可能与反射色光的种类有关)比较接近,伟大的物理学家牛顿第一次把直线状的颜色光谱围成一个圆环,并将色相坐标轴做成了环状。在这样的一个色相环中,0度和360度完全等价,为红色,其它色彩按照彩虹渐变方式进行排列,分别为:橙30,黄60,绿120,蓝240,紫300(分布不均匀的原因跟RGB处理有关,实际上分布均为的模式更有利于指导色彩搭配)。引入亮度和饱和度以后,所有颜色便组成了一个实心圆柱体(实质上它们都可以由圆锥体展开,详情可以查阅原文)。这一个属性,HSV和HSL的理解完全一致。图 1.21中,环形箭头所指的角度(即实线与虚线之间的夹角,顺时针为正,逆时针为负)就等于Hue的值。

Saturation值在坐标系中表现为坐标点到圆心(圆柱中轴线)的距离,距离圆心越远,饱和度越高,色彩越鲜艳。取值范围为0~100。

最后一个属性代表亮度,两种色彩模式用了不同的单词(LightLess和Value),坐标系里,它表示当前点到圆柱底部的距离。取值范围为0~100。

图 1.21中,左侧圆点所表示的是H=240,S=70,L=100的白色。而右侧圆点则表示H=120,S=67,V=83的绿色。

我无法用很简洁的语句概括它们俩之间的异同,但我们还是可以通过图 1.21看出一些特征性的差别:

1 HSL的亮度跟数学的概念非常吻合,亮度为0时必然全黑,亮度为100时必然全白。而HSV只有亮度为0的时候全黑,亮度为100时RGB可能只有一种颜色的光被全部反射出来。

2 两者对饱和度的理解不甚一致,HSL认为很白的颜色也能代表饱和,但HSV认为很白就一定很不鲜艳。所以HSV模式里,只有当S等于0才有可能全白。而S=100,V=100只相当于HSL模式中L=50的位置。

事实上,这两种色彩模式都存在一定的缺陷,如黄色比粉红往往要刺眼一些,但是HSL模式中,黄色的亮度还不如粉红的高,又比如淡紫比深蓝的感觉要鲜艳,HSV模式却告诉我们,前者的饱和度比后者要低。

灰度值(稍后的章节会讲述)可以一定程度上解决以上问题,但是局限性依然很大。作者曾经幻想过用纯数学手段来弥补自己美术细胞的不足,结果都以失败告终,直至某位美工给我推荐了几款配色软件以后我才如梦初醒。一个看起来不太起眼的ColorPicker也得占用十几兆的存储空间,查阅安装目录后发现,光数据表就接近10M,而且还是压缩过的。可见美学的知识,还真不是区区几条数学公式就说了算。但无论如何,在此我还是代表全天下没有美术功底的程序员们,向设计出HSB模型的数理学家致以崇高的敬意。

一般涉及取色器的软件都会使用到HSB模式,而且HSL和HSV两者只选其一,比如Windows的系统颜色面板和Microsoft Office会使用HSL,而Adobe系列的软件如Flash,Photoshop则倾向于选择HSV。由于使用HSV的软件往往喜欢用B代替V,所以导致我经常搞混HSB,HSL和HSV之间的关系,也让我在后续的日子里走了不少弯路。在此希望我的前车之鉴,可以让大家不会重蹈覆辙,在碰到类似问题的时候,建议先搞清楚别人所提到的HSB具体是指HSL,HSV,还是广义上的色相模型。

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

时间: 2024-11-05 23:28:47

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

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

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

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

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

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

2.2.5 投影距离的模拟 Photoshop投影样式面板的下一个属性是距离,它也存在于Flash的投影滤镜选项中.两者初始值一致,经笔者测试,两者在效果实现和数值意义方面基本一致.Flash不需要对默认参数进行更改. 下一项是扩展,乍一看,在Flash中并没有找到对应项.但仔细观察,在Photoshop投影样式的基础选项里,除了alpha以外,就只剩该属性用了百分比. [原创]ActionScript3游戏中的图像编程(连载三十二),布布扣,bubuko.com

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

2.2.2 Photoshop投影大小的模拟 投影没有之前那么浓了,但是跟Photoshop里的效果差别还挺大,因为在Photoshop里我们还设置了另外一个属性:大小. Flash里似乎找不到它的影子,我们用排除法来进行定位,Photoshop投影样式的大小属性以像素为单位,Flash投影滤镜的选项只有距离和那对被“手铐”扣住的模糊属性符合条件,而Photoshop里也有一个距离,所以我们定位到模糊属性(图 2.15). 图 2.15 Flash投影的模糊属性 分别调整Photoshop的大小

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

2.2.3 Photoshop/Flash中的投影品质 与Photoshop不同,Flash的滤镜在输出的作品中仍会实时通过FlashPlayer进行渲染,所以性能显得尤为重要,在迫不得已的情况下还要以牺牲品质作为代价.所以,Flash的品质下拉框引起了我的注意,我试着把品质调整为“高”,效果就可以跟Photoshop的媲美了.(图 2.18) 对于品质,Flash的帮助文件也给出了解释,品质的高低差别在FlashPlayer内部是通过对低品质滤镜的使用次数不同来进行控制的,低品质只模糊1次,高

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

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

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

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

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

2.2.1 投影颜色与透明度的模拟 默认的投影滤镜看着比Photoshop的投影样式浑浊,究其原因,似乎是颜色太深所致.(图 2.11). 图 2.11 设置默认投影滤镜后的效果 下面回到Photoshop查看其默认的投影参数(图 2.12). 图 2.12 Photoshop默认投影样式的参数 茫茫人海,我还是第一眼发现了你--颜色样本块.同是黑色,RGB都等于0,怎么差别还这么大?看来是A通道--不透明度惹的祸.从图 2.12中,我们看到Photoshop里对阴影设置了75%的不透明度,那F

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

2.2.2 Photoshop投影大小的模拟 投影没有之前那么浓了,但是跟Photoshop里的效果差别还挺大,因为在Photoshop里我们还设置了另外一个属性:大小. Flash里似乎找不到它的影子,我们用排除法来进行定位,Photoshop投影样式的大小属性以像素为单位,Flash投影滤镜的选项只有距离和那对被"手铐"扣住的模糊属性符合条件,而Photoshop里也有一个距离,所以我们定位到模糊属性(图 2.15). 图 2.15 Flash投影的模糊属性 分别调整Photosh

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

2.2.3 Photoshop/Flash中的投影品质 与Photoshop不同,Flash的滤镜在输出的作品中仍会实时通过FlashPlayer进行渲染,所以性能显得尤为重要,在迫不得已的情况下还要以牺牲品质作为代价.所以,Flash的品质下拉框引起了我的注意,我试着把品质调整为"高",效果就可以跟Photoshop的媲美了.(图 2.18) 对于品质,Flash的帮助文件也给出了解释,品质的高低差别在FlashPlayer内部是通过对低品质滤镜的使用次数不同来进行控制的,低品质只模