Tiled - 2D 地图设计完全指南

文章目录[x]
  1. 1:确定地图定位与玩法逻辑
  2. 1.1:设计示例
  3. 2:构建地形结构(Level Layout)
  4. 2.1:1. 探索/战斗型地图 - 结构模块法
  5. 2.2:2. 俯视 RPG 型地图 - 节点路径法
  6. 3:Tilemap 分层设计
  7. 3.1:分层技巧
  8. 4:视觉主题(美术)
  9. 4.1:1. 统一色调(根据环境氛围)
  10. 4.2:2. 层次分明
  11. 4.3:3. 重复与变化
  12. 5:交互与关卡节奏
  13. 5.1:节奏波形设计理论
  14. 5.2:节奏控制手段
  15. 6:标记信息与优化
  16. 6.1:功能标记层(辅助层)
  17. 6.2:性能优化方案
  18. 7:基础设置
  19. 8:Tileset 管理
  20. 8.1:Tileset 类型选择
  21. 8.2:最佳实践
  22. 9:地形集(Terrains)使用技巧
  23. 9.1:什么是地形集?
  24. 9.2:设置地形集
  25. 9.3:地形集最佳实践
  26. 10:图层管理
  27. 10.1:图层类型与用途
  28. 10.2:图层组织最佳实践
  29. 10.3:图层操作技巧
  30. 11:对象层与属性
  31. 11.1:对象类型
  32. 11.2:自定义属性(Custom Properties)
  33. 11.3:对象模板(Object Templates)
  34. 12:自动映射(Automapping)
  35. 12.1:基础规则文件结构
  36. 12.2:使用流程
  37. 13:导出与引擎集成
  38. 13.1:导出格式选择
  39. 13.2:导出设置最佳实践
  40. 13.3:引擎集成示例
  41. 14:高级技巧
  42. 14.1:1. 快捷键自定义
  43. 14.2:2. 插件扩展
  44. 14.3:3. 性能优化检查
  45. 15:工作流程建议
  46. 15.1:标准地图制作流程
  47. 15.2:团队协作规范

2D 地图设计是艺术、关卡设计与技术实现的结合。本指南将从需求 → 概念 → 制作 → 落地,构建一套完整的 2D 地图设计方法论,适用于横版/俯视 RPG 等多种游戏类型。工具示例以 Tiled 为主。

设计篇

确定地图定位与玩法逻辑

在开始设计之前,需要明确以下四个核心问题:

问题 典型选项 说明
相机视角 俯视 / 45° / 横版 / 顶视 决定玩家观察世界的角度
地图风格 像素风、手绘风、2.5D、低多边 美术表现方式
地图用途 战斗 / 探索 / 剧情 / 休闲 / 解谜 核心玩法类型
区域规模 单屏场景 / 多屏滚动 / 开放世界 地图尺寸与加载方式

设计示例

  • 风格:像素风 32×32 tile
  • 视角:横版冒险卷轴
  • 规模:多屏滚动
  • 玩法:含战斗与解谜元素

构建地形结构(Level Layout)

1. 探索/战斗型地图 - 结构模块法

将地图拆分为以下功能模块:

核心模块清单:
├─ 起点/安全区        # 玩家出生点,无危险
├─ 指引区(教学)     # 引导玩家学习机制
├─ 战斗区            # 敌人分布区域
├─ 奖励区            # 宝箱、道具隐藏点
├─ 解谜区            # 机关、谜题挑战
├─ Boss 区           # 关底 Boss 战
├─ 回环连接          # 快捷回路(解锁后可用)
├─ 快速通道          # 梯子、传送门、绳索
└─ 层级差异          # 桥梁/洞穴/密道

平台卷轴关结构示例

    Start
      ↓
   教学平台 (学习跳跃、攻击)
      ↓
   小战斗区 (2-3个敌人)
      ↓
   跳跃挑战 (移动平台、陷阱)
      ↓
   奖励洞穴 (隐藏宝箱)
      ↓
   Boss 房间
      ↓
     Exit

