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

「奥行きのある2Dゲームやベルトスクロールアクションを作ってみたい！」

・・・でも、何からやればいいかわからない！

となやんでいませんか？

こんにちは！

この記事では、AIを使った「2.5D横スクロールアクションゲーム（ベルトスクロールアクション）」の作り方を紹介します。

今回はゲーム制作の第一歩として、ゲームの背景となる3Dボクセルを作成していく手順を解説します。プログラミング未経験の方でもスムーズに進められる内容になっているので、ぜひ一緒にチャレンジしてみてください！

※動画でも実際の作業風景を紹介していますので、あわせてご覧ください

今回紹介するゲームのプログラム

まずはGoogle AI Studioで背景用のプログラムを作成

さっそくAIを使って、ゲームの土台となるプログラムをつくります！

プログラムを生成しやすい「Google AI Studio」のサイトに移動します。

まずは、背景用の3Dボクセルを配置・編集するためのプログラムをAIに生成してもらいましょう。

AIがプログラムの生成を完了したら、ファイルをダウンロードしておきます。

これで背景エディタの土台ができました。さっそく実行したいところですが……貼り付けるための「背景用の画像」がまだありません。

次は画像生成AIを使って、背景の素材を作っていきます。

背景用の建物の画像をAIで生成する

背景用の画像は、以下の2つを組み合わせて生成します。

1. パワーポイントで作った大まかなイメージ図
2. AIへのテキストの命令文（プロンプト）

今回はAIに以下のような指示を追加して生成を実行します。

\HTML1ファイル
\ボクセルエディタ
\ボクセルに添付ファイルのような画像を読み込みテクスチャーとして貼り付けられる
\マップビューではクリックでボクセルをマップに何個でも置くことができ、ボクセルクリックで消すことができる
\マップビューは拡大縮小、視点シフト移動、マウス左ドラッグで回り込みのように視点移動させることができる
\マップビュー右側に閉じているメニュー矢印をクリックするとメニューが展開する
\マップビューモードとボクセル配置モードで切り替えられるように
\画像ドラッグ添付ファイルの画像を矩形選択で画像を部分選択してボクセルに貼れる
\画像をドラッグして矩形選択する時に展開する画像は全体表示されるように
\メニューはタブで、「ボクセルの画像選択」、「ボクセルの調整」、「空の調整」がある
\ボクセル配置はグリッド線にスナップするため、グリッド線にそってしか置くことができない
\空の調整はタイムオブデイ・システムで
\ボクセルの調整タブではボクセルの高さ幅、明るさを調整できる

生成を実行すると、しっかりとした建物の正面画像が完成しました！

この完成した画像を、先ほどのプログラムで作った「3Dキューブ（ボクセル）」の表面に貼り付けて、立体的な背景を作っていきます。

プログラムを実行して3D背景を組み立てる

それでは、ダウンロードしたプログラムを実行してみましょう！

まずは、ゲームの背景として違和感が出ないように、3Dボクセルの大きさをしっかりと調整します

次に、以下の手順で作業を進めます

1. 先ほど生成した「建物の画像」をプログラムに読み込みます。
2. 読み込んだ画像を、3Dボクセル用のテクスチャ（表面の絵）として指定します。
3. エディタを「ボクセル配置モード」に切り替えます。
4. 画面上にクリックしてボクセルを置いてみます。

すると……！

しっかり、先ほどAIでつくった建物の画像が3Dのブロックとなって画面にあらわれました。

アクション部分のプログラムを作成する

続いては、いよいよゲームの核となる「アクション部分」のプログラムを作っていきます！

2Dベルトスクロールアクションならではの特徴（奥行きへの移動や攻撃の挙動など）をしっかりと盛り込んだ指示（プロンプト）を作成し、AIにメッセージを送信します。

次のとおりAIにメッセージを伝えます

\HTML1ファイル
\2D横スクロールベルトロールアクション
\テストプレイボタンでプレイできる
\マップビューではクリックで敵キャラ、プレイヤー開始位置を置くことができ、クリックで消すことができる
\マップビューでプレイヤーが歩ける場所はピンクで表示されている
\マップビューは拡大縮小、視点シフト移動、マウス左ドラッグで回り込みのように視点移動させることができる
\マップビュー右側に閉じているメニュー矢印をクリックするとメニューが展開する
\マップビューモードとキャラ配置モードで切り替えられるように
\新規敵キャラをつくることができ、ダメージくらい中1コマ、攻撃2コマ、歩き3コマ、を敵ごとに割り当てられる
\プレイヤータブでは、ダメージくらい中1コマ、攻撃2コマ、歩き3コマ、待機1コマを敵ごとに割り当てられる
\ゲーム基本設定タブでは、カメラ位置を角度、高さプレイヤーからの距離を調整できる
\メニューはタブで、「画像読み込み」、「敵キャラ」、「プレイヤー」「ゲーム基本設定」がある
\カメラは手前・奥には動かない、プレイヤーもカメラ手前以上は手前に移動できない

数秒待つと……無事にプログラムの生成が終わりました！

さっそく動かしてプレイしたいところですが、肝心の「キャラクターの絵」がまだありません。そこで次は、キャラクターの画像を作っていきます。

Geminiを使って主人公の2Dスプライトシートを作成

今回は画像生成AI（Gemini）を使って、ゲーム用の「2Dスプライトシート（キャラクターのアニメーション用画像セット）」を作るための命令文を書いていきます。

デザインが野暮ったくならないように、キャラクターの見た目の特徴やテイストをしっかりと指定してGeminiにメッセージを送信します

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

//スーパーファミコンの2D横スクロールゲームのドット絵
//サイドビューのみ、他方向は不要
//RPGのペルソナの登場キャラ風、ちょい悪のギャング風、サングラスはかけていない、服は白、
//待機モーション（3コマ）
//歩き
//予備動作→パンチ(2コマ)
//予備動作→ミドルキック(3コマ)
//ジャンプキック(1コマ)
//ジャンプ中(1コマ)
//予備動作→膝蹴り(2コマ)
//つかみ→背負い投げ(3コマ)※必ず別のキャラはつけない、顔は２つにならない
//ダメージを受けて構えポーズのままのけぞっている(地上に足がついている)
//ダメージを受けてのけぞっている
//上記のモーション
//画面上には相手のキャラや別のキャラクターは出さない
//線などのエフェクトはつけない
//各モーションに対応するフレームがあること
//SD２頭身キャラ！
//純白背景

すると、すぐに立派なスプライトシートができあがりました！

……が、少し悪役っぽい雰囲気になってしまったので、主人公らしくなるようにプロンプトを微調整します。

何度か調整を重ねることで、しっかりと主人公キャラクターが仕上がりました！

敵キャラクターの生成とダメージパターンの修正

主人公が完成したら、次は敵キャラを作っていきたいと思います

ゲーム画面で区別がつきやすいように、主人公と見た目や特徴がかぶらないキャラクターを指定して生成を実行します

こちらもベースとなるスプライトシートはしっかり生成できました！

ただ、よく確認すると「ダメージを受けた時のアニメーションパターン」で少し不足している部分があったため、その部分だけ追加で修正を行います

微調整が終われば、敵キャラクターもバッチリ完成です！

2体目となる新しい敵キャラクターを作成！

ゲームをさらに盛り上げるため、続いてもう一体の敵キャラクターを作っていきます。

これまでに作成した主人公や1体目の敵キャラクターと見た目や役割がかぶらないように、しっかりと特徴を分けたメッセージ（プロンプト）を作成し、AIに送信します。

しばらくしてベースとなるスプライトシートが無事に生成されました！

