[無料配布]自作スクリプト・ツール

【Unity】画像を繰り返して(タイリング)マスクで区切るシェーダー

0

ugui-tiling-mask

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

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

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

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

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

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

補足:uGUIでタイリング(Tiled)する方法

タイリング用の画像の作成方法

f:id:min0124:20171106230119p:plain

  • 繰り返したい所は3マス分確保して画像を作成

Unityでの設定

f:id:min0124:20171106230354p:plain

  • Spriteで編集で、中心から1個半位をスライス

f:id:min0124:20171106230413p:plain

  • Imageを作成して、スプライトをアサイン。image TypeをTiledに

以上

画像を繰り返して(タイリング)マスクで区切るシェーダーまとめ

ふつうの落ち影ならshadowのコンポーネントを足すだけですが、
影に模様が入るとなると、ベースの画像に模様入りの影を最初から入れてしまうか、
今回のように別で作成して、ずらして下に重ねる方法があると思います。

前者は画像サイズが大きくなってしまい、後者は描画処理が増すので、
理想としてはどちらも欠点を弱めるために、もうひと工夫必要だと考えています。

以上、すいみん(@cg_method)でした!

0