您的位置：首页 > 其它

简单实现角色配色系统(已添加源文件及教程)

2009-04-29 23:29 281 查看

　　会用photoShop画彩色漫画的人应该都知道绘画的一般过程。一般都是先画出黑白线稿，然后把这个黑白草稿所在的图层加以“正片叠底”的图层效果放在顶层，然后再在这个图层下面添加新的图层来上色。目的是为了在上色期间对线稿不造成任何修改。正是这种传统的上色方式激发了本教程的灵感。

　　在FLASH图形绘制过程中我们都知道也可以像PS那样分图层来操作，所以PS里的那种绘图方式完全适用于FLASH里。那么把线稿下面的上色图层中的色块按颜色划分成MC之后我们就可以通过MC的属性和方法来对其做任何操作。这里我们只需要做变色效果，所以只使用了MovieClip.transform.colorTransform属性来改变这个MC的整体颜色。这样一来就实现了给绘制的图片局部变色的效果，但是如何让动画能实现同样的效果呢？

　　这里我们就要使用bitmapData的draw来实现，首先不能像传统动画那样把动画的每一帧分布在时间轴的各帧上，因为那不易于程序控制MC的统一变色。那么我们把动画的所有帧都集中到一帧上以规律的宽高来排列各帧。此时我们只需要实际一个算法来向一个BitmapData对象中以一定时间间隔draw这张图片代表每一帧的区域就可以时间动画的播放效果。控制颜色方面，我们把排列好的图形中的同一部位放在同一个MC中即可同时控制变色。

　　但是这里的线稿直接以普通的方式叠加在这些色块上的话效果并不理想，需要和PS中一样以“正片叠底”的图层效果遮在色块上才可以。所以每次向bitmapData中draw的时候就必须分成2步，第一步先以正常模式draw色块部分，然后再在上面以滤镜模式draw黑白的线稿。

　　在制作过程中发现Flash的BlendMode.MULTIPLY模式最接近“正片叠底”效果。
//
　　最后要说一下，其实最完美的解决方法是用把线稿转换成Lab颜色模式只获取其中的“明度”L部分，然后从色块层中获取a,b部分也就是没有明度的色彩部分，最终两者结合才会有完美的叠加效果。
实际操作可以使用ColorMatrixFilter类来进行颜色分离以及合并。不过考虑到执行效率问题除非对颜色要求非常高可以考虑这么做否则还是直接用BlendMode.MULTIPLY模式来的方便。
//
最后谈一下这个配色方式的一些优缺点。
优点有以下几条：
1.可以进行任意配色，理论上对一个对象可以设置任意颜色，那么多个对象组合出来的配色可以说是非常丰富的了。
2.在一些社区系统中经常看到的换装系统中我们经常可以看到一些有限的颜色选择，里面的做法就是一个物品做几套不同的颜色。其结果就是文件数量和容量会是单一颜色几倍，而采用这个配色方法的话所有动作只需要制作一套素材就可以实现所有颜色的变化，在容量和文件数量上可以说是节省了很多。
3.应用面广，几乎所有2D都可以使用。比如物品，怪物，角色，装备，地图，界面。几乎所有可以变色的东西都可以使用这套变色方法来实现任意变色。
缺点：
最大缺点，就是对图形的制作有一定的要求，需要把各个颜色区域绘制出来。如果是使用现成的图片动画来制作这个系统的素材的话会比较耗时。但是如果角色从开始制作就以配合这个系统来制作，在制作过程中不进行图层合并的话，或者所有图像都是以3D批量生成的话制作压力就会相应减小很多。
还有的话就是可能由于代码的增加造成系统和内存消耗的略微上升（老实说速度上我很满意）。
//
下面举一个用现成彩色动画素材来制作“黑白线稿”的例子：
例子为一个现成的GIF动画，比如这个。

下载 (9.92 KB)

2009-3-18 20:55

1.先用PhotoShop把动画导入，这里必须注意由于GIF是多帧的所以不能直接打开，而是要用文件>导入>视频帧到图层的方法来导入。这里还要注意要使用这个功能必须安装QuickTime 7.1以上才可以。而打开的时候无法直接选择GIF类图像，必须要在“文件名”一栏输入"*.*"单击载入按钮后才能看到GIF图片并选择。

下载 (193.47 KB)

2009-3-18 20:55

2.从窗口>动画开启动画面板，我们会看到以下的帧动画。

下载 (150.73 KB)

2009-3-18 20:55

3.接下来新建一个空白的文件把每帧的图片都以一定间隔按顺序摆放成下图的样子，比如GIF的原始尺寸是59X108那么新建的文件尺寸就是59乘以帧数7等于413高还是108。如果帧数过多请注意不要把宽度设置超过2880的bitmapData最宽限制。