- 1:确定地图定位与玩法逻辑
- 1.1:设计示例
- 2:构建地形结构(Level Layout)
- 2.1:1. 探索/战斗型地图 - 结构模块法
- 2.2:2. 俯视 RPG 型地图 - 节点路径法
- 3:Tilemap 分层设计
- 3.1:分层技巧
- 4:视觉主题(美术)
- 4.1:1. 统一色调(根据环境氛围)
- 4.2:2. 层次分明
- 4.3:3. 重复与变化
- 5:交互与关卡节奏
- 5.1:节奏波形设计理论
- 5.2:节奏控制手段
- 6:标记信息与优化
- 6.1:功能标记层(辅助层)
- 6.2:性能优化方案
- 7:基础设置
- 8:Tileset 管理
- 8.1:Tileset 类型选择
- 8.2:最佳实践
- 9:地形集(Terrains)使用技巧
- 9.1:什么是地形集?
- 9.2:设置地形集
- 9.3:地形集最佳实践
- 10:图层管理
- 10.1:图层类型与用途
- 10.2:图层组织最佳实践
- 10.3:图层操作技巧
- 11:对象层与属性
- 11.1:对象类型
- 11.2:自定义属性(Custom Properties)
- 11.3:对象模板(Object Templates)
- 12:自动映射(Automapping)
- 12.1:基础规则文件结构
- 12.2:使用流程
- 13:导出与引擎集成
- 13.1:导出格式选择
- 13.2:导出设置最佳实践
- 13.3:引擎集成示例
- 14:高级技巧
- 14.1:1. 快捷键自定义
- 14.2:2. 插件扩展
- 14.3:3. 性能优化检查
- 15:工作流程建议
- 15.1:标准地图制作流程
- 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. 切换到"水面",继续绘制,自动处理边界
地形集最佳实践
✅ 推荐做法
- 标准 47 Tile 地形集
包含: - 4 个角落(外角) - 4 个边(直边) - 4 个角落(内角) - 1 个中心 - 34 个过渡变体 - 命名规范
terrain_grass # 纯草地 terrain_grass_dirt # 草地-泥土过渡 terrain_water # 水面 - 分组管理
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