見出し画像

対話型AIでゲームを作る

ポッドキャスト「アシカガCAST」第758回の要約記事です。

なお、Claude Artifactでオリジナルキャラクターを動かすゲームをどんな感じで作って行ったかの詳細は以下の記事で紹介しています。

対話型AIでゲームが作れると知っていたけど

わたしは現在、ChatGPTは無料版を使用し、Claudeには課金して利用しています。なお、これらのサービスのことを、最近はLLMと呼ぶケースも多いようですが、対話型AIという呼び方も結構されていることに気がつきました。この呼び名はしっくりくると思ったので、今後この言い方を使っていきたいと考えています。

ChatGPTやClaudeなどの対話型AIがプログラミングを得意とし、ゲームも作れることは情報としては知っていました。しかし、自分で実際に作ってみることには、あまり興味を持てずにいました。

Claude Artifactでゲームを公開できるように

最近、ClaudeのArtifact機能によって、AIで生成したゲームなどのプログラムをウェブ上で公開できるようになりました。Artifactという機能は、Claudeが生成したプログラムをその場で実行してくれる機能で、対話の右側にの小窓で表示されます。

右側に表示される小窓がArtifactでプレビューとコードを切り替え表示できる

このArtifact機能の登場だけでも大ニュースだったのですが、これをPublishという機能で公開して、作ったゲームを不特定多数の人に遊んでもらえるようになったのです。

サーバーを用意する必要もなく、気軽にゲームを公開できるようになったことで、やっとで自分ごとに捉えることができ興味を持ちました。

オリジナルキャラクターを動かすゲームが完成

そこで、キャラクターデザイナーの井上・ヒサトさんのキャラクター「ポッペンポップ」を動かすゲームの制作に挑戦しました。最終的に、ポッペンポップを操作して上から落ちてくる黒い四角い氷を避けるゲームを完成させ、公開することができました。

ゲーム制作のポイントは、単純なものから始めて徐々にブラッシュアップしていくことです。まず四角や丸などを使ってゲームの原形を作り、その後キャラクターを差し替えるなど、段階的に進めていきました。

SVG画像をClaudeで扱う方法

キャラクターの画像をゲームに組み込む際、PNG画像などのビットマップ形式はそのまま使用できず、勝手にSVG形式に変換されてしまいました。しかも変換の際に単純化されて全くの別物になってしまいました。

左上のキャラクターにしたかったのに単純な形に変えられました

そこで、キャラクターをSVG画像で用意してClaudeに読み込ませようとしたのですが、拡張子svgのファイルには対応していませんでした。しかし、SVGの中身はテキストファイルなので、そのままプロンプトにペーストするか、テキスト形式で読み込ませることができます。

苦労したのは文字数制限

ゲーム完成までの最大の障害は、Claudeの文字数制限でした。ただプログラムを書いてもらう場合には、1回の文字数制限に引っかかっても分割して書いてもらうという手があります。しかし今回はArtifactを使ってClaude上でプログラムを実行させたいので、文字数制限内に収めないといけないというところが大変でした。

今回のケースとしては、SVG画像のテキストデータも文字数を消費するため、プログラムに使える文字数がさらに制限されます。そのため、キャラクターの正面向きの画像は諦めて、横向きのSVG画像1枚だけを利用し、反対向きの場合は左右反転させることで、なんとか完成にこぎつけました。音は入れられませんでしたが、スコア表示機能は実装できました。

なんとかゲームを完成させたときの画面

以下のリンクからゲームをプレイできます。

AIで作ったゲームも自分の作品?

今回プログラムの内容には触れずに指示を出し続けて作成しましたが、この辺の知識がゼロの人が簡単にゲームを作るのは難しいかもしれません。一方で、ある程度プログラミングの知識がある人なら、AIと協力してより簡単に良いものが作れるはずです。

AIにゲームを作らせただけというご指摘もあるかもしれませんが、画像生成AIで画像を作るのとは異なり、自分で作っているという感覚はありました。AIを使って作ったゲームも自分の作品と言っていいんじゃないかと個人的には感じています。

こちらの記事でどうやって作ったかの詳細を紹介しています↓


X(Twitter)でも情報発信しています

X(Twitter)でもデジタルツールやWebサービスを中心に情報発信しています。

ポッドキャスト「アシカガCAST」

「アシカガCAST」では、デジタル活用のヒントをスキマ時間で聴けるポッドキャストを月〜水の朝8時に配信しています。

https://typebot.io/ashikagacast

↑アシカガCASTを聴く方法、エピソードリストなどを教えてくれるチャットボットです。

Apple PodcastsYouTube MusicAmazon MusicSpotifyGoogle Podcastsなどで聴けますので、耳が空いているときにチェックしていただけるとうれしいです。

Audiobook.jpの聴き放題YouTubeでもお聴きいただけます。

いいなと思ったら応援しよう!

アシカガコウジ | デジタル活用ポッドキャスト
いただいたサポートはnoteの執筆、ポッドキャスト活動などのプラスとなるものに有意義に使わせていただきます。ちなみに「スキ」を押すと出てくるイラストは4種類あります。

この記事が参加している募集