エイリアンプログラム

主にゲームプログラミングに関するブログです。

GameObjectをCanvasの座標に合わせて移動する方法

前回の記事で、UIの座標からスクリーン座標に変換してそれをワールド座標に変換すれば出来ますと記載しました。

RectTransformからワールド座標に変換する方法 - エイリアンプログラム

ただこの方法だと、カメラが平行投影(Orthographic)の時に、移動させるGameObjectが移動先のGameObject(UI)よりズレた座標に配置されてしまう問題が発生します。

しかしどうやら上記のやり方以外に簡単な方法でやれるみたいです。
なので今回はそのやり方をご紹介したいと思います。

やり方は非常にシンプルで、Canvasの中にGameObjectを入れればいいだけの話です。
それを行う前に以下の設定を行う必要がございます。

設定

  1. CanvasのRenderModeをScreen Space - Cameraに設定。(取りあえずMainCameraでOK)
  2. 適当にUIを配置(私はImageを使いました)。
  3. Canvasの下に空(Empty)のGameObjectを配置。
  4. 3番で設定した空のGameObjectの下に、CubeもしくはSphereを配置。座標は(0, 0, 0)、Scaleは適当に値(※1)を入れてください。
  5. 4番で配置したGameObjectのLayerをUIに設定。

※1 : Scaleが(1, 1, 1)だと小さすぎて見にくかった

大体以下の画像のようになっていれば問題ございません。
無理に画像のように合わせなくても大丈夫です。

f:id:alien_program:20170811111414p:plain f:id:alien_program:20170811111423p:plain

適当にスクリプトを生成して以下のように配置してください。

public class Move : MonoBehaviour {
    public RectTransform m_toRect; //移動先
    public RectTransform m_target; //移動させたいGameObject(4番で設定した空のGameObject)

    private void Start()
    {
        MoveGameObject(m_toRect);
    }

    private void MoveGameObject(RectTransform rect)
    {
                //移動させたいGameObjectを移動先のGameObjectの座標を代入
        m_target.position = rect.position;
    }
}

Unityエディタを再生させると以下のようにSphereが赤色のImageに移動します。

f:id:alien_program:20170811112402p:plain

結果としてつまりCubeやSphereの代わりにRectTransformの座標であるGameObjectを移動させてあげればいいだけの話です。
この方法を使えば、カメラが平行投影でも問題なく移動先の座標にGameObjectが移動しました。