2. 俯视 RPG 型地图 - 节点路径法

使用节点+连接图构建空间关系:

   村庄广场 ──── 商店街
      |            |
      |            |
   森林入口 ──── 湖边营地
      |
      |
   遗迹迷宫 ──── Boss房 ──── 宝物库
      |
   隐藏密道 (需特殊钥匙)

设计要点:
- 主线路径清晰可见
- 支线路径藏有奖励
- 回环设计减少回头路
- 设置快速传送点(解锁后)


Tilemap 分层设计

Tile 地图通常采用多层结构,以实现视觉深度和功能分离:

层级名称 类型 作用 渲染顺序
Background Tile Layer 远景装饰、天空、云、山 最后渲染
Midground Tile Layer 行走地表、可交互物件、起伏 中间
Foreground Tile Layer 前景遮挡元素(树冠/柱子) 最先渲染
Collision Object Layer 隐藏层:碰撞体、阻挡区域 不渲染
Navigation Object Layer 隐藏层:AI 路径、区域标记 不渲染
Effects Special Layer 水体动态、光影、天气效果 叠加渲染

分层技巧

  • 深度层次:前景深色、背景浅色,制造景深感
  • 交互区分:可交互物体用中间层,背景纯装饰
  • 性能优化:合并静态层,分离动态层

视觉主题(美术)

1. 统一色调(根据环境氛围)

场景类型 色彩方案 设计意图
地底 冷色、高对比 营造幽闭、危险感
村庄 暖色、高饱和 温馨、生活气息
遗迹 低饱和、褪色 荒废、历史感
森林 绿色、中饱和 自然、生机

2. 层次分明

  • 前景深色、背景浅色
  • 可交互物体使用独特色块标识
  • 重要元素(门、宝箱)添加高光或动画

3. 重复与变化

同一素材的变化手法:
- 添加破损、裂痕
- 苔藓、藤蔓覆盖
- 光照明暗差异
- 倒塌、损坏版本

最佳实践:每种基础 Tile 准备 3-5 种变体,避免视觉疲劳。


交互与关卡节奏

节奏波形设计理论

优秀的关卡应遵循情绪曲线:

强度
 ↑
 |        ╱╲          ╱╲ (Boss)
 |     ╱      ╲    ╱      ╲
 |  ╱           ╲╱          ╲
 | ╱                         ╲
 |__________________________________→ 时间
  紧张 缓和 挑战 成就 爆发 尾声

节奏控制手段

元素 紧张期 缓和期 挑战期
怪物密度 低/无 中等+Boss
跳台难度 中等 简单 复杂组合
谜题复杂度 简单提示 多步骤联动
奖励频率 稀少 补给点 大奖励

设计原则
- 每个紧张区后设置安全区(存档点、商店)
- 挑战后给予奖励(宝箱、新能力)
- 避免持续高压,防止玩家疲劳


标记信息与优化

功能标记层(辅助层)

在 Tiled 等工具中添加隐藏的信息层:

标记类型 用途 实现方式
Spawn Points 怪物生成点、掉落位置 Point/Rect Object
Trigger 剧情触发、陷阱激活 Polygon/Rect + Custom Props
Exit/Portal 入口/出口连接 Point + TargetMap 属性
Camera Bounds 摄像头约束区域 Rect Object
Terrain Tags 地形特性(泥地减速、水中游泳) Tile Custom Properties

性能优化方案

1. 分区加载(Chunking)

将大地图切分为区块(如 20×20 tiles)
仅加载玩家周围 3×3 区块

2. 遮挡剔除(Occlusion Layer)

  • 标记玩家视野外的区域
  • 动态禁用不可见对象

3. 对象池(Object Pooling)

  • 重复使用敌人、子弹等实例
  • 减少实例化开销

