うちの猫が、レトロゲームの中を歩いていたら。

そんな思いつきから、三毛猫の写真をChatGPTでドット絵にしてみました。丸い顔と毛の模様を残して、猫パンチや毛づくろいをする小さなゲームキャラに。

まずは、完成した動きを見てみてください。そのあとに、コピーして使えるプロンプトと、GIFにするまでにつまずいたところを紹介します。

先に完成したものを見る

今回の流れは、写真 → ドット絵 → スプライトシート → 動くGIF。スプライトシートは、動きのコマを1枚に並べた画像のことです。

ドット絵として楽しむなら、Step 2まででも大丈夫。動かしてみたい人は、その先の切り出しとGIF作りへ進みましょう。

今回使ったもの

• 猫の写真
• 画像生成・編集に対応したChatGPT
• 画像の切り出し・背景透過・GIF作成ができる画像編集環境

キャラクターとスプライトシートは、ChatGPTの画像生成で作りました。以下のプロンプトは今回の三毛猫を例にしています。自分の猫で試すときは、毛の色や目の色を置き換えてください。

GIFにする工程は、画像生成とは別です。この記事では切り出しや位置合わせの考え方を紹介しますが、具体的な操作は使う編集ツールによって異なります。生成した1枚を、そのままゲーム素材として使えるわけではありません。

Step 1｜猫の写真を用意する

顔と毛の模様が分かる、お気に入りの1枚を選びます。全身としっぽまで写っていると、キャラクターの姿を伝えやすくなります。

今回の猫は、三毛柄、丸い顔、短めの足、黄色っぽい目が特徴です。模様や体型に分かりやすい特徴があると、絵になったあとも同じ猫だと認識しやすくなります。

背景がシンプルな写真だと、猫の輪郭も見やすくなります。最初から毛先まで切り抜く必要はありません。

Step 2｜猫を16-bit風のゲームキャラにする

いきなり16コマのスプライトシートを頼むのではなく、最初に1枚のキャラクター画像を作ります。ここで猫の柄、顔、体型、色が合っているかを確認しておくと、その後の修正が少なくなります。

コピーして試す

添付した猫の写真をもとに、16-bit風・レトロゲーム風のかわいいドット絵キャラクターを1体作ってください。 三毛柄、丸い顔、短めの足、黄色っぽい目など、元の猫の特徴が分かるようにしてください。 かわいさはありつつ、ゲーム用キャラクターとして見やすいデザインにしてください。

コピーする

できた画像は、顔、毛の模様、体型を元写真と見比べます。小さく表示しても「うちの子」らしさが残っていれば、次へ。

見た目が違う場合は、「顔の左側の黒い模様を残してください」のように、直したい箇所を具体的に伝えます。一度に全部を変えようとするより、特徴を一つずつ修正する方が意図を伝えやすくなります。

気に入った1枚ができたら、保存しておきます。この画像を、次の工程で見た目の基準にします。

Step 3｜4×4のスプライトシートを作る

キャラクターの見た目が決まったら、その画像を使って4×4、全16コマのスプライトシートを作ります。

コピーして試す

添付したキャラクター画像を基準に、4×4、全16コマのゲーム用スプライトシートを作成してください。 すべて同じ猫に見えるように、模様、顔、体型、配色を統一してください。 動きは猫らしいものにしてください。 ・待機 ・歩く ・前足を上げる ・猫パンチ ・しゃがむ ・身構える ・威嚇 ・座る ・毛づくろい ・上を見る 各コマは見やすく整理し、できるだけ同じサイズ感で配置してください。背景はシンプルな無地にしてください。

コピーする

16コマすべてを別の動きにする必要はありません。GIFにしたい動作が決まっている場合は、たとえば「待機を4コマ、猫パンチを6コマ、毛づくろいを6コマ」のように、必要な枚数を先に指定する方法もあります。

最初から透過背景を求めすぎない

今回、透過背景での生成も試しましたが、猫の周囲が完全に透明にならなかったり、半透明の色が残ったりしました。そのため、まずは猫と区別しやすい無地背景で作り、あとから背景を透過しました。

背景色は、猫の毛や動きの線に使われていない色を選ぶのが理想です。白い毛が多い猫なら白背景を避けるなど、輪郭とのコントラストも意識します。

Step 4｜スプライトシートを16コマに分解する

4×4の画像ができたら、1コマずつ別の画像にします。

一見すると、画像の横幅と縦幅を4等分すればよさそうです。しかし、生成されたスプライトシートでは、すべての猫がマスの中央に収まっているとは限りません。ポーズによってしっぽや動きの線が隣の区画へ伸びることもあります。