……が、全体的にのっぺりとしていてメリハリがない印象になってしまいました。ゲームの背景に埋もれてしまわないように、キャラクターの「色」を中心にプロンプトを調整し、パキッとしたメリハリがつくように修正の指示を出します。

この色の調整が上手くはまり、2体目の敵キャラクターのスプライトシートもしっかりと完成しました！

アニメーション用に画像を分割！……しかし問題が

キャラクターの画像が出揃ったところで、次はゲーム内でパラパラ漫画のように動かすため、スプライトシートを1コマずつアニメーション用に分割していく作業に入ります。

しかし、ここで一つ問題が発生します。今回はアクションゲームということもありパターンの量がかなり多く、これまで使っていた画像切り抜きツール（Photoroomなど）を使って手作業で処理していくと、どうしても時間がかかりすぎてしまいます。

「それなら、自分の作業に特化した便利なツールを自分で作ってしまおう！」ということで、急遽オリジナルの画像分割ツールを作ることにしました。

Google AI Studioで「キャラ分割ツール」を自作！

再びGoogle AI Studioを開き、AIに「キャラクター分割ツール」を作るための要望を伝えていきます。

今回の分割作業を劇的に効率化するため、背景をサクッと透明にできる「マジック消しゴム機能」と、直感的に画像を切り分けられる「分割線の機能」をツールに組み込むようメッセージを書き、AIに送信します。

数秒後……あっという間にオリジナルツールのプログラムが完成しました！

さっそく完成したツールを立ち上げ、先ほどのキャラクター画像を読み込みます。画面上でクリックしながら分割線をポンポンと置いていき、画像を切り抜くための枠（ワク）を作って分割していきます。自作ツールのおかげで、面倒だった分割作業もサクサクと快適に進められるようになりました！

マジック消しゴムで背景を透過＆画像のダウンロード！

自作の分割ツールで画像を切り抜く枠を作りましたが、このままでは画像の背景が白色のまま残ってしまいます。そこで、ツールに組み込んでおいた「マジック消しゴム機能」の出番です！

ポチッと処理をかけると、しっかりと背景が透過（透明に）されました。あとは必要なキャラクターの画像だけを選択して、サクッとダウンロードします。

主人公と同じ手順で、敵キャラクターの画像も枠でくくって分割し、ダウンロードしていきます。一回の分割作業で取り切れなかった「歩き」のアニメーション画像も、再度しっかりと切り分けておきます。

これで、キャラクターを動かすためのアニメーション画像の準備はバッチリ完了です！

エディタに画像を読み込んでアニメーションを設定

素材の準備がすべて整ったので、いよいよ最初の方で作った「アクション部分のプログラム（エディタ）」を使って、テストプレイに向けて組み込んでいきたいと思います。

1. 画像の読み込み: 先ほど透過・分割したキャラクターの画像をエディタに読み込ませます。
2. プレイヤーの設定: 読み込んだ画像を、プレイヤーの「待機」「歩き」「攻撃」「ダメージ」などの各アニメーションに割り当てていきます。
3. 敵キャラの設定: 続いて敵キャラクターにも同じようにアニメーションを割り当てていきます。

……と、ここで一つ問題を発見しました。敵の「歩き」アニメーションがなぜか2コマしか設定できない状態になっています。これはプログラムのバグのようですが、まずはゲームとして動かすことを優先し、次のステップでまとめて修正することにします。

一通り準備ができたので、いざテストプレイ！

テストプレイで発覚したバグをAIで一気に修正！

実際に動かしてみると、一応キャラクターを操作して動かすことはできました。しかし、いくつか致命的な不具合（バグ）が発生してしまいました。

• 立体感がない: キャラクターが背景の奥行きになじまず、まるで手前の平面ガラスに張り付いたような見え方になっている。
• 敵が動かない: 配置した敵キャラクターが棒立ちのまま、まったく動いてくれない。
• 向きが変わらない: プレイヤーを左右に移動させても、キャラクターのグラフィックが方向転換（左右反転）しない。

せっかくの2Dベルトスクロールアクションなので、これではゲームとして成り立ちません。しっかりと想定通りに動作するように、AIにプログラムの修正をお願いしたいと思います。

上記の発生している不具合を直すためのメッセージを作成します。さらに、キャラクターの絵が拡大されてボヤケてしまう問題を防ぐため、ドット絵をくっきりと表示させる「ニアレストネイバー補間」をプログラムに適用してほしいという指示もしっかりと盛り込み、AIに送信します。

数秒後……無事に修正版のプログラムが完成しました！

バグが直っているかどうか、もう一度テストプレイで確認してみたいと思います！

エディタに画像を再読み込み！ジャンプアクションも追加

AIにプログラムを修正してもらったので、改めて画像を読み込み、キャラクターにアニメーションを割り当てていきます。

今回は待機や攻撃といった基本の動きに加えて、アクションゲームに欠かせない「ジャンプ」のモーションも新たに追加しました！

続いて、敵キャラクターにもアニメーションを設定していきます。

先ほど発生していた「歩きアニメーションが2コマしか設定できない」というバグも無事に修正されており、しっかりと4枚の画像を使って滑らかな歩きアニメーションを作れるようになりました。

これでキャラクターを動かす準備は完璧です。さっそく、修正版のエディタでテストプレイをしてみます！

テストプレイ成功！……しかし、まだ物足りない？

実際に動かしてみると……今度はキャラクターがしっかりと背景になじみ、方向転換もバッチリです！敵キャラクターも、プレイヤーを認識してしっかりとこちらに向かって歩いてくるようになりました。

基本的な動作としては大成功です！……が、実際にプレイしてみると、カメラの視点がまだ遠く、キャラクターの動きや手触り（ゲームフィール）もイマイチな印象を受けます。

そこで、ここまで別々に作ってきたシステムを統合し、一気に本格的なゲームへと仕上げていくことにしました！

3D背景とアクションのプログラムをドッキング！

ここで、この記事の最初で作った「3Dボクセルの背景プログラム」と、現在いじっている「2Dアクションのプログラム」の2つを合体させます！

再びGoogle AI Studioを開き、これら2つのプログラムファイルを同時にアップロードします。ただ単に合体させるだけではなく、アクションゲームとしての完成度を高めるために、以下の要素を盛り込んだメッセージを作成します。

• 2つのプログラムの機能を完全に合体（ドッキング）させること
• 攻撃が当たった時の爽快感を生む「ヒットストップ（攻撃ヒット時に一瞬画面が止まる演出）」を追加すること
• 攻撃やダメージが正確に処理されるように「当たり判定」をしっかりと組み込むこと

これらのアクションゲームにおいて非常に重要な要望をプロンプトに詰め込み、AIに送信します！

プレイ開始

2つの全く異なるプログラムの統合という複雑なお願いでしたが、処理が終わるのを待つと……見事に合体版のプログラムが完成しました！

3Dの立体的な背景と、2Dのキャラクターアクションが一つになり、さらにヒットストップなどの「ゲームらしい手触り」が加わった究極のエディタ。さっそくこの完成したプログラムを読み込んで、実際にプレイしてみたいと思います！

ごめんなさい、私の認識不足でした！ブログ用のテキストとして、箇条書き記号などを使わずにすべて普通の文章として書き出すべきでしたね。ご指摘ありがとうございます。

箇条書き部分を自然な文章（テキスト）に修正して、先ほどのブログ記事の続きを書き直しました。こちらでいかがでしょうか。

エディタで背景を構築！立体的な街並みを作る

統合プログラムが完成し、いよいよこの究極のエディタを使ってゲームの舞台を組み立てていきます！

