Project1

标题: RTP图块无责任教程·第三弹 [打印本页]

作者: 狒狒王 时间: 2008-2-10 19:02
标题: RTP图块无责任教程·第三弹
今天讲如何将3D商业游戏中的素材拼贴成RTP格式的地图图块。事实上，这样的教程以前有一个，不过和那个教程还是有所区别。下面主要就怎么让拼出的图块可以和默认素材一样来谈一下。因为比较长，分两次讲。

3D的制作，我是屡次坚持到用鼠标拉出球就放弃的（- -|||）。但是看过3D的皮肤以后，我们大概可以想象，3D的实质是这样的：

也就是说，我们看到的皮肤，是像贴在盒子上的一层包装。所以，也就是说，只要对皮肤加以一定的扭曲、拉伸，我们同样可以伪造一个像3D一样的图形。下面，继续上次的家具教学，我们用《轩辕剑五》里的一张皮肤制作一个RTP格式的柜子。
先把皮肤导出来：

大概可以想象一下，柜子在游戏里是怎样拼的：

（大概就是所谓的伪3D吧）

接下来，按照第一章里去透视的原理，我们只需要顶部和前面的部分就足够了：

柜子大概是两格高，一格宽。按照这个大小，把皮肤缩小。

顶部，缩小到宽64象素。用PS的话，周边会被虚掉，解决的办法是把图层复制N遍，拼合。

拼合之后

对前面的部分也同样处理，拼在一起。

把最下面稍微缩短一些，看起来就会像是俯视的样子，这个技巧上次已经讲过了。

顶部也要缩短

都做好以后，一个柜子基本上就成型了。但是到这里，它还完全不像RTP的风格，接下来要做的，是把它变得和像素图一样。（人家都在伪3D，我们伪像素，果然是……叹气）

首先，把边勾出来。这里最好让边缘整齐一些，不妨就当作是在画像素图。如果要做到尽善尽美，可以对着没有缩小以前的图描，因为缩小以后有些重要的细节也会消失。

用不同的颜色描边，最好和原来的颜色差别大一些

丰富一下线条，注意多用一些间隔画点的方法，让图片看起来粗糙一些。（我想到了，我们像在伪造古董，囧）

成图

这里如果觉得还不够的话，可以考虑用压缩工具之类的东西，减少画面的颜色数，或者像上次一样，添加杂色。这里推荐压缩工具Optimizer，推荐的原因是我一直在用（喂……）。这个工具可以按实际颜色数压缩成PNG，这个功能很方便，在RM制作里，用来压缩图片也是不错的选择。减少颜色数压缩PNG并且添加间隔点的功能，可以很好地伪装象素图，囧（具体的使用补遗里写好了）。之后放到地图里，调一下色调、明暗什么的，就可以了。

以上，事实上就是运用3D素材的最基本原理和一个最简单的案例。
总结一下，基本的步骤有3个：
      1、把素材缩小到合适的大小。
      2、用缩短各部分皮肤的方法伪造透视的效果。
      3、描边，伪象素图效果。
      4、添加其他需要的部分（这里没有，譬如阴影、其他装饰等）。
即使是更复杂的图形，基本原理也是一样的。有了这个基础以后，下面，就进入外景的绘制。

素材依旧来自《轩辕剑五》。用RPGViewer收素材的时候会发现，原本的素材是放得比较乱的，没有开游戏，很难分辨哪些素材是用在哪里，当然更难决定哪些素材是一套。所以，这里只是根据印象随便选的几张图。大家不妨按照游戏来找。
首先来看一下，默认素材里的房屋是怎样组成的。

如果只算房子的主体，默认素材是由正面、侧面和转角几部分构成的。侧面的房子下次再谈，十字型的建筑在中国除了长廊似乎比较少，所以也不考虑。下面主要谈一下正面。

一个正面的房子，当然是由墙壁和房顶两部分组成的。考虑到可扩展性的问题，事实上只需要各画3*3就可以了。
现在就开始处理3D素材。

先把要用的素材拼起来

讲解一下：从上到下依次是横梁、房顶的瓦、装饰、墙、装饰。上次有人说预告图看上去像默认，一方面也许是用了其他素材的原因。不过另一方面，也应该说，从瓦片和砖来看，确实差别很小，可能是和默认没什么区别。但是也唯其如此，这些装饰才显得更加重要。即使是龙宫君，之所以一眼看上去就知道是中国风格，也只是因为横梁上的装饰而已。
拼好以后，下面的步骤事实上组成的过程和柜子是完全一样的。不过，这里要注意的是四方连续的问题。所以，首先我们讲一下瓦片的处理。

首先，选中2*2片瓦。这个选中要注意连续性，选中以后，把选中部分复制两份在旁边，看看能不能很好的连接，如果不行，就要增加或者减少一点选区。搞定以后，把它复制出来。

把选中的四片瓦缩小到32*32的大小。（这里被拉长是误操作，请无视）
处理好以后，就得到了一个瓦片图块。

保险起见，还是复制一下看看效果。上面的接缝就是拉伸以后边缘被虚化造成的，解决方法是复制图层、合并。

