您的位置: 首页 > 艺术设计 > 像素设计 > [像素画]第一章:草地图块
[像素画]第二章:无缝拼接 回到列表 像素画入门教程之三
 [像素画]第一章:草地图块

作者:imick 时间: 2008-02-26 文档类型:翻译 来自:像素交流/网络末端

原文:http://www.petesqbsite.com/sections/tutorials/tuts/tsugumo/chapter1.htm

恩,让我们从草地图块开始……通常这是像素新手第一次尝试制作地图元素时选择的主题,因为如果你想要制作一个RPG游戏,而这个游戏发生在某个“世界”里,那么你必然逃不过绘制草地图块。这对于学习地图图块(tile)来说是一个很好的热身练习,好,让我们开始吧。

让我们来看看各种不同的草地图素绘制方法。如果你玩过很多游戏,应该不会对下图感到陌生: 

虽然还有更多的制作方法,但上面展示的是比较流行的图块制作方法。有一点要声明的是我从来不会只用一个单一的草地图块来拼一片草地,听起来是很好笑,但是很多人却这么做,他们认为草地是绿色的,所以很自然一块绿色的草地图块可以代表一片草地。咳咳……事实上这样是错的。上面前两行图片就存在这个问题。它们基本上是大块的绿色,还有一些杂点在里头。如果玩家在玩游戏的时候游戏环境里只有这个图块是绿色的,而且周围的树木可以帮助玩家联想到这是一个树林或森林的环境,那么这绿色肯定是代表草地的……但如果它们看起来却更像其他的东西:例如一块绿颜色的金属块上面有几个凹痕,一块绿色的有色玻璃,又或者一块长了青苔的大石头,等等……它们共同的特点就是太平了,用这种图块拼起来的草地显得很单调。你想象一下现实中的草地是什么样子?应该像无数把小刀以各种不同角度倒插在地上,而且如果不被践踏或被人工修整的话,应该看起来很乱。既然如此,我们实在没有理由制作一片这么平整的草地。

接下来让我们分析一下比较``复杂''的草地图块---那些看起来有无数个杂点的图块。有一个简单的方法就是运用作图软件里的``喷笔''工具,然后在背景上喷上一些有着不同明度的绿色杂点,然后从背景中裁切出16*16像素大小的方块来作为图块。但这样的图块上的点都是随机的,在拼合时会出现图块无法无缝拼接的情况(各种色部之间会产生很大的空隙),就像例子里右上方有一块很大的深绿色的间隙。从视觉角度上来说是不美观的,这个问题稍候我会深入分析。

另外一个办法是一个笨办法,完全手动的绘画每一根小草外加给每一根小草加上明暗。用这个办法来画是比较烦人的,诀窍是不用太在意下笔,就用一些最大到4像素宽的随机笔触画就好了。有一个捷径就是先在一个地方画上这些随机的线条,然后将此拷贝粘贴到图块上,多做几次(每次的拷贝稍微选取不同的位置)将图层叠加起来,营造仍有一些随机的效果,这样的效率是高很多的。这个方法也是我本人采用的,因为我发现这个方法让我对整个画面有很好的控制,而且如果用喷笔的方法我仍然要回去检查并作修正,所以我就选择了完全手动的方法。这个方法也适用于制作有``厚度''的草丛---那种在森林里原始自然的草丛。向上的草丛看起来会比较高且深。偶尔我也会将它旋转90度,模拟草丛被践踏过的感觉(在像素画里些微的改变都会给画面带来巨大的变化)。

现在你可以选择你喜欢的方式来作画,除了这里提到的几个外还有很多别的方法...要紧记的一点就是草丛的立体感,它不该是平平的一块,而如果从头到尾只使用单一的图块来拼合一张地图,这样的效果是很恐怖的,参见下图:

我真的希望你不要这么做。我来说说原因吧:除了这样看起来很丑外,最大的问题是纹理的重复。上面的图实际上只是一套换了颜色不换造型的设计。设想一下在过去,当游戏引擎卷动画面不是以像素而是以图块(1 tile=16px*16px)为单位时会是什么情况。游戏人物在走动时,周围的场景没有变化。这就是单一图块的坏处,游戏人物看起来会好像浮在地图的上空。纹理不作变化的话,看起来不但无趣,还会让玩家的眼睛极度疲劳。当人物走入一大片重复的草地一段时间后,你就可以发现到这个问题。你或许按着向下走的键超过一个小时,但仍然不知道人物是否在走动还是已经被一面墙挡住了。当然,现在的引擎已经是以像素为卷动单位的,那么这种情况就不像过去那么糟,但如果图案仍是重复的,效果看起来仍会一样,玩家会被此困扰。

尾注:

图块(Tile):为了尽量减少游戏的容量和达到最好的效果,游戏地图会使用图块。图块是可以重复利用的,这就要求图块做到无缝拼接,可以是单个图块也可以多个图块的组合。一般游戏的图块大小是16x16。

用图块拼地图:游戏中地图的图快都会重复利用。有空的话观察一下FC上的几款RPG,比如圣火徽章,你就明白了。

图块无缝拼接:要求图块在拼成地图后不那么容易被人认出,这是由一个个小方块拼起来的。所谓“栅格”就是说一眼就被人发现了破绽。 

本文链接:http://www.blueidea.com/design/pixel/2008/5332.asp 

出处:像素交流/网络末端
责任编辑:bluehearts

相关文章 更多相关链接
[像素画教程]基本攻击的动画化
[像素画教程]让角色呼吸起来
[像素画教程]精灵教程进阶
[像素画教程]RPG精灵制作教程
[像素画教程]精灵的世界
作者文章
[像素画教程]基本攻击的动画化
[像素画教程]让角色呼吸起来
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
移动终端各平台手势参考卡片
互联网业的30/10/10 黄金比率
Adobe推出"Muse"网站创建工具
中国互联网大会:IMEA2011专场
苹果有而Google没有的
QQ电脑管家设计点滴分享
为什么我们程序员难晋升
无锡市惠山古镇形象标识征集
好莱坞教给产品设计师的设计经验
DW CS5网页设计入门/进阶/提高
栏目最新 栏目最新列表
国外创意名片设计欣赏
情感化界面
线下项目工作流程(归纳篇)
线下项目工作流程(分析篇)
简约而不简单-Practise平面设计
培养用户的使用习惯
优秀名片设计
专题头图的秘密武器
别让UED忽悠你(2):多少钱一斤
别让UED忽悠你(1):天生的矛盾

分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文暂时没有评论和评分

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容