こんにちは！
XRクリエイターの伊東（@ALAKIWebVRAR1）です。
※TwitterでもAR/VRの事を中心に情報発信中です。
よかったらフォローお願いします！
Follow @ALAKIWebVRAR1
今回は、UnityのUIオブジェクトに角丸を実装するShapeコンポーネントについて、角丸がぼやけてしまう時の対処法をご紹介します。
結論からいうと、以下の条件が揃うと、Shapeコンポーネントを持つUIオブジェクトの角丸がぼやけます。
・3D空間上に配置したUIオブジェクト（CanvasのRender ModeがWorld Space）
・Scene起動時からカメラの位置が移動した状態で、後から動的にUIオブジェクトを生成した場合
・ShapeコンポーネントのShape TypeがRectangle
順を追って、不具合の再現と、解決策をご紹介していきます。
不具合の再現
まずはシーンの構成を見ていきます。
WorldCanvasには、角丸を反映するUIオブジェクトを入れています。
Canvasには、角丸のUIオブジェクトを後から生成するためのボタンを用意しました。
角丸のUIオブジェクトには、Shapeコンポーネントをアタッチしています。
今回の不具合は、後からUIオブジェクトを追加する時に発生するので、その状況を再現するためのスクリプトを用意し、Canvas内のボタンにアタッチします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class ShapeTest : MonoBehaviour { public GameObject Button; public Transform ButtonParentTr; public void OnTap() { /* カメラのポジションを取得 */ Vector3 camerPosition = Camera.main.gameObject.transform.position; /* 追加するオブジェクトのポジションは、カメラの2m先に設定 */ Vector3 buttonPosition = camerPosition + Camera.main.gameObject.transform.forward * 2.0f; /* 追加するオブジェクトの向きは、カメラの向きを使用 */ Quaternion buttonRotation = Camera.main.gameObject.transform.rotation; /* 追加するオブジェクトを生成 + アクティベート */ GameObject newButton = Instantiate(Button, buttonPosition, buttonRotation, ButtonParentTr); newButton.SetActive(true); } } |
これでシーンを動かしてみましょう。
まずはカメラの向きを変えずにUIオブジェクトを生成してみます。
問題なく角丸が生成されています。
では、カメラのY軸の向きを80度傾けてから、UIオブジェクトを生成してみます。
角丸が崩れてしまいました。。
これは、Shape2Dパッケージのシェーダーの仕様かと思われます。
ちなみに、最初から静的に配置しているオブジェクトの角丸は、問題なく描画されていました。
「BasicShapeSprite」の導入
問題を解決するために、Shape2Dとは別のパッケージで角丸を再現したいと思います。
以下のURLから、「BasicShapeSpriet」というパッケージをインポートしましょう。
https://github.com/kyubuns/BasicShapeSprite
※最新版は角丸を4角それぞれ設定できるようになっていますが、表示がずれてしまっていたのでバージョン1.0を使用します。
先ほどShapeコンポーネントをアタッチしていたオブジェクトに、Squareコンポーネントをアタッチします。
アタッチすると、Mesh Rendererというコンポーネントも自動でアタッチされました。
そのままだとマテリアルが設定されていないので、パッケージをインポートした時についてきたBasicShapeSpriteというマテリアルを設定します。
また、Squareコンポーネントは、UIオブジェクトのサイズをwidth / heightではなく、Scaleで設定するようにします。
これで準備完了です！
不具合解消の確認
修正した状態で実行してみましょう。
カメラのY軸の向きを80度傾けてから、UIオブジェクトを生成してみます。
今度は問題なく角丸が描画されました！
最後に
弊社では、日本各地でARを使ったワクワクするプロジェクトをリリースしてまいりました。
ARのパイオニアとして、高い技術力とビジネス提案が可能です。以下のサイトよりお気軽にご相談ください！
■WebAR開発 特設サイト
https://alaki.co.jp/lp/webar/
また最近では、現実のあらゆる場所からデジタルコンテンツを誰でもAR空間にドロップできる「MUGHEN」というアプリをリリースしました。ぜひインストールしていただき、現実を拡張する感覚を体験してみてください！
■MUGHEN サービス紹介サイト
https://alaki.co.jp/lp/mughen/
ALAKI株式会社では、「MUGHEN」をはじめとする最先端技術を使って世の中に価値を提供するため、一緒に大きな目標に挑戦する仲間を募集中です！興味のある方は、以下のリンクからご応募ください！
■ALAKI リクルートサイト
https://recruit.alaki.co.jp/
