Project1

标题: RTP图块无责任教程·补遗 [打印本页]

作者: 狒狒王 时间: 2008-2-17 22:28
标题: RTP图块无责任教程·补遗
今天讲一些前几词没办法展开讲的内容。

1、象素图绘制工具GraphicGale的使用
嗯，这里介绍这个工具不是给它做广告。只是因为一直用，觉得很方便。首先看一下界面。

以前6R上也有过写用Photoshop制作象素图的教程，不过我的这四次无责任教程，凡是绘制的部分，都是用这个软件完成的。相比起来，Photoshop的画笔可以提供比较柔和的过度，当然方便一些，但事实上象素图是不太追求这种过度的。而GraphicGale有几个比PS更适宜画象素图。
首先是预览功能。

缩小以后的效果和绘制时放大的效果完全不同，也算象素图的一个特点。绘制是按点绘制，所以必须放大，但是点的取舍是根据总体效果来确定的，随时看预览是很必要的。PS的不方便之处在于，如果要开预览，绘制的窗口就不能满屏。不取PS者，一也。
第二，准确绘点。
用PS的时候其实会发现，PS在画象素点的时候，其实和光标点的位置并不完全符合，有时会不大听话，这也是一个缺点。当然还有更麻烦的，就是画线，PS画线不是按象素计算的，虽然有画线工具，即使把粗细调为1象素，去掉反锯齿，仍旧得不到象素图要求的线：

但是GraphicGale在画线上和画笔是完全相同的，所以不存在这个问题。
第三，右键取色。
这也是一个很方便的功能，只需要在需要的颜色上按右键，就可以取到相应的颜色，复刻和修改都很适宜。这里的默认透明色是白色。
第四，网格与吸附
这个对RTP素材绘制可谓至关重要了，这个功能PS也算齐备，不过GraphicGale可以显示象素格，也可以自己设置任意长宽的格子，并且也提供了网格吸附。

譬如这里的32*48，就是专门设来画人物走动的。网格吸附是严格的对齐，一般是用来拼图用。
第五，分层、半透明

这个当然PS里也是有的，但是对于一款专业一点的画图软件，还是必要的吧？透明的设置可以用来处理底图以及阴影的绘制，修改时也需要开新层。理论上，画笔当然也可以画象素图，而且在不少功能上也比PS适用，不用它的主要原因就是不能开图层，非常麻烦。
第六，间隔点绘制

提供了专门绘制间隔点的画笔，两种颜色在颜色块里选，这个大概也只有象素图会用到吧？
第七，颜色选择涂抹

像这种边缘线，是不能用填充来更改颜色的，颜色选择涂抹是将画笔刷过地方和第二颜色相同的点涂成第一颜色。这个功能虽不多用，也还算是不错的功能。
大概就是这些，简单的颜色调整、翻转和滤镜也都提供了，不过一般用不上。也可以存成自己的格式，保留分层这些东西，单独画象素图是可以完全胜任的。要是有兴趣的话，不妨弄一个来试试，试用版基本就可以了（话说我的好象就是试用版）。好象地球村推荐这个公司专做象素动画的也有，不过没用过，想来应该也类似。另外提醒一点，一定不要存JPG格式，会糊，人家狠狠吃过一次亏，囧。

2、间隔描点
这个问题其实很多象素图教程里都会谈，不过简单说两句。
在Photoshop里画出来的过度总是非常柔和的，放大以后，事实上是这样：

不过象素图里一般使用的方法并不是大量更换渐变颜色，而主要使用间隔描点的方法，譬如这样：

为啥这么像某国国旗 - -|||

这种方法画出来的图，才会比较像象素图。之前提过的工具GraphicGale里就提供了间隔描点的便捷画笔。这种方法即使在正经绘画里也有使用，譬如现代主义里有一种画法叫“点彩”，应该差不多，不过我疑心那主要是恶搞。
记得小时侯玩《三国志四》（MS是……），里面可以修改武将脸谱，打开以后发现脸上的皮肤，全是用红色、黄色和绿色间隔画出来的（人脸画绿色，匪夷所思吧？）。其实，象素图之所以被大量使用，也许是因为早期电脑游戏对容量的要求非常苛刻，所以尽量使用最少的颜色来完成更丰富的画面（手机游戏目前似乎也类似吧）。现在当然不必如此了，但是为了追求象素图的效果，间隔点的方法还是可以使用。尤其是模拟默认图片：

