AIでアクションゲーム神速作成！プログラミング未経験者でも簡単制作方法【バイブコーディング入門】

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

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

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

次のことをAIに伝えます

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

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

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

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

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

次のことをAIに伝えます

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

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

次のことをAIに伝えます

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

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

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

「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」

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

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

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

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

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