まずは背景の作成からです。建物の画像を読み込み、テクスチャとして使いたい範囲を切り抜くように指定します。次にボクセルの大きさを決めて、マップ上にポチッと配置します。続いて、隣にも新しいボクセルを置き、次の画像範囲を指定して貼り付ける……この作業を繰り返し、隙間なくボクセルを並べて背景となる建物の列を完成させます。

地面を敷き詰めて「夜の街」を完成させる

建物が並んだら、次はキャラクターたちが歩き回る「地面」を作ります。

新しく用意した地面用の画像を読み込んで範囲指定し、エディタを「床のテクスチャ貼りモード」に切り替えます。そして、足元のマップに向かって一気にテクスチャを張り込んでいきます！立体的な建物と地面が組み合わさることで、雰囲気たっぷりの「夜の街中」のステージができあがりました！

キャラクターのアニメーションをさらに強化！

舞台が整ったところで、キャラクターたちに命を吹き込んでいきます。キャラクター画像を読み込み、まずはプレイヤーに待機や歩きのアニメーションを割り当てます。さらに今回は、アクションの爽快感を高めるために「コンビネーション攻撃」のモーションも新しく追加しました！

続いて、敵キャラクターの設定です。まず1体目の敵には、基本の動きに加えて、新しく作った鋭い「ダッシュ攻撃」のアニメーションを割り当てます。次にエディタへ2体目の敵を追加し、同様にアニメーションを設定します。さらに3体目の敵を追加し、今度はプレイヤーの脅威となる「連続攻撃」のアニメーションを持たせます。そして最後に、ダメ押しの4体目をマップに追加して設定はすべて完了です。

これで、個性豊かな敵キャラクターたちの準備もしっかりと整いました。

2Dゲームらしい「カメラ視点」と「キャラ配置」

ゲームとしての見栄えと遊びやすさを両立させるため、カメラの視点（アングル）を調整します。カメラの高さ、見下ろす角度、そしてプレイヤーからの距離を細かく微調整していくと……3D空間でありながら、しっかりと「2Dアクションゲームっぽい視点」を作ることができました！

最後にキャラクターをマップに配置します。ベルトスクロールアクションの王道といえば「左から右へと進んでいく」スタイルなので、セオリー通りにプレイヤーを画面の左側に、そして立ち塞がる敵キャラクターたちを右側に配置していきます。

いざテストプレイ！ベルトスクロールの基礎が完成

すべての準備が整いました。いざ、テストプレイ開始です！

実際に動かしてみると……しっかりとアクションゲームとして動くものが完成しました！プレイヤーのコンボ攻撃も決まり、敵キャラクターたちもそれぞれのアクションでしっかりと襲ってきます。実際にプレイしてみると、敵が少し一直線にこちらに向かってきすぎるかなというAIの移動ルーチンに関する新たな課題も見つかりましたが、2Dベルトスクロールアクションとしての基本の動きとシステムは、これで見事に完成です！

今回はひとまずここまでとします。ベースとなるシステムはしっかりと出来上がったので、さらに別の動画（記事）にて、敵の動きの改善や演出の強化などを行い、ゲーム全体の完成度をさらに高めていきたいと思います。

・・・となやんでいませんか？

こんにちは！

この記事では、AIだけでアクションゲームをつくる方法を紹介します

プログラミングせずにすぐにつくれるので、ぜひチャレンジしてください

Youtubeでも紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

このページのゲームプログラムは次のリンクからダウンロードできます（予定）

ブラウザゲームとAIのゲームプログラムとゲーム制作ツールの無料配布ページ

AIプログラミングでつくったゲームの紹介

今回つくったゲームがじっさいに動いています

今回の画面に映っているのは、ジャングルを舞台にしたクラシックな横スクロールアクションゲームです

プレイヤーが左右に移動し、3段ジャンプで敵をかわしながら進むシンプルだけど楽しめるゲームです

今回の記事の流れは、AIでゲームを一気に完成させるのではなく、

まず「微調整がすごくやりやすいゲームエディタ」をHTML1ファイルで作って、

そこからマップ作成 → 素材追加 → アニメーション → 敵AI と、少しずつ完成に近づけていくスタイルです

プログラミング未経験者でも挫折しにくい作り方です

最後まで一緒に試してみてください！

まずはゲームエディタをAIで生成する

Google AI Studioは自動でAIでプログラムをつくれるサイトです

>> 「Goole Ai Studdio」のサイト

前回と同じく、Google AI Studioをつかってゲームをつくります

メッセージボックスに以下のプロンプトを入力します

2DアクションゲームエディタをHTML1ファイル（単一のHTMLファイル）で生成してください。
機能は以下の通り：

• 2DアクションゲームエディタをHTML1ファイルで生成して
• 正方形のブロックを置いてマップが作れる、1画面縦12マスになるブロックの大きさ
• プレイヤーも置くことができる
• 置いたものは削除できる
• ドラッグでブロックを連続で置くことができる
• テストプレイボタンがあり、左右移動と3段ジャンプができる

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

生成が完了したら「ダウンロード」ボタンをクリックしてHTMLファイルを保存し、ブラウザで開いてみましょう

エディタ画面が表示され、ドラッグで地面やブロックを置いたり、プレイヤーを配置してゲームをつくることができます

テストプレイの画面です

歩いてジャンプするアクションゲームのような動きができます

テストプレイをしてみると歩いてジャンプする、

基本的なアクションゲームの土台が完成しました！

キャラクターと背景の素材をAIで生成

プレイヤーキャラクターのピクセルイラストを生成する

次にビジュアルを強化します

ChatGPTのサイトにアクセスします

>> 「ChatGPT」のサイト

ピクセルアートが得意なChatGPT（DALL·E搭載のバージョン）を使います

次のプロンプトを入れてキャラクター画像をつくります

横スクロール2Dアクションゲームのキャラをつくりたい ランボー風ゲームのメタルスラッグに出てくるようなキャラで24×24のキャラのスプライトシートを生成して、すべてのシーンは銃を構えているように、歩いているシーンだが一枚はアニメーションで必要なので足が揃っている絵を入れて（足が揃っていても銃をかまえている）、ダッシュしているシーン、背景は透過で枚数は16枚以上つくってほしい

生成できましたが、右足が前の画像がありません

最初に生成されたものがすべて左足が前の場合があります

その場合は「右足が前の歩行アニメーションを追加して、足がクロスする自然な歩きモーションに修正してください」と指示してください

このように再生成するとなおることが多いです

しっかり足がクロス、右足が前の画像が生成されました

敵キャラクターのピクセルイラストを生成する

敵キャラも同じようにつくります

次のプロンプトを入れます

横スクロール2Dアクションゲームの敵キャラをつくりたい サングラスをかけた少しワルな感じの兵士でメタルスラッグに出てくるような敵キャラで24×24のキャラのスプライトシートを生成して、すべてのシーンは銃を構えているように、歩いているシーンだが一枚はアニメーションで必要なので足が揃っている絵を入れて（足が揃っていても銃をかまえている）、背景は透過で
枚数は16枚以上つくってほしい

しっかり敵キャラが生成できました

背景のピクセルイラストを生成する

ゲームにマッチする背景もつくります

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

2Dアクション、
ピクセルのタイル、
背景画像を生成してほしい、
ジャングルで横から見ている視点、横長にしてほしい

しっかり背景画像が生成できました

これでプレイヤー、敵、背景の基本素材が揃いました！

素材の加工（背景透過と個別切り抜き）

クリックしてつくった絵をアップロードします

>> 「PhotoRoom」のサイト

生成されたスプライトシートは背景が白や色付きの場合が多いので、Photoroomを使い背景をカットして一つ一つキャラを分けます