打开默认图就会发现，这种方法被大量使用。默认素材还有一个特点，就是阴影饱和度特别低，理论上如果掌握得好，也可以模拟出以假乱真的素材，不过实践上，我还没做到过。最让人佩服的还是纹理和质地的把握，大概只有资深美工才做得到吧。

3、压缩图片
这个问题直接关系到间隔点的生成。
我使用的工具叫“Image Optimizer”，只是偶尔搜到就开始用而已。对于JPG图片的压缩，我觉得它的功能比较一般，这里拿来谈的主要原因是它对PNG格式象素图的处理。拿一张画好的地图放进去压缩：

它可以按照画面实用颜色数来压缩图片，这张图原来是61K，现在可以压缩一半。默认素材里的所有素材都是这样压缩过的（当然不一定是用这个工具）。
除了不会糊以外，比较好的是可以在减少颜色数的同时，自动添加间隔点。

如果有耐心一块一块调整的话，也许也可以得到不错的效果，不过我没有试过。专业的美工也许也会觉得是多此一举吧？不过多少可以提供一点方便，当然，在游戏图片的压缩上也是可以应用的，很多地图修改一下用PS存储，无端会大出几十K，实在不必要，老人话：看到上百兆的游戏就头疼。

4、素材的拼贴
以前没有拼过，前几天画别的图用了一下，发现PhotoshopCS2提供了很方便的功能，就是“变形”。象素图的情况会不太一样，不过我想，大概的原理是一样的。下面就来试一下。
首先，可扩展素材的材质拼贴。这个用混合属性就可以：

以上次那个囧JZ的墙为例，如此设置。

缩放调小一点，容易顾及扩展性的问题，不过可能有些效果不能达到，如果是要比较明确的效果，譬如很清晰的木质纹理，放大以后还要有后续的步骤来调整接缝的问题。
然后拼接一下，看看有没有接缝。

没有，就算OK了

第二，也可以用其他素材制作家具，譬如桌子，上次说过，很多桌子会镶石心，石头的纹理比较不好模拟，也可以贴素材上去。

以第一次的桌子为例

首先选择要镶石心的位置，这里注意中间的元图块一定要选满。然后剪切图层。

选择图案叠加，也记得缩放率小一点

复制一下几个可扩展的部分，看看接缝问题

没有问题就可以了

开象素，描边，上面描深一点，下面浅一点，会有凹下去的感觉，上面的两个角里面补一个点，会有一点厚度。

开新图层，画阴影上去。RTP里的阴影都偏紫，不知道有没有什么说法，也许日光下影子呈紫色？不知道。

开新层加上高光。这里注意两点，第一，光滑平面，像石面、玻璃的光泽，一般高光会画得很整齐，像这里画的。第二，更重要的是高光要顾及扩展性的问题，就不能乱加，三条必须一样粗细，而且必须45度，并且要以中间图块的对角线为轴形成轴对称（囧）。虽然说很死板，不过考虑到可扩展性也只好如此。当然，不加也可以，效果可能差一点。

5、四方连续
6R有人讲过四方连续，去搜索一下也能找出不少。但是因为这个问题实在很重要，这里简单介绍一下。
首先的问题是，什么是四方连续。当然，任意一个图块，你愿意怎么拼都可以，所谓可以连续，是指拼在一起看不出接缝。四方连续就是四个方向拼接都可以没有接缝。
简单看一下：

随便在32见方的格子里画两条线

放在一起，显然有接缝。那么要把这样的图块修改成可以四方连续的图，可以这样做：

拼起来，然后手动把连接处重新画一下

开16*16的格子。把新画好的图块拼起来。首先，把横向的两个图块左右拼合，左边的要右半块，右边的要左半块（喂……）。纵向的也是一样。

拼好以后的图块

