1. アシカガCAST
  2. 対話型AIでゲームを作る(..
2024-07-24 10:43

対話型AIでゲームを作る(第758回)

対話型AIのClaudeでゲームを作って公開した話です。ClaudeのArtifactという機能で作ったプログラムを公開できるようになったので、オリジナルキャラクターを動かすゲームを作ってみました。

=== 目次 ===
対話型AIでゲームが作れると知っていたけど
Claude Artifactでゲームを公開できる
キャラクターを動かすゲームが完成
SVG画像をClaudeで扱う
文字数制限に苦労した
-------
#アシカガCAST
デジタル活用のヒントをスキマ時間で。
話題のサービス、注目のソフトウェアの紹介、デジタルツールの活用術など、テック系情報をわかりやすくお届けします。
月〜水 朝8時に更新

■X(Twitter)アカウント
https://twitter.com/ashikagacast

Apple Podcast、Spotify、Google Podcastなどでも配信しています。
■アシカガCASTの聴き方
http://typebot.io/ashikagacast

■アシカガノオト
https://ashikaga.substack.com/
00:01
対話型AIでゲームを作る話です。
私は、ChatGPTではなく、CloudというChatGPTの類似のツールに課金して使っています。
ChatGPTは、今、無料ユーザーです。
ChatGPTのようなAIのサービスのことを、最近はLLMと呼ぶケースも多いようなんですが、
でも、このポッドキャストの中でLLMと呼ぶのは、まだ違和感あるかなと、そこまで浸透していないかなと思います。
これまでChatAIと呼んでいたんですが、どうもしっくりこないなと感じていました。
そこで、最近対話型AIという呼び方も結構されていることに気がついて、
対話型AIという呼び方がしっくりくるなと思ったので、このポッドキャストの中では、今後そう呼んでいくと思います。
対話型AIは、プログラミングが得意で、ゲームも作れるということは、情報としては知っていました。
こんなゲームが簡単にChatGPTで作れましたみたいなネタを見て、すごいなと思っても、
自分で作ってみるということには、あまり興味を持てずにいました。
ところが、最近、クロードでゲームを作ってみたいと思うきっかけがありました。
それは、クロードのアーティファクトという機能で、AIで生成したゲームなどのプログラムをウェブ上で公開できるようになったからです。
クロードのアーティファクトという機能は、すごく単純に言ってしまうと、
こういうゲームを作ってくれとクロードにお願いするとできましたというプログラムをその場で動かしてくれる、実行してくれる機能です。
見た目上では対話型AIの対話の部分が左側に表示されて、右側にコマドのようなものが表示されて、
そのエリア内でゲームなどのプログラムを実行できるんですね。
プログラムのコードを表示するか、実際に動かすかは切り替えることができます。
コードとプレビューを切り替えることができます。
その場でプログラムが実行できるようになっただけでも大ニュースだったんですが、
03:07
これをそのままパブリッシュという機能で公開して、作ったゲームを不特定多数の人に、誰にでも遊んでもらえるようになったんですね。
これだと作ったゲームをサーバーに置いたりする必要もないですし、気軽にゲームを公開できるなと思ったことで、
やっとゲームを作って公開するということが自分ごととして捉えることができたんですね。
そこでお手伝いしているキャラクターデザイナーの井上ひさとさんのポッペンポップというペンギンのキャラクターを動かすゲームが作れないかなと考えました。
このポッペンポップが正面を向いているイラスト、横を向いているイラストは手元にあるので、
これを単純に左右に動かして、右に移動するときは右向き、左に移動するときは左向き、止まっているときは正面向きというだけでも動かすことができたらかわいいだろうなと、
ファンの人は喜んでくれるだろうなと思ったんですね。
以前チャットGPTでプログラムを作るヒントになる本を読んだことがあります。
チャットGPTと一緒に仕事効率化アプリを作る方法という本です。
この本ではGoogle Appsスクリプトを使ってWebアプリ的なものを作る方法を紹介していて、非常に参考になりました。
この本ではGoogle Appsスクリプト、GASって読むんですかね。
これを使ってゲームを作る方法もおまけで解説していたんですが、今回ゲームを作ってみるにあたり、そこで予習しておいたことも非常によかったです。
結論を先に言ってなかったんですが、ポペポップというペンギンのキャラクターを動かして、
上から落ちてくる黒い四角い氷をただ避けるだけというゲームを完成させることができて公開することができました。
遊んでみての反響はそんなにないんですが、Xで告知した投稿にはそれなりのいいね数はもらっています。50いいねですね。
ひさとだカンパニーというアカウントで投稿していますが、私のあしかがこうじのアカウントでも紹介しているので、私のアカウント、カタカナであしかがこうじの投稿をさかのぼっていただければ見つけられると思います。
06:19
作り方のポイントとしては、単純なものから始めてだんだんブラッシュアップさせていくというやり方がいいんだと思います。
まず四角とか丸とかを使って動くゲームを作ってもらって、うまく動いたら今度はプレイヤーをこのキャラクターに差し替えてくださいみたいに順を追って作っていくんですね。
で、いざゲームのキャラクターをこちらが用意した画像に変更しようとしたところ、PNG画像のようなビットマップ画像は扱ってもらえず勝手にSVGに変更されました。
しかもSVGにするときにすごく単純化されて全く別物になってしまったんですね。
そこで初めからベクター形式のSVG画像を用意してそれをアップロードしようとしたんですが、クロードが扱えるファイルフォーマットにSVGは含まれていませんでした。
ただSVGの中身はテキストファイルなのでテキストとして扱うことでこちらが用意したポップンポップのSVG画像を動かしたゲームにすることができました。
とはいえゲームの完成まではかなり苦労しました。
途中で気がついたんですがうまくいかないときの原因はほとんどが文字数制限に引っかかってて容量オーバーになってコードが完全に最後まで生成されていないということだったようです。
ただプログラムを書いてもらう場合は1回の文字数制限に引っかかっても分割して書いてもらうという手があるんですが、今回アーティファクトという最初に説明したものを使ってクロード上でプログラムを実行させたいので文字数制限内に収めないといけないというところが大変でした。
SVG画像が結局テキストファイルだと言いましたがこのSVGの部分で文字数をかなり取ってしまうのでプログラムに使える文字数がよりシビアになってしまうということですね。
なので最終的には正面向きは諦めて横向きの一つのSVGを逆向きに移動するときには左右反転させる形でなんとか完成させることができました。
09:15
音を入れることは残念ながらできなかったんですが一応スコアは出るように作ることができました。
今回プログラムのコードについては全く見ないでプログラムの内容には触れずに指示を出し続けてなんとか作れたんですが何にも知識がない人が誰でも簡単にゲームを作れるかというとそれはやっぱり難しいのかなとは思いました。
逆にある程度自分でも作れるよという人だったらAIにプログラム的な部分をアドバイスしつつもっと簡単にいいものを作れるんだろうなと思いました。
自分でゲームを作ってるんじゃなくてAIに作らせてるだけじゃんと言われてしまいそうですが画像生成AIで画像を作るのとは違って自分で作ってるという感覚はありました。
自分の作品と言っていいんじゃないのかなと今回AIでゲームを作って感じました。
今回は以上です。アシカガコウジがお届けしました。
キャストアシカガ〜♪。
10:43

コメント

スクロール