キャラクターをアップロードして、

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

キャラクターをアップロードするとAIが自動的に背景をカットしてくれます

ブラシサイズを変えて、使うキャラのみ残します

キャラの背景がカットされて一つだけになりました

続けてサイズをゲームに合わせます

サイズを500にしました

しっかりカットできたらダウンロードして、

他のモーションもつくります

歩いていて足がそろっているイラストです

逆の足が前に出ているイラストです

歩行モーション用に必要な「足が揃っている」「左足前」「右足前」のイラストも、それぞれ個別に切り抜いて保存します

プレイヤーキャラも、同じようにスプライトシートを読みこみます

ゲームでつかうパターン以外を消します

右足を前に出したパターンのみカットしました

続いて左足だけ前にでているパターンをカットしました

足がクロスしているパターンもカットします

これで敵とプレイヤーキャラクターのアニメーションの準備ができました

プレイヤーキャラクターも同じ手順で切り抜き完了です

完成度の高いゲームプログラムを再生成

カットしたパターンをゲームに登場させるプログラムをつくります

素材が揃ったので、Google AI Studioに戻ってより進化したプログラムを作成します

次のようにプロンプトを入れます

次の機能を追加してほしい

タイルマップ画像を読み込み、ドラッグで範囲を決めて地面ブロックの画像として使えるように

プレイヤー画像を読み込み歩いている画像、止まっている画像を置き換えられるように、歩いているパターンは4枚登録できるように

壊れるブロックが設置できるように（地面ブロックと同じ方法で画像登録できる）

敵キャラをつくり、プレイヤーを見て2秒たったら銃をうつ（玉は真横のみ）

AIがつくったプログラムをダウンロードします

プログラムをプレイしてみました

生成されたHTMLファイルをダウンロードして開くと、エディタ画面が大幅に進化しています

次のことができるようになりました

・キャラクター画像と敵画像の読み込み機能
・ブロックの配置
・プレイヤーと敵の配置

プレイヤー、敵キャラそれぞれイラストを読み込みます

右に背景画像を読みこみ、

タイルのようにおいてマップをつくりました

テストプレイしてみました

しっかりとキャラがアニメーションしますが、
キャラの背景に色がついてしまってます

テストプレイをすると、歩行アニメーションが動き、敵がプレイヤーを見て銃を撃つアクションが追加されています！

ただし、プレイヤーと敵キャラの背景が透明になっていないので修正する必要があります

Google AI Studioでプログラムを修正します

エディタ画面では、キャラクター画像や敵キャラ画像を読み込み、ブロックを配置してテストプレイが可能になりました

しかし、キャラクターの背景がまだ透明になっていない問題がありました

そこでGoogle AI Studioに戻り、
以下の内容をAIに伝えてプログラムを修正します：

プレイヤー、敵キャラの背景を透過に
プレイヤーが玉を打てるように
画面をもっと横を長くできるように
敵がプレイヤーに向かって歩くように
プレイヤー、敵キャラの画像登録を一度に複数ファイル選択できるように（登録後にドラッグで順番を入れ替えられる）る

修正したプログラムをプレイしてみました

生成されたHTMLファイルをダウンロードして起動すると、背景がきれいに透明になり、プレイヤーの攻撃も追加されました

ただし、敵キャラが空中を歩いてしまう不具合が発生したので、次回の修正でしっかり地面に接地させるように調整します

ここまでのまとめ

これで、エディタでマップを作りながら、アニメーションするプレイヤーと敵が登場し、

銃を撃ってくるシンプルな2D横スクロールアクションゲームの原型が完成しました

マップを広げてアクションをもっと追加する

爆発アニメーションを作成

ChatGPTでさらに素材をつくります

ここからゲームをさらに楽しくするために、素材を増やしていきます

アクションゲームに欠かせない爆発エフェクトを作ります

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

爆発スプライトシートを生成して

しっかりスプライトシートが生成できました

PhotoRoomのサイトでアニメーション用に絵をカットします

生成したスプライトシートから、PhotoRoomを使って爆発アニメーション用に4枚とりだします

必要な爆発だけ残してカットします

一つの画像の大きさは、幅を300、高さを500にします

小さな爆発をカットしました

少し大きめの爆発をカットしました

次の煙へつなぐために、煙が入った大きめの爆発をカットしました

最後の煙のみで消えかけているのをカットしました

これで自然な爆発アニメーションの準備が完了しました

背景の画像を横に広げる

「Krea.ai」は背景をのばして絵を描いてくれます

>> 「Krea.ai」のサイト

前回生成したジャングル背景を、より長く横スクロールアクションゲームのように広げます

「Krea.ai」というリアルタイムの画像編集や自然な画像拡張ができるAIサイトです

右にドラッグするだけで背景をAIが描いてくれます

元の画像のハジが暗いので、

真ん中が暗くなっていますが、しっかり画像を広げられました

拡張部分もジャングルが続き、クオリティの高い横長背景が完成しました！

プレイヤーのダッシュアタック用画像

これまでつかった画像から一枚だけのこしてカットします

プレイヤーキャラクターのダッシュモーション用に、1枚の画像を用意します

PhotoRoomで背景を透過処理し、ダッシュ中のポーズをきれいに切り抜いて保存します

ダッシュアタックにつかう画像をカットしました

これで必要な素材がすべて揃いました

最終的なプログラム修正（大幅アップデート）

これまでのプログラムをアップロードして

あたらしいプログラムをつくりなおします

Google AI Studioに戻り、前回生成したプログラムファイルをアップロードして、

一気に次の指示を伝えます

最後のプロンプト（そのままコピーして使用可能）：

2Dアクションの添付ファイルを同じくHTML1ファイルにして次のことを編集してほしい
マップエディタ部分の下にスクロールバーをつけてさらに横方向に編集できるようにして
またマップエディタ部分の下につけたスクロールバーの下に画面右にマップを拡張できるボタンをつけて
上のバージョン表記を消して
背景画像を設定できるように、背景画像の大きさは縦幅を合わせて
レイヤーを前面（地面とかプレイヤー）、背景に分けて必ずどっちも表示させて
背景の彩度をコントロールできるように
キャラクター、敵の静止画ボタンを削除して歩きから止まっている画像を使って
壊れるブロックを壊すと、敵を倒すと、爆発するようにして
爆発画像は4枚登録できるようにして
敵が出す弾のスピードは0.4秒にして、プレイヤーはHPゲージがあり10回被弾でHP0になるように
プレイヤーの攻撃を銃からダッシュアタックにして、ボタンをおすと素早く前に進みながらの攻撃で（ダッシュ距離、速度をコントロールできるように）またダッシュ中は無敵で空中でもできるように
ダッシュ画像も1枚登録できるように

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

テストプレイの結果

ダウンロードしたエディタです

つくった画像ファイルを読みこんで、マップにブロックとして置いていきます

プレイヤーや敵キャラ、爆発の画像を読みこんでアニメーションとして設定します

マップ拡張ボタンをクリックしてマップを広げます

つくった画像があらわれて、マップを広げることができました

テストプレイすると、しっかりダッシュアタックできるゲームが完成しました！

テストプレイをすると、ジャングルの広いステージをダッシュで駆け抜け、

爆発を巻き起こしながら敵を倒す、本格的なアクションゲームになりました！

まとめ

このように、AIだけで、2D横スクロールアクションゲームのエディターをここまで秒で作り上げることができました

AIプログラミングの強みは「少しずつ修正しながら完成に近づけられる」点です

不具合が出てもすぐにプロンプトで直せますし、欲しい機能を追加指示するだけでどんどん進化します