4. 地图分片

  • 大世界采用多个小地图拼接
  • 通过传送门/边界触发加载

工具篇 - Tiled 使用指南

Tiled 是开源的 2D 地图编辑器,支持多种游戏引擎导出。本章节介绍实战技巧与最佳实践。

基础设置

推荐配置

地图类型:Orthogonal(正交)/ Isometric(等距)
图块大小:16×16 / 32×32 / 64×64(根据美术风格)
地图大小:根据需求,建议先做小原型(如 30×20 tiles)

Tileset 管理

Tileset 类型选择

类型 特点 适用场景
Based on Tileset Image 单张大图切分 传统像素风 tileset
Collection of Images 独立图片集合 不规则尺寸素材

最佳实践

1. 使用嵌入式 Tileset(Embedded)

优点:地图文件包含图集,便于分享
缺点:文件较大,多地图共享不便
建议:小项目使用

2. 使用外部 Tileset(External)

优点:多地图共享,统一管理
缺点:需要保持路径正确
建议:中大型项目必用

3. Tileset 组织规范

项目目录结构:
assets/
├── tilesets/
│   ├── terrain.tsx       # 地形 tileset
│   ├── props.tsx         # 装饰物 tileset
│   ├── characters.tsx    # 角色 tileset
│   └── effects.tsx       # 特效 tileset
└── maps/
    ├── level1.tmx
    └── level2.tmx

地形集(Terrains)使用技巧

地形集是 Tiled 最强大的功能之一,可实现自动边缘过渡,大幅提升绘制效率。

什么是地形集?

地形集定义了不同地形类型之间的过渡规则,让你用"刷子"快速绘制自然边界。

设置地形集

1. 创建地形类型

在 Tileset 编辑器中:

1. 选择 Tileset → 右侧面板 → "Terrains" 标签
2. 点击 "+" 添加地形类型(如:草地、泥土、水面、石头)
3. 为每种地形设置颜色标识

2. 定义地形 Tile

为每个 Tile 指定边角的地形类型:

示例:草地与泥土过渡 Tile
┌─────┬─────┐
│ 草  │ 草  │  左上角:草地
├─────┼─────┤  右上角:草地
│ 泥  │ 泥  │  左下角:泥土
└─────┴─────┘  右下角:泥土

标准地形集需要的 Tile 数量
- 单一地形:1 个
- 2 地形过渡:最少 15 个(推荐 47 个包含所有变体)
- 3+ 地形:建议使用自动映射

3. 绘制技巧

工具选择
- Terrain Brush(T):自动过渡刷
- Terrain Fill(F):地形填充
- Rectangle Select + Terrain Brush:矩形地形绘制

操作示例

1. 选择 Terrain Brush
2. 在 Terrains 面板选择"草地"
3. 在地图上绘制,自动生成过渡边缘
4. 切换到"水面",继续绘制,自动处理边界

地形集最佳实践

✅ 推荐做法

  1. 标准 47 Tile 地形集
    包含:
    - 4 个角落(外角)
    - 4 个边(直边)
    - 4 个角落(内角)
    - 1 个中心
    - 34 个过渡变体
    
  2. 命名规范
    terrain_grass      # 纯草地
    terrain_grass_dirt # 草地-泥土过渡
    terrain_water      # 水面
    
  3. 分组管理
    Natural Terrain(自然地形)
    ├─ Grass
    ├─ Dirt
    └─ Water
    
    Man-made Terrain(人造地形)
    ├─ Stone Floor
    ├─ Wood Floor
    └─ Carpet
    

❌ 常见错误

  • 地形边角定义不完整 → 导致绘制时出现空缺
  • 过渡 Tile 风格不统一 → 视觉跳跃
  • 不同地形集混用相同名称 → 引擎导入混乱

图层管理

图层类型与用途

