Tileset 资源图的标准和规范
一、什么是 Tileset 资源图
Tileset,中文通常叫“图块资源图”或“瓦片图”,是 2D 游戏中非常常见的一种地图资源组织方式。
简单来说,Tileset 就是把很多小图块按照固定尺寸排列在一张图片里。游戏引擎会按照固定的格子大小去切割这张图片,然后把每个小格子当成一个独立的地图块使用。
比如一个 32×32 像素的 Tileset 中,每一个 tile 都是 32×32 像素。地图编辑器或游戏引擎会按照 32×32 的网格,把整张图切成许多小块。然后开发者可以像铺地砖一样,把草地、泥土、石路、水面、墙壁、树木等资源铺到地图上。
Tileset 的核心价值是:
- 节省资源体积。
- 保持地图风格统一。
- 提高地图编辑效率。
- 方便自动拼接、碰撞设置和图层管理。
- 适合制作大面积重复地形。
对于 2D RPG、农场游戏、像素风游戏、俯视角冒险游戏来说,Tileset 几乎是最基础的地图资源格式。
二、Tileset 的核心概念
1. Tile
Tile 是 Tileset 中最小的图块单位。
常见尺寸有:
- 16×16 像素
- 24×24 像素
- 32×32 像素
- 48×48 像素
- 64×64 像素
像素风 RPG 中最常见的是 16×16、32×32 和 48×48。
如果是 Godot、Tiled、RPG Maker、Unity Tilemap 等工具,Tile Size 必须提前确定。后续所有资源都应该严格遵守这个尺寸。
例如:
Tile Size: 32×32
这意味着:
- 草地 tile 是 32×32。
- 石路 tile 是 32×32。
- 水面 tile 是 32×32。
- 墙壁的一小段也是 32×32。
- 自动拼接块也必须基于 32×32 来设计。
一旦项目确定了 tile size,后期尽量不要频繁更改。因为 tile size 会影响地图比例、角色比例、碰撞体、相机缩放、动画帧尺寸和 UI 资源适配。
2. Tileset Sheet
Tileset Sheet 是由多个 tile 组成的一张完整资源图。
例如:
一张 512×512 的图片
Tile Size: 32×32
那么可以切成 16 列 × 16 行
总共 256 个 tile
如果使用 48×48 tile:
一张 768×768 的图片
Tile Size: 48×48
可以切成 16 列 × 16 行
总共 256 个 tile
Tileset Sheet 的宽高最好是 tile size 的整数倍,否则切图时容易出现错位。
推荐:
图片宽度 = tile width × columns
图片高度 = tile height × rows
例如:
32×32 tile
20 列 × 12 行
图片尺寸 = 640×384
如果图片里还需要留 margin 和 spacing,则需要额外计算。
3. Margin
Margin 指的是整张 Tileset 图片最外侧到第一个 tile 之间的边距。
例如:
Tile Size: 32×32
Margin: 2px
Spacing: 2px
那么第一个 tile 不会从图片的 x=0, y=0 开始,而是从 x=2, y=2 开始。
Margin 的作用是防止图块边缘在缩放或采样时被旁边像素污染。
在像素风游戏里,如果使用过滤、缩放或者相机移动,tile 边缘可能会出现杂色线、透明边、缝隙等问题。适当的 margin 可以减少这类问题。
不过并不是所有项目都必须使用 margin。很多引擎和工具也支持无间距紧密排列。
常见配置:
Margin: 0
Spacing: 0
或者:
Margin: 2
Spacing: 2
4. Spacing
Spacing 指的是 tile 与 tile 之间的间隔。
例如:
Tile Size: 32×32
Spacing: 2px
表示每个 tile 之间有 2 像素的空隙。
Spacing 的好处是:
- 方便人工检查每个 tile 是否独立。
- 避免相邻 tile 边缘互相污染。
- 适合 AI 生成时要求“每个图块隔开”。
- 方便后期抠图、切片和整理。
但是 spacing 也有缺点:
- 引擎导入时要正确设置 spacing。
- 不适合某些要求紧密排列的传统 tileset 格式。
- 如果忘记设置 spacing,切图会错位。
所以是否使用 spacing,要看项目需求。
如果是给 Godot 使用,可以使用 spacing,但导入时必须在 TileSet 编辑器里设置一致。
例如:
Tile Size: 32×32
Margin: 2px
Spacing: 2px
那么生成图、导入配置、切图脚本都必须使用同样的参数。
三、Tileset 的图片尺寸规范
Tileset 的图片尺寸必须和 tile size、行列数、margin、spacing 对齐。
1. 无间距 Tileset 尺寸计算
如果没有 margin 和 spacing:
图片宽度 = tile_width × columns
图片高度 = tile_height × rows
例如:
Tile Size: 32×32
Columns: 16
Rows: 16
图片宽度 = 32 × 16 = 512
图片高度 = 32 × 16 = 512
最终尺寸 = 512×512
2. 有 margin 和 spacing 的 Tileset 尺寸计算
如果有 margin 和 spacing:
图片宽度 = margin × 2 + tile_width × columns + spacing × (columns - 1)
图片高度 = margin × 2 + tile_height × rows + spacing × (rows - 1)
例如:
Tile Size: 32×32
Columns: 20
Rows: 12
Margin: 2
Spacing: 2
计算结果:
图片宽度 = 2×2 + 32×20 + 2×19
图片宽度 = 4 + 640 + 38
图片宽度 = 682
图片高度 = 2×2 + 32×12 + 2×11
图片高度 = 4 + 384 + 22
图片高度 = 410
所以最终图片尺寸应该是:
682×410
如果高度想要 412,就说明底部可能多留了 2px 空白,生成和导入时都需要统一。
四、Tileset 的背景规范
1. 推荐使用真正透明背景
正式游戏资源推荐使用 PNG 透明背景,也就是图片必须带 alpha 通道。
正确格式:
PNG
RGBA
Alpha 通道有效
空白区域 alpha = 0
错误格式:
JPG
RGB PNG
白色背景
黑色背景
绿色背景
棋盘格背景
假透明背景
很多 AI 生成工具会生成“看起来像透明”的棋盘格背景,但实际下载后图片是 RGB 格式,没有 alpha 通道。这种图片不能直接作为透明资源使用。
判断是否真正透明,可以用图片软件或脚本检查:
图片模式必须是 RGBA
透明区域 alpha 值必须是 0
如果是 RGB,就说明没有透明通道。
2. 什么时候可以使用纯色背景
如果 AI 工具不能稳定生成透明背景,可以临时使用纯绿色背景:
RGB: 0, 255, 0
然后用脚本把绿色背景抠成透明。
这种方式适合:
- AI 不支持真透明。
- 资源边缘比较清晰。
- 颜色中不会出现纯绿色。
- 后期愿意用脚本处理。
但是要注意,纯绿色背景只是临时方案,不是最终规范。最终导入游戏的资源最好还是 RGBA 透明 PNG。
五、Tileset 的像素风规范
如果项目是像素风,Tileset 必须遵守像素风资源标准。
1. 禁止模糊
像素风最怕模糊。每个像素应该是清晰的色块,而不是柔和渐变。
错误表现:
- 边缘发虚。
- 有半透明描边。
- 像素之间有模糊过渡。
- 缩放后变成糊状。
正确表现:
- 边缘硬朗。
- 像素块清楚。
- 色阶明确。
- 图块轮廓清晰。
2. 禁止抗锯齿
像素风资源通常不应该使用普通插画那种抗锯齿边缘。
错误边缘:
黑色边缘旁边有灰色半透明像素
边缘出现柔和过渡
正确边缘:
像素直接过渡
颜色块清晰
没有半透明脏边
如果 AI 生成的资源有抗锯齿,可以后期做像素化处理,但效果通常不如一开始就按照硬像素规范生成。
3. 控制颜色数量
像素风不是颜色越多越好。
一个 tile 内部最好使用有限色阶,比如:
草地:5 到 8 个绿色层次
泥土:5 到 8 个棕色层次
石头:4 到 6 个灰色层次
水面:5 到 8 个蓝色层次
颜色太多会导致资源像插画,不像像素图。
4. 光源方向统一
Tileset 中所有资源的光源方向必须统一。
常见规范:
光源来自左上方
阴影落在右下方
如果草地、树木、石头、房屋的光源方向不一致,地图拼起来会非常奇怪。
比如:
- 树的高光在左上。
- 石头的高光也在左上。
- 房子的屋顶高光也在左上。
- 角色的受光方向也应该接近左上。
六、Tileset 的内容分类规范
一个完整的 RPG Tileset 通常不会把所有资源混在一起,而是按功能分层分类。
推荐分为以下几类。
1. 地面层
地面层是最基础的 tileset,通常包括:
- 草地
- 深草地
- 泥土
- 沙地
- 石地
- 耕地
- 雪地
- 枯草地
- 碎石地
- 地面装饰变化
地面 tile 通常是可以大面积重复铺设的,所以必须注意无缝性。
地面资源需要准备多个变化版本,避免地图重复感太强。
例如:
草地 8 个变化
泥土 6 个变化
碎石地 4 个变化
耕地 4 个变化
2. 路径层
路径层用于制作道路。
常见路径类型:
- 泥土路
- 石板路
- 碎石路
- 木板路
- 沙路
如果要支持自动拼接,需要准备完整的连接形态:
直线
转角
T 字路口
十字路口
端点
孤立块
边缘块
内角
外角
如果路径只准备一两个 tile,地图会显得非常死板,也无法自然转弯。
3. 水体层
水体资源通常包括:
- 静态水面
- 动态水面帧
- 深水
- 浅水
- 水岸边缘
- 水草
- 河流转角
- 瀑布
- 水花
- 泡沫
- 木桥连接块
水体最重要的是边缘过渡。
如果只有一块蓝色水面,没有岸边 tile,水体和陆地之间会非常生硬。
完整水体至少应该包含:
水面中心
上边岸线
下边岸线
左边岸线
右边岸线
四个外角
四个内角
浅水过渡
深水过渡
4. 建筑层
建筑层通常包括:
- 墙壁
- 屋顶
- 门
- 窗
- 烟囱
- 木梁
- 地基
- 台阶
- 招牌
- 屋檐
- 墙角
- 屋顶边缘
- 屋顶转角
建筑资源不要只生成完整房子,也要拆分成可组合的 tile。
例如一间小屋可以拆成:
屋顶左上角
屋顶上边
屋顶右上角
屋顶左边
屋顶中心
屋顶右边
墙体左边
墙体中心
墙体右边
门
窗
烟囱
这样才能在地图编辑器里自由组合不同大小的房屋。
5. 装饰层
装饰层用于丰富地图。
常见装饰物包括:
- 树木
- 灌木
- 草丛
- 花丛
- 石头
- 木桶
- 箱子
- 篱笆
- 路灯
- 告示牌
- 长椅
- 桌子
- 水井
- 摊位
- 蘑菇
- 树桩
- 倒木
装饰物可以是单个 tile,也可以是多个 tile 组成的大物件。
例如:
小石头:1×1 tile
木桶:1×1 tile
树:2×3 tile
大房子:6×5 tile
水井:2×2 tile
摊位:3×2 tile
6. 碰撞层资源
Tileset 本身只是图片,但在游戏引擎里通常要给部分 tile 设置碰撞。
需要碰撞的资源:
- 墙壁
- 树干
- 石头
- 房屋
- 栅栏
- 水井
- 桌子
- 深水
- 悬崖
- 边界物
不需要碰撞的资源:
- 草地
- 小花
- 地面阴影
- 浅水装饰
- 落叶
- 小草
- 光效
在设计 tileset 时,最好提前区分哪些 tile 需要碰撞,哪些只是视觉装饰。
七、自动拼接 Autotile 规范
Autotile 是 tileset 中非常重要的概念。
它的作用是:当你画地图时,引擎会根据周围 tile 的连接关系,自动选择正确的边缘、转角和连接块。
例如你画一片水,系统会自动生成水岸边缘;你画一条路,系统会自动处理转角和交叉口。
1. Autotile 需要准备完整连接块
以草地到泥土的过渡为例,至少需要:
中心块
上边
下边
左边
右边
左上外角
右上外角
左下外角
右下外角
左上内角
右上内角
左下内角
右下内角
如果缺少内角或外角,自动拼接时就会出现断裂。
2. 常见 Autotile 类型
常见需要自动拼接的资源:
草地 ↔ 泥土
草地 ↔ 石路
草地 ↔ 沙地
陆地 ↔ 水面
浅水 ↔ 深水
地面 ↔ 悬崖
路径 ↔ 路径
墙壁 ↔ 墙壁
屋顶 ↔ 屋顶
其中水体、路径、悬崖是最需要 autotile 的。
3. Godot 中的 Autotile 思路
Godot 4 中的 TileSet 支持 terrain set 和 terrain peering bits。
通俗理解:
你告诉 Godot 哪些 tile 属于同一种地形
再告诉它每个 tile 的上下左右和角落怎么连接
Godot 就能根据周围格子自动选择合适图块
比如:
Terrain: Grass
Terrain: Dirt
Terrain: Water
Terrain: Stone Path
然后给每个 tile 设置对应的连接规则。
如果 tileset 本身没有准备完整边缘和角落,Godot 再智能也无法拼出自然效果。
所以自动拼接的质量,本质上取决于 tileset 资源是否完整。
八、图层规范
一个成熟的 2D 地图不应该只用一个 TileMapLayer。
推荐分层:
Ground Layer:地面层
Path Layer:道路层
Water Layer:水体层
Object Bottom Layer:物件底部
Object Top Layer:物件顶部
Collision Layer:碰撞层
Decoration Layer:装饰层
Light Layer:光效层
在 Godot 中,可以使用多个 TileMapLayer 或多个节点来管理。
例如:
Map
├── GroundLayer
├── PathLayer
├── WaterLayer
├── ObjectBaseLayer
├── ObjectTopLayer
├── DecorationLayer
├── CollisionLayer
└── LightLayer
这样做的好处是:
- 地面和物件不会混乱。
- 树冠可以遮挡角色。
- 光效可以单独开关。
- 碰撞可以单独管理。
- 地图编辑更清晰。
九、遮挡和 Y-Sort 规范
俯视角 RPG 经常需要角色走到树后、房子后、路灯后。
这时候就需要处理遮挡关系。
常见做法:
物件底部参与碰撞
物件顶部参与遮挡
角色根据 y 坐标排序
例如一棵树可以拆成两部分:
树干 / 底部:有碰撞
树冠 / 顶部:遮挡角色
如果整棵树都放在同一层,角色可能永远盖在树上,或者永远被树盖住,看起来不自然。
Godot 中通常可以结合:
Y-Sort
Z Index
多个 TileMapLayer
Sprite2D 拆分
来实现正确遮挡。
十、Tile 的边缘规范
Tile 的边缘必须非常干净。
常见错误:
边缘有多余透明像素
边缘被裁切
边缘有白边
边缘有黑边
边缘有半透明脏像素
相邻 tile 拼接时出现缝隙
正确规范:
地面 tile 四边可以无缝拼接
物件 tile 边缘干净
透明区域 alpha = 0
没有半透明污染
没有白底残留
没有棋盘格残留
对于地面 tile 来说,边缘尤其重要。
如果草地 tile 的左右边缘不连续,大面积铺设时会出现明显网格感。
十一、无缝拼接规范
地面类 tile 必须支持无缝拼接。
例如草地 tile,左右上下重复铺设时不应该看到明显边界。
检查方式:
把同一个 tile 连续铺成 5×5
观察是否有明显格子线
观察纹理是否突然断开
观察颜色是否边缘变深或变浅
如果能看出一格一格的边界,说明这个 tile 不适合做基础地面。
好的地面 tile 应该满足:
单块看起来有细节
多块铺起来不重复刺眼
边缘自然衔接
没有明显接缝
十二、多 tile 物件规范
不是所有资源都必须塞进一个 tile。
像树、房屋、水井、大石头、摊位这些资源,通常会占多个 tile。
例如:
树木:2×3 tile
房屋:6×5 tile
水井:2×2 tile
桥:3×2 tile
市场摊位:3×2 tile
多 tile 物件必须对齐网格。
错误做法:
树的边界跨格但没有对齐
房屋底部不在 tile 网格上
物件占了 2.5 个 tile
切出来后上下左右错位
正确做法:
物件整体宽高是 tile size 的整数倍
底部和地图网格对齐
碰撞区域集中在合理位置
透明区域保留干净
如果一个大树是 64×96 像素,在 32×32 tile 项目中,就是:
宽 2 tile
高 3 tile
这就是标准的多 tile 物件。
十三、角色与 Tileset 的比例规范
Tileset 不是孤立存在的,它要和角色比例匹配。
如果 tile 是 32×32,常见角色尺寸可能是:
角色:32×48
树:64×96
门:32×48
房子门高:48 或 64
桌子:32×32 或 64×32
比例必须合理。
常见错误:
角色比门还高
树比角色只高一点
桌子比房子门还大
路灯比树还高很多
水井比房屋还大
推荐比例:
角色高度:1.5 tile 左右
普通门高度:1.5 到 2 tile
小树高度:2 到 3 tile
大树高度:3 到 5 tile
房屋高度:4 到 7 tile
当然不同美术风格可以调整,但整套资源内部必须统一。
十四、Tileset 的命名规范
资源命名要清晰,避免后期管理混乱。
推荐命名:
tileset_ground_forest_32.png
tileset_water_forest_32.png
tileset_building_village_32.png
tileset_decoration_forest_32.png
tileset_items_forest_32.png
tileset_ui_rpg_32.png
如果有版本号:
tileset_ground_forest_32_v01.png
tileset_ground_forest_32_v02.png
tileset_ground_forest_32_final.png
不推荐:
新建图像1.png
素材.png
地图.png
aaa.png
final_final_真的最终.png
项目大了之后,命名混乱会非常痛苦。
十五、Tileset 的文件格式规范
推荐格式:
PNG
RGBA
无损压缩
透明背景
不推荐:
JPG
WEBP 有损
GIF
BMP
截图格式
对于像素风资源,还要注意导入设置。
在 Godot 中建议:
Filter: Off
Mipmaps: Off
Repeat: 根据需要设置
Texture Pixel Snap: 开启或根据项目调整
如果开启 Filter,像素图会变糊。
十六、Tileset 导入 Godot 的基本规范
在 Godot 中使用 tileset 时,需要注意以下几点。
1. Tile Size 要一致
如果资源是 32×32,那么 Godot 的 TileSet 也必须设置为:
Tile Size: 32×32
如果资源有 spacing 和 margin,也要填写一致。
2. 关闭纹理过滤
像素风项目应该关闭过滤。
否则图像会变成平滑插画感。
一般需要检查:
Project Settings
Rendering
Textures
Default Texture Filter
设置为 Nearest
或者在单个纹理资源里关闭 filter。
3. 碰撞要单独设置
不是每个 tile 都要碰撞。
应该只给需要阻挡角色的 tile 设置碰撞。
例如:
树干:碰撞
树冠:不碰撞,只遮挡
墙壁:碰撞
房屋:碰撞
深水:碰撞或限制移动
草地:不碰撞
花草:不碰撞
4. 设置 Y-Sort
如果是俯视角 RPG,建议开启 Y-Sort 或使用合理的 Z Index。
角色、树、房屋、装饰物之间的遮挡关系,不能只靠图层顺序解决。
十七、AI 生成 Tileset 时的特别规范
AI 很容易把 tileset 生成成“场景图”,而不是“资源图”。
所以提示词里必须强调:
This is a tileset spritesheet, not a scene.
Each tile must be isolated.
Arrange all tiles in a clean grid.
Do not create a complete map.
Do not create a landscape illustration.
Transparent background.
No text.
No watermark.
中文可以写:
这是 tileset 资源图,不是完整场景图。
每个图块必须是独立资源。
所有资源必须按照网格排列。
不要生成地图场景。
不要生成展示海报。
不要生成文字、水印、标签。
背景必须是真透明 PNG。
如果使用 AI 生成像素风 tileset,提示词还要加入:
hard pixel art
no anti-aliasing
no blur
clean pixel edges
grid aligned
top-down RPG perspective
consistent lighting from upper-left
中文对应:
硬像素风格
无抗锯齿
无模糊
边缘清晰
严格网格对齐
俯视角 RPG 视角
统一左上方光源
十八、标准 Tileset 技术规格示例
下面是一份比较标准的 Godot 2D RPG tileset 规格。
用途:Godot 4.x 俯视角 RPG 地图资源
风格:温暖森林村落像素风
Tile Size:32×32 px
Columns:20
Rows:12
Margin:2 px
Spacing:2 px
Canvas:682×410 px
Format:PNG
Color Mode:RGBA
Background:True transparent
Perspective:Top-down RPG
Lighting:Upper-left
Pixel Style:Hard pixel art
Anti-aliasing:No
Blur:No
Text:No
Watermark:No
内容分区:
Row 1-2:草地、泥土、碎石、沙地基础地形
Row 3-5:石板路、泥土路、路径自动拼接块
Row 6-8:水面、浅水、水岸过渡、内外角
Row 9-11:悬崖、台阶、边缘过渡
Row 12:木桥、桥边、桥头、预留空格
十九、Tileset 验收标准
一张合格的 tileset,至少要满足以下检查项。
1. 尺寸检查
图片宽高是否正确?
是否是 tile size 的整数倍?
是否正确计算了 margin 和 spacing?
2. 透明检查
是否为 PNG?
是否为 RGBA?
透明区域 alpha 是否为 0?
是否存在白底、黑底、棋盘格假透明?
3. 网格检查
每个 tile 是否严格对齐?
是否有 tile 跨格错位?
spacing 是否一致?
margin 是否一致?
4. 风格检查
是否是统一像素风?
是否有模糊?
是否有抗锯齿?
颜色是否统一?
光源方向是否一致?
5. 拼接检查
草地是否可以无缝重复?
道路是否可以转弯和交叉?
水岸是否有完整边缘?
悬崖是否能自然连接?
自动拼接块是否完整?
6. 游戏内检查
导入 Godot 后切片是否正确?
碰撞是否合理?
角色是否可以正常遮挡?
地图是否有缝隙?
移动时是否出现像素抖动?
缩放后是否变糊?
二十、常见错误总结
错误一:把场景图当成 tileset
很多 AI 会生成一张漂亮地图,但它不是 tileset。
场景图是完整画面,不能直接切成独立 tile。
Tileset 必须是资源表,每个图块独立、可复用、可拼接。
错误二:背景是假透明
棋盘格背景不是透明背景。
白底、黑底、绿色底也不是最终透明背景。
正式资源必须是 RGBA PNG。
错误三:tile 没有对齐网格
如果 tile 没有严格对齐,导入引擎后会切坏。
比如树被切成两半,路面边缘错位,水岸不完整。
错误四:地面不能无缝拼接
地面 tile 如果边缘不连续,大面积铺设后会出现明显格子线。
基础地形必须优先保证无缝性,而不是单块好看。
错误五:风格不统一
同一张 tileset 中,不能一部分像 Stardew Valley,一部分像 RPG Maker,一部分像写实插画。
统一风格比单个资源好看更重要。
错误六:缺少边缘过渡
水、路、悬崖、墙壁如果没有边缘块,就无法自然拼接。
只生成中心块是不够的。
二十一、推荐的制作流程
一个比较稳的 tileset 制作流程如下:
1. 确定游戏视角
2. 确定 tile size
3. 确定画布尺寸、行列数、margin、spacing
4. 先制作基础地形
5. 再制作路径和水体自动拼接块
6. 制作建筑和大型物件
7. 制作装饰物和小物件
8. 导入 Godot 测试切片
9. 设置碰撞和遮挡
10. 实际铺一张测试地图
11. 检查缝隙、比例、风格、重复感
12. 修正资源并重新导入
不要一开始就追求完整大资源包。
更推荐先做一张小而标准的基础 tileset,确认 Godot 中能正常使用,再继续扩展。
二十二、结论
Tileset 资源图的重点不是“画得漂亮”,而是“能不能稳定用于游戏”。
一张合格的 tileset 应该满足:
尺寸正确
网格对齐
背景透明
边缘干净
风格统一
可以拼接
方便导入
适合碰撞
支持遮挡
能在游戏中复用
对于像素风 RPG 来说,tileset 的规范性比单张图的观感更重要。
如果资源图只是看起来好看,但不能切片、不能拼接、不能设置碰撞、不能在地图中复用,那它本质上不是合格的 tileset。
真正可用的 tileset,应该像一套积木。每个 tile 都是独立、清晰、标准化的小零件。只有这些小零件足够规范,最终搭出来的地图才会自然、稳定、统一。
如果您觉得这篇文章有帮助,请点个赞吧~
评论
请登录后发表评论
去登录