AIをつかったプログラミングに興味がある

ゲームをカンタンにつくりたい！

・メニューから「Play Ground」をクリックして「Chat with models」をクリックします

・メッセージボックスに次のとおりタイプします

「2D横スクロールアクションの3DマップエディタをHTML1ファイルでつくってほしい
マップエディタではクリックした場所まで緑の地面が盛り上がり、
ドラッグで一気に地面をつくれるように
WASDで視点の高さと左右の平行移動、マウスホイールで拡大縮小、
右ドラッグで視点の回転ができるように
プレイヤー、敵キャラの配置は移動可能な直線上ののみ、
テストプレイでは
編集画面で決めた視点の角度でカメラが動くがカメラはプレイヤーと一緒に動く
プレイヤーはファイヤーの攻撃ができ、複数回の空中ジャンプができる
敵キャラは歩くだけ、落下するなどの物理法則は働く」

・「RUN」をクリックするとさっそくAIがゲームのプログラミングをつくりはじめます

・次のとおりにAIにつたえます

「　2Dアクションを作りたい、ドット絵で歩き、ジャンプ、
が入った青猫の魔法使いミニキャラの
12×12ピクセルのスプライトシートを作れるか　」

１．Photopeaにアクセスします

２．「コンピューターから開く」でキャラ画像を読み込みます

１．「トリミングツール」をクリックします

２．画像のカドをドラッグして、つかわないキャラをカットします

・「なげなわツール」で目立つ部分をドラッグして「Ctrl」＋「X」で切り取ります

１．選択範囲を反転させます

２．選択範囲をカットします

・別名で保存からPNGを選んで保存します

１．画像アイコンをクリックします

２．添付ファイルボタンをクリックして、画像をアップロードします

１．メッセージボックスにアニメーションの言葉を入れます

２．「動画を作成」ボタンをクリックしてください

１．しっかり歩くアニメーションが完成しました

２．ダウンロードボタンをクリックしてダウンロードします

・クリックしてダウンロードした動画をアップロードします

・足が揃っている動き、左足を前に出している動き

それぞれスクリーンショットボタンをクリックして撮影します

・スクリーンショットを撮りおえたら、全てをダウンロードをクリックします

・「背景を削除」をクリックして、キャラ画像をアップロードします

１．アップロードすると背景が自動で透明になります

２．中央にそろえて、ダウンロードします

・すべてのパターンの背景を透明にします

・足が揃っている画像、右足が前に出ている画像、左下が前に出ている画像を使います

2Dアクションに登場する敵キャラを作りたい、
サングラスをかけたワニの魔法使いミニキャラの12×12ピクセルのスプライトシートを作れるか」

・つぎの通りにAIに伝えます

「一から全く新しく画像をつくってほしい、

2Dアクションに登場する敵キャラを作りたい、
サングラスをかけたワニの魔法使いミニキャラの12×12ピクセルのスプライトシートを作れるか」

・「切り抜きを編集」ボタンをクリックします

・必要のないキャラを消して一体のみにします

・つくった敵キャラをGrokのサイトにアップします

１．「歩く」を入れてアニメーションさせます

２．歩くアニメーションが自動で生成されます

・アニメーションから画像を抽出します
・取り出すのは左足が前、右足が前、足が揃っている、画像です

つぎのとおりAIに伝えます
「編集モードでは、
上下は大丈夫だが、左右のマウスドラッグで視点を変える時の方向を逆に
敵配置と敵消去ができる、背景は青い空に雲の雰囲気出すために上に少しフォグを入れる
ドラッグ&ドロップで敵の歩くアニメーションを3枚登録できる
プレイヤーのアイドルを1枚、歩くアニメーションを4枚、ジャンプを1枚登録できる
テストプレイでは、プレイヤーは壁を登れないように
プレイヤーの弾をファイヤーに、エフェクトをしっかりつけてかっこよく
重力を少し軽く、プレイヤーにHPゲージ
テストプレイを「esc」で終わらせるように、終わった時にテストプレイボタンを押す前の状態に復帰する」

１．マウスドラッグで地面をつくります

２．プレイヤーキャラの画像を読み込みます

３．準備がおわったらテストプレイをします

・次のとおりAIにつたえます

「一から全く新しく画像をつくってほしい、

2Dアクションに登場するボスキャラを作りたい、
サングラスをかけたかわいいピンクのワニ大魔法使いミニキャラの20×20ピクセルのスプライトシートを作れるか（大魔法使いの服を着ている）」