连起来，已经没有接缝了，就是……就是这图案怎么这么抽……- -|||
当然，很抽的图案表现很抽象的原理，其他的图案事实上是一样的，甚至是有具体内容的图画线条，当然，对于我们而言，更关注的是纹理的连续——

32见方的石头纹理

左右拼接，用模糊工具把接缝涂掉，如果觉得不喜欢糊掉的样子，自己用画笔涂也可以

把左右图块合起来

上下也是如此

再拼一下，接缝问题基本解决。

当然，这种处理办法，毕竟要在图块本身基本连续的基础上，不然，大概等于重新画图吧？即如之前处理过的素材，其实也是一样的，包括瓦片、砖墙、木地板。最好的办法就是拼拼看。这种方法除了可以应用在图块绘制上，也可以解决自动图块和远景图的一些问题。

6、阴影问题
美兽说图块太直，确实是个问题，这个问题其实可以用PS解决一部分，这里用GraphicGale反而麻烦一点。

首先把最下面的图块选起来

新建一个层，用渐变来画，右边的颜色把不透明度改成0%。

画一下，临近上面的位置最好完全透明，不要和上面没有选的部分差别太大

新图层选择“正片叠底”

回到地图层，用魔术棒把白色和阴影都选起来，然后到渐变层把多余的部分删掉。记得阴影一定要选，所有阴影保持一个颜色，半透明才能用的。

把渐变层的透明度减少一点，看起来似乎好一点。基本的原理就是靠近地面的部分受光少一点，颜色深一点。但是修改时一定不要波及中间的图块。

7、45度的基本原理
应要求讲两句。其实45度也好，90度也罢，我觉得都差不多。不过45度有它的规矩。说白了也只有一点，就是所谓的“22.6度”线，这种线应该画成这样：

通俗一点，就是两个相连的点依次排列。这样的线和水平线的夹角如果设为α的话，那么tanα = 1/2，用反正切算一下，arctan0.5 = 22.6度。呵呵，其实没那么复杂。
当然，应用到图里，就是这样：

也就是说，凡是90度里画成水平线的，全部改成这种“22.6度线”
立体的话：

垂直线不变

可以试试提取《仙剑一》的素材，就是这种图块，不过它是像地板一样的图块，现在还没太明白45度游戏的地图是怎么用的。
做成地图其实只要按这个规则就可以了，但是怎么扩展是问题，我想，45度图块还是用45度脚本会比较好吧，囧，可惜没有这种脚本……顺便，记得所有和地面平行的线都要画这种线，不要画成这样：

参考图片可以看看这个：

不过注意，这个图里就犯了上面那个错误，所以，也算是惨痛的教训吧……OJZ

以上，是全部补遗内容，教程就到此结束了。
本来应该有个总序，但是没想到第一弹已经被发布了，所以只好写在这里，大概是这几点：
1、中间的过程图都是经过压缩的，所以不要拿来直接用，后面那个“成品”才是可以用的。
2、很多象素图的基础知识是按照其他教程的框架讲的，所以对也一起对，错也一起错，望见谅。
3、有些内容站上已经有相应的教程，这里只是为了完整所以简单说一下
4、具体的操作，比如PS的使用，这里没有详细讲，当然也不可能详细讲，还是看相关的教程比较好。
5、使用工具：PhotoshopCS2，Graphic Gale，Image Optimizer，手写板，RMXP
6、任意转载或使用素材
7、官方有一个非常好的图块和象素图教程，比这里讲得更到位一些，各种问题都谈到了。是日文的，但是也可以借鉴一下：http://tkool.jp/fancontents/lecture/graphic/index.html
原本想要整理一下的，但是快开学了，有点懒得做了，以后有心情再说吧。但是素材图片我扫描了一些，还是拿上来共享之，可以做一点参考。彩色的来自《故宫家具系列扑克》（囧）；黑白图来自《中国古建筑语言》（王其钧，机械工业出版社，2007年1月第一版）。
点这里下载：http://rpg.blue/UP_PIC/200801/参考_83686385.rar
当然，还有几句废话。至于VX地图，人家对Q版无爱，对一头身更没有爱，对战斗系统没有爱，统统没有爱，呵呵，所以，根本没尝试，但是理论上大概也差不多。即使是欧式建筑，也是一样的原理，只是应千年HL的要求，所以多写了一些古代素材的要素，虽然不想崇洋媚外，也不打算厚古薄今。个人一直很排斥用商业地图，因为觉得限制太大，完全失掉创造的快感，不仅地图要用人家的，人物也不能自己挑选，如果不是做同人游戏，确实比较不好玩——不管怎么说，做游戏还是为了自己好玩吧。所以看到山人说也想试一试，其实人家是很高兴的，大概是阴谋得逞的感觉，希望大家一起来画地图，XD。也感谢千年狐狸精那个帖子，所以才想得起来写这个无责任教程，之前看到她做了那么多走动图，也是很羡慕的。最后，象素图这个东西，还是耐心最重要，不像其他的图那么见功力。而且其实这几次的图都画得不太认真，跟默认素材还是差很多的，是名副其实的“无责任”。尽管没想到会系统地写下来，但是写的目的仍旧和一开始说的一样，知道什么说什么，一点画图的经验而已。不是正经话，就不正经说，不过，不正经的话也有不正经的说法，老不说，也还是近于矫情，呵呵，就这样。

