3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

絵も 3D も描けないけど、Claude Code に頼むだけで HD-2D 風のゲーム画面を 5 時間で作れた話

3
Posted at

はじめに

「Claude Code で、ゲームって作れないかな」と思ったのがきっかけです。

ただ、私は絵も 3D も描けません。普段は機械学習エンジニアで、ゲーム制作の経験もありません。そこで Claude Code にほぼ全部頼んでみたら、5 時間ほどでここまでできました。

01_01-battle.gif

細かく見ると、キャラの服が森に溶けている、キャラが小さいなど、粗はたくさんあります。ただ、どれも作り込めば直せる範囲だと思っています。

また、今回作ったのはあくまで短いデモです。しっかりした 1 本のゲームにするなら、何十時間、何百時間とかかるはずです。それでも、素人が 5 時間ほどでちょっとゲームっぽいものを作れたことを伝えたくて書きました。

この記事は技術の細かい話より、Claude にどう頼んだらうまくいったかを中心に書きます。同じように「作ってみたいけど描けない」人の参考になれば嬉しいです。

全体像

Claude Code が真ん中にいて、画像生成・3D・アニメーション・ゲームエンジンなどの道具を順番に動かしていきます。人が触ったのはオレンジの 2 か所だけです。

02_fig-tech-stack.png

流れとしてはこうです。

03_fig-pipeline.png

ざっくり言うと、「絵 → 立体 → 動き → ドット絵 → ゲーム画面」と形を変えながら進めていく作り方です。Claude は絵を直接描けないので、一度 3D の人形にして、それを横から撮ってドット絵にしています。

1. キャラの設定画を描いてもらう

頼み方

頼み方(要旨)
「キャラは女剣士、金髪ポニーテール。舞台は森」

伝えたのはこの一言だけです。あとは Claude が「このあと 3D にするなら、正面・横・背面の 3 面図が要る」と判断して、Codex 向けの細かい指示(3 面図を 1 枚に、白背景、3 面で身長や装備を揃える、など)を自分で書いて描かせていました。

結果

04_02-concept-sheet.png

正面・横・背面で顔や装備がきれいに揃っています。

敵のゴブリン、会話用の表情差分、背景の木や茂みも、同じように一言伝えて出してもらっています。

コツ

2 体目以降は「この画像のキャラと同じ顔・装備で」と元の画像を渡すと、雰囲気が揃います。

2. 3D にする(ここは人の作業)

Tripo という Web サービスに 3 面図を上げると、3D モデルにしてくれます。ここは Web 上でボタンを押すだけなので、私がやりました。

05_13-tripo-heroine.png

06_03-tripo-glb.png

髪やマントや剣まで、設定画どおりに立体になりました。無料枠では書き出せなかったので、有料プラン(月 20 ドルほど)を契約しています。

ここも自動化できそう

Tripo には開発者向けの API があります。API キーを Claude に渡せば、「3 面図を上げて 3D にする」ところまで Claude がそのまま進められるはずです。今回はまだ試していません。

3. 動きを付ける(ここも人の作業)

Mixamo という Adobe の無料サービスに 3D モデルを上げると、自動で骨を入れて、走る・斬るなどの動きを付けてくれます。ここも Web 操作なので私がやりました。

07_14-mixamo-idle.png

Mixamo は Tripo のファイルをそのままでは受け付けないのですが、そこは Claude が先回りして、上げられる形に変換したファイルを用意してくれていました。

ここも自動化できそう

Mixamo には API がありません。ただ、Claude をブラウザで動かせる拡張機能(Claude in Chrome)を使えば、「ファイルを上げて、動きを選んで、ダウンロードする」という画面操作も Claude に任せられそうです。こちらもまだ試していません。

Tripo とあわせてここがつながれば、設定画から動画まで、人は「どっちが良いか」を選ぶだけになります。

4. 動きをドット絵にしてもらう

ここは私からは何も頼んでいません。3D のキャラに動きが付いたところで、Claude が「真横から撮って連番画像にし、ドット絵に縮める」ところまで自分で進めていました。Claude は Blender(3D ソフト)を画面なしで動かせるので、撮影から縮小まで全部やってくれます。

