今回紹介するゲームサンプルコード

こんにちは

自分の世界を形にしてみたい

自分の物語を人に伝えてみたい

ノベルゲームをつくってみたい

でも、形にするのは難しそう

ノベルゲームのツールは難しい、時間がのべかかる

と悩んでいませんか？

今回はAIでノベルゲームを一瞬でつくる方法について紹介します

もちろん自分独自のオリジナリティあるストーリを入れられる作り方なので

ぜひ動画を参考にチャレンジしてください

今回の紹介の流れは、

AIで自動のプログラミングをして、

キャラ作成、背景作成をこないます

また、キャラの大きさや位置調整などノベルゲームの制作ソフトでも

面倒な作業もAIでツールをつくり、かんたんに制作できる方法も

紹介しています

ノベルゲームはティラノビルダーやRenpyなどのビジュアルノベル作成ソフトでつくられることが多いです

しかしビジュアルノベル作成ソフトをAIでプログラミングするとバグが発生しやすいので、今回はHTMLで作成します

はじめに自動プログラミングができる

Google AI Studioのサイトにアクセスします

真ん中のボックスにつくってほしいゲームについて入力します

今回も前回と同じくカンタンにゲームをつくれる「HTML」で生成します

魔法学園のストーリー、ストーリーが分岐することをAIにつたえます

実行ボタンをクリックするとAIがプログラミングをはじめます

プログラミングは3分くらいでおわります

完成したらファイルをダウンロードできます

ダウンロードしたHTMLファイルを実行するとゲームが起動します

ゲーム画面があらわれました

しっかりクリックしてノベルゲームを進めることができます

これをもとに絵を追加していきます

絵をつくるためにChatGPTのサイトに移動しました

一度に同じキャラの絵をつくります

魔法学園のストーリーっぽいキャラ設定を書き、
そして４つのを一度に出力させるために
右下、右上、左下、左上のようにキャラの配置と動きを

詳しくテキストで入力します

また、背景を白色にしないと後でくり抜けないので

必ずテキスト入力します

実行ボタンをクリックするとキャラ作成をおこないます

しっかり同じキャラで４つの動作ができました

しかし魔法学園のキャラっぽくないので

もう一度チャレンジします

何枚かつくったキャラをもとに詳しく服装、髪の色、動作を指定してつくります

魔法学園の少年っぽい画像が完成しました

つづいて物語のためにもう１キャラ作成します

先ほど作成したキャラを加えて、

服装、動作をくわしくテキスト入力して生成します

おなじような雰囲気で新しいキャラが完成しました

続いてゲームに読み込むためにキャラを分割します

背景を削除できるサイトに移動します

背景削除ボタンから絵を読み込むだけで

背景をカットすることができました

つづいて編集ツールからキャラを分割します

大きさを調整して「切り抜き」ボタンをクリックして

ダウンロードボタンから完成した画像をダウンロードします

同じようにもう1キャラも読み込み背景ボタンから背景を削除して

大きさを調整、切り抜き、ダウンロードを4人分おこないます

ダウンロードした絵をさらに調整します

画像編集ができるサイトに移動します

更に調整が必要な絵のみ読み込み調整します

絵を読み込んだら、左の投げなわツールを使って部分削除します

ドラッグで消したい場所を囲みます

「Ctrl＋X」ボタンでカットします

編集が終わったら、普通のファイルと同じように

「Ctrl＋S」ボタンで保存できます

すべて修正がおわったら、次は背景をつくるサイトに移動して

魔法学園の背景をつくります

このサイトはリアルタイムで絵を生成できるサイトです

左下のアイコンから背景を白くしたら

パレットから色をぬっていきます

下のボックスには全体的なイメージをテキスト入力します

しかし、かなりそれっぽいのができません

英語でイメージを伝えます

「side」という言葉を入れて斜め視点になるようにしました

ビジュアルノベルっぽい背景ができました右下からダウンロードして

ここまでつくった絵をつかってビジュアルノベルのプログラムをつくります

Google AI Studioのサイトに移動して、ファイルアップロードのボタンから

キャラ画像、背景画像をアップロードします

テキストで各キャラのファイル名と動きの種類を詳しく説明します

ストーリーについてテキスト入力をした後に生成ボタンをクリックします

生成が終わったのでダウンロードして実行してみます

しっかり、背景とキャラクターがあらわれて、ビジュアルノベルとして

動くゲームが完成しました

ここからは2キャラ登場させたり、ビジュアルノベルならではのストーリー分岐を入れて、１ファイルの小さなゲームではなく、HTML２ファイル以上のゲームをつくる方法を紹介します

ではキャラをもう１キャラくわえるので

ChatGPTのサイトで４パータンの絵をつくるように入力して生成します

キャラの髪の毛の色、雰囲気など特徴を詳しく入力して

右下右上それぞれ笑顔、驚きなど表情も4つ分入力し背景を白色で指定します

しっかり同じキャラで４つ分別々の表情で生成できました

ゲームで使うために、先ほどと同じように背景を透明にするサイトで

背景を透明にします

続いてゲームで使うために保存したファイルを４分割します

次はストーリーの続きに必要な雪の城の背景を生成します

リアルタイム生成サイトに移動して

氷の教会、ファンタジー、「Side」のテキストで

色を塗ります

ビジュアルノベルっぽい背景が完成しました

次はつくった画像をつかいゲームの続きをつくります

Google AI studioのサイトに移動して

先ほど作成したゲームファイルをアップロードして続きをつくるように

AIにつたえます

また、新しい画像ファイルの設定を詳しく伝え、ストーリー設定をくわえ生成します

生成がおわりました

ダウンロードしたファイルを実行します

しっかり動作しました続きとなる次のファイルに物語が進み、

新しいキャラクターが登場しました

しかし、キャラクターが大きすぎたり、少し位置も調整する必要があります

次は普通のノベルゲームツールでもかなり面倒なキャラの位置調整について

AIをつかってツールをつくり、カンタンに位置調整する方法を

紹介します

Google AI StudioでHTMLでファイルを読み込み位置調整するツールを

つくってほしいことをAIにつたえます

こちらのツールはファイルを読み込み修正すると座標を表示する動きです

何度かつくりなおし、この形が安定して動作しました

こちらのファイルはゲームファイルと一緒にブログにアップしています

ノベルゲームでもっとも時間がかかるのがこのキャラ配置と分岐の管理だと思うので、ゲームのプログラムと共に、ぜひ、参考にしてください

変更した設定をコピーしたら、ゲームプログラムを直接書き換えます

AIに変更を頼んでもうまくいきますが、

直接自分で書き換えた方が正確に書き換えることができます

では設定を変更したファイルをゲーム実行して確認します

しっかり大きさや動きが変わりました

バイブコーディングはまだ画像生成に比べるとレベルが高めですが

今後必ず使いやすくなり広まる