嗨大家,一切安好?

我已经很久想了解像素艺术编辑器的内部工作原理,于是决定从零开始自己做。它叫 Crivo,结果比我一开始想象的要更完整。

想法是把图像当作真实的矩阵来处理。每一层都是 Uint32Array,包含每个像素的 RGBA,所以你看到的屏幕显示完全与导出的内容一致。

我最喜欢的部分:

  • 动画 GIF。我手写了 LZW 编码器,没有使用任何库。当第一个 GIF 正确打开时,我几乎不敢相信。

  • 在 OKLCH 中调节明暗。阴影偏向蓝色,光线偏向黄色,和经典像素艺术一样,效果很棒。

  • Bayer 点阵和点阵渐变,让人有那种复古游戏的感觉。

  • 历史记录只保存变化的像素,这样随时可以撤销而不必担心内存爆炸。

最让我兴奋的部分是:你画 sprite 后,可以直接把矩阵导出到你的游戏代码中,支持 JSON、CSV、JS、Python、C 或 Java。同时还能导出 PNG、GIF 和 sprite sheet。

前端是纯 JavaScript 与 Canvas,没有框架。后端是 Django + Postgres,还附带一个 Java CLI。可以通过 Docker 运行,但编辑器也可以在没有服务器的情况下在浏览器中打开并保存所有数据。

https://github.com/ravelroot/Pixel-Art-Matrix-Editor

我还有很多想改进的地方,所以任何批评都很受欢迎,尤其是关于代码组织的。如果你喜欢,点个星星会大帮忙!如果想看到后续更新,请关注我的 GitHub:https://github.com/ravelroot

PS:这是 beta 版,我还会实现快捷文件上传 Crivo,无需本地服务器/后端,以及一个可执行的 .exe 文件来在桌面上运行应用!如果有任何疑问,随时告诉我!!!!