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

Unityでブロック崩しを作る基礎講座3:跳ね返るボールを作る

2024年8月17日

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

この記事は、

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

の3番目の記事です。

今回の内容は、

跳ね返るボールの作り方

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

行っていく作業は、

今回の作業

1、ChatGPTでボールの作り方を確認する

2、ボールのゲームオブジェクトを作成する

3、ボールの位置と大きさの調整をする

4、ボールに当たり判定などをつける

5、ボールのプログラムを作る

6、テストプレイをして動作を確認する

7、CatGPTでボールが跳ね返らない修正案を確認する

8、再度テストプレイを行なって確認する

といった内容になります。

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

スポンサーリンク

1、ChatGPTでボールの作り方を確認する

まずはChatGPTでボールの作り方を
確認していきます。

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

ボールを作りたいです。作り方を詳しく教えて

と入力をして、送信します。

チャットGPTにやりたいことを入力して送信します

そうするとChatGPTから返答が来ます。

ChatGPTの返答

チャットGPTの返答1
チャットGPTの返答2
チャットGPTの返答4
チャットGPTの返答3

このようにざっとボールの作り方について
書き出してくれるので、これで作業手順の
確認をしたら次に進んでいきましょう。

2、ボールのゲームオブジェクトを作成する

それでは次は、Unityで

ボールのゲームオブジェクトの作成

をしていきますね。

ヒエラルキーの+ボタンをクリックするか、
右クリックをして出てきたメニューから、

「2D Object → Sprites → Circle」

と選んでクリックをします。

Circleの位置はここ

そうすることで丸い画像のオブジェクトが
作られました。

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

これの名前が変更できますので、

「Ball」

と名前を入力して決定します。

名前をBallに変更した画像

これでボールのゲームオブジェクトを
作成する作業は完了です。

3、ボールの位置と大きさの調整をする

次は、

作ったボールの位置と大きさの調整

をしていきましょう。

まず位置の調整です。

Untiyのムーブツールを選択し、

ツールバーにある十字マークがムーブツールです

矢印をドラッグ&ドロップして
パドルの近くに持っていきましょう。

ムーブツールの矢印をクリックしたまま動かしてBallをPaddleの近くに移動させた画像

そして、パドルの近くに移動させたら、
位置の微調整をします。

InspectorのTransformの
Positionの数値を変更して、
Xを「0」、Yを「−3.5」にしました。

インスペクターのトランスフォームのポジションのXとYの数値を変更した画像

位置の調整ができたら次は、
ボールの大きさを変更します。

InspectorのTransformの
Scaleですね。

こちらのXを「0.5」、
Yを「0.5」に設定します。

スケールの数値を変更してボールの大きさを調整した画像

これで、ボールの大きさも
丁度いい感じになりました。

4、ボールに当たり判定などをつける

ボールの見た目を作り終わったら、
次は当たり判定などの機能をつけていきます。

今回も当たり判定であるコライダーと、
物理的な動作を行うために必要な
リジッドボティをつけていきますね。

今回はリジッドボディ2Dから付けていきます。

Hierarchy(ヒエラルキー)でボールの
オブジェクトをクリックして
Inspectorを表示させます。

ヒエラルキーのBallをクリックした画像

その後、Inspectorの下の方にある
Add Component(アドコンポーネント)をクリック。

そして表示された検索窓に
「r」と入力をしましょう。

アドコンポーネントの検索窓にrと入力した画像

そして出てきた候補の中から

「Rigidbody2D」

を選んでクリック。

リジッドボディ2Dを選んでいる画像

これで、物理的な動作を行うために必要な
リジッドボディ2Dを付けることができました。

インスペクターにリジッドボディ2Dが表示された画像

リジッドボディ2Dをつけたら
次は当たり判定をつけていきます。

Inspectorのアドコンポーネントを
もう一度クリックして、表示された
検索窓に「c」と入力をします。

アドコンポーネントの検索窓にcと入力した画像

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

「Circle Collider 2D(サークルコライダー 2D)」

を選んでクリックします。

サークルコライダー2Dを選んだ画像

今回はボールなので丸い形の当たり判定である
サークルコライダー2Dを付けました。

インスペクターにサークルコライダー2Dが表示された画像

そして、Inspectorで
リジッドボディ2Dを見ると

「Gravity Scale(グラビティスケール)」

という項目があります。

グラビティスケール(重力)が1になっている画像

これが重力の数値なのですが、
ボールに重力をつけたくないので、
数値を0に変更しておきます。

グラビティスケール(重力)を0にした画像

これで当たり判定などの設定はOKです。

5、ボールのプログラムを作る

そうしましたら次は、

ボールを動かすプログラム

を作っていきます。

プロジェクトウインドウの
+ボタンをクリックして、

