AIでノベルゲーム爆速生成方法 & 超簡単AIプログラミング入門と初心者向けゲーム制作

自分の世界をゲームにしてみたい

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

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

１．はじめに自動プログラミングができる、Google AI Studioのサイトにアクセスします

２．次のとおり、真ん中のボックスにつくってほしいゲームについて入力します

・「HTMLでビジュアルノベルゲームのプログラミングをする」

・「魔法学園のストーリー」「分岐ポイントを入れること」「HTML１つのファイルにまとめること」

３．「RUN」ボタンをクリックするとプログラムの生成がはじまります

１．プログラムが生成されました

２．右上のダウンロードボタンからHTMLファイルをダウンロードできます

・ダウンロードしたHTMLファイルを実行するとゲームがはじまります

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

１．ChatGPTのサイトに移動します

２．イラストをつくるため次のようにテキストを入力します
・「カラフルでモフモフした大きな魔法使いの帽子をかぶっている」
・「ブカブカな魔法の服をきている」
・「右上は普通の笑顔」「右下驚きのポーズ」「左上考えポーズ」「左下どや顔ポーズ」

３．右下の矢印ボタンをクリックしてイラストを生成します

１．今までのイラストをアップします

２．次のテキストで生成します
「タッチはこんな感じだけど、
帽子は赤いリボンと黒帽子。
服は少し派手な大魔導士風の大き目な服、髪は長めで一部が紫、大き目な眼鏡をかけている。
右上は普通の笑顔の上半身ポーズ、左上は考えポーズ、右下は驚きポーズ、左下はどや顔ポーズのスプライトシートを生成して、背景は白色で。」

１．生成したイラストをアップします

２．次のテキストで生成します

「同じくやわらかいタッチで
帽子はなく、服は青色と金色の派手な大魔導士風の大き目な服、
髪はボブカットで黒色で一部が茶色、
眼鏡はしていない。右上は普通の笑顔の上半身、左上は考えポーズ、右下は驚きポーズ、左下はどや顔ポーズのスプライトシートを生成して、背景は白色で」

１．My Editのサイトにアクセスします

２．「編集ツール」→「切り抜き」ボタンをクリックして画像切り抜き画面にアクセスします

３．「ファイルを選択」ボタンをクリックして、生成したイラストをアップロードします

・イラストの背景が透明になりました

１．「編集ツール」をクリックします

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

３．ダウンロードボタンからイラストのダウンロードをキャラクター分（４回）くりかえします

１．同じようにもう1キャラも「背景ボタン」から背景を削除します

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

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

・生成したイラストを読み込みます

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

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

・編集が終わったら、「Ctrl＋S」ボタンで保存できます

・リアルタイムで絵を生成できるサイトにアクセスします

>> 「Krea.ai」のサイト

・トップ画面「image」から「Realtime image Genaraton」をクリックします

１．ブラシボタンをクリックして色をえらびます

２．マウスをドラッグして大まかな絵をつくります

３．つくりたいイラストのテキストを入れます

４．色とテキストに合わせて自動で絵があらわれます

・魔法学園の背景をつくるために次のとおり、テキストを入れます
「beautiful、magic、traditional、school、afternoon、side、beautiful garden」

・イラストが完成したら右下のダウンロードボタンからイラストをダウンロードします

１．Google AI Studioに移動して、キャラ、背景画像をアップロードします

２．テキストで各キャラのファイル名と動きの種類を詳しくAIにつたえます

※ファイルに合うように特徴をAIにつたえます
「M_doya.png=どや顔、M_smi.png=笑い顔、M_sup.png=驚き顔、M_think.png=考え中の顔、B_doya.png=どや顔、B_smi.png=笑い顔、B_sup.png=驚き顔、B_think.png=考え中の顔、downloadedImage.png=背景、ai_studio_code (5).htmlのコードをベースに魔法学園のストーリーでビジュアルノベルのコードをhtmlで生成、Mが主人公となるように、Bは脇役で生成」

・AIのプログラム生成がおわったらダウンロードします

・しっかり、背景とキャラクターがあらわれました

・もう一キャラつくるためにChatGPTのサイトにアクセスします

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

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

「まったく別のキャラを生成して 青のわずかに光る服、黄色の光る眼、神聖さが漂う、しかし優しい感じもする中性的な生き物 右上は普通の笑顔の上半身、左上は考えポーズ、右下は驚きポーズ、左下はどや顔ポーズのスプライトシートを生成して、背景は白色」

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

・「MyEdit」のサイトにアクセスします
>> 「MyEdit」のサイト

・「背景」ツールで自動で背景を透明にできます

・編集ツールからイラストを4分割してダウンロードします

・ブラシで色をぬり、テキスト入力からイラストをつくります

１．Google AI studioのサイトに移動します

２．ゲームファイル、イラストをアップロードします

３．続きをつくるようにAIにつたえます

※つぎのとおりAIにつたえます
「添付ファイルの続きとなるhtmlファイルを作成、ファイル名はscene2、 おそらく添付のhtmlファイルも続きのファイル名のことを考えていないのでscene2.htmlにつながるように添付ファイルの中も書き換える、

経験値によって分岐とエンドが変わるように、 また背景は前回のに加え、背景=Ice_Castle_bk.pngを使用して雪の女王を登場させて、また雪の女王のファイルは添付したl_sup=驚き、l_doya=どや顔、l_smi=笑顔、l_think=考え顔で生成、雪の女王は少し怖い部分もある表なのでそこも考えて生成、また、雪の女王以外の登場人物は全員男の子という設定」

・生成したプログラムをダウンロード、実行してください

・続きの別プログラムに物語が進み、新しいキャラクターも登場しました

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

１．Google AI Studioにアクセスします

２．ファイルを読み込み位置変えるツールをつくることをAIにつたえます

３．つぎのとおり、AIにつたえてください

「今作ったビジュアルノベルでキャラクターの大きさと位置を若干変更したい、htmlファイルを読み込み、キャラの位置を読み込み→変更した後、修正した位置をhtmlファイルに保存するツールのプログラムを生成してほしい」

※　このツールでキャラの位置を変えると座標のプログラムを表示します

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

このプログラムはこのページトップで配布しています

>> 「位置調整ツール」にページ内ジャンプ

１．ゲームファイルを読みこみます

２．左のメニューからキャラの大きさ位置を変えることができます

・設定をエクスポートボタンをクリックすると、プログラムがあらわれます

・ゲームファイルをメモ帳でひらいて、キャラの大きさのプログラムの部分を変えます

※ AIに変更を頼んでもうまくいきますが、直接自分で書き変えた方が正確に書き変えることができます

・キャラの大きさが変わり、ゲームがさらに見栄えがするようになりました