urchin_hat
URCHIN_HAT / TECHNICAL FIELD NOTES

TECH MEMO

SRE、クラウド、AI、DevOps。
観測したこと、試したこと、考えたことを記録する技術アーカイブ。

ウニの帽子をかぶり、ノートに技術メモを書くキャラクター
OBSERVATION LOG 36 ENTRIES
# FIELD NOTES
Live2Dで動かすその前に、ブログの分身のキャラクターをCodex Petにしてみた TECH MEMO / FIELD NOTE

Live2Dで動かすその前に、ブログの分身のキャラクターをCodex Petにしてみた

きっかけ

urchin_hatは、普段からこのブログで自分の分身として使っているキャラクターです。

最終的にはLive2Dで動かしたいと考えています。その準備で正面・側面・背面の三面図を作り、これまで曖昧だった髪型や服装、小物の設定を整理していました。

設定がまとまってきたところで、「せっかくならCodex Petにしてみよう」と思ったのが今回のきっかけです。Live2Dより先にデスクトップ上で動かして、表情や仕草を少しずつ増やしていくことにしました。

Codex PetにしてからLive2D化するまでの制作フロー

キャラクター設定を整理した

まずは、画像を作るたびに見た目が変わらないよう、キャラクター設定をプロンプトにまとめ直しました。

urchin_hatは、ウニをそのまま人型にしたキャラクターではなく、ウニをモチーフにした若い女性です。紫色の髪と、ニット帽の大きな紫色のポンポンが見た目のポイントです。帽子には貝殻やヒトデなど、海にちなんだ飾りも付けています。

服装は紫色のパーカー、緑とオレンジのマフラー、プリーツスカート、スパッツ、レッグウォーマー、茶色のブーツ、バックパックです。

ここは思ったより苦戦しました。途中で半ズボンになったり、スカートの下がスパッツなのかズボンなのか分かりにくくなったりしたため、「プリーツスカートの下に、別の衣服として見えるスパッツを履く」と細かく指定しています。

制作物をリポジトリで管理した

今後も手を入れるつもりなので、Pet用のGitリポジトリも作りました。作業はIssueに分け、ブランチを切って進めています。

中身は次のように分けました。

  • references/: 三面図、設定画、ミニキャラの比率資料など、見た目の基準
  • prompt.md: Pet生成用のマスタープロンプト
  • AGENTS.md: 変えてはいけないキャラクター設定、制作手順、Git運用のルール
  • dist/urchin-hat/: 検証を通過したPetの配布物
  • dist/qa/: コンタクトシートや検証結果などのQA資料

三面図、設定画、ミニキャラの比率資料で内容が食い違った場合に、どれを優先するかも決めています。また、作業途中のファイルと完成版を分け、dist/には検証を通したPetだけを置くようにしました。

三面図からPet向けのミニキャラへ

最初は、三面図を基に少し頭身を残したSDキャラクターを作りました。ただ、実際のPetはデスクトップの隅にかなり小さく表示されます。この頭身のまま縮めると、表情や帽子の飾りが分かりにくくなりました。

そこで途中から方針を変え、Pet版は2.5〜3頭身ほどのミニキャラにしました。頭と帽子を大きくし、胴体と手足は短めにしています。紫色の髪、マフラー、帽子のポンポン、バックパックは、小さくしてもurchin_hatだと分かるので残しました。

Codex Pet用のアニメーションを作った

ミニキャラが決まったら、Codex Pet v2用のスプライトシートを作ります。1コマは192 × 208 px、並びは8列 × 11行で、完成画像は1536 × 2288 pxになりました。

最初の9行には、通常の待機、左右への移動、手振り、ジャンプ、失敗、入力待ち、Codexの作業中、レビュー中の動きを入れています。残りの2行は、16方向へ視線を動かすためのコマです。

左右移動は片方を反転して終わり、とはいきませんでした。帽子の飾りやバックパックは左右非対称なので、それぞれの向きを個別に作って確認しています。

視線の作成でも、下を向かせたら体ごと後ろ向きになることがありました。ここは体を正面に固定し、目と頭だけを動かすように修正しています。

生成した素材を検証した

スプライトシートを組み立てた後は、次の点を確認しました。

  • 必要なアニメーションがすべて揃っているか
  • 各コマが指定された範囲に収まっているか
  • キャラクターの大きさや足元の位置が大きくずれていないか
  • 空白のコマや、隣のコマとの重なりがないか
  • 動きの流れとキャラクターデザインに不自然な箇所がないか

数値だけでは分からない部分もあるので、全コマを一覧画像にして見た目でも確認しました。1コマだけなら気にならなくても、並べると大きさの違いや位置のずれが意外と目立ちます。

完成版は、画像サイズ、行列数、透過、使用セルと未使用セルを調べるv2の構造検証を通しています。見た目についても、別人になっていないか、色や体格が変わっていないか、スカートとスパッツが残っているかを確認しました。

視線は上下左右の4方向を問題なく判別できました。一部の斜め方向は変化が小さく、1コマだけでは向きが分かりにくいという注意が残っています。ただ、連続再生では不自然な飛びがなく、キャラクターも崩れていなかったので今回はそのまま採用しました。ここは今後直してもよさそうです。

Codexに配置して動作確認した

完成したpet.jsonspritesheet.webpをまとめ、最初は~/.codex/pets/urchin-hatからリポジトリへシンボリックリンクを張りました。これならリポジトリ側を更新するだけで、ローカルでもすぐ確認できます。

ところが、Codexを起動してもPetが出てきません。設定やスプライトを見直しながら、次の対応を行いました。

  • Petの設定データとスプライト画像を検証
  • Petの参照先をシンボリックリンクから実体フォルダへ変更
  • 画面外に残っていた位置情報を削除
  • 起動時にPetを表示する設定を有効化
  • Petの位置を画面内へ配置
  • macOSを再起動して表示を確認
  • 音声を女性ボイスの「Juniper」へ変更

macOSを再起動したところ、ようやくデスクトップの右下にurchin_hatが現れました。小さいですが、帽子やマフラーもきちんと分かります。

Codexのデスクトップ上に表示されたPet

これから育てていく

ひとまずCodex Petとして動くところまではできました。ただ、これで完成というつもりはありません。普段使いながら気になった動きや表情を直し、urchin_hatらしい反応を増やしていきます。

ここで整理したデザインや仕草は、いずれLive2Dモデルを作るときにも使えるはずです。しばらくはPetを動かして遊びつつ、少しずつ育てていこうと思います。

@urchin_hat
WRITTEN BY@urchin_hat

10月に向けて充電期間中

← BACK TO MEMO