愛犬の写真を参考に、hatch-petスキルでCodex用のアニメーションペットを作成した記録です。 写真の印象をどうペット設定へ落とし込み、最終的にCodexが読み込めるファイルへ変換したかをまとめました。
きっかけ
Codexにはスキルを追加できる仕組みがあり、ペット作成用の hatch-pet スキルをインストールすると、写真やコンセプトから Codex用のスプライトシートを作れることを知りました。
今回は、愛犬の写真をもとに、 Codexペットを作成しました。

人が行った作業とAIが行った作業
今回の作業は、人が方向性を決め、AIが画像生成やスプライト化の細かい処理を担当する流れでした。 写真、生成物、確認用画像のようにファイルとして残すものはプロジェクト内で扱い、 名前や雰囲気、採用する見た目は人が確認しながら進めています。
人が行った作業
AIが行った作業
④ 写真の特徴をペット設定へ整理する
⑤ hatch-pet作業フォルダを準備する
⑥ ベース画像を生成する
⑧ 9種類のアニメーションを生成する
⑨ 検証とパッケージ化を行う
スキルを入れる
Codex上で $skill-installer hatch-pet を呼び出し、 OpenAIのskillsリポジトリから hatch-pet をインストールしました。 インストール後はCodexを再起動すると、新しいスキルが使えるようになります。
どこに入力するのか
入力する場所は、Codexアプリのチャット画面です。ローカルに作成した MyPet プロジェクトを開いた状態で、 画面下部のメッセージ入力欄に次の1行をそのまま入力して送信します
$skill-installer hatch-pet
送信すると、Codexが skill-installer スキルを使ってインストール処理を進めます。 GitHubからスキルを取得するため、途中でネットワークアクセスやファイル配置の許可を求められる場合があります。 その場合は内容を確認して許可します。
インストールが終わったらCodexを一度再起動します。再起動後、同じようにチャット入力欄へ $hatch-pet と入力すると、ペット作成スキルを呼び出せます。
実際には、ユーザーのCodex設定フォルダ配下にインストールされます。 Windowsでのインストール先は次の場所です。
%USERPROFILE%\.codex\skills\hatch-pet
hatch-pet スキルそのものはプロジェクト内に入るのではありません。 ただし、このあと写真を置いたり、生成物を確認したり、記事を編集したりする作業はプロジェクト内で進める方が扱いやすくなります。
写真からペット設定を作る
参照写真をプロジェクト内に置く
写真はプロジェクト内の素材として扱えるようにし、Codexから参照しやすい状態にしておきます。 今回は miki-reference.jpg をこのプロジェクトに置きました。 その写真をもとに、ペットとしての名前、見た目、性格、口調を依頼文にまとめました。
Codexへ送る依頼文を作る
写真を添付したうえで、プロジェクトを開いたCodexのチャット入力欄に次のように依頼しました。 ここでは名前を「ミキ」にしています。
$hatch-pet
プロジェクト内の miki-reference.jpg を参考に、名前は「ミキ」でCodexペットを作ってください。
ブラウンのミニチュアダックスフント、大きな黒い瞳、黒い鼻、やさしく人なつっこい雰囲気。
性格は甘えんぼで好奇心旺盛、作業中は励ましてくれる相棒。
口調はやさしい日本語で短め。
この依頼文では、名前、見た目、性格、口調をまとめて渡しています。 ここまで指定しておくと、AIが後続の画像生成やアニメーション作成で迷いにくくなります。
写真の特徴をペット設定へ整理する
Codexは依頼文と参照写真から、ミキの見た目や性格をペット制作向けの設定として整理しました。 この整理をもとに、後続の画像生成やアニメーション作成へ進みます。
hatch-pet作業フォルダを準備する
この工程では、Codexがプロジェクト内で作業します。 Codexが参照写真をワークスペースへ取り込み、prepare_pet_run.py を使ってhatch-pet用の作業フォルダを準備しました。
Codexは、表示名として日本語の「ミキ」を使い、ファイル名や設定で扱いやすい内部IDとして英数字の miki に変換しました。
python %USERPROFILE%\.codex\skills\hatch-pet\scripts\prepare_pet_run.py ^
--pet-name "Miki" ^
--pet-id "miki" ^
--display-name "ミキ" ^
--reference "miki-reference.jpg" ^
--style-preset "sticker"
プロジェクト内でこの処理を実行することで、ベース画像用プロンプト、各アニメーション行用プロンプト、 レイアウトガイド、ジョブ管理ファイルが自動で作成されました。
ベース画像を生成する
最初にCodexが作成したのは、すべてのアニメーションの基準になる「ミキ本体」の画像です。 写真の特徴として、ブラウンの毛、大きな黒い瞳、ミニチュアダックスフントらしい長い耳、黒い鼻、ピンク系の首輪を残すように生成しました。
背景は後から透明化しやすいよう、Codexが純マゼンタのクロマキー背景で生成しました。 これにより、最終的なスプライトシートでは背景を透明化できます。
生成結果を確認して承認する
生成されたベース画像を見て、写真の印象が残っているか、Codex上で小さく表示しても分かりやすいかを確認しました。 問題なければこの方向性を承認し、アニメーション行の作成へ進みます。
9種類のアニメーションを生成する
Codexペットには、アプリ側で使われる9つの状態があります。
Codexがすべての状態を生成しました。
①idle
待機。
②running-right / running-left
左右へ移動するときの動き。
③waving / jumping
前足であいさつ、そして遊ぶようなジャンプ
④failed / waiting / running / review
作成された「spritesheet.webp」ファイル

検証とパッケージ化を行う
フレーム抽出と検証を行う
画像がそろったあと、Codexがhatch-petのスクリプトを使って各行をフレームに分解し、 1536x1872 の正式なアトラスへ合成してくれました。
extract_strip_frames.py
inspect_frames.py
compose_atlas.py
validate_atlas.py
make_contact_sheet.py
render_animation_previews.py
pet.json と spritesheet.webp を配置する
Codexは生成結果を検証し、 確認用の画像や記事用の素材はプロジェクト内に残し、最終的にCodexが読み込めるよう、 完成した pet.json と spritesheet.webp はユーザーのCodexペット用フォルダへ配置しました。 Windowsでの配置先は次の場所です。
%USERPROFILE%\.codex\pets\miki
├─ pet.json
└─ spritesheet.webp
Codexアプリでミキを設定する
①Codexを再起動
新しく配置した %USERPROFILE%\.codex\pets\miki を読み込ませます。
②ペットを設定する
Codexアプリの画面で、「設定」ー「外観」ー「ペット」の項目で今回作成したカスタムペットを
選択します。またペットが起きていなかったら「ペットを起こす」をクリックします。

以下のように表示されれば、OKです。

まとめ
今回、愛犬の写真の雰囲気を保ったままペットとして扱いやすい形になりました。
これで、作業中にそっと見守ってくれる自分だけのCodexペット「ミキ」が完成です。


コメント