像素画草地tile瓦片:分层色阶画草叶,九宫拼缝能铺完整地图

打开网易新闻 查看精彩图片

文本概览:全文约 2,414 字,阅读约 7 分钟。

草地瓦片:先锁顶层主色与色阶,再按暗→亮多层草叶叠边缘;九宫与变体只动中间,接缝留给眼睛去补全。

会开 Aseprite、要给俯视角游戏铺草的人,跟着画一块 16×16 底边砖再扩九宫就够。

草是一层一层叠出来的

从下往上看:最暗在底,越往上越亮。层数多,草就显得厚;只要一两层,草就薄。

顶层是玩家盯得最久的那一层。

选色从顶层开始,再往下推阴影色。顶层定了,整片草的“主色”才定。

打开网易新闻 查看精彩图片

厚草:边缘多叠几层叶。薄草:边缘留一两层就停。

颜色选择:草、土、角色要分开

游戏里地面、草、角色要一眼能分。

色相可以接近,色阶(明暗关系)必须拉开。

想让土路更醒目:把土路压暗一点,或加描边;多数游戏会选“压暗 + 必要时描边”。草也要和角色拉开色阶——角色老在草上走,草就不能和角色糊成一团。

验收:在 Aseprite 最上方新建图层,用任意中灰(例如#808080)填满整画布,混合模式选 Color(中文界面多为“颜色”)。只看下面图层:草、土、角色三块应变成深浅明显不同的灰,而不是一整块“差不多灰”。若草和角色仍像同一灰度,回去加暗草底或提亮角色轮廓,再测一次;不要带着“差不多”进入画砖。

打开网易新闻 查看精彩图片

棕土、角色、草地,三块色阶各占一段,别挤在同一灰度带。

调色板:阴影区 + 主色高光区

草地调色板常分成两截:下面是阴影绿,上面是主色和提亮。

简单版三五色就够;要更细,再给每个区加中间阶。

打开网易新闻 查看精彩图片

开 16×16 画布,打开网格(View → Grid),格宽高都设 16。

网格太刺眼就改灰、透明度压低;开关网格用软件自带快捷键即可,记不住就走菜单。

先画一块底边砖

实战里常用两条路:

A. 只维护一块 16×16,侧边/顶边/角用旋转+必要时镜像;

B. 在稍大的画布上一次性铺 3×3 方便对缝。

下面走 B(对缝直观),画完再拆成单块导出;若你更熟 A,把“第二暗色画叶”理解成“把已画好的底边砖贴到对应边再改方向”即可。

步骤 A:暗底 + 参差底边

从最暗的草绿(不含描边色)画接近满格的方块,底边留一到两格空隙给细节。草根参差不齐:底边再戳出一两格突出。

此时应看到:一块偏暗的绿方,底边略毛糙,四周还留着泥地或空隙。

步骤 B:叶形 + 提亮 + 冠顶

底边砖上的叶子朝下弯——这是“有上层压着”的方向感。

叶形可以换:细长用向下折线;圆一点就用“两格横线 + 下方一格方块偏左”。本教程走圆润可爱向。

  1. 用比暗底亮一阶的色,沿每片叶的最上缘点 1 像素宽的高光(保留叶两侧仍可见的暗底,不要整块涂亮)。

  2. 仍用这一阶(或再亮半阶),在叶片上方用短横线把相邻叶“连”成冠顶:想象俯视时草冠的顶面,线可以略参差,但大致占满砖的上半区。

  3. 冠顶里的大空档用同一阶或再亮一阶补点,别留下整块纯暗底露在“该是草顶”的位置。叶根角可用更深色压一点阴影。

俯视角里,这块高光区相当于草的“顶面”。顶边也可以参差:让部分高光渗进阴影区。

此时应看到:暗底上有朝下草叶,上半区已被冠顶色铺住,像一小块厚草皮。

打开网易新闻 查看精彩图片

步骤 C:描边与内侧亮叶

沿外形加描边,必要时用描边把叶片轮廓再咬清楚。顶层内侧还能用最亮色补几片朝上的草——越往草心越朝上,因为上面没有更厚的层去压它们。

一块 16×16 底边砖完成,就当模板:侧边、顶边 = 同一块砖旋转方向。

扩成九宫:中间填实,边角只改方向

在 48×48(或 3×3 格)临时画布上铺九宫:不是重做一块新风格,而是把底边砖的叶形语言沿四边重复,中间格填“顶视草冠”纹理。

基础图块集约九种:上边、侧边、底边、中间、四角。细节多了再加内角、特殊角、台沿、小岛。

先在约 3×3 砖的区域画大方块,整体内缩一到两格,边缘再戳参差。第二暗色在各边画叶子——侧边和顶边与底边同形,只是旋转方向。画不动就旋转原砖当参考。

串线、填中、再叠更亮一层;内侧可加小叶增厚。中途发现“先画横线再填”更快,就换流程——能复用就复用。

描边建议手动画:多擦一格、少加一格,接缝才可控。中间砖用简单上扬叶形做纹理(一左一右、一边略小),避免大面积复读。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

变体:只改中间,接缝交给“虚线效应”

同一边常要做三到五个变体。

先确认可平铺:接缝处图案能对上,或故意断在砖中,让眼睛补成一条线。

像路面虚线:每块砖缺一段,连起来脑补仍是直线。中间断一点,下一砖再续一点,整条线仍“在”。于是可以做弯折、错位等连接,而不必画满连续纹理。

像素级例子:砖 A 顶边中线画到第 7 格停;砖 B 从第 10 格续到第 16 格——两砖并排时,眼睛会当成一条跨砖线。

做法:并排三块顶边砖,确认可平铺;把中间那块挪到旁边当变体母本。用选区只框住中间区域——外围是连接区,别动。只在选区内改外叶、空隙、高光。

缺角、内角、台沿:可从现有角砖半块拼接;内角补在对角相邻空缺处。每次草会有点不一样,换画布重来比硬改到死更有效。

打开网易新闻 查看精彩图片

练习只做一件:先跑一遍灰阶验收,再画一块底边砖 + 三块顶边变体,拼成 3×3 小地图;接缝处不露硬直线,才算过。进引擎或 Tiled 前,再跑一次灰阶验收。

总结

草厚靠层数:暗在下、亮在上,主色先锁顶层。色阶先过关:草、土、角色灰阶差开,路才走得清。

九宫保接缝:变体只改中间;用虚线效应让眼睛补全跨砖图案。

参考资料

https://www.youtube.com/watch?v=G87yLTDrrIk: https://www.youtube.com/watch?v=G87yLTDrrIk