【２Ｄ】プレイヤーの向きに応じて傾く直線上に弾を配置して発射する機能

　２Ｄゲームにおいて、プレイヤーの向きに応じて傾く直線上に弾を配置して発射する機能の学習を行います。

　この処理において最も重要なのは、プレイヤーの向いている方向に対して、弾を発射する位置も傾ける必要があります。

　これを２つの動画で見比べて確認しましょう。

＜確認動画　ーダメなパターン(弾を配置している位置に傾きが反映されていない)ー＞

動画ファイルへのリンク

＜確認動画　ーよいパターン(弾を配置している位置に傾きが反映されている)ー＞

動画ファイルへのリンク

　上の傾きがないパターンの場合、弾の配置される位置が固定化されています。
そのため、横方向に弾を発射した場合、同じ位置に重なって発射される形になります。

　弾の数が増えた場合、配置する位置を延長する機能も実装しています。

動画ファイルへのリンク

１．考え方

　この処理において最も重要なのは、プレイヤーの向いている方向に対して、弾を発射する位置も傾ける必要がある、ということです。
ただしここで問題なのは、プレイヤーの向いている方向に対して、プレイヤー自身は回転していない、という部分です。

　わかりにくいので、図にして説明します。

＜プレイヤーの向いている方向と弾の角度＞

　このように、斜め左下の方向(四角い画像の方向)をプレイヤーが向いているとします。
正規化されたベクトルの値は (-1,-1) の位置です。

動画ファイルへのリンク

　この方向の位置を角度に置き換えて考える必要があります。
最も簡単なのは、プレイヤーの Rotation の Z 軸を参照することですが、残念ながら、それは出来ません。
なぜなら、プレイヤーの移動に伴って向いている方向のベクトル値は変わりますが、Rotation には反映されないためです。

　上記の動画を観ていただくとわかるのですが、プレイヤーの移動において座標は更新されますが、Rotation が回転していません。
確かにプレイヤーがルーレットのように回転してしまったら、おかしなゲーム画面になります。

　そのため、プレイヤーの角度の情報は、常に 0 になっています。

　つまり、プレイヤーから直接回転情報が取れないので、Direction の値を角度に置き換えていく必要があります。

　角度に置き換える計算には Mathf.Atan2 メソッドと Mathf.Rad2Deg メソッドを利用できます。
Direction の値を Mathf.Atan2 メソッドの引数とし、その計算結果を Mathf.Rad2Deg メソッドでラジアンから度数に変換することで取得出来ます。

　いきなり正解の実装を学習することもできますが、それですと、複雑につながっている各メソッドの処理が難しいため、理解しにくいです。
　
　そこで前に、まずはこの処理がどのように機能するかを実際に試していただきます。
Direction の位置によって、どのように角度が計算されるかを確認してから、実装に入っていきます。

２．テスト用のオブジェクト作成

　親子関係を利用してゲームオブジェクトを作成し、２Ｄ画面での傾きを取得するためのテストを行います。

構成

　下記は各オブジェクトの参考値です。
Transform の Position は自分のプロジェクト内の値で問題ありません。(Position の値を、この写真の値にする必要はありません。)

＜親オブジェクト　インスペクター画像＞

＜親オブジェクト　プレハブビュー画像＞

　子オブジェクトの数と位置は任意ですが、最低２つ配置し、それらを対角に配置すると、傾いた(回転した)ときの状態が分かりやすくなります。

　テストの目的は傾きを作ることと、傾いていることを視覚的に判別することの２つですので、
それを満たすものであればどういった形状であっても構いません。

３．＜テストコード①＞

　まずは最初に、マウスの位置の方向に対してオブジェクトを傾けるテストコードです。

　先ほど作成した親オブジェクトにアタッチして利用します。

RotateObjectWithMouse.cs

<= クリックしたら開きます。

using UnityEngine;

public class RotateObjectWithMouse : MonoBehaviour
{
    void Update()
    {
        // マウスの位置をワールド座標に変換
        Vector3 mousePosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
        mousePosition.z = transform.position.z; // ゲームオブジェクトのZ座標に合わせる

        // マウスの位置とゲームオブジェクトの位置から回転角度を計算
        Vector3 direction = mousePosition - transform.position;
        float rotationAngle = Mathf.Atan2(direction.y, direction.x) * Mathf.Rad2Deg;

        // ゲームオブジェクトを回転
        transform.rotation = Quaternion.Euler(0, 0, rotationAngle);
    }
}

