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/) Powered by Discuz! X3.1