１．サイトにアクセスしたら画像をアップロードします

２．「切り抜きを編集」をクリックします

１．「消去」から「手動」をクリックします

２．ブラシサイズを大きくします

３．一体だけ残して、他のキャラはすべて消します

・消した後はダウンロードします

１．「歩く」をAIに伝えます

２．歩くアニメーションが生成できました

・次のとおりAIにつたえます

「
2D横スクロールアクションの3DマップエディタをHTML1ファイルでつくってほしい
マップエディタでは
クリックした場所まで緑の地面が盛り上がり、ドラッグで一気に地面をつくれるように
WASDで視点の高さと左右の平行移動、マウスホイールで拡大縮小、右ドラッグで視点の回転ができるように
プレイヤー、敵キャラの配置は移動可能な直線上ののみ、
テストプレイでは
編集画面で決めた視点の角度でカメラが動くがカメラはプレイヤーと一緒に動く
プレイヤーはファイヤーの攻撃ができ、複数回の空中ジャンプができる
敵キャラは歩くだけ、落下するなどの物理法則は働
」

こんにちは！

ゲームをつくってみたい

AIをつかったプログラミングに興味がある

・次のとおりAIに伝えます

「シューティングゲームをつくって、ケツイのようにボタン長押しでロックオンの集中攻撃、はなして散弾攻撃、ボス戦のみのゲームで超弾幕ゲームにして プレイヤー当たり判定は1ドットにして 画面比率はスマホ比率で HTML1ファイルでつくって」

・AIのプログラム制作がおわったら、右上のダウンロードボタンからゲームファイルをダウンロードします

次のことをAIにつたえます

「縦スクロールシューティングゲームのプレイヤーキャラクター、背景は透明、飛んでいる、翼が生えている、魔法の世界、髪の長い男性キャラ、エフェクトはいれない、視点については添付画像のように俯瞰視点、キャラクターを上から見下ろす40度、真後ろからの視点」

・服の色や翼の色は、背景と重ならないようにAIで修正します

・次のとおりAIにつたえます

「添付のキャラのような雰囲気、
大きくアレンジ（つくりなおす）、
服は白と黒色で髪を長くして、
顔は下を向いているようにしてほしい」

・つぎの通りAIに伝えます

「縦スクロールシューティングの背景を生成して、上と下が繋がっておりループする画像、宇宙の中にリアルな星が浮かんでいる画像にしての背景で斜め上45度からの俯瞰視点の画像にして」

１．「Styles」の下にテキストを入れて、つくりたい音楽をAIにつたえます

２．「Create」ボタンをクリックします

・音楽ができあがったら「・・・」をクリックすると、ダウンロードメニューがあらわれます

・背景削除ボタンをクリックすると画像のアップロードウィンドウがあらわれます

１．アップロードすると自動で背景が透過されます

２．ダウンロードボタンから画像をダウンロードします

・つぎの通りAIに伝えます

「ゲーム本体.htmlのプレイヤーはプレイヤー.pngを読み込む、ボスはボス.pngを読み込む、 ゲーム背景は背景.pngのファイルを読み込む またBGMはゲームBGMを少し音量小さめでながすように読み込む（ループ）、 ゲーム本体.htmlでボスが出す玉の速度を遅くして、 このように作りかえられるか」

・つぎの通りAIに伝えます

「東方シューティングゲームのような縦スクロールシューティングゲームを作成している。 キャラクターは[背面で斜め上から]描かれている。 キャラクターは2頭身にして欲しい。 背景は透過でキャラ以外のものを一切入れないで。服の色は赤色で。猫は白猫にしてほしい。」

・後ろ向きにするメッセージをAIにつたえます

「　描く視点[キャラクター背面で斜め上から]　」

・つぎの通りAIに伝えます

「キャラクターと玉が紫色に光っているエフェクトを入れてほしい。ボスのHPを半分にして、HPが減ったら攻撃パターンが変わるようにしてほしい。ボスが少しゆっくり細かく動くようにしてほしい。またボスの玉で大き目の打つと壊れる玉をくわえてほしい。」

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

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

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

１．はじめに自動プログラミングができる、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に変更を頼んでもうまくいきますが、直接自分で書き変えた方が正確に書き変えることができます

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

ゲームをつくりたいけどムズかしそう

ゲームつくるのは時間がかかる

AIでゲーム制作をスピードアップさせたい

