トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

角丸のQuadを作りたい【Unity】

VRをやっているとuGUIではなくQuadを空中に浮くパネルとして使いたいことがあると思うんですけど、そのときのQuadを角丸にしたい。

・Blenderとかで角丸のメッシュを作る

・テクスチャを角丸にする

・Mask機能?

が考えられるかな

MaskはUIだけか

Blenderで角丸メッシュを作る

Blender2.8

Planeを置く。

編集モードで頂点を選んで、Ctrl+Bを押して何かをクリックすると下にベベル画面が出てくる。

f:id:bibinbaleo:20200612212634p:plain

頂点のみにチェックを入れて、幅やセグメントの数字を変えると、角丸の大きさや滑らかさが変わる。

f:id:bibinbaleo:20200612212628p:plain

もしくはモディファイアー>ベベルでもできた。

f:id:bibinbaleo:20200612214224p:plain

同じように「頂点のみ」にチェックを入れて幅とセグメントを調整

f:id:bibinbaleo:20200612213856p:plain

objで書き出し

Unityでメッシュセット

別にQuadにメッシュを差し込む必要はないけど、差し込むならMeshの部分を読み込んだ角丸オブジェクトのメッシュにする。私はdefaultっていう名前だった

f:id:bibinbaleo:20200612214541p:plain

f:id:bibinbaleo:20200612215724p:plain

向きが違った。

テクスチャを角丸

↓白くて見えないかもしれませんが、角丸の四角をXDなどで用意します

f:id:bibinbaleo:20200612214823p:plain

QuadのテクスチャにセットしてTransparent

f:id:bibinbaleo:20200612214544p:plain

いいね!

f:id:bibinbaleo:20200612214546p:plain

 

でもこの方法だと別のテクスチャを入れたいときや、VideoPlayerを付けたときにテクスチャが置き換わって丸角にならなくなる。

f:id:bibinbaleo:20200612214551p:plain

シェーダー

乗算できるシェーダーだと二つのテクスチャを使えそう.

作っていただきました😌

gist.github.com

できました!

f:id:bibinbaleo:20200612223436p:plain

VideoPlayerでもいけた

f:id:bibinbaleo:20200612224000p:plain

最後に

メッシュを変えるより、UIとシェーダー調整のほうがパフォーマンス良いのかな

f:id:bibinbaleo:20200612224531p:plain

Blenderおまけ

平面メッシュといえば昔丸や三角のメッシュを作ったのを思い出した!!

bibinbaleo.hatenablog.com

平面丸を作る

昔作った平面丸を再び作ってみる。3年前だからバージョンも変わって、UIの名前も変わってた。

Add>Mesh>Circleでメッシュなしのサークルができる

f:id:bibinbaleo:20200612202403p:plain

なぜかメッシュがない。

Add>Mesh>Circleを押した直後だけに左下に出てくる「円を追加」を開く

f:id:bibinbaleo:20200612204724p:plain

それのフィルタイプをNゴンなどにするとメッシュがつく!

「UVを生成」にもチェックを入れておく

f:id:bibinbaleo:20200612204729p:plain

もしくは、編集モードにして、頂点>頂点からの新規辺/面(もしくはF)で面ができる。

f:id:bibinbaleo:20200612203545p:plain

でもこの方法だと、UVがついていないので、Unityでテクスチャを付けようとしてもつかない。

 日本語化

英語分からないので日本語にする。Edit>Preference>Interface>Translationにチェック

f:id:bibinbaleo:20200612203222p:plain

日本語選んでInterfaceにチェック入れるとすぐに切り替わる!

f:id:bibinbaleo:20200612203038p:plain

2.83だとBlenderを立ち上げたときに出てくるダイアログでも変更できた。

f:id:bibinbaleo:20200612221042p:plain

bibinbaleo.hatenablog.com