プロジェクトウインドウのプラスボタンはここ

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

表示したメニューからC#Scriptを選んだ画像

そうすることで新しいスクリプトの
ファイルが作られます。

新しいC#スクリプトが作られた画像

名前が変更できるように
なっているので、

「BallController」

と入力をして決定。

名前をBallControllerに変更した画像

これでボールのプログラムを書くファイル
(スクリプト)が作れましたので、
ダブルクリックをして開きましょう。

ビジュアルスタジオ等でボールの
スクリプトが開いたら内容が表示されます。

ビジュアルスタジオなどのコードエディタでBallControllerスクリプトの内容を表示した画像

そうしたら、ChatGPTの画面を開いて
生成されたプログラムのコードを
コピーします。

チャットGPTで生成されたコードをコピーした画像

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

BallControllerの内容を全て選択した画像

その後、コピーしたコードを貼り付けます。

コピーしたチャットGPTのコードを貼り付けた画像

今回使用したコード

using UnityEngine;

public class BallController : MonoBehaviour
{
    public float initialSpeed = 10f;
    private Rigidbody2D rb;

    void Start()
    {
        rb = GetComponent<Rigidbody2D>();
        LaunchBall();
    }

    void LaunchBall()
    {
        // ボールに初期速度を与える
        float randomDirection = Random.Range(-1f, 1f);
        Vector2 initialDirection = new Vector2(randomDirection, 1).normalized;
        rb.velocity = initialDirection * initialSpeed;
    }

    void OnCollisionEnter2D(Collision2D collision)
    {
        // ボールが壁やパドルに当たった時の反射処理
        // 必要に応じて効果音やエフェクトを追加できます
    }
}

そして貼り付けたらセーブをしたいので
上部のメニューから、

「ファイル → 保存」

とクリックをするか、

キーボードのショートカットで
保存をします。

ショートカット

Windowsの場合 → 「Ctrl」を押しながら「S」をクリック

Macの場合 → 「command」を押しながら「S」をクリック

6、テストプレイをして動作を確認する

プログラムを作ったら次は、

テストプレイを行って動作の確認

をしていきます。

まず、ボールのゲームオブジェクトに
ボールのスクリプトをつけていきましょう。

ヒエラルキーでBallをクリックして
Inspectorを表示させます。

ヒエラルキーのBallをクリックした画像

そうしたらプロジェクトウインドウにある
ボール用のスクリプトをクリックしたまま
動かしていき、

Inspectorのアドコンポーネントの
あたりに持っていったら、クリックを離します。

スクリプトファイルをドラッグ&ドロップしてBallにつける画像

これでボール用のスクリプトが
ボールのオブジェクトにつきました。

ボールにスクリプトがついた画像

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

プレイボタンをクリックしてテストプレイを行う画像

テストプレイを行うとボールが動きまして、
壁にぶつかった時に跳ね返ればOKですが、

今回は跳ね返らないで壁にボールが
くっついているような状態に
なってしまいました。

ボールが跳ね返らずに壁にくっついてしまった画像

Unityでゲームを作ったことがある人だと
なんとなく原因が見えていると思いますが、
ここから修正をしていきます。

7、CatGPTでボールが跳ね返らない修正案を確認する

ボールが跳ね返らなかったので、
今回はChatGPTでボールの修正案を
確認してみました。

ボールが跳ね返ってきません。修正案をお願いします

と入力して送信します。

ボールの修正案をチャットGPTに聞く画像

するとざーっと修正案について
書き出してくれましたので、
確認をしていきます。

ChatGPTの返答

チャットGPTの修正案1
チャットGPTの修正案2
チャットGPTの修正案3

まず、リジッドボディ2Dの設定を変更しました。

Collision Directionという項目がありますが、

Collision Detectionの位置はここ

ここをクリックして、表示したメニューから

「Continuous」

をクリックして設定します。

Continuousをクリックした画像

この変更で、高速移動中に衝突したことを
しっかりと検出できるようになるんですね。

今の速度なら大丈夫ですが、今後ボールの
速度を早くすることもあると思うので、
設定をしておきました。

Continuousが設定された画像

そして次に、

2Dの物理マテリアル

を作成します。

この物理マテリアルをつけることが
修正の本命ですね。

プロジェクトの+ボタンをクリックして、
表示したメニューの2Dから
「Physics Material 2D」をクリック。

フィジックスマテリアル2Dを選んだ画像

そうすることで、2Dの物理マテリアルが
作成できて名前が変更できます。

新しいフィジックスマテリアル2Dが作られた画像

名前を「BounceMaterial」と入力して決定。

これで2Dのマテリアルの作成はできました。

フィジックスマテリアル2Dの名前を変更した画像

そうしたら次は物理マテリアルの
設定を行います。

