雲型Codexペット｜codexの状態で表情と色が変わる非公式カスタムペット「Cloudchip」作ってみた
1. 初めに
Codexで使えるカスタムペット「Cloudchip」を作りました。（見た目が可愛い、動いて可愛い、待機中も可愛い🤦♂️）
Cloudchipは、雲とデジタル回路をモチーフにした小さなピクセルアートのペットです。
状態ごとに雲本体の色や目、頭上の表示が変わるので、今Codexが何をしているのかがわかりやすくなるようにしています。
私の使用例ですが、codex実行中に動画見たり、ゲームしたりしているときにデスクトップの右下とかに配置して状況を確認してます！
配布ファイルには以下が入っています。
`pet.json`
`spritesheet.webp`
2. 状態別の動作
待機
通常の待機状態です。
雲が軽く上下しながら、ゆっくり待っているような動きをします。
右移動
右方向へ移動する時のアニメーションです。
雲本体は白く、少し集中した表情で進みます。
クリックしながら右に動かすとこの動きをします。
左移動
左方向へ移動する時のアニメーションです。
クリックしながら左に動かすとこの動きをします。
右移動と同じく、白い雲のまま左右の移動がわかるようにしています。
あいさつ
軽く手を振るような状態です。
状態遷移や、表示タイミングで行うアニメーションです。
雲の片側が少し上がって、にこっとした表情になります。
ジャンプ
少し跳ねるようなアニメーションです。
雲らしくふわっと上下する感じにしています。
エラー
エラーや失敗時の状態です。
雲本体が薄い赤色になり、目が `x x` になります。
考え中
ユーザー入力待ちや考え中の状態です。
目つきが変わり、頭上に `. . .` が順番に出ます。
実行中
処理を実行している状態です。
雲本体が白くなり、回路の雰囲気で動作中っぽさを出しています。
成功
処理がうまくいった時の状態です。
雲本体が薄い緑色になり、チェックマークが表示されます。
3. オリジナルのペットを作りたい方向けの手順
今回のCloudchipは、先にデザインイメージを作成し、作成したイメージ画像をCodexに渡して「このキャラクターをペットにしたい」と依頼して作りました。
大まかな流れは以下です。
元になるキャラクター画像を用意する
Codexに「この画像をペットにしたい」と依頼する
ペット名、見た目、状態ごとの動きを指定する
`pet.json` と `spritesheet.webp` を作成してもらう
動作確認しながら、状態ごとの見分けやすさを調整する
問題なければ pets フォルダに配置する
状態ごとの差を出したい場合は、以下のように具体的に指定すると調整しやすいです。
待機時は軽く上下する
実行中は本体を白くする
考え中は頭上に `. . .` を出す
成功時は薄い緑色にしてチェックマークを出す
エラー時は薄い赤色にして `x x` 目にする
最初から完璧に作るというより、いったん作ってから「この状態がわかりづらい」「もっと色を変えたい」「目を変えたい」と調整していくのが作りやすかったです。
Cloudchipも最初は状態の違いが少しわかりづらかったので、あとから雲本体の色や目を変えて、状態が読み取りやすいように直しました。
4. Codexでの設定手順
Cloudchipを使うには、Codexの設定画面から pets フォルダを開き、そこに配布ファイルを配置します。
手順
Codexを開く
画面左下、またはサイドバー付近にある歯車アイコンの「設定」を開く
設定画面の中から「外観」＞「ペット」項目を探す
「カスタムペット」＞「フォルダを開く」ボタンを押す
開いたフォルダの中に ダウンロードした`cloudchip-public` フォルダを配置
「ペット」上部にある「更新」ボタンを押す
もう一度 Settings を開き、Pet の選択欄から `Cloudchip-public` を選ぶ
配置後のフォルダ構成は以下のようになります。
配置イメージは以下です。
.codex/
└─ pets/
└─ cloudchip-public/
├─ pet.json
└─ spritesheet.webpダウンロードしたら使えるのでよかったら使ってみてください！
