第26天。我想做点协作性质的东西，让大家能真正一起实时创作。所以我选了像素画画布。
提示词#
起点很简单：
“做一个协作像素画画布，让多个用户可以实时一起画画。”
怎么做的#
Watchfire把这个拆成了13个任务，对于一天的项目来说确实不少。但像素画编辑器一旦你开始考虑用户期望的所有工具，动的零件还真不少。
前几个任务搞定了基础：用Firebase Realtime Database建立画布同步、添加可选的网格尺寸（16x16、32x32、64x64）、以及构建一个带自定义颜色选择器的32色调色板。从那里分出了实际的绘画工具：画笔、橡皮擦和填充。
然后就一直在加。撤销/重做支持。用于创建镜像设计的对称模式。矩形和直线的形状工具。可调节的画笔大小。画布模板让你不用每次都从零开始。回放画布绘制过程的延时回放功能。显示其他用户操作的动态信息流。用于移动和复制区域的选择工具。一个前景和背景图层的双图层系统。最后是导出选项，可以把作品导出为各种尺寸的PNG。
13个任务。这就是一个功能完整的绘画应用了。
成果#
落地页就定了调。它展示了入门模板（爱心、剑、笑脸、树）和其他用户创建的最近画布的画廊。你可以直接跳进去画，也可以从头创建新的。
顶部是完整的工具栏：画笔、橡皮擦、填充、直线、矩形、圆形和选择工具。左边是展开的调色板和自定义颜色选择器。右边是图层面板，有前景和背景图层，各自都有可见性切换。
画起来很流畅。每次点击像素都通过Firebase同步，所以同一画布URL上的人能立即看到变化。网格线帮助你保持精确，缩放级别在不同网格尺寸下都能很好地适应。
延时回放功能是那种我没想到能做这么好的东西之一。它记录每一次像素放置，可以从头到尾回放整个绘画过程。有回放控制和速度选项。
看着一幅复杂的作品一个像素一个像素地成形，有种莫名的满足感。这也是观察别人怎么构思画作的好方法。
导出对话框提供了真正实用的选项。你可以设置透明背景，从多个输出尺寸中选择（1x、2x、4x、8x），导出为PNG、SVG，或直接复制到剪贴板。对于像素画工具来说，内置放大功能很重要，因为没人想要一个实际大小的16x16 PNG。
模板是个不错的功能。这个爱心模板预加载好了，你可以直接开始添加细节和阴影，而不用从头画轮廓。双图层系统意味着你可以把模板放在背景图层，在前景上画画，不用担心搞乱底层形状。
主页上的最近画布区域就像一个社区画廊。你可以看到别人做了什么，每个画布都显示网格尺寸。爱心、脸、剑、树……大家自然而然地会被同类的像素画主题吸引。
Bug 报告#
测试中遇到的主要问题：
- 在较大的网格（64x64）上进行填充时，逐个同步每个变化的像素会感觉卡顿。需要批量更新。
- 对称模式在偶数网格尺寸上一开始没有正确对齐。
- 移动端的触摸绘画需要做些处理，防止画画时页面跟着滚动。
- 图层切换在视觉上不够明显，很容易在没意识到的情况下画到了错误的图层上。
数据#
- 13个Watchfire任务 从初始画布到导出选项
- 3种网格尺寸 全部支持实时同步
- 32色调色板 加自定义颜色选择器
- 8种绘画工具 包括形状和选择
- 双图层系统 独立的可见性控制
- Firebase Realtime Database 处理所有协作
试试看#
创建一个画布然后分享链接。任何有URL的人都能和你一起画。
Day 26 评价#
像素画画布听起来简单，但一旦加上图层、对称、模板、延时回放和实时协作，你看到的就是一个正经的创意工具了。
Firebase集成是整个项目的核心。每一次像素变化都通过Realtime Database传递，这意味着多个人可以真正同时在同一个画布上画画。没有轮询，没有刷新按钮，就是实时更新。全部13个任务从一个提示词就汇聚成了一个完整的东西。
它能取代Aseprite或Piskel吗？不能。但对于快速的协作像素画创作来说，它完全够用。而且光是延时回放功能就值得试一试。看着空白的网格一个像素一个像素地变成艺术品，真的很有意思。
这是30 Days of Vibe Coding的第26天。跟着我一起见证如何用AI辅助编程在30天内发布30个项目。