実際に均等分割してみると、隣の猫の耳やしっぽが入り込んだフレームがありました。

きれいに分解するには、次の順番で処理します。

1. 各コマの猫本体と動きの線を確認する
2. 隣のコマが入らない範囲で一体ずつ切り出す
3. 背景を透明にしたPNGとして保存する
4. 同じ大きさのキャンバスへ配置する

切り出すときは猫の体だけでなく、しっぽ、ひげ、耳、猫パンチの動きを示す線も含めます。四角いマスを基準にするのではなく、「そのポーズに必要な範囲」を見て切り出すのがポイントです。

Step 5｜背景を透過する

次に、各フレームの無地背景を削除し、透明PNGにします。

ここでは、背景色に近い部分をまとめて消しながら、猫の輪郭が欠けていないかを確認します。ドット絵は1〜2ピクセルの違いでも印象が変わるため、自動処理の結果をそのまま使わず、拡大して確認した方が安心です。

特に注意したいのは次の3点です。

• 耳やひげなど、細い部分を削りすぎていないか
• 猫パンチや威嚇を表す動きの線が残っているか
• 隣のフレームの一部や背景色の細い線が残っていないか

背景が猫の明るい毛色と近い場合は、一度できれいに消そうとせず、背景の大部分を自動で削除してから、輪郭付近を手作業で整える方が安全です。

Step 6｜16フレームの位置をそろえる

背景を透明にしただけでは、GIFにしたときに猫全体が上下左右へ跳ねて見えることがあります。原因は、フレームごとに画像の大きさや猫の位置が違うためです。

今回は、すべてのフレームを同じキャンバスへ置き、次のルールで位置を合わせました。

• キャンバスを420×420pxに統一する
• 猫の体を水平方向の中央へ置く
• 立っているポーズは足元のラインをそろえる
• 座る、しゃがむなどの低いポーズは動きが自然に見える範囲で調整する
• しっぽや動きの線がキャンバスから切れないようにする

基準は画像の上端ではなく、足元や体の中心に置きます。猫の高さが変わるポーズまで無理に上端でそろえると、かえって動きが不自然になります。

位置合わせ後は、短い間隔でフレームを切り替えて確認します。猫そのものではなく、足元や胴体の中心を見ると、ずれを見つけやすくなります。

Step 7｜動作ごとにGIFを作る

待機

猫パンチ

ぺろぺろ

最後に、透明PNGを順番に並べてGIFにします。

最初は16コマすべてを1本につなげましたが、待機、攻撃、毛づくろいが急に切り替わり、まとまりのない動きに見えました。そこで、似た動作ごとにフレームを分けて、複数の短いGIFにしました。

• 待機：呼吸や耳の動きが分かるコマをゆっくり再生
• 猫パンチ：前足を上げる、振る、戻すコマを少し速く再生
• 毛づくろい：前足をなめる動作を往復させて繰り返す

動きによって表示時間を変えると、同じ枚数でも自然に見えます。待機は少し長め、猫パンチは短めにすると、それぞれの性格が出やすくなりました。

うまくいかないときの追加プロンプト

最初から長いプロンプトを書き直さなくても、気になる点だけを追加で伝えられます。

画像生成では、修正を頼んだ箇所以外も変化することがあります。修正後は、猫の柄、顔、体型が変わっていないかも確認してください。

ゲーム素材として使うときの注意点

GIFやSNS投稿として楽しむだけなら、見た目が自然であれば十分です。一方、実際のゲームに組み込む場合は、追加の確認が必要になります。

• フレームの幅と高さを統一する
• 足元などの基準点を決める
• 動作ごとのフレーム数と再生速度を決める
• 輪郭に半透明の背景色が残っていないか確認する
• 使用するゲームエンジンに合った画像形式で書き出す
• 利用している画像生成サービスの最新の利用条件を確認する

元写真が自分で撮影したものではない場合は、写真の権利や撮影者の許可も確認しましょう。他人のペットを公開する場合は、飼い主の了承を得ておくと安心です。

まずは、うちの子のドット絵から

猫の写真1枚からでも、ドット絵、スプライトシート、動くGIFまで作って遊べました。

動くGIFまで仕上げるには、切り出しや背景透過、位置合わせのひと手間が必要でした。でも、まず1枚のドット絵を作るだけでも、いつもの猫が少し違って見えて楽しいものです。

ゲームを作る予定がなくても大丈夫。まずはお気に入りの写真1枚で、その猫らしい柄や表情を残した、小さなキャラクターを作ってみてください。