これからもAIを使って、さまざまなゲーム開発に挑戦していきたいと思います！

・・・でも「何からやればいいかわからない」と悩んでいませんか？

今回はAIでゲームを制作する方法を解説します

今回は簡単にできる、2.5D横スクロールアクションのつくり方を紹介します

プログラミングをしなくてもカンタンにつくれます

ぜひチャレンジしてください！

Youtubeでも紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

このページのゲームは次のリンクからプレイできます

>> 「AIゲームのプレイ＆ガレージ」

AIプログラミングでつくったゲームの紹介

今回つくった2.5Dアクションゲームエディタです

このエディタでは3Dマップをつくることができ、2Dの敵キャラを置くことができます

このページでつくり方を紹介するゲームのエディターです

このエディタをGoogle AI Studioでサクッとつくり、アクションゲームをつくります

AIプログラミングサイトでゲームのお試しバージョンをつくる

Goole AI StudioのサイトでAIにプログラムをつくってもらいます

>> 「Google AI Studio」のサイト

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

メッセージボックスにつくるプログラムをタイプしてAIに伝えます

ダウンロードしたゲームエディタをプレイします

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

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

テストプレイをしてみよう

うごくゲームエディタがあらわれました

実行するとエディタ画面が現れます

AIに伝えた通り、マウス操作で地面を変えることができます

また、敵配置ボタンをクリックして敵を配置することができます

テストプレイもしっかり動かすことができます

テストプレイをしてみましょう

しっかりジャンプができて、敵に玉をあてることができます

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

ここからキャラの絵の差し替えとアニメーションをつくりたいと思います

ゲームキャラをピクセル＆ドット絵にする

ピクセル＆ドット絵のゲームキャラをつくる

ピクセルキャラをGoogle Geminiのサイトでつくります

>> 「Gemini」のサイト

スプライトシートをつくることができました

Google Geminiがスグに画像を生成してくれました

このスプライトシートから画像を分割します

画像編集サイトでゲーム用に背景を透過にする

Photopeaのサイトは高機能のオンライン画像編集サイトです

>> 「Photopea」のサイト

背景除去は色々な方法があるので、二つのパターンを紹介します

一つ目は応用がきく画像編集ソフトの方法です

「トリミングツール」で、つかわないキャラをカットします

編集画面に変わったら、左のメニューからトリミングツールをクリックして

必要なキャラだけ残します

投げ縄ツールで不要な部分をカットします

背景を一度にすべて選択して消します

次に選択ツールで背景をドラッグして一度に選択します

右クリックのメニューから他の部分をカットします

しっかり背景が消えました

ピクセル画像からプレイヤーキャラのアニメーションをつくる

キャラの歩いているアニメーションをつくります

>>「Grok」のサイト

Grokのサイトにアクセスしてアニメーションをつくります

画像ファイルをアップロードします

アニメーションさせたい言葉をいれます

アニメーションが完成したらダウンロードします

アニメーションから画像を取り出します

>>「Online Video Screensho」のサイト

このサイトは動画ファイルから画像をとりだすことができるサイトです

再生しながらゲームのキャラアニメーションに必要な画像をとります

すべて終わったらダウンロードボタンをクリックしてダウンロードします

背景を消すサイトにアクセスします

つづいてアニメーションから取り出した画像の背景を透明にします

このサイトはアップロードした瞬間に背景を消すことができます

これでプレイヤーキャラの必要なイラストはそろいました

敵キャラのピクセルアニメーションをつくる

敵キャラのピクセル画像をつくります

ワニの魔法使いであることをAIに伝えて生成します

しっかりイラストが完成しました

背景を消すサイトでキャラを一つにします

>> 「Photoroom」のサイト

背景を消すサイトで敵キャラのまとまったスプライトシートから一つずつに切りわけます

必要のないキャラをブラシで消します

一体のみになったらダウンロードします

Grokでアニメーションをつくります

>> 「Grok」のサイト

歩くアニメーションができました

ゲームのピクセルアニメーションにするために、画像を抽出します

>> 「Online Video Screenshot」のサイト

３体のキャラクターの背景をけします

敵キャラが現れるように、プログラムをつくりなおします

Google AI Studioでプログラムをつくりなおします

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

あたらしく作ったプログラムです

ピクセル画像つきのキャラクターがあらわれました

しかし、画像が明るすぎます

しっかりプレイヤーも敵もアニメーションするゲームになりました

玉もエフェクトがつきましたが、かなり不自然です

プレイヤーのイラストもすごい明るく、左右に動いた場合、反転しません

ここから、背景がないのでこの2Dマップを3Dにして背景を地形でつくりつつ

ボスを登場させて2Dアクションから2.5Dアクションにブラッシュアップさせたいと思います

2Dマップを3Dマップに変える＆2.5Dゲームにする

ボスキャラクターのピクセル画像をつくる

はじめにボスキャラをつくります

ピンク色のワニ魔法使いであることをつたえます

しっかりつくることができました

しっかり生成できたので、アニメーションをつくる準備をします

これまでと同じように一体ずつ分けます

>> 「Photoroom」のサイト

切り抜くために画像をアップロードしたら

必要なキャラ以外をカットします

一体だけ残して、他はすべて消します

しっかり消すことができました

Grokのサイトでピクセル画像をアニメーションさせます

>> 「Grok」のサイト

Grokのサイトにボスキャラをアップロードして、歩くアニメーションをつくります

敵キャラをアップロードするとアニメーションの画面になります

下のメッセージボックスにアニメーション用のテキストをいれます

ちょっとここじゃないって所に口が現れましたが

気にせず進みます

アニメーションのスクリーンショットをとり、画像をとり出します

>> 「Online Video Screenshot」のサイト

アニメーションのスクリーンショットをとれるサイトに移動します

アニメーションからイラストを切り出して

歩いている動きのためのスクリーンショットを全てとります

ゲームで歩くアニメーションにするために、取り出した画像です

とり出した画像をアップロードして背景を消します

これでボスキャラの準備ができました

次は、これまでと同じ方法で、とり出した画像の背景を透明にします

アクションエディタをつくりなおして3Dマップにする

Google AI Studioのサイトにもどり、

2Dマップから3Dマップエディタにするためにプロンプトをつたえます

次のポイントでAIにつたえます

・プレイヤーや敵を配置・移動できるのは「一直線上（2D軸）」のみ

・水面の高さ、時間帯、時間経過のスピードを自由に調節できる機能を追加すること

・メニューバーを操作している間は、誤ってマップを編集できないようにすること

・作成したボスキャラを配置できること

・PNG8形式以外の画像でも、正しい明るさで表示されるように修正すること

AIがつくったプログラムをダウンロードします

完成したゲームのテストプレイ

しっかり2.5Dアクションとして動くゲームが完成しました

Youtubeでは動いているゲームを見ることができます

AIが生成した新しいプログラムを実行すると、進化したエディタが起動します

ここで、先ほど作成したプレイヤーや敵、ボスの画像を読み込み、マップ上に配置していきます

配置が終わったら、実際にテストプレイをしてみましょう！

背景は奥行きのある3Dでありながら、キャラクターはしっかり2Dアクションとして動く、本格的な「2.5Dアクションゲーム」の完成しました

設定した時間経過の機能を使えば、ゲーム内で昼から夜へと景色を変化させることもできます

さらにクオリティを上げるには？

YouTube動画の方では複雑になるので省略しましたが、こんな感じのカスタマイズも可能です

• 背景に2.5Dのオブジェクト（木や建物など）を配置
  
• 3Dマップの地面にテクスチャ（模様）を貼って質感をリアルにする

このように、AIを活用すればプログラミングの深い知識がなくても、見栄えのする本格的なゲームを短時間で作成できます