作者: 很牛滴靓仔⒅ 时间: 2008-2-17 22:38
提示: 作者被禁止或删除内容自动屏蔽

作者: 越前リョーマ 时间: 2008-2-17 22:40
沙发也！

很强大的教程，{/qiang}
顺便下那个工具看看……{/hx}

作者: 特工齐齐 时间: 2008-2-17 22:43
141....009....{/hx}

作者: 狒狒王 时间: 2008-2-17 22:48

以下引用特工齐齐于2008-2-17 14:43:24的发言：

141....009....

明天，申请明天交作业
另外，申请009免除好不好，他的帽子好雷……T T

作者: 越前リョーマ 时间: 2008-2-17 22:50

以下引用狒狒王于2008-2-17 14:48:32的发言：

以下引用特工齐齐于2008-2-17 14:43:24的发言：

141....009....

明天，申请明天交作业
另外，申请009免除好不好，他的帽子好雷……T T

暗号对话……|||

作者: 黑猫警长 时间: 2008-2-17 23:38
提示: 作者被禁止或删除内容自动屏蔽

作者: kaveil 时间: 2008-2-17 23:52
好强大的教程...正好偶也在做一个武侠游戏```地图画的人都要疯了``所以狒狒的两张地图拽去用咯``不介意吧{/hx}

作者: 黑猫警长 时间: 2008-2-17 23:58
提示: 作者被禁止或删除内容自动屏蔽

作者: 特工齐齐 时间: 2008-2-18 00:01

以下引用狒狒王于2008-2-17 14:48:32的发言：

明天，申请明天交作业
另外，申请009免除好不好，他的帽子好雷……T T

果然…
009的头我完成到这个地步就没办法进行下去了…要不狒狒看看哪里还需要改吧……
http://hiphotos.baidu.com/tegong77/pic/item/61557ac63598c90b9c163d26.jpg
[这个不是45度…当然最好的期望是狒狒再弄个45的]

作者: 狒狒王 时间: 2008-2-18 00:23

以下引用特工齐齐于2008-2-17 16:01:15的发言：
果然…
009的头我完成到这个地步就没办法进行下去了…要不狒狒看看哪里还需要改吧……
http://hiphotos.baidu.com/tegong77/pic/item/61557ac63598c90b9c163d26.jpg
[这个不是45度…当然最好的期望是狒狒再弄个45的]

刚刚画了下。看行走图，臆测9的头盔为模拟龙的样子……不过战斗图里又似乎不是，OJZ。不论怎样，凑合看下吧。铠甲也很雷，所以只画了头：

141的：

顺便，那个，你的图我看不到，T T

以下引用kaveil于2008-2-17 15:52:35的发言：
所以狒狒的两张地图拽去用咯``不介意吧

不介意，随便用。话说，自己画全部地图和走动，什么时候人家才有这么大的毅力……>_<

以下引用黑猫警长于2008-2-17 15:38:02的发言：
不知道软件有中文的么？

软件有日文的，囧
不过似乎有汉化版，但是英文版也还凑合可以用，我想。功能不是很多。

作者: 特工齐齐 时间: 2008-2-18 19:01

以下引用狒狒王于2008-2-17 16:23:37的发言：

刚刚画了下。看行走图，臆测9的头盔为模拟龙的样子……不过战斗图里又似乎不是，OJZ。不论怎样，凑合看下吧。铠甲也很雷，所以只画了头

竟然看不到，baidu实在太猥亵了……话说我以为009的头是狼头来着。
http://hi.baidu.com/tegong77/blog/item/07b97f8d25ebb116b21bba38.html
这样应该可以看到鸟……

作者: 影北山人 时间: 2008-2-22 05:23
居然把这个忽略了……失职失职，刷色鼓励~

作者: isaeva 时间: 2008-2-22 20:30
狒狒王同学的像素现在很强了呢{/se}

话说因为现在做古建筑模型的原因看到屋顶果然还是觉得有些奇怪忍不住就问了。。。瓦当下面的那些貌似“枕木”的结构是因为觉得会被屋檐遮挡所以不绘制出来么？个人认为似乎做出来看起来更合理结构层次也更好些

作者: 殤。 时间: 2008-2-22 20:34
提示: 作者被禁止或删除内容自动屏蔽

作者: 狒狒王 时间: 2008-2-22 21:05

以下引用isaeva于2008-2-22 12:30:11的发言：

狒狒王同学的像素现在很强了呢

话说因为现在做古建筑模型的原因看到屋顶果然还是觉得有些奇怪忍不住就问了。。。瓦当下面的那些貌似“枕木”的结构是因为觉得会被屋檐遮挡所以不绘制出来么？个人认为似乎做出来看起来更合理结构层次也更好些

[本贴由作者于 2008-2-22 12:37:49 最后编辑]

小I大人出现了~~
那个，没有画“枕木”是因为……人家不知道那是什么，囧
其实对古代建筑一点研究都没有，只不过是偶尔观察一下而已So……
回去研究下~

作者: 踏水无痕 时间: 2008-2-22 21:51
{/qiang}{/qiang}不错

作者: 金圭子 时间: 2008-3-6 02:14
我记得狒狒王N年前就推荐过GG的啊，包括第一点以前就提到过…………
不过还是回复一些意见（虽然我也不是说PS很适合画象素图，的确PS最适合的是【“图像”“处理”】，画象素图用专门的软件，或者画矢量图的那种Ill什么的更好，不过我觉得一般点的已经够了（特别是某些用画笔都可以画的强人……）

1.PS的不方便之处在于，如果要开预览，绘制的窗口就不能满屏。不取PS者，一也。
________________________

ps开预览就不能满屏是什么意思？是说PS里面预览是一个浮在上面的窗口；而GG，我看截图，是划分出来的一个窗口么（好像vb那样的）？？

2.PS画线不是按象素计算的，虽然有画线工具，即使把粗细调为1象素，去掉反锯齿，仍旧得不到象素图要求的线：
——————————————————————————
那是因为你选择的是“画笔”吧？选择“铅笔”就是完全按照象素啦。
不过ps的“笔触”是按照画笔设计的，选择了“铅笔”然后去选择一些复杂点的画笔风格，就会很囧……

3.取色的快捷键是“I”，话说我宁可多用点键盘，表浪费右键这么庞大的功能啊…………

4.长方形的网格的确很强大……其他倒是都可以做到的，PS还有大小两种格子呢。

5.就不说了，PS的特色

6.这个间隔点的确很强大，ps或许能做到，但是应该很麻烦（我对ps的设置画笔一直没看懂……）

7.这个是什么功能没看懂…………－v－

作者: 狒狒王 时间: 2008-3-7 01:20
龟子大人的回复还是一如既往的长啊囧
只是一直用不惯PS而已（不管画什么图用不来，囧）。PS对图片处理的强大功能对于象素图似乎都没什么用，用滤镜处理出来的效果多少都会有点糊。即使是不错的钢笔功能，对于24*24的小图也有点杀鸡用牛刀的感觉。GG并不是很大的软件，相比起PS来说，上手也比较容易。以前推荐，只是附带一提，这里当然也仍旧是附带一提，用惯PS的自然还是用PS的好。
--------------------------------------------------------

1、ps开预览就不能满屏是什么意思？是说PS里面预览是一个浮在上面的窗口；而GG，我看截图，是划分出来的一个窗口么（好像vb那样的）？？

也可以单列进工具栏里。我的所谓不能满屏的意思是说，一般看到的推荐PS画象素图的教程，都会教你开一个新窗口，那样子就必须给新窗口留一个位置，一直都觉得很不方便。至于通常画其他图用的导航器，是很难看到100%大小的原图预览的。
--------------------------------------------------------
2

、那是因为你选择的是“画笔”吧？选择“铅笔”就是完全按照象素啦。

我的直线是直接用直线工具画出来的，囧。
钢笔虽然也可以画出适合的线条？但是有时也会不太好控制角度。
--------------------------------------------------------

3、取色的快捷键是“I”，话说我宁可多用点键盘，表浪费右键这么庞大的功能啊…………

右键的庞大功能在GG里几乎用不上，这个功能我觉得还不错。另外，PS里如果用画笔的话，取色按住ALT就可以了，囧。
--------------------------------------------------------

4、长方形的网格的确很强大……其他倒是都可以做到的，PS还有大小两种格子呢。

格子的问题主要是针对微软画笔而言的。子网格确是不错的功能，不过没有也还过得去。
--------------------------------------------------------

5、就不说了，PS的特色

同4
--------------------------------------------------------

6、这个间隔点的确很强大，ps或许能做到，但是应该很麻烦（我对ps的设置画笔一直没看懂……）

PS画笔设置确实也能做到，不过GG里的间隔点我也几乎不用的，囧，所以请无视。
--------------------------------------------------------

7、这个是什么功能没看懂…………－v－

这个也是PS里有的功能，没说明白就也请无视吧。

作者: 金圭子 时间: 2008-3-7 19:40
2
、那是因为你选择的是“画笔”吧？选择“铅笔”就是完全按照象素啦。

我的直线是直接用直线工具画出来的，囧。
钢笔虽然也可以画出适合的线条？但是有时也会不太好控制角度。
______________________________

是铅笔，铅笔……就是点住画笔以后出来的东西（我是用的PS7.0，不过我想应该差不多），
ps的钢笔是一个和选区有关系的东东，ps里面钢笔和铅笔之间的关系，就好像狒狒王和王菲之间的关系差不多－v－

作者: 狒狒王 时间: 2008-3-8 01:36

以下引用金圭子于2008-3-7 11:40:29的发言：
是铅笔，铅笔……就是点住画笔以后出来的东西（我是用的PS7.0，不过我想应该差不多），
ps的钢笔是一个和选区有关系的东东，ps里面钢笔和铅笔之间的关系，就好像狒狒王和王菲之间的关系差不多－v－

我说的钢笔是钢笔曲线，钢笔曲线除了可以勾选区做填充，还可以做很多事，譬如描线。描线的时候，会按照当前画笔的形状描绘，我以为你指的是这个。而且我试了一下，居然曲线都无重点，果然强大的，虽说画出来的曲线有点僵。
如果直接用铅笔，那是一个点一个点的描吧，囧。
至于狒狒王和王菲的关系，说句笑话吧，好象狒狒王不听王菲就没办法干活一样，{/hx}

作者: 金圭子 时间: 2008-3-10 18:11
我知道钢笔啊，我只是说你如果要画你教程最初的那个曲线，就用铅笔就可以了。
画笔就做不到那种效果，我一开始就估计你说的是这个（当然可能估计错误了-_\\）

至于钢笔，起码ps的钢笔主要还是用来做选区的……

作者: 御灵 时间: 2008-4-4 21:45
发布完毕。
http://rpg.blue/web/htm/news1039.htm
vip+5

欢迎光临 Project1 (https://rpg.blue/)