Meiryo’s blog

やってみて詰まったことを備忘録として残すブログ

【Unity】ゲーム画面の四隅の座標を取得して外枠に線を描画する方法

※Unityのバージョンは2020.2.6f1です。

ゲームを作った話

この間unityroomの企画unity1weekで
ボールをハンマー投げのように回して
投げるゲームを作りました。
(作ったゲームはこちら)

上の画像を見てお気づきだと思いますが
ゲーム背景が真っ白なため
どこからどこまでが画面かわかりませんでした。
これをLineRendererで外枠を描いて
解決したのですがその時のことを書いときます。

コード

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

public class OuterFrameRenderer
{
    private Vector2 TopLeft { get; set; }
    private Vector2 TopRight { get; set; }
    private Vector2 BottomLeft { get; set; }
    private Vector2 BottomRight { get; set; }
    private LineRenderer Renderer { get; set; }

    private Vector3[] Vertices { get; set; }

    void Start()
    {
        SetScreenVertices();
        SettingLineRenderer();

        Renderer.SetPositions(Vertices);
    }

    //画面四隅の座標を設定
    private void SetScreenVertices()
    {
        TopLeft = Camera.main.ScreenToWorldPoint(new Vector2(0, Screen.height));
        TopRight = Camera.main.ScreenToWorldPoint(new Vector2(Screen.width, Screen.height));
        BottomLeft = Camera.main.ScreenToWorldPoint(new Vector2(0, 0));
        BottomRight = Camera.main.ScreenToWorldPoint(new Vector2(Screen.width, 0));
    }

    //LineRendererの設定
    private void SettingLineRenderer()
    {
        Renderer = gameObject.GetComponent<LineRenderer>();

        Renderer.startWidth = 0.1f;
        Renderer.endWidth = 0.1f;

        //色の設定
        var gradient = new Gradient();
        var colorKeys = new GradientColorKey[]
        {
           new GradientColorKey(Color.black,0),
           new GradientColorKey(Color.black,1),
        };

        var alphaKeys = new GradientAlphaKey[]
        {
            new GradientAlphaKey(1,0),
            new GradientAlphaKey(1,0),
        };

        gradient.SetKeys(colorKeys, alphaKeys);
        Renderer.colorGradient = gradient;

        //頂点を設定
        Vertices = new Vector3[]
        {
            TopLeft,
            TopRight,
            BottomRight,
            BottomLeft,
            TopLeft,
        };

        Renderer.positionCount = Vertices.Length;
    }
}

LineRendererの追加

Hierarchy上で右クリック→Effect→Lineで
LineRenderer付きのオブジェクトができます。

画面の四隅の座標を取得する

SetScreenVerticesメソッドで行っています。
Screen.heightで画面の高さ、
Screen.widthで画面の幅が取得できます。

描画する線の設定

SettingLineRendererメソッドで行っています。

色の設定でごちゃごちゃしてますが
グラデーションを使わず
1色でいいのであれば
LineRendererのMaterialを
設定すれば済みます。

ちなみにColor.blackの箇所を
片方だけ変えてやると
こんな色になります。

線をどう描画するかの設定

SettingLineRendererメソッドの中で
変数Verticesに
四隅の座標を入れていますが、
ここで線をどう描画するかを
設定しています。

線は配列に格納された順に引かれるので
順番が大事です。
試しに順番を入れ替えたコードと
実行した結果を置いときます。

Vertices = new Vector3[]
{
    TopLeft,
    BottomRight,
    TopRight,
    BottomLeft,
    TopLeft,
};

線の描画

LineRendererのメソッド、
SetPotisionsで描画されます。

これで外枠を描くことができました。