質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.77%

TransformPointでUI Textを設定すると文字が薄くなる。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,024

score 346

前提・実現したいこと

以前、このような質問をしたことがあり、
UIをスクリプトで普遍的に画面中央に配置させる方法として、
下記がScreen Space – CameraとScreen Space – Overlayのどちらでも有効で、1番汎用的な方法と認識しているのですが
(間違っていたらご指摘お願いします)、

this.transform.position = this.transform.root.TransformPoint(Vector2.zero);


その際、Screen Space – Overlayの下記コードでセットした場合と見比べたら、

this.transform.position = new Vector2(Screen.width/2, Screen.height/2);


TransformPointで設定したUI Textがぼやけてしまう、もしくは色が薄く表示されてしまったのですが、
この不具合の原因、対処法を教えていただきたいです。
ご教示よろしくお願いいたします。

試したこと

Screen Space – Overlayでそれぞれ設定。

・Screenで設定した場合。

       this.transform.position = new Vector2(Screen.width/2, Screen.height/2);


「Sample」の文字が濃い。
イメージ説明

・TransformPointで設定した場合。

       this.transform.position = this.transform.root.TransformPoint(Vector2.zero);


「Sample」の文字が薄い、もしくは、ぼやけている。
イメージ説明

両者の違いは上記コードだけです。他の設定は同じままです。

文字が薄れてしまったので、
TransformPointで設定するのは何か非推奨なことがありますか?

追記、Screen Space - Cameraでの現状

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

public class UISample : MonoBehaviour
{
    void Start()
    {
        Vector2 center = this.transform.root.TransformPoint(Vector2.zero);
        // Debug.Log(center);
        // center.x = Mathf.Floor(center.x);
        // center.y = Mathf.Floor(center.y);
        // Debug.Log(center);
        this.transform.position = center;
    }
}

全体
イメージ説明

Canvas
イメージ説明

Text (インスペクタ前半)
イメージ説明

Text (インスペクタ後半)
イメージ説明

実行時テキストのインスペクタ
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

座標がきっちり整数になっているかどうかによる微妙な違いなんじゃないでしょうか?
2つの映像を重ねて見てみたところ、ぼやけている方は少しだけ右上にずれているようでした。

ゲームビューが「Free Aspect」になっていますが、もしたまたま幅・高さが奇数だったとすると、後者の方法では座標の値に端数が出ると想像されます。
ですが前者の方法だとScreen.widthScreen.heightint型ですのでScreen.width/2Screen.height/2の結果も整数となるはずです。

var center = this.transform.root.TransformPoint(Vector2.zero);
Debug.Log(center); // ここで出力される座標の成分に「.5」が付いていないでしょうか?
center.x = Mathf.Floor(center.x);
center.y = Mathf.Floor(center.y);
Debug.Log(center); // ぴったり整数の位置にしてみるとどうでしょう。
this.transform.position = center;

ルートキャンバスの「Pixel Perfect」をオンにすれば端数のある座標でもくっきり表示してくれるかもしれません。
これに頼らず位置を調整するなら、たとえば下記のようなやり方はどうでしょうか?

// まず自分が所属するルートキャンバスの矩形を取得し...
var rootCanvasRectTransform = this.GetComponentInParent<Canvas>().rootCanvas.transform as RectTransform;
var canvasRect = rootCanvasRectTransform.rect;
var canvasSize = canvasRect.size;

// 左下を起点とした、整数に丸めた中心座標を求め...
var quantizedCenter = canvasRect.min + new Vector2(Mathf.Round(canvasSize.x * 0.5f), Mathf.Round(canvasSize.y * 0.5f));
Debug.Log(quantizedCenter.ToString("F6"));

// それを自分の親の座標系に変換し、localPositionにセットする
var parentTransform = this.transform.parent;
var canvasToParentMatrix = (parentTransform != null ? parentTransform.worldToLocalMatrix : Matrix4x4.identity) * rootCanvasRectTransform.localToWorldMatrix;
var localQuantizedCenter = canvasToParentMatrix.MultiplyPoint3x4(quantizedCenter);
Debug.Log(localQuantizedCenter.ToString("F6"));
this.transform.localPosition = localQuantizedCenter;

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/07 02:28 編集

    ご回答ありがとうございます。
    スケールとVector2.zeroのご教示ありがとうございます。
    ご提示のURL拝見しました、勉強になります。

    スケール関係で気になったことがあり、すみませんが、最後にもう1点質問させていただけませんか?
    Screen Space - Cameraの場合のCanvasのRectTransformなのですが、このScaleはどんな規則で値が設定されるかご存知ですか?
    試してみた所、Plane Distanceとは連動しているみたいで、Plane Distanceが0のときは、Scaleも0になるのはわかったのですが、Plane Distanceを1,10,100などの区切りのいい数値に設定してみても、
    Scaleは0.003180993,0.03180993,0.3180993と連動して10倍ずつ増えていくことはわかったものの、元の(1のときの)に、なぜ0.003180993という値になるのかがわからなかったです。

    キャンセル

  • 2020/03/07 04:13 編集

    以前申し上げたようにシーンビューを回転させて斜めから見てみると、カメラの前方に四角くキャンバスが浮かんでいるのを確認いただけると思います。カメラがPerspectiveの場合、キャンバスのPlane Distanceを操作すると四角がカメラの視線に沿って前後に移動し、サイズはカメラからの距離に比例して変化するはずです。

    ワールド空間内のキャンバスの四隅は、カメラの位置を頂点とする四角錐の4本の辺に沿って移動します。四角錐の縦方向の頂角はCamera.fieldOfView(https://docs.unity3d.com/ja/current/ScriptReference/Camera-fieldOfView.html )ですので、デフォルトの60°だとPlane Distanceが1の時のワールド空間におけるキャンバスの縦の長さは2×tan(60°/2)となり、2×0.577350269189...ということになります。一方、キャンバスの本来の高さはScreen.heightですから、Plane Distanceが1の時のスケールは2×0.577350269189/Screen.heightというわけです。
    ですので、キャンバスをcとすると...

    Debug.Log(c.planeDistance * 2.0f * Mathf.Tan(c.worldCamera.fieldOfView * Mathf.Deg2Rad / 2) / Screen.height);

    でキャンバスのスケールが出てくるかと思います。

    また、カメラがOrthographicなら視界は直方体となり、高さはPlane Distanceに関わらずCamera.orthographicSize(https://docs.unity3d.com/ja/current/ScriptReference/Camera-orthographicSize.html )の2倍です。ですからキャンバスのスケールは...

    Debug.Log(2.0f * c.worldCamera.orthographicSize / Screen.height);

    となるでしょう。

    キャンセル

  • 2020/03/07 16:16

    ご回答ありがとうございます。
    とても勉強になりました。
    たくさんの質問にご回答いただき、本当にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る