MENU

【Unity】画像を繰り返してマスクで区切る方法

ugui-tiling-mask

某ゲームの影に斜線が入っているUIを見て、真似してみました。

描画付加的に良くないですが、タイリングしてマスクで区切るシェダーを作成して、UIの下にずらして敷いています。

テクスチャをリピートしてマスクで区切る方法

ボーダーのテクスチャ作成

f:id:min0124:20171021115545p:plain

  • 正方形に十字のガイドを作成

  • 端のポイントにパスを打って、ボーダー作成

シェーダーの用意

タイリングをマスクで区切るシェーダー

c.a *= opacity;c.a *= 1-opacity;にするとマスク反転

参考

Help Shader: Texture mask using sliced mask and tiled texture. - Unity Answers

マテリアルの作成

f:id:min0124:20171021120533p:plain

  • マテリアルを作成 UI/TextureMaskを選択

  • ボーダー(タイリングする画像のTexture TypeはDefalt)とマスクのテクスチャをそれぞれ当てはめる

  • Tilingの値をお好みで増やす

※マスク画像は四隅が角丸のものを入れています。

uGUIにマテリアルをアサイン

GameObject>UI>Imageを作成して、Materialに先程のマテリアルをアサイン

f:id:min0124:20171021120709p:plain

画像化した場合

おまけです。普通にボーダー影を画像化した場合です。

f:id:min0124:20171021195720p:plain

まとめ

f:id:min0124:20171021123013p:plain

ふつうの落ち影ならshadowのコンポーネントを足すだけですが、

影に模様が入るとなると、ベースの画像に模様入りの影を最初から入れてしまうか、

今回のように別で作成して、ずらして下に重ねる方法があると思います。

前者は画像サイズが大きくなってしまい、後者は描画処理が増すので、

理想としてはどちらも欠点を弱めるために、もうひと工夫必要だと考えています。