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

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

今回はAIでヴァンサバ風のゲーム を一瞬でつくる方法について紹介します

すぐに、できる方法で紹介しているので、ぜひチャレンジしてください

目次です:

0:00 制作したゲームの紹介と流れ

0:34 AI自動プログラミングサイトの紹介と使い方

2:40 AIでドット絵アニメーションをつくる方法

4:32 ドット絵アニメーションをゲームに登場させる方法

5:02 ドット絵背景をつくる方法

6:31 AIで敵キャラクターをつくる方法

ーーーダウンロードで紹介したプログラムですーーー

ゲーム生成でつかったサイト:

Google AI Studio
The fastest path from prompt to production with Gemini

背景削除のサイト:

Free Online Image and Audio Editor
Discover the best free AI-based online editors for images and audio tracks.

キャラクター生成でつかったサイト:

Just a moment...
‎Google Gemini
Meet Gemini, Google’s AI assistant. Get help with writing, planning, brainstorming, and more. Experience the power of ge...

ピクセルアニメーションをつくったサイト:

Piskel - Free online sprite editor
Piskel, free online sprite editor. A simple web-based tool for Spriting and Pixel art. Create pixel art, game sprites an...

ーーーここまでですーーーー 

こんにちは

前回に続き今回もAIでゲームを制作する方法を解説します

今回はトップビューのアクションゲーム、

ヴァンパイアサバイバーで武器が銃になったゲームをつくります

前回に続いて、

はじめはAIコーディングがやりやすいGoogleAIStudioのサイトに移動します

今回つくりたいゲームの特徴である

バンパアサバイバーのようなゲームであること、

武器を銃にすること、

すぐに試すことができるHTMLコードで作成すること、

スマホ画面の大きさになること、

をAIに伝えます

「RUN」をクリックするとさっそくAIがゲームのプログラミングを

はじめます


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

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

四角しか画面に表れていませんが、

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

敵の数が少なすぎるので、増やしてゲーム画面を確認したいと思います

AIに敵を増やすことを伝えます

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

しっかり敵が増えたゲームになりました

画面が固定されているため、次は 画面外に動けるように変更して

ボスキャラを登場させるようにAIに伝えます

生成が終わったゲームを実行すると

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

次はゲームの画像を生成して置きかえたいと思います

ChatGPTのサイトにうつり、ピクセル画像のアニメーションを

つくるためのスプライトシートをつくることをAIに伝えます

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

背景を透明にするために

画像の編集サイトに移動します

読み込んだと同時に背景を透明にできました

画像の大きさも調整します

調整が終わったら右上のダウンロードボタンを

クリックしてダウンロードします

次は透明になったスプライトシートを

分割します

ピクセル画像の編集が得意なサイトに移動し

ファイルを読み込みます

画像の半分の数値を入れて画像を分割します

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

右上のスライダーからアニメーションの速さを

確認できます

左メニューのツールを使って

画像で要らない部分、位置がおかしい部分を直したいと思います

しっかり動くようになったので

右メニューからダウンロードします

画像ができたのでさっそくゲームに登場させたいと思います

Geminiのサイトに移動して

画像とプログラムを読み込ませます

読み込ませた画像をアニメーションとして動かすように

AIに伝えます

プログラム生成が終わったゲームを読み込むと

しっかりキャラクターが動くようになりました

次は背景がないので

背景をゲームに登場させます

ChatGptに移動して背景を生成します

メルヘンな雰囲気ということを伝えます

それっぽい背景を生成できました

Geminiのサイトで

プログラムと背景を繋げたいと思います

2つの画像が交互にあらわれるように伝えます

背景が現れましたが、ゲームとキャラクターに合わないので

背景を作り直します


一枚の絵をさらに細かく遠くから見た感じでつくることをAIに伝えます

2枚目の絵も同じように生成します
絵が完成しました、

さっそく絵を入れかえて試してみます

しっかりキャラクターの大きさとマッチしました

続いて敵キャラクターをつくります

さらにChatGPTでスプライトシートを生成します

敵キャラっぽいコウモリがあらわれました

次は同じ方法で背景を消して、

透明になった背景を一枚一枚の画像に分割します

分割した画像をプログラムに読み込むように

Geminiに伝えます

しっかり羽ばたきながら動く敵キャラが完成しました

続いて、ボスキャラもつくります

ボスキャラができましたが、歩いていないのと

画像が粗すぎました

ボスキャラは大きくなるので解像度を上げて生成する必要があります

しっかり生成できたので、次は同じ感じでゾンビキャラもつくってみます

キャラができあがったのでプログラムとつなげます

AIにキャラとプログラムをつなげるように伝えます

プログラムが完成したので

ゲームを試したいと思います

しっかり敵キャラが動くゲームが完成しました

敵の量や出現方向、速さなど、ゲームバランスの調整が必要ですが

このようにAIを使うと 、しっかり見栄えがするゲームをすぐに作成することができます

ぜひ試してみてください

ここまでご視聴ありがとうございました

コメント