现在把这个图块像在RMXP里画地图一样扩展成一个3*3的方形。
（这里似乎是3*5，我记不清楚了。其实3*3就足够）

处理瓦片下面瓦当的部分。贴着边把这部分选下来。

复制到刚才做好的3*3下面。

调整到看不出接缝的地方，然后把瓦当高度缩短。同样的道理，这样看起来像俯视，而不是像展开的皮（喂……）。
到这里，事实上已经完成了一个可扩展部分的制作。
总结一下，最关键的步骤是要挑选一个原本就可四方连续的图块，然后将之缩小成32*32的图块。为了方便，这个图块，我们就称之为“元图块”吧。其他的部分，都是在元图块的基础上继续加工得到的，就如刚刚瓦当的处理。顺便说一句，其实自动图块的原理也是一样的。
绘制元图块的大概步骤是：
      1、选择适当的可连续的图块
      2、用复制拼接的方法检验选择图块的可连续性
      3、将图块缩小为32*32的大小
      4、再次复制拼接，用笔刷、模糊等方法调整影响连续性的瑕疵（后详）
      5、在边缘部分加以适当的变化，如瓦当、边框等，组成完整的3*3格。
那么在接下来的步骤，也要注意到连续的问题。

处理横梁，和柜子几乎完全相同。首先把高度调整好。

选择有花纹的部分制作元图块。缩小成32的大小，复制、拼接，和刚刚的瓦片一样。这里看得到有一条接缝，可以用笔稍微涂一下，也可以用模糊工具，不过用模糊工具的时候，记得把笔的大小调到1像素，不然会太模糊。

调整好以后，把左边图块的右半部分复制到右边去。（四方连续的问题也到补遗里再说吧，囧）
复制后，右边的格子就是横梁的元图块。将之复制拼接，拼成3*1大小，放在房顶上就可以了。

这就是房顶部分。看起来已经有点意思了，对不对。

继续，瓦片下面的装饰（抱歉我不知道这部分叫什么……）
有花纹的图块也要注意，如果不想用两个图块来组成这个花纹的话，这个可连续的部分就必须被缩到32象素宽。

制作好后仍然拼成三格，放到房檐下面。不过这个图拼得有点问题，花纹没有缩成32象素，后面返了一次工。

墙壁部分，大概选2*4块砖比较合适，缩小成32*32。这个看大家感觉，只要能连续就可以。这里是已经缩好了以后。提示一下，像砖墙这种图块，边缘部分比较容易不连续，可以换一下挑选元图块的位置，实在找不到，再用笔修一下。

制作元图块。尽管这样会妨碍图块的丰富性，但是，毕竟图块是要重复使用的，有些要求只好放弃。

拼接成3*3的墙，墙就完工了

墙底花纹，略

拼好后，就是现在的样子了。到此，基础工作就完成了。接下来，要把图片处理得更像象素图。

描边

这次的描边灵活性要大多了。譬如对于这部分，要把横梁和瓦片结合起来，可以这样加工一下。这里只需要绘制一块，其他复制即可。
同时，一边描，一边要重新调整一下各部分的位置。考虑到中国房屋的房顶有些装饰，因此房顶那一格要留一部分空白，所以把横梁向下移动一点。

房梁也还需要调整一下，把两边的装饰涂掉，然后把顶部向左一点，目的是让装饰处在一格的中间。左边多出来的部分补到右边去就可以，它们是可以连续的，所以这样补不会有接缝。

按照实际的房屋来说，两边的瓦片应该都是瓦楞才对。所以对瓦片也要同样地处理一下，让两个鼓起的瓦楞离边界差不多远。挪好以后，把瓦楞两边的部分删掉。这里可以连下面的部分也删掉。
这一步的目的，和上面一样，我们原本的三个图块都占满的，但事实上因为还有突出来的房牙（也许叫这个名字……），所以必须留空白。截图有点少，希望解释清楚了。

墙的部分再删掉一条，房顶一般是比墙要多出一些的，对吧……囧

底饰描边

还记得一开始描柜子吗？最好整齐一些，这里只要描半边就可以了，其他可以复制出来。

都处理好以后，现在看起来更像房子了吧？

都处理好以后，就要加一些东西了。根据具体情况自己处理，这里加一个边、两个牙、一个柱子。不过，中国的砖结构建筑里不知道有没有这种柱子…………
不论怎么说，这种装饰和边框一定要加，不然看上去会过于简陋。即使是农家，房子也不是立方体，囧。
至于怎样加这些东西，前面的教程已经谈过了，下面从略。

线稿完成后，填色

丰富一下，完稿

这里记得在原来画好的图块上也做一些修改。譬如阴影，还有和柱子连接处的花纹稍微变化一下，以求衔接，等等。

柱子的阴影有错误，注意到了吗？（画外：你就是这样掩饰错误么 - -|||）