陰影の付け方も、Claude が何通りか試して、アニメ調のもの(右)を選んでいました。

08_04-render-looks.png

伝えたこと

伝えたこと
「ドットが粗くて暗い」

最初に出てきたドット絵(左)を見て、これを伝えたうえで「細かさの候補を並べて」と頼みました。並んだ中から、一番細かいもの(右)を選んでいます。

09_06-pixel-resolution.png

コツ

見た目の判断は「良くして」ではなく、**「候補を同じ大きさで横に並べた画像を作って」**と頼むのが一番効きました。並べてもらえば、絵が描けなくても選ぶことはできます。

5. 剣が曲がる問題を直してもらう

自動で骨を入れると、手に持った剣まで腕の一部として扱われてしまい、振ったときに剣がぐにゃっと曲がりました(左)。

これに気づいたとき、私は「一旦放置でいい」と伝えていました。ところが Claude は、あとで自分から直していました。3D モデルの中から剣の部分を自分で見つけて、手にだけくっつくようにしています(右)。私は並んだ画像を見て OK を出しただけです。

10_05-sword-before-after.png

6. ゲーム画面を組んでもらう

1 回目: 平面に並べたら「なんか違う」

最初は、背景の絵を何枚か重ねて、その上にキャラを置く普通の 2D の作り方でした。動くには動くのですが、奥行きがなくて、目指していた雰囲気(オクトパストラベラーのような HD-2D)とは違いました。

2 回目: 箱庭のように組み直したら一気に良くなった

伝えたこと
「判断に迷うクオリティ。もっとオクトパストラベラーっぽさが欲しい」

これを伝えたら、Claude が「地面を 3D の床にして、木やキャラは板として立てる、箱庭(ジオラマ)の作り方に変える」と提案して、組み直してくれました。

11_fig-2d-vs-diorama.png

同じ素材でも、置き方を変えるだけでここまで変わります。

12_08-2d-vs-diorama.png

キャラが浮いて見える問題

ドット絵のキャラを箱庭に置くと、最初は別の絵を貼ったように浮いていました(左)。

伝えたこと
「キャラが浮いて見える。背景の茂みと同じ画面に並べて、なじむ方を選ばせて」

色の濃さや輪郭の強さを変えた候補を並べてもらい、背景になじむもの(右)を選びました。

13_07-sprite-in-scene.png

影も、Claude が丸い影を足元に置くだけだったのを、太陽の光から落ちる影に変えていました。地面に立っている感じが出ます。

14_09-lighting-before-after.png

7. 会話シーンと戦闘シーン

ここまでの素材がそろえば、シーンを足すのは速かったです。

会話シーンは、Claude が「次は会話シーンを試します」と自分から作り始めたものです。最初に出てきた枠付きの窓(左)は「もっとモダンな感じにしたい」と伝えて、グラデーションの窓(右)に変えてもらっています(修正前の画面は当時の画像が残っていなかったので、同じ場面で再現したものです)。

15_10-talk-before-after.png

戦闘シーンは、敵のゴブリンを同じ流れ(設定画 → 3D → 動き → ドット絵)で追加しました。Tripo で 3D にしたゴブリンはこれです。

16_12-tripo-goblin.png

戦闘の演出も Claude にお任せです。一瞬止まる演出、光、ダメージの数字、画面の揺れなどを、Claude が自分で入れています。

17_11-battle-frames.png

Claude に任せるときのコツ

やってみて、効いたと思うことです。

  • 見た目は比較画像で選ぶ
    • 「良くして」より「候補を並べて」
    • 描けなくても、選ぶことはできます
  • ゴールの雰囲気を作品名で伝える
    • 「オクトパストラベラーっぽく」の一言で、作り方ごと変える提案が出てきました
  • 不満は感覚のまま伝えてよい
    • 「粗くて暗い」「浮いて見える」「モダンな感じにしたい」で十分に通じました

費用

項目 費用
Tripo(3D 化) 月 20 ドルほど
画像生成 ChatGPT Plus の範囲内
Claude Code 普段使っているプランの範囲内
Mixamo 無料

最後まで読んでいただき、ありがとうございました。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?