用 Piskel 从零搭建游戏瓦片地图：从一块砖到一整套场景的完整流程

【免费下载链接】piskelA simple web-based tool for Spriting and Pixel art.项目地址: https://gitcode.com/gh_mirrors/pi/piskel

拼了半小时地形，放大才看到两块草地之间露出一条白色毛边——瓦片地图最磨人的地方从来不是画，而是"接不上"。Piskel 是一款跑在浏览器里的像素画编辑器，瓦片模式、图层、调色板和多格式导出几项能力凑齐后，完全能扛住 Piskel 瓦片地图设计这摊事：从单块 16×16 的砖，到能直接喂给引擎的一整套瓦片集。

先看到成品：一条能直接拼进场景的瓦片集 🧱

走完下面全部流程，你会拿到一张排好的瓦片集 PNG：4×4 的格子里是草地、转角、边缘和各自的 2~3 个变体，每块砖四边都能严丝合缝地接上邻居，丢进引擎的 TileMap 组件就能铺出整张游戏场景。

下面这张图就是 Piskel 瓦片地图工作状态的实拍：开启瓦片模式后，画布四周会浮现同一块画布的半透明副本，四边的接缝长什么样，一眼就能对出来。

概念速览：需求 → Piskel 的对应能力

瓦片地图说白了就是把一张大地图拆成等大的图块，地图数据只存"这里放第几号块"，同一张图被反复引用。所以真正要解决的就两件事：每块砖的四边像素能对上，整张集子的视觉风格统一。Piskel 里能干活的部分和这些需求基本一一对应：

从 0 到 1：三步画出第一张瓦片集

装好并跑起来

一条 clone、两条 npm 命令，编辑器就能在本地打开：

git clone https://gitcode.com/gh_mirrors/pi/piskel cd piskel npm install npm start

npm start会先构建再启动本地服务，浏览器打开 http://localhost:9001/ 即可，源码改动还会热更新（服务逻辑见 scripts/serve.js）。

定尺寸、开瓦片模式

画布多大就画多大的砖，动手前先确认目标引擎的瓦片规格：16×16 和 32×32 是像素风游戏最常见的两种，想更细腻就用 64×64。新建项目时把宽、高填成一样，画布就是正方形瓦片。

然后打开瓦片模式：点右侧齿轮进 Settings，找到瓦片设置面板（tile.html），勾上Enable tile mode，再把Mask opacity滑块拉到 0.3 附近——副本要清晰到能看清接缝，又不能压过画布本身。顺手在偏好设置里开网格线，对齐会省不少事。

画下第一块砖

一块合格的地面瓦片，工序其实很短：铅笔勾出轮廓，矩形工具铺出底色区域，填充工具（画笔桶）把主色灌满，再用铅笔点一两笔高光和暗部。画对称的地形、屋檐时用镜像笔刷，左右同时落笔省一半时间。画到边缘时直接看四周的半透明副本：砖缝对得拢，这块砖才算合格。想快速做变体，用选择工具圈住局部，复制、微调、换个位置再画一遍就行。工具的实现都在 src/js/tools/drawing/ 目录下，想看某笔为什么这么落可以顺着源码翻。

让地图不重复：变体、分层、调色板

变体：每块砖备 2~4 个版本

大面积铺同一块砖，重复感是像素地图的头号杀手。给每块基础砖做 2~4 个版本：转角、边缘、加一两个随机点缀元素。Piskel 里最顺手的做法是把变体放进不同的帧——每帧一个版本，导出时 PNG 自动排成网格，Zip 直接按帧拆成多张 PNG，引擎摆放时随机挑帧，重复感就散了。

分层：地面、水体、前景各占一层

复杂场景别挤在一个图层里。底层放地形，中间层放水和岩浆，顶层放植物、道具这类前景。Piskel 的图层可以独立编辑、单独调不透明度，核对某一层时把别的层压暗就行。Zip 导出还支持按图层拆文件（ZipExportController.js），一份瓦片集能直接拆成"地形包 + 水体包"喂给引擎。

调色板：用色数量锁死，风格就不跑偏

整张瓦片集限制在同一套颜色里，是风格统一最硬的约束。用 Settings 里的调色板功能建一套共享调色板，之后每块砖都只从这组颜色里取色。同一套颜色还能在项目间复用：画新场景前把老调色板拉出来，新砖自动接得上旧场景的味道。

从画板到引擎：导出格式怎么选

Piskel 的导出面板（export.html）分 GIF / PNG / Zip / Others 四个页签，顶部还有全局的 Scale（1~32 倍）和自定义分辨率。

• PNG：瓦片集的主力输出。多帧时按行×列拼成 sprite sheet，列数可调（行数自动推算），也能只导当前帧的单张 PNG；PixiJS 选项会把 sheet 和一份 JSON 数据文件打包成 zip，帧的 x/y/w/h 坐标都替你算好（实现见 PngExportController.js）。
• Zip：逐帧拆成带编号的 PNG；勾上按层拆分，还能用图层名命名，适合引擎按文件夹吃素材。
• GIF：不做拼接，专门看动画瓦片动起来的效果。

引擎侧的接法：Unity 和 Godot 都是把 PNG 瓦片集导入 TileMap/TileSet 组件再摆图；Phaser 用 Tilemap 模块加载图片配瓦片尺寸即可；自研引擎可以参考 Piskel 自己切图的实现——CanvasUtils.js 里的createFramesFromImage按固定宽高把大图切成一块块 canvas，取色拼图的思路可以直接搬走。

避坑清单 🧯

• 源文件常备一份：Piskel 的自动存档放在浏览器的 IndexedDB 里，换设备、清缓存都可能找不回来。定期手动另存.piskel到本地，比什么都可靠。
• 接缝问题九成出在边缘：瓦片模式就是为了盯这块而生的，画完任何一块砖，先看四边在副本上能不能接住，再谈细节。
• 导出 Scale 用整数倍：引擎里再缩放非整数倍的图会糊，1x、2x、4x 这类整数倍最稳。
• 动画瓦片帧时长要一致：水波、火焰这类动画，帧数不同、间隔不同，铺进地图就是一块快一块慢，整排看下来很跳。
• 先定 sheet 布局，再对接引擎：变体帧一多，PNG 的列数直接决定 sheet 的宽高，布局改了引擎里的取块坐标全得跟着改。

下一步：开一张 16×16 的画布，把第一块砖画出来

瓦片集设计这件事没有捷径，多画、多拼、多放大检查。想继续往下挖，仓库里这几处值得一看：README.md 了解项目全貌，misc/gif-tests/ 里有现成的示例工程文件可以直接打开研究，tests/e2e/playwright/integration/settings/test-preferences-tile/ 的测试用例则是瓦片模式行为的活文档。

【免费下载链接】piskelA simple web-based tool for Spriting and Pixel art.项目地址: https://gitcode.com/gh_mirrors/pi/piskel