概览
pet 是一个 animated sprite,一个通过帧循环动起来的小角色。提交后,它可以出现在社区 Pets gallery 中,供所有人使用和欣赏。
提交 pet 有两种方式。最快的是通过 Petdex:粘贴一个 URL 就完成。另一种是通过 GitHub,适用于你自己托管的 spritesheet 和 sprite.json。你可以提交现有的 Petdex pet,也可以创建一个原创 pet。
两种方式都在 PicoPixel 应用内完成,因此你需要先登录。
开始之前
所有操作都在 PicoPixel 应用中进行。进入提交页面:
- 在 app.picopixel.io 打开应用。
- 如果还没有登录,请先登录,登录使用 Google 或 GitHub OAuth。如果跳过这一步,提交前会提示你登录。
- 点击左侧边栏底部的账号。
- 选择 "Your account"。
- 打开 "Submit Sprite"。
Submit Sprite 页面会提供下面介绍的两种方式。
提交任何内容都必须登录。如果未登录,应用会在继续前提示你。
通过 Petdex 提交
这是推荐且最快的方法。Petdex 是位于 petdex.crafter.run 的外部 pet 目录,你可以浏览、创建和托管 pet。那里的每个 pet 都有类似 https://petdex.crafter.run/pets/<pet-id> 的可分享 URL。
提交步骤:
- 在 Petdex 上找到或创建 pet,并复制它的 URL。
- 在 Submit Sprite 页面选择 "Submit via Petdex"。
- 将 pet URL 粘贴到 "Petdex URL" 字段。
- 在可选的 "Notes" 字段中添加有用信息。
- 发送。
通过 Petdex 提交是最快路径,它标着 RECOMMENDED 和 FASTEST 是有原因的。你只需要一个 URL。
通过 GitHub 提交
当你自己托管 sprite 时使用这种方式。你提供的是原始文件,而不是 Petdex 链接。
- 将 spritesheet 图片和匹配的
sprite.json放入公开 GitHub 仓库。 - 在 Submit Sprite 页面选择 "Submit via GitHub"。
- 粘贴仓库 URL(
https://github.com/...)。 - 填写 "Credits / Author",让作品正确署名。
- 在可选的 "Notes" 字段中添加有用信息,然后发送。
spritesheet 和 sprite.json 需要遵循特定格式。下一节会说明。
创建你自己的独特 pet
你不必复用精选的 Petdex pet,也可以制作原创 pet。OpenAI Codex 或 AI image generators 等 AI 工具,是从零生成角色 spritesheet 的实用方式。
spritesheet 是一张单独的图片(PNG 或 WebP),按统一网格排列,也叫 "atlas"。请让每一行放一个动画,并保持每一帧尺寸完全一致。
每一帧都必须拥有完全相同的宽度和高度。单元格不一致的网格无法干净切片,动画会跳动或损坏。
sprite.json 描述这张 sheet。它主要有两部分:
- atlas,网格布局:
columns、rows、frameWidth和frameHeight。 - states,动画数组。每个 state 都有
id、label、所在row、frames数量、可选的durationMs、group和caption。
常见 state 包括 idle、wave、jump、run-right、run-left、running、waiting、failed 和 review。sprite 至少需要两个 state,因此请至少生成 idle 加一个动作。
一个好的流程是:以一致尺寸生成帧,把它们按每行一个动画排列到规则网格中,然后在 sprite.json 中描述网格和 states,并通过 Petdex 或 GitHub 提交。
sprite 的概念、states、phases 和复用,在 LVGL Sprites 中有更深入的说明。
接下来会发生什么
提交后,PicoPixel 团队会审核你的 pet,必要时会联系你澄清问题。通过审核的 pet 会出现在 Pets gallery 中,并显示你的署名。之后,社区中的任何人都可以找到并使用你的创作。
下一步
- LVGL Sprites,了解 sprite states 和 frames 的工作方式。
- Event Editor,为设计添加交互。
- Submit a Template,分享别人可以作为起点的 PicoPixel 设计。
- Report Content,举报违反规则的 pet 或 template。
- Pets gallery,浏览社区 pets。