プロジェクトウインドウにある
2Dの物理マテリアルを選択した状態で、
Inspectorを見ていきますと、

・Friction(フリクション)

・Bounciness(バウンシネス)

といった項目があります。

これらは数値が設定できるのですが、
フリクションが摩擦で
バウンシネスが弾力性なんですね。

フリクションを0にして摩擦をなくし、
バウンシネスを1にすることで
ボールが跳ね返るようにします。

これで2Dマテリアルの設定は完了です。

フリクションとバウンシネスの数値を設定した画像

2Dマテリアルの設定ができたら、
あとはボールなどに適用していきます。

まずボールから行いますね。

ヒエラルキーのボールをクリックして
Inspectorを表示させます。

ヒエラルキーのボールを選択した画像

そしてプロジェクトウインドウにある
2Dのマテリアルをクリックしたまま
動かしていき、

Inspectorのサークルコライダーの
項目にある「Material」へ持っていって
クリックを離します。

フィジックスマテリアル2Dをボールに設定する画像

そうすることで、先ほど作った
「BounceMaterial」が設定されました。

コライダーのマテリアルという項目にフィジックスマテリアル2Dを設定できた画像

ボールに設定しておけばとりあえず
跳ね返るようになりますが、

今回はChatGPTの修正案を参考にして、
壁とパドルにも適用していきます。

先ほどボールに「BounceMaterial」を
適用した時と同じようにして、

・パドル

・上の壁

・左の壁

・右の壁

のオブジェクトにもつけていきます。

手順は先ほどのボールと同じで、

物理マテリアルをつける作業の流れ

1、ヒエラルキーでそれぞれのオブジェクトをクリックしてInspectorを表示させる

2、プロジェクトウインドウの「BounceMaterial」をクリックしたまま動かす

3、Inspectorのコライダーの項目の「Material」の欄に持っていったらクリックを離す

という流れで物理マテリアルを
適用することができます。

パドルと壁のオブジェクトにつけることが
できたら2Dマテリアルを適用させる
作業は完了です。

あとは、ボールのスクリプトの修正案も
あったので、ChatGPTのコードをコピーします。

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

そしてビジュアルスタジオを開いて、
ボールのスクリプトを全て選択。

ボールのスクリプトのコードを全て選択した画像

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

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

修正後のコード

using UnityEngine;

public class BallController : MonoBehaviour
{
    public float initialSpeed = 10f;
    private Rigidbody2D rb;

    void Start()
    {
        rb = GetComponent<Rigidbody2D>();
        LaunchBall();
    }

    void LaunchBall()
    {
        // ボールに初期速度を与える
        float randomDirection = Random.Range(-1f, 1f);
        Vector2 initialDirection = new Vector2(randomDirection, 1).normalized;
        rb.velocity = initialDirection * initialSpeed;
    }

    void OnCollisionEnter2D(Collision2D collision)
    {
        // 反射の挙動を保証するため、速度の大きさを一定に保つ
        Vector2 newVelocity = rb.velocity.normalized * initialSpeed;
        rb.velocity = newVelocity;
    }
}

修正後のコードを貼り付けたら、
上部のメニューから

「ファイル → 保存」

とクリックをしてセーブしたら
修正はOKです。

8、再度テストプレイを行なって確認する

ChatGPTに確認をした修正案を
いくつか適用したので、

再度テストプレイを行って
ボールの動きを確認していきます。

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

プレイボタンをクリックしてテストプレイを行う画像

先ほどとは違ってちゃんとボールが
跳ね返るようになればOKです。

ボールが跳ね返るように修正ができた画像

これが確認できましたら、
今回の作業は完了となります。

9、まとめ

今回の記事では、

ブロック崩しの跳ね返るボールの作り方

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

作業内容としては、

今回の作業

1、ChatGPTでボールの作り方を確認する

2、ボールのゲームオブジェクトを作成する

3、ボールの位置と大きさの調整をする

4、ボールに当たり判定などをつける

5、ボールのプログラムを作る

6、テストプレイをして動作を確認する

7、CatGPTでボールが跳ね返らない修正案を確認する

8、再度テストプレイを行なって確認する

といった流れで8つにわけて行いましたが、
無事跳ね返るボールが作れました。

今回のように、ChatGPTに作業の確認をしても
何かが抜けていて、うまくいかない場合もあります。

そういった時には今回行ったように、
修正案をChatGPTに聞いて確認を
することで、

一人で悩むよりもスムーズに作業を
進めていけるように思いました。

ということで、今回の記事は以上となります。

次の記事では、ブロックを作っていきたいと思います。

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

次の記事 → ChatGPTとUnityでブロック崩しを作る基礎講座4:ブロックの作成と配置

スポンサーリンク

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