チャットGPTとUntiy ブロック崩しの作り方

Unityでブロック崩しを作る基礎講座2:プレイヤーが操作するバー(パドル)を作る

2024年8月10日

ども!カトサンラボのかとこうです。

この記事は、

ChatGPTとUnityでブロック崩しを作る基礎講座

の2番目の記事です。

今回は、

プレイヤーが操作するバー(パドル)

の作り方と作業の流れについて
お伝えをしていきますね。

行っていく作業は、

作業の流れ

1、ChatGPTでプレイヤーが操作するパドルの作り方を確認する

2、パドルのゲームオブジェクトを作る

3、パドルの位置や大きさを調整する

4、パドルに当たり判定などをつける

5、パドルを操作するプログラムを作る

6、パドルの動作を確認する

という内容になります。

それでは、1つ目の作業から解説していきますね。

スポンサーリンク

1、ChatGPTでプレイヤーが操作するパドルの作り方を確認する

まずはChatGPTでプレイヤーが操作する
パドルの作り方を確認していきます。

ChatGPTを開いたら、
チャット欄に

プレイヤーが操作するパドルを作りたいです。作り方を詳しく教えてください

と入力して送信します。

チャットGPTのチャット欄にメッセージを入力した画像

そうすると、ChatGPTの返答が返ってきました。

ChatGPTの返答

チャットGPTの返答の画像1
チャットGPTの返答2
チャットGPTの返答3

上記返答は途中までの画像ですが、
この返答を参考にしながら
作業を行っていきます。

2、パドルのゲームオブジェクトを作る

パドルの作り方を確認したら、
実際にUnityで作っていきましょう。

まず、画像のゲームオブジェクトを
新しく作成します。

Hierarchyでプラスボタンをクリックして

「2DObject → Sprite → Square」

を選んでクリック。

Squareの位置はここ

そうすることでHierarchyに
新しいオブジェクトが作られます。

新しいゲームオブジェクトが作られた画像

そして名前が変更できるので、

Paddle

と入力して決定。

Paddleという名前に変更した画像

これでパドルのゲームオブジェクトが作れました。

3、パドルの位置や大きさを調整する

次は作ったパドルの位置や
大きさを調整していきましょう。

まずは位置を調整します。

Unityのツールバーから
ムーブツールを選んでクリック。

ムーブツールの位置はここ

そしてパドルに表示された矢印を
クリックしたまま動かして位置を調整します。

画面の下の方に持っていきました。

あとで微調整するので、だいたいで大丈夫です。

Paddleオブジェクトを下の方に移動させた画像

そうしたらInspectorのTransformを見て、
Positionの数値を変更します。

Xの数値を「0」、Yの数値を「−4」に設定しました。

Paddleの位置を微調整した画像

そして位置を調整したら、
次は大きさの調整ですね。

InspectorのTransformの
Scaleを見て数値を変更します。

Xを「2」、Yを「0.5」に変更しました。

Paddleの大きさを調整した画像

これで、パドルが横長のバーのようになりました。

Paddleが細長いバーのようになった画像

そして大きさを変更したことで
位置が少しずれたので、位置を再調整します。

InspectorのTransformの
Positionを確認して、

Xを「0」、Yを「-4.5」という数値に変更しました。

Paddleの位置を微調整した画像

これで、パドルの位置と大きさの調整は完了です。

4、パドルに当たり判定などをつける

次はパドルに当たり判定のコライダーと
物理的な挙動を行うために必要な
リジッドボディ2Dをつけていきます。

まずは当たり判定からです。

Inspectorの下の方にある
Add Componentをクリックして、
表示された検索窓に「b」と入力をします。

Add Componentの検索窓にbと入力した画像

そうすると、bから始まるコンポーネントの
候補が表示されるので、その中から

「BoxCollider 2D」

を選んでクリック。

BoxCollider 2Dを選んでクリックする画像

そうすることで、当たり判定がつきました。

Paddleに当たり判定がついた画像

そして次は、Rigidbody 2Dをつけていきます。

Inspectorの下の方にある
Add Componentをクリックして、
表示された検索窓に「r」と入力をします。

Add Componentの検索窓にrと入力した画像

そうすると、rから始まるコンポーネントの
候補が表示されるので、

「Rigidbody 2D」

を選んでクリック。

Rigidbody 2Dをクリックする画像

これで物理的挙動を行うための機能もつきました。

Rigidbody2Dがついた画像

そしてここで、Rigidbody 2Dの
設定を一つ行います。

まず、Body Typeという項目をクリック

Rigidbody 2DのBody Typeはここ

表示したメニューから

「Kinematic」

をクリックします。

Kinematicをクリックする画像

これでOKです。

Kinematicが設定された画像

5、パドルを操作するプログラムを作る

そうしたら次は、

パドルを操作して動かすためのプログラム

を作っていきましょう。

まずは、新しくプログラムを
書くためのファイルを作ります。

下の方にあるProjectウインドウを
見まして、「Assets」をクリックして
Assetsフォルダを表示させます。

プロジェクトウインドウのAssetsをクリックした画像