　スクリプトを作成したらセーブします。

　その後、先ほど作成した Square ゲームオブジェクトにアタッチしてください。

インスペクター画像

　以上で完了です。

４．動作確認①

　ゲームを実行し、マウスを移動させてください。

　先ほど作成したテスト用のオブジェクトが、マウスの方向に対して傾いていればテスト成功です。

＜動画＞

動画ファイルへのリンク

　
　上記の動画を参考にして、実際に自分のプロジェクトで傾きを確認してください。

５．＜テストコード②＞

　次に、先ほどのテストコードを修正し、プレイヤーの向いている方向の情報を傾きに置き換えるようにしてみましょう。

　ここでは新しいスクリプトを作成していますが、先ほどのスクリプトを修正しても構いません。
前回の内容との比較用に、ソースコードはコメントアウトして残してあります。

LineTilt.cs

<= クリックすると開きます。

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

public class LineTilt : MonoBehaviour
{
    public Transform centerPoint; 　　　　　　 // 中心点のTransform
    public CharaController charaController;　　// 向いている方向を算出するクラス


    void Update()
    {
        // // マウスの位置をワールド座標に変換
        // Vector3 mousePosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
        // mousePosition.z = transform.position.z; // ゲームオブジェクトのZ座標に合わせる
        //
        // // マウスの位置とゲームオブジェクトの位置から回転角度を計算
        // Vector3 direction = mousePosition - transform.position;

        Vector3 direction = charaController.Direction;
  
        // Directionの情報を元に傾ける角度を求める
        float angle = Mathf.Atan2(direction.y, direction.x) * Mathf.Rad2Deg + 90;   // 右端が 0 で始まるので、水平にするには 90 足す

        // Quaternion.Eulerで傾けた角度を作成
        Quaternion rotation = Quaternion.Euler(0, 0, angle);

        // 中心点を基準に直線を傾ける
        Vector3 lineDirection = rotation * Vector3.right;

        // オブジェクトを傾ける
        transform.rotation = rotation;

        // 傾けた直線を描画などで使用する
        Debug.DrawRay(centerPoint.position, lineDirection, Color.red);
    }
}

　centerPoint変数には回転軸となるゲームオブジェクトを指定します。
今回は Square ゲームオブジェクト自身をアサインします。

　このスクリプトではマウスの位置ではなく、プレイヤーの向いている方向から傾きの角度を計算しています。
そのため CharaController 変数には、プレイヤー用のゲームオブジェクトを指定します。

　下記は参考値です。

インスペクター画像

　以上で設定は完了です。

６．動作確認②

　ゲームを実行し、プレイヤーを移動させてください。
向いている方向の情報が更新され、その値を元に Square ゲームオブジェクトが傾く(回転する)テストが出来れば成功です。

＜確認動画＞

動画ファイルへのリンク

＜確認動画＞

動画ファイルへのリンク

　シーンビューも合わせて確認し、Debug.DrawRay メソッドによる赤い線の位置を見てください。
プレイヤーの向いている方向に傾き、その傾きに合わせて、直線が引かれていることが分かります。

　つまり、傾いた状態でデバッグで見えている赤い直線を作り、
その上に弾を配置することができれば、実装しようとしている処理が制作できることになります。

　このように他の実装についても、事前に処理を細かく切り分けてテストを行って、自分が作りたい処理を少しずつ作っていくようにしてください。
頭の中のイメージだけではなく、実際に動かしたり、デバッグして情報を可視化することで具象化していくことが出来ます。

　以上で完成です。

　続いては実装です。
今回のテスト処理を元に、傾きを反映した位置での弾の配置と発射処理を作成します。

　　　=>　【２Ｄ】プレイヤーの向きに応じて傾く直線上に弾を配置して発射する機能②

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

【２Ｄ】プレイヤーの向きに応じて傾く直線上に弾を配置して発射する機能 - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school