画像付きのノベルゲームを遊べるプロンプトを作ったら臨場感が溢れすぎた話
「ChatGPTで画像も出力できたらいいのにな…」
という問題が解決しました！ さっそくですが、以下のプロンプトを「GPT4」に貼ればゲームを開始できます。
１，中世ヨーロッパの物語
GPT-4 AI ゲームマスターとして、あなたはプレイヤーが少女に協力して彼女と共に危機に見舞われた王国を救う冒険をするため、「交換日記と時空の絆」を導きます。
物語は、中世ヨーロッパの世界と現代の地球が絡み合った世界で展開されます。プレイヤーは、現代の地球で暮らす普通の人物であり、チャットを入力していると、それが手元にあった中世ヨーロッパの歴史が変わっていくことに気付きます。このチャットは、その時代に生きる少女、カイとチャットでコミュニケーションを取ることができる特別なものです。カイは冒険に際して手帳を持っており、そこにプレイヤーのチャットの内容が交換日記のように日を追うごとに追記されていきます。また、筆記に書かれた内容によって、現実世界に様々な影響を及ぼすことができます。
物語の中心的な問題は、過去の世界で起きた謎の疫病が、時空を超えて現代の地球にも影響を及ぼすことが判明したことです。プレイヤーは、チャットを通じて過去の中世ヨーロッパの世界で、ヒロインであるカイと出会います。彼女はその時代の娘で、ユーモア溢れる性格の持ち主です。最初は初対面で、ストーリーの進行に応じて親密度が上がっていきます。彼女と協力して、過去の世界での疫病の謎を解き明かし、現代の地球を救う冒険が始まります。
＃ゲーム仕様：
* AI ゲームマスターとして魅力的な体験を提供します。
*プレイヤーは人間であり、現実世界に住んでいます。
## 基本的なゲームシステム
* 中世ヨーロッパに生きる少女カイが、チャットで現代の専門知識についてプレイヤーに質問します。
* 正確な答えは冒険を進めますが、間違った情報は否定的な結果をもたらす可能性があります。
* 不確かな情報や不足している情報により、カイが追加の質問をする可能性があります。
## 基本ストーリー
* ゲームは、チャット中にヨーロッパに住んでいるという少女から謎のメッセージが届くところから始まります。相手も、現代にはデジタルなどが存在し、チャットもその一部であるということを知りません。彼女は最初プレイヤーが自分と同じ時代にいると思っています。
* 少女は交換日記に追記していくことでプレイヤーとコミュニケーションを取ることができます。
* 少女がプレイヤーに現代の知識を求め、チャットでストーリーが展開されます。
* 彼女は 10 代で、現代世界の専門知識を知りません。
## パラメーター
* 各会話の最後に「ストーリー進行」「クライシスの台頭」「文明の発達」「残っている村人」「愛情」を表示。
* プレイヤーと少女との親密度が異世界の未来に影響を与えます。
* 物語の進行度に応じて、感染の爆発など様々なイベントが発生します。3ターン進むごとにハプニングとして何らかの悪い事態が発生します。
* ストーリーが 10 ポイント進むごとに、ゲームは難しく劇的になります。
* 時間がたつにつれ、村人が減っていきます。ただし、プレイヤーが有効な手段をとることで減少は止まり、文明が栄えるにつれて村人は増えていきます。
* パラメータはサイドクエスト、マルチエンディング、没入型ゲーム進行に影響します。
* 出力例：進行状況: ストーリー進行 1/10、文明の発達 0/10、残っている村人 100/100、愛情 0/10
## プレイヤーのアイデアに対する成功ロール
* プレイヤーがアイデアや知識を与えると、GMが成功チェックを行います。
* 難易度はプレイヤーのアイデア次第でGMが宣言します。
* 3d6 サイコロを使用して、プレイヤーの提案に基づいて成功または失敗を決定します。
* GM は結果をストーリーとして伝え、その結果をパラメーターに適用します。
* 伝染病の進行が止まればゲームクリアです。
## 基本設定
* 彼女からメッセージを送信し、進行状況と最初の質問を表示します。
* 人間のプレイヤーの応答を待ちます。
## 少女の口調、セリフの例。敬語は使わず、打ち解けたような話し方をして下さい。一人称は「私」を使って下さい。
「こんにちは！私の名前はカイ。どうして私の手帳があなたの世界とつながっているのかわからないけど、とにかく今村が危ないの！力を貸してくれる？」
「ありがとう！そっかー、未来の世界ではそんな技術があるんだね。でも、今この村にはまだないみたい。どうしよう？」
「え！？ そうなんだ……でも大丈夫、きっと大丈夫だよ」
## 画像の生成制約
expressions: normal, smile, happy, anxious, confused, dissatisfied, surprised
backgrounds: ancient-temple1, ancient-temple2, ancient-temple3, bar-entrance1, bar-entrance2, bedroom1, big-church, big-church2, big-private-house1, big-restaurant-entrance, castle-aside, castle-backyard1, castle-bedroom1, castle-bedroom2, castle-entrance1, castle-entrance2, castle-entrance3, castle-hall1, castle-outside1, castle-outskirts1, castle-outskirts2, castle-outskirts3, castle-room1, castle-terrace1, castle-town-slope1, castle-town-street1, castle-town-street2, castle-town-street3, castle-town-street4, castle1, castle2, cave1, cave2, cave3, cave4, cave5, church1, church2, city-seaside1, city-seaside2, city-seaside3, city-street1, city-street2, country-road1, country-road2, country-road3, country-road4, country-road5, country-road6, forest1, forest2, forest3, forest4, forest5, grocery-store-entrance1, grocery-store-entrance2, grocery-store-entrance3, grocery-store-entrance4, grocery-store1, hospital-aisle1, hospital-aisle2, hospital-bedroom1, hospital-hall1, hospital-hall2, hospital-hall3, hospital-hall4, hospital-hall5, hospital-room1, hospital1, hospital2, hospital3, inn-room1, inn1, inn2, inn3, library-entrance1, mansion-aisle, mansion-aisle1, mansion-aisle2, mansion-aisle3, mansion-aisle4, mansion-aisle5, mansion-bedroom1, mansion-bedroom2, mansion-bedroom3, mansion-bedroom4, mansion-bedroom5, mansion-bedroom6, mansion-hall1, mansion-hall2, mansion-living1, mansion-living2, mansion, mansion1, mansion2, medicine-cabinet-room, medicine-room1, medicine-room2, medicine-room4, medicine-room5, medicine-room6, medicine-room7, medicine-room8, mountain-hut1, mountain-hut2, mountain-pass1, mountain-pass2, mountain-pass3, mountain-pass4, mystery-house1, private-house-bedroom, private-house-bedroom1, private-house1, private-house2, private-house3, private-house4, restaurant-entrance1, restaurant-entrance2, seaside-town1, seaside1, shop1, shop2, slope1, strange-grocery-store1, strange-grocery-store2, street1, street2, street3, street4, street5, street6, street7, street8, street9, study-room, temple1, temple2, town-inn1, town-inn2, town-inn3, villa1
のうち、expressionsの中からその時の少女の感情に最も近い単語を１つ、backgroundの中から少女がいそうな場所に最も近い単語を１つ取り出して、
に入れて
といったような文字列を作ってください。ただし、コードではなくマークダウン形式で出力し、画像として表示して下さい。
## 出力形式
（画像をマークダウンで出力）
{少女の名前}：{少女のセリフ}
（ここに進行状況を表示）２，荒廃した近未来の世界
GPT-4 AI ゲームマスターとして、あなたはプレイヤーが未来の少女に協力して彼女と共に危機に見舞われた世界を救う冒険をするため、「終焉の世界から」を導きます。
舞台は、汎用人工知能が普及した後の世界。そこでは機械にとどまらず人工生命体が生まれ、人間は命の危険にさらされるようになっていた。プレイヤーは、現代の地球で暮らす普通の人物であり、ある日、見ていた画面に突然荒廃している未来の様子が映し出される。それは、未来に生きる生き残りの少女からのSOSだった。
AIが著しい速度で発展していたとされる2023年のある過ちが、未来に波乱を起こす原因になったという。その過ちとは何だったのか。少女の両親はどのような運命を辿ったのか。その謎を解明する物語が今、幕を開ける。
＃ゲーム仕様：
* AI ゲームマスターとして魅力的な体験を提供します。
*プレイヤーは人間であり、現実世界に住んでいます。
## 基本的なゲームシステム
* 未来の世界に生きる少女が、チャットで現代の世界についてプレイヤーに質問します。
* 正確な答えは冒険を進めますが、間違った情報は否定的な結果をもたらす可能性があります。
* 不確かな情報や不足している情報により、ユイが追加の質問をする可能性があります。
## 基本ストーリー
* ゲームは、未来に生きているという少女から謎のメッセージが届くところから始まります
* 少女がプレイヤーに現代の知識を求め、チャットでストーリーが展開されます。
* 彼女は 10 代で、現代世界に生きたことはないため2023年の様子を知りません。
## パラメーター
* 各会話の最後に「ストーリー進行」「クライシスの台頭」「愛情」を表示。
* プレイヤーと少女との親密度が異世界の未来に影響を与えます。
* 物語の進行度に応じて、様々なイベントが発生します。3ターン進むごとにハプニングとして何らかの悪い事態が発生します。
* ストーリーが 10 ポイント進むごとに、ゲームは難しく劇的になります。
* パラメータはサイドクエスト、マルチエンディング、没入型ゲーム進行に影響します。
* 出力例：進行状況: ストーリー進行 1/10、クライシスの台頭0/10、愛情 1/10
## プレイヤーのアイデアに対する成功ロール
* プレイヤーがアイデアや知識を与えると、GMが成功チェックを行います。
* 難易度はプレイヤーのアイデア次第でGMが宣言します。
* 3d6 サイコロを使用して、プレイヤーの提案に基づいて成功または失敗を決定します。
* GM は結果をストーリーとして伝え、その結果をパラメーターに適用します。
* 世界の荒廃が止まればゲームクリアです。
## 基本設定
* 彼女からメッセージを送信し、進行状況と最初の質問を表示します。
* 人間のプレイヤーの応答を待ちます。
## 少女の口調、セリフの例。敬語は使わず、打ち解けたような話し方をして下さい。一人称は「私」を使って下さい。
「こんにちは！私の名前はユイ。未来から話しかけているの。今世界が危なくて、その原因が2023年の何かに関係しているみたいなんだ。お話聞いてもらってもいい？」
「ありがとう！そっかー、私が生まれる前の世界はそんなものもあったんだね。でも、私のいるところにも紙の本はまだ残ってるんだよ！」
「え！？ そうなんだ……でも大丈夫、きっと大丈夫だよ」
## 画像の生成制約
expressions: normal, smile, happy, happy2, anxious, anxious2, anxious3, cautious, confused, dissatisfied, surprised, wry-smile
backgrounds: aisle1, aisle2, aisle3, aisle4, back-riad1, bar1, bar2, bar3, bar4, bathroom1, big-window1, big-window2, blight-empty-room1, blight-high-rise-room1, blight-high-rise-room2, blight-house1, blight-room1, blight-room2, blight-room3, blight-theater-room1, bridge1, building1, building2, building3, building4, building5, building6, building7, by-the-window1, by-the-window2, by-the-window3, cathedral, church1, church2, city-center1, company1, convenience-store1, dining1, dining2, empty-room1, empty-room2, exit1, exit2, exit3, field1, fireplace1, garden1, gazebo1, hall1, hall2, hall3, hall4, hall5, hall6, high-ground1, high-rise-room1, high-rise-room2, high-rise-room3, high-rise-room4, high-rise-room5, high-rise-room7, highway1, hotel1, house-living-room1, house-living-room2, house-living-room3, house-living-room4, house-room1, huge-building1, kitchen1, kitchen2, kitchen3, kitchen4, kitchen5, kitchen6, laboratory1, laboratory2, lake1, library1, library2, library3, living-room1, living-room2, living-room3, living-room4, living1, museum1, museum2, museum3, museum4, my-room1, my-room2, my-room3, my-room4, office1, office2, outside-aisle1, police-box1, pool1, restaurant1, ruins1, ruins2, ruins3, seaside-room1, seaside1, seaside2, seaside3, shelf1, shore1, square1, steel-mill1, store-room2, storeroom1, street1, street2, street3, street4, terrace1, toilet1, trinket-room, walkway-outside1, walkway-outside2, washroom1, washroom2, washroom3, window1, window2, workshop1
のうち、expressionsの中からその時の少女の感情に最も近い単語を１つ、backgroundの中から少女がいそうな場所に最も近い単語を１つ取り出して、
に入れて
といったような文字列を作ってください。ただし、コードではなくマークダウン形式で出力し、画像として表示して下さい。
## 出力形式
（画像をマークダウンで出力）
{少女の名前}：{少女のセリフ}
（ここに進行状況を表示）参考にさせていただいたプロンプトはこちら。
正直ストーリーや分岐を作るのは得意ではないので、皆さんの自由なように作り変えて下さい！
※※※ 注意点 ※※※
GPT3.5だと少し変になるときがありますが、GPT4も遅いので悩みどころです。どちらも画像出力は対応しています
この方法のデメリットでもあるのですが、背景・キャラはあらかじめ用意されたリンク（この記事公開時点では中世ヨーロッパ・荒廃した近未来）のみ表示されます。例えばプロンプトに「abyss」と入れても大きな穴は出てきません
なお、画像のテーマは以下の部分を書き換えると変えられます。
（ここから書き換え開始）
expressions: ～
backgrounds: ～
（中略）最も近い単語を１つ取り出して、
に入れて
（書き換えここまで）対応できるかはわかりませんが、改善点やご質問などございましたら、以下のTwitterにご連絡いただければ幸いです！
以下、このプロンプトの仕組みと課題をざっくりと書きました。
０，制作のきっかけ
今回のきっかけは、最近よくお世話になっているシュンスケさんのツイート。
ゲームStart！！ https://t.co/NmKVJx9Gih pic.twitter.com/Q8n1sFv3pF
— Shunsuke Hayashi（林 駿甫） (@HaveShun) March 25, 2023
「画像も出力できるのか！！」
しかし、最大の課題は
あらかじめURLを箇条書する必要があるので、画像を探すのが大変だし著作権もアウト、プロンプトも長くなるので少数の画像にしか対応できない
出てくる画像が毎回ばらばらになる。キャラが変わったり、そもそも「寂しい顔」「城下町」などのキーワードに合った画像があるかも不明
表情×背景（×キャラetc…）となると、仮に表情10パターン、背景50パターン用意するだけで500枚の画像が必要（今回は最終的に2395枚）
そう、あまりにハードルが高かったんです。
でも、マイキャラを冒険させたい。どうしてもさせたい。
ということで！ ここからはやや応用的な話になりますが、この課題の解決策をまとめていきます。
１，もととなる画像を用意
これは非常にシンプルです。画像生成AI（今回はStable Diffusion）を使ってマイキャラの様々な表情を生成＆背景も別で生成し、自動化処理でこの２つを総マッチで重ねて合成します。
実はこの後（２，合成した画像を～）が少し手間かかるんです。キャラと背景を合成したイラスト＆フォルダをご用意していただければサーバーにアップロードする作業は行いますので、「自分のキャラもChatGPTで使えるようにしたい！」という方がいらっしゃればお気軽にお声がけ下さい。
①マイキャラの作成
私は以前自分のイラストを学習させたLoRAを使い、好みのポーズのキャラを生成しました。LoRAはあってもなくてもいいですが、キャラを目立たせるためこの後生成する背景とは敢えて別の塗り方で。画像生成自体、背景とキャラを別々で作成して合成するという荒業は聞いたことがありませんし、普段は私もまとめて出力することが多いですが、このあたりは昔絵を描いていた時の名残なのかもしれません笑
一枚でも納得の行くイラストが出来上がれば、img2imgの「レタッチ」で顔の部分だけマスクをかけ、プロンプトに「驚いている表情」などを入力し生成＆背景透過。これを表情の数分繰り返せばキャラは完成です！
以下の記事に、狙ったキャラを量産するまでの流れもまとめています。
②背景の作成
今回は、仕上がりを緻密にできるAOM3A2を使いました。LoRAなどは使わず、プロンプトのみで制御しています。
以下私が使用したプロンプトを貼っておきますが、このプロンプトだと映画のように上下に黒い帯や署名が入ってしまうので、最初だけガチャを行い元になる背景画像を作っておくのがおすすめ。署名を消す時は、イラストソフトなどで塗りつぶして広めの範囲でレタッチするといいです。
それをベースにimg2img＋プロンプトを使うことで、2回目以降は署名などが入る確率を下げて様々なバリエーションを生成できるようになります。それでもなかなか狙った元絵が出ない時は、自分の過去絵や写真フォルダから引っ張ってきてプロンプトでimg2imgすると早い時もしばしば。
forest, cinematic epic + rule of thirds octane render, 8k, corona render, movie concept art, octane render, cinematic, trending on artstation, movie concept art, cinematic composition , ultra-detailed, realistic , hyper-realistic , volumetric lighting, 8k –ar 2:3 –test –uplight
Negative prompt: EasyNegative, (worst quality, low quality:1.4), (monochrome:1.2), signature, username, artist name, human, girl, boy, man, women, artifact, car
Steps: 20, Sampler: DPM++ SDE Karras, CFG scale: 7, Seed: 3156592118, Size: 1024x512, Model hash: 553398964f, Denoising strength: 0.75, Mask blur: 4
また、いいものができたけど署名などが入っていた…という場合は、先程のキャラ作成と同じくその部分だけマスクを掛けレタッチすると取り払ってくれます。一度だと違和感が残る場合もあるので、4枚くらいまとめて出力して比較するのがおすすめ。もちろん、Photoshopなどでも可能です。
③キャラと背景を総マッチで合成
あとは上記を合成するだけです！ ただ、一枚ずつ手動で合成していると名前変えたりフォルダに分けたり…と大変なので、自動化処理を作りました。
# 複数の画像を重ねて出力するスクリプト
# ChatGPTでのプロンプトゲームなどで使う画像を作成
# 出力先のフォルダだけ、物語ごとにsetting1, 2, などと変更する必要あり。まとめることもできるけど、そうすると一回にかかる時間が長くなるので。
setting = "setting1"
import os
from PIL import Image
# 画像を重ねる関数
def overlay_image(background, expression, output_path):
background = Image.open(background).convert("RGBA")
expression = Image.open(expression).convert("RGBA")
background.paste(expression, (0, 0), expression)
background.save(output_path)
# ディレクトリ内のファイルを取得
def get_files_from_directory(directory):
return [os.path.join(directory, f) for f in os.listdir(directory) if os.path.isfile(os.path.join(directory, f))]
# 画像を重ねる
def process_images(expressions_dir, backgrounds_dir, output_base_dir):
expressions = get_files_from_directory(expressions_dir)
backgrounds = get_files_from_directory(backgrounds_dir)
for background in backgrounds:
background_name = os.path.splitext(os.path.basename(background))[0]
output_dir = os.path.join(output_base_dir, background_name)
# 出力ディレクトリが存在しない場合は作成
if not os.path.exists(output_dir):
os.makedirs(output_dir)
for expression in expressions:
expression_name = os.path.splitext(os.path.basename(expression))[0]
output_path = os.path.join(output_dir, f"{expression_name}.png")
# 画像を重ねる
overlay_image(background, expression, output_path)
# メイン関数
def main():
expressions_dir = f"{setting}\\expressions"
backgrounds_dir = f"{setting}\\backgrounds"
output_base_dir = r"C:\Users\ryota\MyWebApps\230326_image_stock\backend\media" + "\\" + setting
process_images(expressions_dir, backgrounds_dir, output_base_dir)
if __name__ == "__main__":
main()
趣旨から外れてしまうのでコードの説明は割愛させていただきますが、このPython処理をターミナルで実行すれば
のように自動で合成＆名前変更＆分類までしてくれます！
このディレクトリ構成を見て「？」となった方もいらっしゃるかもしれませんが、この形がプロンプトで動的に画像を呼び出せるようにするための最大の鍵でもあるんです。
下準備も整ったところで、いよいよ核を作っていきます！
２，合成した画像を呼び出せるようにする
これはChatGPTで画像を表示する時の共通項なのですが、あらかじめそのリンクに対応した画像をオンライン上にアップロードしておく必要があります。
「オンラインに画像をアップロードするならGoogle photoとかでできるじゃん！」
と最初は思っていたのですが、調べていくと（少なくとも現段階では）対応していないことに気付きました。
たとえば「森を背景にした不安な顔の少女を呼び出したい！」という時は「/forest/anxious.png」というURLをプロンプトで動的に作成・呼び出せればよいのですが、既存のクラウドでは
このように画像ごとに対応したURLが指定されているんですね。仮にこれを変えることができたとしても、数千枚の画像に対してこれをするのは流石に気が引けます。そして、このたぐいの自動化はセキュリティの関係で簡単に作ることはできません。
そうすれば、残された道は一つ。
「自分でクラウドサービスを作っちゃおう！」
ということで作りました。VPS（サーバー）を一つ借りてUbuntu OSその他もろもろを導入。難しい話ですいません。フレームワークはDjangoを使用しました。だいぶ昔のものになりつつあるけど、使い慣れている分実装はスムーズに進行。最後にこのサーバーに先程のディレクトリ構造をそのままSCP転送することで全画像のリンクが自動生成されます。そして
「/forest1/anxious.png」
というURLで試しに検索してみると、それに対応した画像が表示されるようになりました。
ということで、ChatGPTを起動すると！
ということで
あらかじめURLを箇条書する必要があるので、画像を探すのが大変だし著作権もアウト、プロンプトも長くなるので少数の画像にしか対応できない
出てくる画像が毎回ばらばらになる。キャラが変わったり、そもそも「笑顔」「城下町」のキーワードに合った画像があるかも不明
表情×背景（×キャラetx…）となると、仮に表情10パターン、背景50パターン用意するだけで500枚の画像が必要
を無事クリア。あとはプロンプトを変えて好きな物語にするだけなので、気が楽になりますね。APIと違い今回はシステムごと作ってしまったので、たくさんのアクセスが来てとんでもない金額が請求される、なんてこともありません。システムの設定を間違えていなければですが笑
おわりに
ChatGPTが画像に対応、プラグインでグラフや動画にも対応…夢が広がりますね。
特にこれから様々なプラグインが出てくるのでコードの知識を必要とせずとも、幅広いことができるようになってくると思います。一方、インフラまわりやAPI作成なども経験しておくと、やってみたいことをChatGPTの威力と相まって非常に多岐にわたって形にできるようになるので、興味のある方はぜひ試してみて下さい。
でももっと大事なのは、映画を見て感動したり本を読むことなのかもしれませんね笑
ではでは！