ぜひ、ご自身のオリジナルキャラクターを使ってゲーム制作に挑戦してみてください！

・・・でも「何からやればいいかわからない」と悩んでいませんか？

今回は AIを使って弾幕縦スクロールシューティングゲームを一瞬で作る方法 について紹介します

プログラミング未経験でも、ノートPCとネットがあれば制作できる方法で紹介しています

ぜひチャレンジしてみてください

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIのゲーム制作でつかうサイトの紹介

Google AI StudioはAIプログラム機能に力を入れているサイトです

今回はこのサイトをつかってゲームをつくります

>> 「Google AI Studio」のサイト

今回つくるのは、弾幕系の縦スクロールシューティングゲームです

AIをつかえばゲーム制作で特に時間がかかる、プログラミング、素材作成を一気にすすめることができます

【補足】

シューティングゲームは「当たり判定」「敵の動き」「弾の制御」など本来は難易度が高いジャンルです

しかしAIプログラムならば、最初から遊べるプロトタイプをつくれるのが大きなメリットです

AIで弾幕シューティングゲームのプロトタイプをつくる

AIへ作りたいゲームをつたえる

まずは Google AI Studio（Gemini） を使って、

ゲームの土台となるプログラムを作成します

生成が完了したら、右上のダウンロードボタンから保存して実行します

【補足】

最初から完璧を目指す必要はありません

「動くかどうか」を確認できるプロトタイプを早く作ることで、これからの修正が楽になります

AIがプログラムをつくりはじめました

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

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

キャラクター・ボスキャラのイラスト生成

次に、ゲームに登場するキャラクターとボスキャラのイラストを作成します

黒色の服だと背景とかさなるので修正します

【補足】
ゲーム用イラストは、背景に埋もれない色と形も重要です

プレイヤーのイラストが完成しました

次はボスキャラをつくります

ボスキャラはあらかじめ生成したイラストをもとに生成しました

こちらはフリーで配布しますので、必要ならばご使用ください

イラストとテキストからボスキャラをつくります

大まかなイラストはOKなので、イラストをととのえます

しっかりボスキャラが完成しました

ゲーム背景イラストの生成

ゲームの背景をつくります

パターン画像がつくりやすい宇宙の背景にします

次は縦スクロール用の背景画像を作成します

今回は ChatGPT を使って宇宙背景を生成します

【補足】
ループ背景はGeminiよりChatGPTの方が成功率が高い印象があります

背景はシンプルな方が弾幕が見やすくなるため、描き込みすぎないのがおすすめです

完成した宇宙の背景画像です

フリーで配布するので、必要でしたらご使用ください

ゲーム音楽（BGM）の生成

ゲームBGMは「Suno AI」を使って作成します

>> 「Suno AI」の公式サイト

Suno AIはジャンルや雰囲気をテキストで入力するだけで、音楽を自動で生成できるサイトです

【補足】
BGMはゲームの印象を大きく左右します

テンポが速すぎると疲れやすいため、

弾幕ゲームでは少し落ち着いた曲も相性が良いです

３分くらいで自動で曲が完成します

音楽が完成したらダウンロードします

キャラクター画像の背景を透過する

キャラをアップロードして背景を透明にします

>> 「Photoroom」のサイト

キャラクター画像の背景は photoroom で透過します

アップロードするだけで自動で背景がなくなり、そのままPNGで保存できます

素材を組み込んだゲームプログラムを生成

プログラムをバージョンアップします

すべての素材を Google AI Studio にアップロードし、もう一度プログラムを生成します

BGMの再生、敵弾の速度調整などもまとめて指示します

イラスト変更とブラッシュアップ

キャラクターの画像を入れかえます

Geminiのサイトにアクセスしてイラストをつくります

背面になりませんでしたが、

しっかり魔法使いの白猫が生成できました

しっかり後ろ向きのキャラクターが完成しました

最後にキャラクターやエフェクトを調整し、完成度を高めます

背面猫キャラへの変更や、ボスの動き・攻撃パターンを追加します

【補足】

AIとの会話が長くなりすぎたら、
一度会話をリセットして再生成した方が早くうまくいくことがあります

ゲームをさらに改良してメリハリがあるゲームにします

AIのプログラムがおわって、キャラを入れかえたゲームです

しっかりキャラがいれかわりメリハリがあるゲームになりました

まとめ

AIを活用すれば、プログラミングの経験がなくても本格的なシューティングゲームをつくれます

ぜひチャレンジしてみてください！

と悩んでいませんか？

この記事ではAIをつかってビジュアルノベルゲーム を即つくる方法について紹介します

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

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIで制作したビジュアルノベルゲームの紹介とつくり方の流れ

このGoogle AI Studioのサイトを使います

ノベルゲーム専用のゲームエンジンではなく、AIでゲームをつくります

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

とくにRenpyは多くのユーザが使用しているソフトです

しかしビジュアルノベル作成ソフトだと使い方をおぼえるのに時間がかかります

ビジュアルノベルのプログラムをAIでつくれば、使い方をおぼえる必要がありません

また無料ですぐに作ることができるので、AIを使ったゲーム制作はとてもオススメの方法です

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

Youtubeとこのページで紹介しているゲームのプログラムです

位置修正ツールも配布しているのであわせて、参考にしてください

AIをつかってビジュアルノベルゲームのプログラムをつくる

ビジュアルノベルゲームのカンタンなベースプログラムをつくろう

はじめにAIプログラミングができるGoogle AI Studioのサイトに移動します

>> 「Google AI Studio」のサイト

「RUN」をクリックするとAIがHTMLプログラムを生成します

しっかりゲームが動きました

ビジュアルノベルのキャラや背景をつくろう

キャラクターを登場させるためにイラストをつくります

キャラクターが生成されましたが、帽子が派手すぎてゲームと合いません

続けてさらにいいキャラクターをつくります

今までのイラストをもとに、キャラクターをつくります

しっかりAIに伝えたとおりのキャラクターが生成できました

さらにもう一つキャラクターをつくります

生成したいイラストをAIに伝えます

同じタッチのイラストが生成できました

つづいてゲームでつかうためにキャラを分割します

>> 「My Edit」のサイト

画像をアップロードしただけで背景が透明になります

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

もう一キャラも同じように切りぬきます

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

このサイトではPhotoShopのように細かく編集できます

なげなわツールでいらない部分を消します

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

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

おおまかな絵からリアルなイラストをつくることができます

イラストが完成したらダウンロードします

ここまでつくった絵でプログラムをつくります

AIがプログラムをつくります

キャラがセリフに合わせて、表情が変わるようになりました

ここからはストーリー分岐やさらにストーリーをくわえます

あたらしいキャラがあらわれました

キャラの背景を透明にします

つづきのストーリーの背景をつくります

新しい素材、ストーリーをプラスすることをAIに伝えます

生成したプログラムをダウンロードします

しっかり、新しいキャラがあらわれました

しかし、大きさが少しおかしいです

ビジュアルノベルゲームのキャラ調整ツールをつくろう

キャラの位置を変えるツールをつくります

次は有名なノベルゲームツールでもかなり大変なキャラの位置調整について、

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

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

キャラの大きさを変えた後のプログラムがあらわれます

ゲームプログラムを直接書き換えます

ゲームキャラの大きさと位置がしっかり変わりました

ここまでご覧いただきありがとうございます

他のページでもゲーム作成を紹介しているので合わせてご覧ください

・・・と悩んでいませんか？

この記事ではAIをつかってアクションゲーム を一瞬でつくる方法について紹介します

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

紹介の流れとなる目次です

