概要
pet は animated sprite、つまりフレームを順番に再生して命を吹き込む小さなキャラクターです。提出すると、コミュニティの Pets gallery に掲載され、誰でも使って楽しめるようになります。
pet の提出方法は 2 つあります。最速は Petdex 経由で、URL を 1 つ貼るだけです。もう一つは GitHub 経由で、自分で spritesheet と sprite.json をホストする場合に使います。既存の Petdex pet を提出することも、自分だけのオリジナル pet を作ることもできます。
どちらの方法も PicoPixel アプリ内で行うため、先にログインが必要です。
始める前に
すべて PicoPixel アプリ内で行います。提出画面へ進むには：
- app.picopixel.io でアプリを開きます。
- まだログインしていなければログインします。サインインは Google または GitHub の OAuth です。スキップした場合、提出前に促されます。
- 左サイドバー下部のアカウントをクリックします。
- "Your account" を選びます。
- "Submit Sprite" を開きます。
Submit Sprite 画面には、以下の 2 つの方法が表示されます。
何かを提出するにはログインが必要です。ログインしていない場合、続行前にアプリが促します。
Petdex で提出する
これは推奨される最速の方法です。Petdex は petdex.crafter.run にある外部 pet ディレクトリで、pet を閲覧、作成、ホストできます。各 pet には https://petdex.crafter.run/pets/<pet-id> の形の共有 URL があります。
提出手順：
- Petdex で pet を見つけるか作成し、その URL をコピーします。
- Submit Sprite 画面で "Submit via Petdex" を選びます。
- "Petdex URL" フィールドに pet URL を貼り付けます。
- 任意の "Notes" フィールドに役立つ情報を追加します。
- 送信します。
Petdex 経由の提出は最速です。RECOMMENDED と FASTEST と表示されているのには理由があります。必要なのは URL 1 つだけです。
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 を再利用する代わりに、オリジナルを作ることもできます。OpenAI Codex や AI image generators などの AI ツールは、キャラクター spritesheet をゼロから作る実用的な方法です。
spritesheet は、均一なグリッドに並べられた 1 枚の画像（PNG または WebP）で、"atlas" とも呼ばれます。1 行に 1 つのアニメーションを配置し、すべてのフレームを同じサイズにしてください。
すべてのフレームは、幅と高さが完全に同じでなければなりません。セルが揃っていないグリッドはきれいに切り出せず、アニメーションが跳ねたり壊れたりします。
sprite.json は sheet を説明します。主な構成は 2 つです。
- 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 には最低 2 つの state が必要なので、少なくとも idle ともう 1 つの動きを生成してください。
よいワークフローは、同じサイズでフレームを生成し、1 行 1 アニメーションの規則的なグリッドに並べ、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 を見る。
