WEBを使って何ができるか考える。うぇぶねる

【AI】chatGPTを使ったオリジナルステージ作成

Widget Area

目次

  1. 概要
  2. 結果結論
  3. ステージ作成の流れ&今回の目標
  4. 参考情報
  5. AIでステージ作成開始
  6. 作成したステージ紹介
  7. 感想
  8. 今後の展開

概要

TIMEVSのステージをAIを使って運営コスト削減を図る。AIを活用したサイト運営を実践します。これまでBGMや一部の画像にはAIサービスを利用していたが、もう一歩先へ踏み込む試みです。

  • 普段からchatGPT plusを使用している。(テキスト作成などがメイン)
  • GPT-5を使用しました。

結果結論

今回の結果としては完全にAIだけではステージ作成できませんでした。ただ、1年くらい前に簡易的に試した時よりは進歩は感じられました。特にステージコードを生成し、バラバラのブロック画像生成、そしてブロック画像を組み合わせて一つのステージとしてカタチにすることができました。ただゲームとしては物足りないのと、ステージデザインもあまり意味のある構成にはできずまだまだ課題があると感じました。引き続きAI研究はしていきたいと思います。

ステージ作成の流れ&今回の目標

ステージ作成の流れ

通常1つのステージを作成には以下の手順を行なっています。

  1. テーマ決め&全体構成作成
  2. ステージの道筋決め-ステージ数値データ作成
  3. ブロックデザイン作成(ブロック画像)
  4. モーションづけ ※ステージによってあったりなかったり
  5. ステージテスト
  6. ステージ公開

目標

今回はAI(chatGPT)にテーマを指示したら「2.ステージの道筋決め-ステージ数値データ作成」と「3.ブロックデザイン作成(ブロック画像)」の工程を自動的に作成するところまでを目標とします。

参考

今回の作成前に以下情報を参照しました。
これらの情報からAIを使ってできることの現状の限界や考え方、作成方法を取り入れました。

AIでステージ作成開始

AI作成の流れ

  1. chatGPTへTIMEVSステージ作成のプロジェクトを作成
  2. chatGPTへ既存データを使った学習
  3. chatGPTからデータを出力
  4. chatGPTへ再学習

chatGPTへTIMEVSステージ作成のプロジェクトを作成

まず最初に行ったのはchatGPT上でプロジェクトの作成とTIMEVSの概要、今回作成するステージについての情報をテキストで伝えました。

chatGPTへ既存データを使った学習

次に行ったのは既存ステージデータを使ったchatGPTの学習です。

以前AIで作成を試みた時(chatGPT GPT-4o)は既存データもほぼなくテキストのみで指示を出したため使える生成データになりませんでした。今回はステージ14まで作成したデータがありますのでこちらを学習させてみました。

  • ステージ数値(ステージのプログラムデータ)
  • ステージマップ(実際のプレイ画面のスクショ)
    └生成するときは数値とブロック画像を元に組み上げた1枚のステージ全体像がわかる画像-確認用とし使用する
  • ステージブロック画像(実際にTIMEVSで使用する画像)
chatGPTへ学習させた内容

chatGPTからデータを出力

学習させた後は実際に出力を行いました。まずはステージ15の「ステージ数値」から行い、その後にテーマ「夏祭り」を伝えてステージマップ、ブロック画像と順を追って生成してもらいました。
かなり時間と工程がかかったので一部を記載します。また後日詳細は記載。
「ステージ数値」は割と早くできましたが、ステージマップとブロック画像は苦戦しました。

<うまくいった点>

・ステージ数値とブロック画像、別々の情報が最終的に1つのステージとして組み合わさる・成り立つことをchatGPTへ伝えられた。(気がする)

うまく生成ができるときは、「ステージ数値」「ブロック画像」「ステージマップ」の3種を一回の生成でそれぞれ出力してくれました。学習をさせていない以前の生成ではステージ数値とブロック画像の概念が伝わっていない様子で何度試してもあまりいい結果にはなりませんでした。

・テーマを伝えるとそれっぽいデザインが出力できた。

まだまだ数が足りないとは感じているがステージ14分でもトーンが既存ステージに近いブロック画像が作成できるようになったと感じた。金魚やスピーカー、提灯など既存にはなかったモチーフもうまく表現できているところをかんがえると指定したテーマから関連しそうなモチーフをchatGPTが選び、採用てきたことが伺える。この流れでいければテーマを指示するだけでデザイン作成も後々いけそうに感じました。

<うまくいかなかった点>

・ブロック画像が1枚1枚出力できずに合体した画像で出力される時があった

原因は不明だが同じプロンプトでも一回の生成で「ステージ数値」「ブロック画像」「ステージマップ」が作れる時と、
1枚に複数のブロック画像が配置された画像が作成される時があり、指示調整では解決できなかった。
そのため、再起動したりしてうまくいくまで何度から同じプロンプトで生成してもらった。
うまくいった時のデータを使用してアップした。

・ステージ数値も完璧にはならなかった

今回は最低限のルールしか伝えていないため「0」の道と「2」のゴール以外は意味が特にない配置の数値データになってしまった。そのため意味のある見た目にはならなかった。一つ一つすべてを指示すればできるかもしれないがそれではAIを使う意味がないため、このあたりも今後の課題となりそうです。

<chatGPTの出力抜粋>

▼ステージ数値読み込み完了時
▼ステージ15出力完了時(うまくいった時)
▼うまくいかなかった時の画像
ステージ16マップが
ご飯の画像になった
ブロック画像が1枚の
画像で生成された
ブロック画像が1枚になる現象が
何度も発生
ステージ15のブロック画像が
1枚の画像で生成された
ステージ16のブロック画像が
1枚の画像で生成された
ステージ17のブロック画像が
1枚の画像で生成された

chatGPTへ再学習

最低限TIMEVSへデータを組み込めるように以下をchatGPTへ伝え再調整してもらいました。

  • 最低限「0」を辿って「2」のゴールへ行けるようにする。

データの最終調整

今回は実験の意味合いが強かったため途中で見切りをつけました。
実際には「ステージ数値」も若干の手動調整を行いアップをしてます。
そのまま、無調整でTIMEVSに組み込むにはまだ時間がかかりそうです。

作成したステージ紹介

今回作成したステージ15〜17はTIMEVSにあげてます。
気になる方はぜひお試しください。

ステージ15
AI_夏祭り

ステージ16
AI_中華街
ステージ17
AI_音楽フェス

感想

結果結論でも書きましたが、1年前にchatGPTでステージ作成を試みた時に比べて、大分おしいと感じるところまでできるようになったと感じました。(自分のAIスキルが足りていたら、すでに人が作るレベルまでいけたかもしれませんが)
もっと学習や調整を繰り返すことで精度が上がるのか?いつかはテーマを指定するだけで、楽しめるステージが自動的に出来上がるようになるか?考えただけでワクワクしますね。

今後の展開

今後はTIMEVS全体の運営からステージ作成、スポンサー集めまでをAIで自動化できないかを考えてます。
先は長そうですがDifyやブラウザ自動操作ツールなどを駆使すれば実現できそうな気もしてます。

TIMEVSをプレイする

実際にAI ChatGPTで作成したステージを触ってみてください。

この記事を書いた人