次のことをAIに伝えます

・「スマホ画面の比率」「バンパイアサバイバーのようなゲーム」

・「武器は銃になる」「プログラムをHTMLにする」

・プログラムの生成が終わったらダウンロードボタンをクリックしてください

・即実行できるHTMLファイルがダウンロードできます

・ゲームとして基本的な動きはできるプロトタイプをつくることができました

次のことをAIに伝えます

「スクロールバーが表示されないように」、「敵の量を10倍おおくすること」
「２発でやられる敵をつくること」

・生成が終わったファイルをダウンロードしてプレイします

次のことをAIに伝えます

「マップを広げて画面外でも動きまわれること」、「開始から10秒でボスが登場すること」
「ボスは大型にすること」

・ボスが登場して、画面外に動けるようになりました

AIにつぎのことをつたえます

「pixel,blue magician cat with magic stick,walk,左上は右足を後ろに、右上は両足をそろえて立ち止まっている、右下は左足を前に、64×64,5frame,sprite sheet,」

ポイントです：
「Pixel」、「青の魔法使い猫で杖をもっている」、「歩く」
「左上の絵は右足を後ろ」、「右上は両足をそろえて立ち止まっている」
「右下は左足を前に」、「64×64のピクセル数」、「スプライトシート」
「５フレームのアニメーションであること」

・歩きのスプライトシートが完成しました

１．「背景」タブをクリックします

２．「背景削除」ボタンをクリックします

３．背景を透明にするファイルを読みこみます

・背景がチェックマークになり、透明にすることができました

１．編集ツールから切り抜きをおこなえます

２．切り抜きがおわったらダウンロードボタンをクリックします

１．ファイルタブをクリックします

２．「Browse image」ボタンから画像ファイルを読み込みます

１．「Import as spritesheet」をえらびます

２．もとの画像の半分の数値を入れると4分割できます

３．「Import」ボタンをクリックします

１．分割された画像が左に並びます

２．右上のスライダーからアニメーションの速さを確認できます

３．左メニューのツールを使うと、画像の位置などのおかしい部分を直すことができます

１．「Zip」タブをクリックします

２．Download ZIPをクリックします

つくった画像ファイルをアップロード、プログラムもアップロードします

AIにつぎの通り伝えます

・「アップロードしたpng画像を連続で読み込ませてアニメーションにすること」

・「アニメーションさせるのは主役であること」

・主役プレイヤーがしっかり動くようになりました

AIにつぎのことを伝えます

・「視点は俯瞰視点になること」、「ピクセル画像」

・「世界観はメルヘン、魔法の世界であること」

・背景にあう画像ができあがりました

・２枚目の同じく背景にあう画像ができあがりました

１．生成した画像2枚をアップロードします

２．AIにつぎのことを伝えます

・「画像2枚を背景としてつかう」、「画像を4方向に配置する」
・「背景がくり返すこと」

・キャラクターの大きさとマッチする背景があらわれました

AIにつぎのことを伝えます

・「同じ感じでかわいいコウモリ敵キャラを生成すること」
・「右上は羽を少し閉じている」「右下は羽を開いている」「飛んでいるスプライトシート」

・AIに「正面からの絵にすること」を伝えます

・敵キャラの画像ができあがりました

先ほどと同じように背景を消します

・「Import as sprite sheet」から画像を分割します

・アニメーションを調整してダウンロードします

１．分割した画像をアップデートします

２．「敵キャラのファイル名（bad01から04）がアニメーションになっていること」をAIに伝えます

・敵キャラもアニメーションするゲームができあがりました

・つづいてボスキャラも生成します、つくったボスキャラをさらにアレンジします

一度つくった画像をアップロードして、アニメーションがおかしい部分をなおします

次をAIに伝えます

・「walk」「右足を後ろに」「右上は両足をそろえて立ち止まっている」

・「右下は左足を前に」「64×64」「5frame」「sprte sheet」

・「キャラは右斜め前を向いている」

・つづいて同じつくり方で、もう一つ敵キャラをつくりました

・ボスキャラやプログラムなど、つくったファイルをアップロードします

・敵キャラのアニメーションの方法を伝えます

・ボスキャラ、敵キャラがアニメーションするゲームが完成しました

ゲームをつくりたいけど難しそう

AIでゲームをつくれるらしいが、どうやればいいのかわからない

AI生成をはじめたいけど、どうすればいいのかわからない