そして、Projectウインドウの
+ボタンをクリックします。

プロジェクトウインドウの+ボタンの位置はここ

そして表示されたメニューから
「C# Script」をクリック。

新しいスクリプトファイルを作成する画像

そうするとProjectウインドウに
新しいスクリプトファイルが作られました。

新しいスクリプトファイルが作られた画像

そして名前を

「PaddleController」

に変更して決定。

スクリプトファイルの名前を変更した画像

これで新しくプログラムを書くための
ファイルが作れました。

そうしたら、このファイルを
ダブルクリックして開きましょう。

ビジュアルスタジオ等が起動して、
ファイルが開いたら次の作業に移ります。

コードエディタでスクリプトファイルの内容が表示された画像

ChatGPTが書いてくれたプログラムの
コードをコピーして貼り付けましょう。

まずはChatGPTで生成されたコードをコピー。

チャットGPTが生成したコードのコピーをする画像

コピーができたら、ビジュアルスタジオに
戻って元のコードを全て選択します。

プログラムコードの内容を全て選択した画像

そしてその後、コードを貼り付けていきます。

コピーしたコードを貼り付けた画像

貼り付けたプログラムのコードは、
キーボードの矢印でパドルを
操作できるようになっていて、

移動する範囲も決められる
内容になっています。

今回使用したパドルのコード

using UnityEngine;

public class PaddleController : MonoBehaviour
{
    public float speed = 10f;
    public float minX = -7.5f; // パドルが動ける最小X座標
    public float maxX = 7.5f;  // パドルが動ける最大X座標

    void Update()
    {
        // プレイヤーの入力を取得
        float move = Input.GetAxis("Horizontal");

        // 現在の位置を取得
        Vector3 currentPosition = transform.position;

        // 新しい位置を計算
        currentPosition.x += move * speed * Time.deltaTime;

        // パドルが画面外に出ないように制限
        currentPosition.x = Mathf.Clamp(currentPosition.x, minX, maxX);

        // パドルの位置を更新
        transform.position = currentPosition;
    }
}

コードを貼り付けられたら、
上にあるメニューの

「保存」

をクリックしてセーブします。

スクリプトファイルを保存した画像

これでプログラムを作る作業は完了です。

6、パドルの動作を確認する

プログラムが作れたら次は、
テストプレイを行っていきましょう。

実際にパドルが操作できるかを確かめます。

まず、パドルのオブジェクトに
プログラムのファイルをつけます。

Hierarchyにあるパドルの
オブジェクトをクリック。

Paddleのオブジェクトをクリックした画像

Inspectorが表示されたら、
プロジェクトウインドウにある

「PaddleController」

をクリックしたまま動かして、
Inspectorに持っていって
クリックを離します。

スクリプトをPaddleオブジェクトにつける画像

そうすることでInspectorに
表示がされて無事つきました。

Paddle用のスクリプトがついた画像

その後、テストプレイを行います。

シーンビューの上にある
プレイボタンをクリックして、
テストプレイを開始します。

テストプレイを開始する画像

テストプレイが始まったら、
キーボードの矢印で操作をしてみましょう。

左右に動かすことができたらOKです。

テストプレイでパドルの動作を確認してる画像

そして、動かせる範囲が決まっているので、
横に動かしていくと途中で止まります。

左右の壁よりも移動できた場合には
少し調整をしましょう。

パドルが壁の中まで移動できてしまっている画像

一度テストプレイを終了したいので、
プレイボタンをクリックします。

テストプレイ中にプレイボタンをクリックするとテストプレイが終了します

そして、Hierarchyでパドルの
ゲームオブジェクトをクリックして
Inspectorを表示します。

Inspectorに表示されている
プログラムのところを見ると、

「Min X」

「Max X」

という項目があり、それぞれ数値を
設定できるようになっているんですね。

左右の移動制限をする項目の位置はここ

このMin Xの数値を「-7」に、
Max Xの数値を「7」に変更しました。

移動制限の数値を変更した画像

これでもう一度テストプレイを行っていきます。

テストプレイが始まったのでパドルを
壁の方まで移動させてみると、
壁の横で止まるようになりました。

paddleの移動がちゃんと制限された画像

これが確認できたらOKなので、
プレイボタンをもう一度クリックして、
テストプレイを終了します。

以上で、プレイヤーが操作する
パドルの作成は完了です。

7、まとめ

この記事では、ブロック崩しで
プレイヤーが操作する

「バー(パドル)を制作する手順」

についてお伝えをしてきました。

全部で6つの工程がありましたが、
ChatGPTをうまく使うことで
作業を短縮できたところもあったと思います。

特にプログラムですね。

1からコードを書かなくて済むので
かなり作業効率が上がるように思います。

無事パドルが作れましたら、
今回の作業は完了となります。

次の記事では、跳ね返るボールの作り方を紹介しますね。

それでは次の記事へ進んでいきましょう!

次の記事 → ChatGPTとUnityでブロック崩しを作る基礎講座3:跳ね返るボールを作る

スポンサーリンク

-チャットGPTとUntiy, ブロック崩しの作り方