图层类型 用途 命名示例
Tile Layer 静态地形、装饰 Background, Ground, Props
Object Layer 碰撞体、触发器、生成点 Collision, Spawns, Triggers
Image Layer 单张背景图(远景/UI) SkyBG, Parallax1
Group Layer 组织多个图层 Environment, Gameplay

图层组织最佳实践

标准图层结构(横版平台)

📁 Parallax(视差背景组)
  └─ Sky               [Image Layer]
  └─ Mountains         [Tile Layer]
  └─ Clouds            [Tile Layer]

📁 Environment(环境组)
  └─ Background        [Tile Layer] - 远景装饰
  └─ Midground         [Tile Layer] - 主地形
  └─ Foreground        [Tile Layer] - 前景遮挡

📁 Gameplay(玩法组)
  └─ Collision         [Object Layer] - 碰撞体
  └─ PlayerSpawn       [Object Layer] - 玩家出生点
  └─ EnemySpawns       [Object Layer] - 敌人生成
  └─ Items             [Object Layer] - 道具位置
  └─ Triggers          [Object Layer] - 触发器

📁 Effects(特效组)
  └─ Particles         [Tile Layer] - 粒子效果位置
  └─ Lighting          [Tile Layer] - 光照贴图

标准图层结构(俯视 RPG)

📁 Background
  └─ Ground            [Tile Layer] - 地面基础
  └─ GroundDecor       [Tile Layer] - 地面装饰

📁 Midground
  └─ Walls             [Tile Layer] - 墙体/障碍物
  └─ Furniture         [Tile Layer] - 家具/物件

📁 Foreground
  └─ Roofs             [Tile Layer] - 屋顶(半透明)
  └─ Trees             [Tile Layer] - 树冠遮挡

📁 Navigation
  └─ Collision         [Object Layer] - 碰撞区域
  └─ NPCPaths          [Object Layer] - NPC 路径
  └─ Warps             [Object Layer] - 传送点

图层操作技巧

操作 快捷键/方法 用途
锁定图层 点击锁图标 防止误编辑
隐藏图层 点击眼睛图标 查看底层内容
复制图层 右键 → Duplicate 快速创建变体
合并图层 选中多层 → Merge Down 减少图层数(谨慎使用)
调整不透明度 图层属性 → Opacity 调试碰撞层可见度

对象层与属性

对象类型

对象类型 使用场景 示例
Rectangle 碰撞体、触发区域 地面碰撞、陷阱区
Ellipse 圆形区域(爆炸范围) 炸弹爆炸半径
Point 精确位置(生成点) 敌人刷新点、玩家出生
Polygon 不规则碰撞体 斜坡、复杂地形
Tile Object 放置单个 Tile(非网格对齐) 悬浮装饰物、动态物体
Text 标注、调试信息 区域名称、开发备注

自定义属性(Custom Properties)

自定义属性是连接地图与代码的桥梁。

属性类型

类型 用途 示例
string 文本信息 enemyType: "goblin"
int 整数值 damage: 10
float 浮点数 spawnDelay: 2.5
bool 开关状态 isLocked: true
color 颜色值 lightColor: #FF5733
file 文件路径 scriptPath: "scripts/door.lua"
object 引用其他对象 linkedDoor: <Door_ID>

实战示例

1. 敌人生成点

对象名称:Goblin_Spawn_01
类型:Point
属性:
  - enemyType (string): "goblin"
  - spawnCount (int): 3
  - respawnTime (float): 30.0
  - patrolRadius (float): 5.0

2. 触发器

对象名称:DialogueTrigger
类型:Rectangle
属性:
  - triggerType (string): "dialogue"
  - dialogueID (string): "npc_greeting_01"
  - triggerOnce (bool): true

3. 传送门

对象名称:Portal_ToLevel2
类型:Rectangle
属性:
  - targetMap (file): "maps/level2.tmx"
  - targetSpawn (string): "Spawn_FromLevel1"
  - transition (string): "fade"

对象模板(Object Templates)