次の点を伝えて画像を生成します

・「横スクロールシューティングゲームの画面」、「魔法使いでほうきにのった魔法使い猫が主役」

・「ファンタジーの世界」、「ピクセル画像」

１．Geminiがつくったイメージから１枚を選び、アップロードします

２．「HTML５でつくること」、「横スクロールシューティング」であることをAIに伝えます

・プログラムの生成がおわったら「HTML」ファイルをダウンロードできます

・「HTML」はダブルクリックで実行できます

・しっかりシューティングゲームが動きます

・もとの画像を「Gemini」にアップロードして、キャラクターを生成します

・もとの画像から背景が白色になったキャラクターが生成されました

１．背景を切り抜きできるサイトに移動します

２．「背景」ボタンをクリックします

３．キャラクターの白背景がなくなり、透明になります

１．「編集」ボタンをクリックします

２．キャラクターの周りをドラッグして画像を小さくできます

３．画像の大きさを決めたら、「ダウンロード」ボタンをクリックします

・つづいて、「Gemini」で敵キャラを生成します

・「メルヘン」、「ピクセル」、という２つのキーワードを伝えます

１．「背景」ボタンから背景を透明した後、「編集」ボタンから画像の大きさを調整します

２．「ダウンロード」ボタンをクリックして、画像をダウンロードします

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

２．「メルヘン」、「魔法」「ピクセル画像」、「風景」、「ループ画像」を伝えて生成します

３．ループ背景が生成できました

１．「＋」ボタンをクリック

２．「Upload File」ボタンをクリック、主役の画像ファイルをアップロードします

１．アップロードした画像とプログラムの画像を変えるように伝えます

２．「Run」ボタンをクリックして、プログラムを生成します

１．敵キャラの画像をアップロードします

２．「敵キャラ」、「編隊を組んで動く」、「やられた時のエフェクトを花火のように」、
「弾をうつこと」をAIに伝えます

３．「Run」をクリックして、プログラムを生成します

１．「敵キャラを小さくする」ことを伝えます

２．背景画像をアップロードして、「横にくりかえす」ことを伝えます

・「敵キャラを小さくすること」、「主役の弾を炎のように」することを伝えます

「簡単にゲームをつくる方法が知りたい」

「Chatgptでゲームをつくれるのは知っているけど、時間がかかる」

「AIをつかったプログラミングがすごいらしいけど、何からはじめていいかわからない」

・真ん中の巨大なボックスにテキストを入力してゲームを生成することができます

・今回は有名な ゲーム「Flappy Bird 」を生成します

１．ボックスに「フラッピーバード」と入れます

２．右下の生成ボタンをクリックすると生成が始まり、画面が変わります

・ゲームの編集画面です

・この画面でゲームの修正や画像などを読み込んで登場させることができます

１．「Bing image creator」のサイトに移動します

２．テキストに「フラッピーバード」と「横スクロールになる」命令をいれます

１．生成がおわると４つの画像があらわれます

２．つかいたい画像をクリックするとダウンロードの画面があらわれます

・ダウンロードボタンをクリックして画像をダウンロードします

１．左イメージボタンから生成した画像をアップロードします

２．テキストも入力して生成したいと思います

１．「画像をアップロード」ボタンをクリックします

２．作成した画像を読み込みます

１．画像が残ったので、消しゴムツールで余った部分を消し込みます

２．背景が無くなったら右上の「ダウンロードイメージ」をクリックして、ダウンロードします

１．作成したキャラクターのみの画像をよみこみます

２．「Transparent」にチェックして、背景を透明にします

３．「Generate」をクリックして生成をはじます

・キャラクター画像はそのままでは色がうまく出ない時があるので png画像をpng8形式に変換します

・変換が終わった画像をダウンロードします

１．アセットタブをクリックします

２．画像をよみこみます

３．「アップロードアセット」をクリックしてキャラクター画像をよみこみます

４．キャラクターにあらわれる「Insert」ボタンをクリックします

※ キャラクターにあらわれるInsertをボタンをクリックすると自動で右下に命令があらわれます

１．命令文で「add」になっている部分を「change」に変えて生成ボタンをクリックします

２．生成がおわると、キャラクターの置きかえが成功したことを確認できます

１．「beautiful sky back ground」にして生成してみます

２．背景が変わり、夕焼けになりました

１．命令文に「beautiful blue sky cloud background」をいれます

２．背景がブルーに変わったことが確認できました