Pixel Pal

VS Code のエクスプローラーに、好きなドット絵ペットを住まわせる拡張機能です。

• 好きなペットにできる: ペットは「1フォルダ＝1体」。フォルダを選ぶだけで差し替わります。
• AI で作れる: ペット作成用のスキルを同梱。お使いの AI に頼めば、オリジナルのペットができます。
• エディタに反応する: 保存、エラー、ビルドやテストの成否、離席に合わせて演技をします。
• レア演出がある: めったに出ないシークレット演出を、ペットごとに仕込めます。

はじめかた

1. エクスプローラーを開き、下部の「Pixel Pal」を展開します。サンプルペットの「もち」が現れます。
2. 遊んでみます。
   • パネルをクリックすると、その位置まで歩いてきます。
   • ペットをクリックすると反応します。
   • ペットを2秒以内に5回クリックすると、シークレット演出が出ます。

ビューのタイトルをドラッグすると、下部パネルやセカンダリサイドバーにも移せます。

ペットを変える

コマンドパレットで 「Pixel Pal: ペットを選ぶ」 を実行します。次の場所にあるペットが一覧に出ます。

• 同梱のペット
• ~/.pixel-pal/pets/ に置いた自作のペット
• ~/.codex/pets/ にある Codex アプリのカスタムペット

一覧に無いフォルダも「フォルダを選択…」で指定できます。

AI でペットを作る

準備

初回に出る確認で「導入する」を選びます。あとから 「Pixel Pal: ペット作成スキルをAIツールに導入」 でも導入できます。

導入先はホームフォルダか、開いているワークスペースかを選べます。配置するのはスキルのファイルだけです。 スキルの実行には Node.js（v22 以降）が必要です。

頼み方

AI エージェントに、作りたいペットを伝えます。素材は ~/.pixel-pal/pets/<名前>/ に作られ、「ペットを選ぶ」の一覧に出ます。

Pixel Pal のペットを作って。 丸っこい柴犬。茶色で、しっぽがくるんと巻いている。のんびりした性格。

• 演技: 骨をかじる、あくびをする、しっぽを追いかけて回る
• テストが通ったら、しっぽを振って喜ぶ
• エラーが出たら、耳を伏せてしょんぼりする
• 5分さわらなかったら、丸くなって寝る
• シークレット: スケボーに乗って端まで走り抜ける

うまく作ってもらうコツ

見た目は、決め手になる特徴を3つほど伝える。 輪郭、色、耳やしっぽなど目立つ部位が効きます。「かわいく」より「頭が大きくて目が離れている」のほうが伝わります。参考画像があれば渡してください。

アニメーションは、種類ごとに欲しいものを挙げる。

リアクションは、きっかけと組にして伝える。 使えるきっかけは、クリック、保存、エラー発生、エラー解消、成功、失敗、タスク開始、デバッグの開始と終了、入力中、離席、復帰です。

動きは「始まり、山場、終わり」で伝える。 「カエルを食べる」より「カエルを見つけて驚き、捕まえて食べ、満足そうに笑う」のほうが、物語のある演技になります。

一度で決めようとしない。 まず見た目だけ作ってもらい、気に入ってから動きを足すと失敗しません。直すときは、どこがどう違うかを具体的に伝えます。

耳をもっと太くして。眉は目のすぐ上に。色はもう少しくすんだ緑で。

素材を作り直すと、ビューには自動で反映されます。特定の動きを見たいときは 「Pixel Pal: アニメーションを再生（確認用）」 が便利です。

既存の作品のキャラクターを題材にした素材は、個人で楽しむ範囲にとどめてください。

ペットのフォルダ

AI に任せず、自分で用意することもできます。フォルダに manifest.json と、アニメーションごとの PNG を置きます。 PNG は、同じ大きさのコマを横一列に並べたものです。絵は右向きで描きます。

{
  "name": "My Pet",
  "frameWidth": 48,
  "frameHeight": 48,
  "animations": {
    "idle":   { "file": "idle.png",   "kind": "idle",     "frames": 4, "delays": [1600, 120, 900, 120] },
    "walk":   { "file": "walk.png",   "kind": "walk",     "frames": 6, "delay": 120 },
    "eat":    { "file": "eat.png",    "kind": "action",   "frames": 8, "delay": 200 },
    "cheer":  { "file": "cheer.png",  "kind": "reaction", "frames": 5, "delay": 150, "on": ["success"] },
    "rocket": { "file": "rocket.png", "kind": "secret",   "frames": 4, "delay": 150, "travel": true, "chance": 0.02 }
  }
}

アニメーションの種類（kind）

アニメーションの数に上限はありません。

アニメーションの項目

きっかけ（on）

ペット全体の設定（表示幅、余白、浮遊）など、すべての項目は形式リファレンスにあります。

Codex のペット

Codex アプリのカスタムペット（pet.json とアトラス画像）は、そのまま読み込めます。 同じフォルダに manifest.json を置くと、演技やシークレット演出を追加できます。

コマンド

設定

知っておくこと

• ペットが見えるのは、ビューを表示している間だけです。
• ターミナルのコマンドへの反応には、VS Code のシェル統合が必要です。
• 通信や情報の収集は行いません。
• 拡張機能がホームフォルダに書き込むのは、スキルの導入を選んだときだけです。