全部画好以后，调整一下位置就可以了。这里只是缩短了房顶的高度——请注意，是删掉中间图块拼上的，千万不要用拉伸调整，现在一旦拉伸，不仅图片会模糊掉，而且连续性也会被破坏。
默认素材有4格高，也许是为了阴影，我们既然都是一样，就不必浪费一格，所以这样就可以了。

导入地图里，就可以开画了，呵呵。

这张图里也可以了解到，错误的阴影和高光造成的麻烦。所幸自己画出来的错误是比较好补救的，增删几个点就可以。但是如果是花纹之类的错误，就会很头疼了，有时甚至会遇到需要重绘的不幸情况。
虽然只是简单的侧面图块，还是可以进行不少的变化，譬如图里这样，假装是天宫的大门吧，除掉门太简陋了以外。可以题字之：“金风玉露一相逢，便胜却人间无数。”当然，墨镜大米的出现是纯粹的恶趣味，XD

这次的时间约3小时。依旧总结步骤：
      1、确定要绘制的图块，选择皮肤
      2、拼合皮肤
      3、缩小皮肤、调整透视
      4、制作元图块
      5、整合成基本的图形
      6、描边
      7、添加其他装饰

至于作业……那个，大家自由创作吧（殴）。其实人家是希望大家踊跃创作中国风图块然后坐享其成的…………
这期太长了，侧面的画法下期再谈。到侧面以后，结构的确定就开始有一定难度。尤其中国房屋的结构中，远比较这次的要复杂，譬如塔、弧形的房顶、楼，乃至建筑群等等，遇到复杂的图形，就要花一些时间考虑，怎样才能将具体的图形抽象成几个有限的元图块。当然，总结出一些基本的画法也是有帮助的。这些都到下期再说，算是循序渐进吧。不放预告了。同时也谢谢大家之前的支持，希望对大家有帮助，哪怕只是提供了几张简陋的地图，Orz。

第一弹：
http://rpg.blue/viewthread.php?tid=74999
第二弹：
http://rpg.blue/viewthread.php?tid=75976
第四弹：
http://rpg.blue/viewthread.php?tid=77095

作者: 千年狐狸精 时间: 2008-2-10 21:51
华丽丽的沙发~

作者: 影北山人 时间: 2008-2-10 23:25
华丽丽的板凳~刷色加精鼓励~好忙好忙~~
狒狒前辈辛苦了T_T 【献茶】

作者: 特工齐齐 时间: 2008-2-11 00:38
我一直是看一眼RTP再看一眼素材一下一下点的 or2

作者: 美兽 时间: 2008-2-11 01:07

以下引用特工齐齐于2008-2-10 16:38:02的发言：

我一直是看一眼RTP再看一眼素材一下一下点的 or2

先ORZ......
但是总感觉与默认相比，缺少些立体感，总感觉太直了— —

作者: 诡异の猫 时间: 2008-2-11 01:16
很好很强大..{/se}
不妨加点阴影?

作者: 忻緣 时间: 2008-2-11 01:50
介個教程大好。。。。
那個那個。。。。8過。。。。我對45度視角更感興趣的說。。。
那個。。。。如果。。。有時間。。。能不能。。。。那啥。。。出個45度視角噠教程類。。？

作者: So，一切。 时间: 2008-2-11 01:51
提示: 作者被禁止或删除内容自动屏蔽

作者: 狒狒王 时间: 2008-2-11 03:15

以下引用美兽于2008-2-10 17:07:35的发言：
先ORZ......
但是总感觉与默认相比，缺少些立体感，总感觉太直了— —

可能是默认里，图块有一些明暗的处理的原因。在补遗里写下好了。

以下引用诡异の猫于2008-2-10 17:16:09的发言：
不妨加点阴影?

犯懒了，不好意思{/hx}

以下引用忻緣于2008-2-10 17:50:28的发言：
那個。。。。如果。。。有時間。。。能不能。。。。那啥。。。出個45度視角噠教程類。。？

我想45度的情况应该差不多，如果用3D皮肤来拼，理论上是可以拼出任意角度的。45度的话线条画成22.6度就可以了，这个在补遗里写下好了。单写一个的话，也许会有很多重复。
可以参考这个：http://www.tyfee.com/news.php?nid=132&page=3
另外还有一件事就是，整个游戏完全原创地图，可能难度比较大，如果是默认风格，在引用的时候会方便得多。

以下引用So，一切。于2008-2-10 17:51:50的发言：
楼主还会出多少

下期写侧面，有时间的话再写一个外景手绘，最后应该会有一个补遗，现在的计划大概是这样。不过还是那句话，对于我这个没长性的人……咳，不发计划会比较好，囧。

作者: 越前リョーマ 时间: 2008-2-11 07:03
强大！

顺便收了最后的素材……{/hx}

作者: 踏水无痕 时间: 2008-2-13 23:45
好难

作者: 柳柳 时间: 2008-2-14 04:48
这个教学太强大了，只能用NB来形容了……{/qiang}{/qiang}{/qiang}{/qiang}

作者: 御灵 时间: 2008-2-24 01:40
发布完毕。
http://rpg.blue/web/htm/news1002.htm
vip+5

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