このブログの内容はYoutubeでさらにくわしく紹介しています
>> イラスト55 @ クリエイティブ情報を紹介

AIゲーム生成でつかうサイトの紹介

AIでプログラムなど、生成することに特化したサイトです

今回はこのサイトでAIプログラム生成をしたいとおもいます

>> 「Google AI Studio」のサイト

Piskel：ピクセル画像のスプライトシートを分割 ＆ アニメーション

ピクセル画像のアニメーションに特化したサイトです

こまかくピクセルアニメーションのコントロールができます

>> 「Piskel」のサイト

AIで制作したゲームの紹介と流れ

今回つくるゲームがじっさいに動いてる動画です

ゲームのイメージがわかるので、ぜひ記事と一緒にごらんください

AIをつかってアクションゲームのプログラムをつくる

Google AI Studioでアクションゲームのうごきをつくる

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

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

AIが生成したゲームをプレイしてみよう

生成したプログラムの「敵を多くする＆敵の種類をふやす」ように変える

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

生成が終わったゲームをプレイすると、しっかり敵が増えたゲームになります

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

生成が終わったゲームをプレイしました

AIでゲームキャラクターのアニメーションをつくる

ChatGPTのサイトにうつり、ピクセル画像のスプライトシートをつくります

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

つぎはこのスプライトシートの背景を透明にします

背景を透明にするために、画像の編集サイトに移動します

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

おおきさも調整します

次は透明になったスプライトシートを分割します

読み込んだスプライトシートを４つに分けます

ツールをつかってアニメーションがしっかり動くように調整します

しっかり動くようになったらダウンローダーします

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

Google AI Studioでプログラムをつくります

プログラム生成が終わったゲームをプレイすると、キャラクターが動くようになりました

ゲームの背景画像をつくる

つぎはゲームの背景画像をつくります

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

生成した画像をゲーム背景にすることをAIに伝えます

・背景がしっかり表示されて、ゲームっぽくなりました

つぎは敵キャラの画像をつくります

できあがりましたが、さらに自然な正面からの画像に変えたいと思います

つくった敵キャラをゲームに登場させるプログラムをつくります

プログラムにつくった画像を追加します

完成したプログラムをプレイします

まとめ

AIのプログラミングは他のページでも紹介しています、あわせてごらんください

と悩んでいませんか？

このページでは、だれでも、できる方法でゲームのつくり方を紹介しています

今回は、3Dゲームで背景を表示する方法とドラッグで360度カメラを動かす方法を紹介します

ぜひ、チャレンジしてください

つぎの目次の流れにそって進めます

Youtubeでさらにくわしく、ゲームのつくり方を紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

・Unityをはじめて聞いた方

Unityとはゲームをつくためのソフトです

Unityは世界でもっとも使われているゲームをつくるためのソフトです

公式サイトからインストールプログラムをダウンロードすることができます

＜Unity公式サイト＞
https://unity.com/ja

Unityのインストールの方法を次のページで紹介しています

ぜひ、合わせてご覧ください

＜UNITYのインストール方法と 初めての使い方を 紹介しているページ＞
https://illust55.com/2018/

・HDRIとはなんなの？

今回、ご紹介するHDRIは360度のパノラマ背景です

HDRIは360度見ることができる3DやVRのための背景です

前だけではなく、後ろ、上、下も背景になります

・無料３D背景のHDRI画像とドラッグで360度カメラを動かそう

・背景の部品をダウンロードしよう

無料の3D背景をダウンロードできるHDRIヘブンにアクセスしてください

HDRIが現れます

「Download」のボタンをクリックするとダウンロードがはじまります

・Unityに背景の部品をくわえよう

Unityを起動してください

３Dのプロジェクトをつくります

ダウンロードした「HDRI」ファイルをドラッグ＆ドロップしてください

読みこんだファイルをクリックしてください

背景に映すために「マテリアル」ファイルをつくります

3Dの背景に「マテリアル」の種類を変えます

HDRIファイルを「マテリアル」に設定します

背景の設定ウィンドウが現れます

背景を設定します

背景が現れました

・3Dの背景をドラッグで360度見渡すプログラムをつくろう

このままではプレイ中にドラッグで、360度見ることができません

プログラムファイルをつくります

ダブルクリックするとプログラムを変えられるソフトが起動します

次のプログラムを貼り付けてください

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class NewBehaviourScript : MonoBehaviour
{
    public float speed = 3.5f;
    private float X;
    private float Y;

    // Start is called before the first frame update
    void Start()
    {
     
	 }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetMouseButton(0))
        {
            transform.Rotate(new Vector3(Input.GetAxis("Mouse Y") * speed, -Input.GetAxis("Mouse X") * speed, 0));
            X = transform.rotation.eulerAngles.x;
            Y = transform.rotation.eulerAngles.y;
            transform.rotation = Quaternion.Euler(X, Y, 0);
        }
    }
}

変えたことをセーブします

カメラのパーツをクリックしてください

カメラのパーツにプログラムを加えます

テストプレイで確認してください

・3Dの背景をドラッグで360度見渡せることを確認しよう

テストプレイで360度、カメラを動かすことができます

まとめ

今回は、3Dゲームで背景を表示する方法、ドラッグで360度カメラを動かす方法を紹介しました

Youtubeでは、さらにおもしろく作り方を紹介しています

また、他のページでもゲームのつくり方について紹介しています

>> Youtubeチャンネル イラスト55 @ クリエイティブ情報を紹介

>> Unityのカテゴリーページ

・・・と悩んでいませんか？

このページでは、ゲームつくりを誰でも、できる方法で紹介しています

今回はゲームエンジンのUnityで、パズルゲームをつくり、プレイヤーの形を変える方法を紹介します

ぜひ、チャレンジしてください

つぎの目次の流れにそって進めます

Youtubeでも、ゲームのつくり方を紹介しています

>> イラスト55 @ クリエイティブ情報を紹介

・Unityってなに？なにができるの？

Unityはゲームをつくるソフトです

Unityは、趣味のゲームから一流のゲームまで世界中で使われています

Unityでつくられたソフトを紹介します

Unityを始めるにはどうすればいいの？

Unityを始めるためには、インストールプログラムをダウンロードする必要があります

インストールプログラムは、公式サイトからダウンロードできます

＜Unity公式サイト＞
https://unity.com/

Unityのインストール方法を次のページで紹介しています

ぜひ、合わせてご覧ください

＜UNITYのインストール方法と 初めての使い方を 紹介しているページ＞
https://illust55.com/2018/

次はアクションパズルゲームをつくる方法を紹介します

・アクションパズルゲームをつくろう

・ゲームに必要な部品をダウンロードする準備をしよう

ゲームの部品をダウンロードする準備をします

ゲームの部品をダウンロードする準備をします

自分のアカウントに追加してください

・ゲーム部品をUnityにダウンロードしよう

Unityを起動してください

新しいゲームのファイルをつくります

ゲーム部品のウィンドウを表示します

自分のゲーム部品を表示します

ゲーム部品のダウンロードをします

ダウンロードしたゲーム部品を取りこみます

メッセージが表示されます

・プレイヤーの形を変えよう

今回は、用意されているサンプルを使います

テストプレイで動きを確認してください

元の画面に戻ります

・キャラクターをボールの形にしよう

プレイヤーのゴーグルを変えます

プレイヤーのゴーグルが消えます

プレイヤーをボールに変える準備をします

プレイヤーの形が変わったことを確認してください

プレイヤーのぶつかり判定をボールに合わせます

プレイヤーの表面を変える準備をします

プレイヤーの表面が変わります

・テストプレイで確認しよう

テストプレイで動きを確認してください