对于重复使用的对象(如敌人、道具),使用模板:

1. 创建对象 → 右键 → Save As Template
2. 保存为 .tx 文件(如 goblin_spawn.tx)
3. 拖拽模板到地图,自动应用属性
4. 修改模板,所有实例同步更新

模板组织

assets/
└── templates/
    ├── enemies/
    │   ├── goblin.tx
    │   └── skeleton.tx
    ├── items/
    │   ├── health_potion.tx
    │   └── chest.tx
    └── triggers/
        ├── dialogue_trigger.tx
        └── cutscene_trigger.tx

自动映射(Automapping)

自动映射可根据规则自动生成复杂图案,适用于:
- 墙角自动补全
- 装饰物自动分布
- 碰撞层自动生成

基础规则文件结构

规则地图文件(rule_walls.tmx):
├─ regions         # 匹配区域层
├─ input_Ground    # 输入条件层
├─ output_Walls    # 输出结果层
└─ output_Collision # 碰撞层输出

使用流程

1. Map → Automap → Add Rules...
2. 选择规则文件(.tmx)
3. 绘制输入层(如地面 tile)
4. Map → Automap → Apply Automap
5. 自动生成墙体、装饰、碰撞

示例规则:当地面 Tile 四周有空缺时,自动生成墙体。


导出与引擎集成

导出格式选择

格式 特点 适用引擎
JSON 轻量、易解析、可读性强 Phaser, Cocos, 自研引擎
TMX Tiled 原生格式 Godot, Unity (需插件)
Lua 脚本友好 LÖVE2D, Corona
CSV 仅导出 Tile ID 简单场景

导出设置最佳实践

JSON 导出配置(推荐)

Map → Map Properties:
  - Tile Layer Format: CSV(减小文件体积)
  - Tile Render Order: Right-Down
  - Embed Tilesets: false(使用外部 tileset)
  - Resolve Types and Properties: true

File → Export As:
  - Format: JSON
  - ✓ Embed Tilesets (如需单文件分享)
  - ✓ Detach Templates (属性内嵌到对象)

引擎集成示例

Godot

# 使用 Tiled Map Importer 插件
var map = load("res://maps/level1.tmx")
add_child(map)

Unity

// 使用 SuperTiled2Unity 插件
// 直接拖拽 .tmx 文件到 Assets
// 自动生成 Prefab 和 Collision

Phaser

this.load.tilemapTiledJSON('level1', 'assets/maps/level1.json');
const map = this.make.tilemap({ key: 'level1' });
const tileset = map.addTilesetImage('terrain', 'terrainTiles');
const groundLayer = map.createLayer('Ground', tileset);

高级技巧

1. 快捷键自定义

Edit → Preferences → Keyboard
推荐绑定:
  - 快速切换图层:F1-F5
  - 地形刷:T
  - 填充:F
  - 矩形选择:R

2. 插件扩展

访问 Tiled Extensions
- Tiled2Unity:导出到 Unity
- GodotExport:优化 Godot 导出
- Autotile:增强自动映射

3. 性能优化检查

Tools → Tileset → Check Tileset Properties
  - 确保 Tile Size 一致
  - 删除未使用的 Tiles
  - 合并重复的 Tilesets

工作流程建议

标准地图制作流程

1. 设置地图尺寸与 Tileset
2. 创建图层结构(Background → Gameplay → Collision)
3. 使用地形刷绘制基础地形
4. 添加装饰物(Props Layer)
5. 放置对象(Spawn Points, Triggers)
6. 添加碰撞层(Collision Objects)
7. 测试导出到引擎
8. 迭代调整

团队协作规范

1. 统一 Tileset 路径(相对路径)
2. 使用外部 Tileset (.tsx)
3. 对象模板集中管理
4. 图层命名规范统一
5. 使用版本控制(Git)
   - .tmx 文件:文本格式,易 diff
   - .png 文件:使用 Git LFS
点赞

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00