シートは 1 枚。
9 状態、設定ゼロ。

Codex（OpenAI のコーディングエージェントアプリ）は、エージェントの作業状態を映すペットオーバーレイを表示します。これらのペットは追加設定なしで組み込めます：

1. 1.任意のペットページで「Codex にインストール」zip をダウンロードして解凍します。
2. 2.pet.json と spritesheet.webp を ~/.codex/pets/<名前>/ にコピーします（フォルダがなければ作成）。
3. 3.Codex を再起動し、設定 → 外観 → ペット でそのペットを選びます。
4. 4.任意のスレッドで /pet を実行して呼び出します — 他のアプリを使っていても、フローティングオーバーレイとして表示され続けます。

~/.codex/pets/shibe/
├── pet.json            { id, displayName, description,
│                         spritesheetPath: "spritesheet.webp" }
└── spritesheet.webp    1536 × 1872 · 8 × 9 · 192 × 208 per cell

9 状態は Codex アプリの契約と完全に対応（idle、running、running-left、running-right、jumping、waving、failed、waiting、review）しており、内蔵ペットと同じように振る舞います。

各シートは 1536×1872 px：8 列 × 9 行で、各セルが 192×208 px の透過背景フレームです。0 行目は常に各ペットページの状態で一番上の状態に対応し、フレームは左から右へ読みます。ある状態が 8 フレームに満たない場合、その行の残りのセルは空です — ペットページに記載のフレーム数だけをループさせてください。

sheet.webp  1536 × 1872
┌──────── 8 columns ────────┐
│ f0  f1  f2  f3  f4  …  f7 │ ← row 0 · idle
│ f0  f1  f2  f3  ·   ·   · │ ← row 1 · next state
│ …                         │
└──────── 9 rows ───────────┘  192 × 208 per cell

バンドル zip には README.txt も同梱され、各状態の行番号とフレーム数を正確に記載しています — 推測は不要です。

全 433 体のペットは同じ 9 状態を共有しているので、スプライトを差し替えても状態機械は変更不要です。

Godot 4

シートをインポートし、領域 (col×192, row×208, 192, 208) で AtlasTexture フレームを作り、状態ごとに AnimatedSprite2D へ渡します。

var frames := SpriteFrames.new()
for col in range(FRAME_COUNT[idle]):
    var tex := AtlasTexture.new()
    tex.atlas = sheet
    tex.region = Rect2(col * 192, ROW[idle] * 208, 192, 208)
    frames.add_frame("idle", tex)

Unity

Project ウィンドウでテクスチャを選び、Sprite Mode を Multiple に設定。Sprite Editor を開き、Grid By Cell Size で 192 × 208 を指定。各行が 1 つのアニメーションクリップになります。

Phaser 3

// rows differ per state — see the pet page for row indices
this.anims.create({
  key: "idle",
  frames: this.anims.generateFrameNumbers("pet-sheet", {
    start: ROW.idle * 8, end: ROW.idle * 8 + FRAMES.idle - 1,
  }),
  frameRate: 10, repeat: -1,
});

純粋な CSS

ループプレビューだけでよければ、状態ごとに 1 枚の GIF を：

<img src="https://r2.favori.dev/codexpet/pets/black-kitty/gif/idle.gif"
     alt="Black Kitty idling" width="192" height="208" />

• フレームは 192×208 で描かれています — 整数倍で縮小（96×104、48×52）し、ニアレストネイバーフィルタリングを使えばピクセルがくっきり保てます。
• running-left / running-right は鏡像ではなく実在のサイクルです — 移動方向に合う方を使うか、どちらかを反転してメモリを節約できます。
• Web プロジェクトでは WEBP シートがおすすめ（ダウンロードが小さい）。WEBP をデコードできない環境では PNG を。
• 各バンドルの README.txt に行番号とフレーム数を記載 — ペットページに表示される数値と同じです。