Imageに円の形が反映されない

Question

前提・実現したいこと

UIのImageにスプライトの円をセットしたのですが、四角いままのImageとなってしまいます。
解決法のご教示をお願いします。

試したこと

円のスプライトを、アセットの右クリックメニュー→ Create → Sprites → Circleで作成しました。
それをUI ImageのSource Imageにセットしたのですが、Imageは四角い形のままとなってしまいます。
なお、作成したアセットの円をシーン上に直接配置すると、円の形となります。
円のImageを作成したいのですが、なぜSource Imageにスプライトの円をセットしても、四角いままとなってしまうのでしょうか。

補足情報（FW/ツールのバージョンなど）

Unity 2020.1.2f1

Answer 1

Circleスプライトのテクスチャ自体は全面真っ白の小さなもので、それに128角形の形状を与えることにより円形に見せているようです。ですので、Imageのインスペクターに表示されている「Use Sprite Mesh」をオンにしてみてはいかがでしょうか?

マスク掛けによるFilled（Horizontal）風の表現

Comments

[退会済みユーザー]

ご回答ありがとうございます。
Use Sprite Meshをオンにして、円の形が反映されることを確認しました。
ありがとうございます。
ちなみに、このUse Sprite Meshの項目があるのは、Image TypeがSimpleのときだけみたいですが、
他のImage Typeでは円の形を反映できないですか？
特に、Image TypeがFilledのときに円の形を反映させて、パラメータにより、
円の満ち欠けを表現したかったのですが、その場合は、Unityで作る円のSpriteではなく、
自前で他の円の画像を用意しないと作れないですか？

[Bongo]

どうやらUse Sprite MeshとFilledを併用する方法は用意されていないようですね。
Filledの効果はImageのメッシュの頂点を操作することにより実現しているようですので、Use Sprite Meshを使う...つまりスプライト次第でどんなメッシュが与えられるか予想できない、という状況では実現しにくかったのかもしれません。Use Sprite Meshを禁止することでメッシュが四角形だと確定できますので実装しやすくなりそうです（ちなみに、シーンビューの左上のプルダウンメニューを「Shaded」から「Wireframe」や「Shaded Wireframe」に切り替えるとシーンビュー上にメッシュのエッジが表示されますので、裏方ではどのような変形が行われているか観察できるかと思います）。

おっしゃるようにFilledを使いたい場合はテクスチャ自体を円形の絵にする必要がありそうです。あるいは、回答に追記したような感じにマスク掛けすることでFilledっぽく見せかけることもできるかもしれません。

[退会済みユーザー]

ご回答ありがとうございます。
なるほど、標準的な操作としては、Use Sprite MeshとFilledを併用する方法はないのですね。
また、ご提示いただいたRect Mask 2Dを使う方法を試してみました、Rect Mask 2Dというものを初めて使い勉強になりました。
ご教示いただき、ありがとうございました。
余談ですが、Canvas等のUIオブジェクトの右クリックメニューから、UI用の空のゲームオブジェクトが作れるのですね、驚きました。
これは、この作成方法しかないですか？
ヒエラルキーの左上の[＋]メニューから、UI等のメニューから探してみたのですが、見つからなかったです。

[Bongo]

ヒエラルキービューの「+」メニューやメニューバーの「GameObject」メニューからなら、「Create Empty Child」を使えばいいかと思います。このとき選択されているオブジェクトがRectTransformを持っている場合、その子として新規作成されるオブジェクトにも自動的にRectTransformが付くようですね。

また、キャンバス階層外に作成されたRectTransformを持たないオブジェクトであっても、他のコンポーネントと同様に「Rect Transform」をアタッチするとTransformがRectTransformに置き換わりますので、そのオブジェクトをキャンバス階層内に移動してUI構成に参加させることができるはずです。
逆に、RectTransformに対して他のコンポーネントと同様に削除操作を行うとRectTransformがTransformに置き換わりますので、キャンバス階層から取り出して通常のオブジェクトとして扱うこともできるでしょう。
ただし、普段ドラッグ&ドロップで階層内を移動させる時と同じく、位置やらスケールやらはワールド空間上における配置状態がキープされるよう自動的に調整されるでしょうから、必要に応じて書き換える必要があるかと思います。

[退会済みユーザー]

ご回答ありがとうございます。
ご教示いただいた方法を全て試してみました。
いろいろな作成方法があったのですね。
いつもImageオブジェクトを作成してから不要なコンポーネントを削除するという、手間のかかることをしていたので、とても勉強になりました。
ご教示いただきありがとうございました。