・まとめ

今回は「Unity」でアクションができるパズルゲームを作る方法、
プレイヤーの形を変える方法を紹介しました

このブログでは、他のページでもゲームのつくり方を紹介しています

ぜひ、合わせてご覧いただき、ゲーム作りにチャレンジし続けてください

Youtubeでもゲームの作り方を紹介しています

また、他のページでもゲームのつくり方について紹介しています

>> 動画で紹介！ゲームと映像のつくり方

>> 他のゲームの作り方のページ

と考えていませんか？

このページでは、誰でも、できる方法でゲームのつくり方を紹介しています

今回は「Unity」と「Bolt」というソフトを使います

流行りの、パズルのように、プログラムを作る方法を紹介します

同じ内容をプログラミングでつくる方法のページを紹介します

ぜひ、はじめにご覧ください

次の目次にそって紹介します

・Unityとは何？どんなゲームを作ることができるの？

Unityはゲームをつくるソフトです

Unityは無料でゲームを作ることができるソフトです

Unityで作られたゲームを紹介します

Unityは世界中の、一流 ～ 趣味のゲーム作りに使われています

・Unityはどうすれば始められるの？

Unityを始めるには、インストールする必要があります

Unityを始めるためにはプログラムをダウンロードする必要があります

公式サイトからインストールプログラムをダウンロードしてください

＜Unity公式サイト＞
https://unity3d.com/jp/

次のページでインストールの方法を紹介しています

ぜひ、合わせてご覧ください

＜UNITYのインストール方法と 初めての使い方を 紹介しているページ＞
https://illust55.com/2018/

次は、パズルのようにプログラムを作る方法を紹介します
（※ ビジュアルスクリプティング）

・UnityとBoltでカンタンにプログラムをつくろう

・ゲーム部品（アセット）をダウンロードする準備をしよう

ゲーム部品をダウンロードする準備をします

自分のアカウントに追加します

・ゲーム部品（アセット）をUnityにダウンロードしよう

Unityを起動してください

3Dのゲームのプロジェクトを作ります

自分のゲーム部品（アセット）を表示する準備をします

自分のゲーム 部品（アセット）を表示します

ゲーム部品（アセット）をダウンロードしてください

ダウンロードした部品をゲームに取り込みます

・「Bolt」を始めるための設定をしょう

・ボールと地面をつくろう

地面を作ります

地面を作りました

ボールをつくります

ボールをつくりました

ボールを地面の上に動かします

ボールに重力をプラスします

ボールに重力を加えました

パーツがプラスされたことを確認してください

・「Bolt」でプログラムをしよう

ボールに「Bolt」のパーツを加えます

今回は、「Bolt」のパーツを一つだけ作ります

「Bolt」で作るプログラムファイルを保存します

エディット画面に入ります

「Bolt」の画面が現れました

ボールの動きを変えるパーツを追加します

パーツが追加されたことを確認してください

プレイヤーのコントロールを受け取るパーツを加えます

パーツが現れたことを確認してください

同じパーツをもう一つ、作ります

コピーしたパーツを貼りつけます

ヨコとタテのコントロールを取るように、作ります

コントロールの動きに「かけ算」ができるパーツを加えます

同じパーツをもう一つ、作ります

コピーしたパーツを貼りつけてください

コントローラの動きに「5」を「かけ算」するようにします

パーツをそれぞれ、つなぎます

・プログラムを読もう

今回、作ったプログラムの動きを説明します

キーボードの動き通りにボールが動くことを確認してください

・まとめ

今回は「Unity」と「Bolt」を使い、パズルをつなぐように作れるプログラムを紹介しました

Unityは「使い方を学ぶ」のトレーニングコースも用意されています

ぜひ、ゲーム作りのチャレンジを続けてください

他のゲーム作りのページを紹介します

ぜひ、合わせてご覧ください

ここまで、ご覧いただきまして、ありがとうございました

と悩んでいませんか？

このページでは、誰でも、わかるようにゲームつくり、プログラミングについて紹介します

今回は「Unity」というソフトを使い、超初心者でも大丈夫な、プログラミング体験をご案内します

プログラミングで、プレイヤーの操作でボールを動かします

次の目次の流れにそって説明します

・Unityとは何？どうすればプログラミングできるの？

・Unityをインストールしよう

Unityはゲームをつくるためのソフトです

次のゲームもUnityを使い、つくられました

Unityはゲームつくり以外にも多くのことができます

今回は、プログラミングを作り、体験します

Unityを始めるのはインストールする必要があります

Unityを始めるためには、公式サイトからダウンロードする必要があります

＜Unity公式サイト＞
https://unity.com/ja

インストールの方法を次のページで紹介しています

ぜひ、合わせてご覧ください

＜UNITYのインストール方法と 初めての使い方を 紹介しているページ＞
https://illust55.com/2018/

次は、ボールを動かすプログラミングについて紹介します

・ボールを動かすプログラムをつくろう

・プログラミングで動かすボールを用意しよう

Unityの新しいファイルを作ります

3D用のファイルをつくります

地面をつくります

地面が画面に現れます

ボールをつくります

ボールが画面に現れました

・テストプレイでボールが空中に止まることを確認しよう

ボールの位置を動かし、テストプレイで確認します

ボールは空中から動きません

・ボールに重力を加えよう

ボールに重力を加えます

ボールに重力パーツを加えます

テストプレイで確認します

ボールに重力が加わりました

・3Dボールに加えるプログラムのファイルをつくろう

ボールにプログラムを加える準備をします

プログラミングするためのファイルが現れます

今回は、トラブルがないようにメモ帳を使います

・プログラミングしよう

プログラムに使うファイルがあることを確認してください

メモ帳でプログラムにつかうファイルを開きます

メモ帳にプログラムをコピー＆ペーストしてください

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class NewBehaviourScript : MonoBehaviour
{
	
    private Rigidbody rigidbody_Ball;

    // Start is called before the first frame update
    void Start()
    {
    
        
       rigidbody_Ball = GetComponent<Rigidbody>();
        
    }

    // Update is called once per frame
    void Update()
    {
        
    	float 	f_MoveHorizontal;
    	float 	f_MoveVertical;
    	Vector3 vector_Movement; 
    	
        
        f_MoveHorizontal = Input.GetAxis("Horizontal");
        f_MoveVertical = Input.GetAxis("Vertical");

        
        vector_Movement = new Vector3(f_MoveHorizontal, 0, f_MoveVertical);

        
        rigidbody_Ball.AddForce( vector_Movement * 3 );
    }
}

プログラムを説明した図になります

カンタンに参考にしてください

プログラムを全てわかる必要はありません

今回は、次のことを考えて、プログラムを読んでください

ぼんやりとした全体のイメージを描いて頂くだけで、大丈夫です

・3Dボールにプログラミングしたファイルを加えよう

ボールにプログラミングしたファイルを加えます

ボールにプログラミングしたファイルが加わったことを確認してください

・3Dボールが動くことを確認しよう

キーボードの操作で動くことを確認します

・ボールと地面に色をつけよう

・ボールに色をつけよう

色の部品パーツをつくります

色の部品パーツの色を変えます

色の部品パーツを3Dボールに加えます

・地面の色も変えよう

色の部品パーツをつくります

地面の3Dオブジェクトに色の部品を加えます

・カメラの位置をナナメ上にしよう

カメラの位置を調整します

自分が見ている位置に動かします

テストプレイで確認します

・まとめ

今回は「Unity」を使った、プログラミングを学びました

プログラミングは言葉と同じです

くり返し話すことで、自然とわかります

ムリに覚える必要はありません

ここまで、ご覧いただき、ありがとうございました