LoginSignup
1

More than 3 years have passed since last update.

【Unityアドカレ2019・冬】Soft Mask でいい感じにマスキングする

Last updated at Posted at 2019-12-08

はじめに

この記事は、Unityアセット冬のアドベントカレンダー 2019 Winter! の、9日目の記事です。

Unityアセット冬のアドベントカレンダー 2019 Winter! – Unity公式 Asset Portal

Soft Mask のご紹介

Soft Mask - Asset Store

Soft Mask はUI要素をなめらかにマスキングするためのコンポーネントです。Unity標準の Mask や Mask Rect 2D と似ていますが、それらにはない利点を持っています。

  • Mask Rect 2D と違ってマスクの回転をサポートしている。
  • Mask と違って透明度をサポートしているので、なめらかなマスキングができる。

スクリーンショット 2019-12-06 14.01.38.png

エビフライは、かわいいフリー素材集 いらすとや 様からお借りしました。

使い方

Soft Mask をアセットストアからインポートします。
スクリーンショット 2019-12-06 14.04.04.png

Soft Mask コンポーネントをゲームオブジェクトに追加します。
スクリーンショット 2019-12-06 14.03.20.png

これだけです!非常に簡単。
スクリーンショット 2019-12-06 15.33.16.png

ヒエラルキーはこのようになります。
スクリーンショット 2019-12-06 15.30.31.png

Unityの標準Maskコンポーネントを使ったことがある人ならお気づきでしょうが、追加するコンポーネントが変わっただけで、基本的な使い方は同じです。とても簡単!

コンポーネント

コンポーネントのプロパティについて見ていきます。
スクリーンショット 2019-12-06 15.32.23.png

Source

Graphic, Sprite, Textureから選択します。Graphicを選択した場合、アタッチされているImageコンポーネントかRawImageコンポーネントを参照してマスキングされます。SpriteまたはTextureは、画像を直接指定したいときに使用します。

Separate Mask

通常はSoftMaskコンポーネントのアタッチされているゲームオブジェクトがマスクとして使われますが、このプロパティをセットした場合は、セットされたゲームオブジェクトをマスクとして使用します。

Raycast Threshold

レイキャストを通す閾値を指定します。デフォルトは0で、領域のすべての入力を通します。これを0より大きくすることで、指定した値以上の不透明部分でしか入力を受け付けないようにすることができます。

Invert Mask

マスクが反転できます。
スクリーンショット 2019-12-06 14.16.05.png

Invert Outsides

マスクの外側を反転します。これをチェックすると、上の画像の外側の透明な部分が不透明になります。

Mask Channel

画像のどの色成分をマスクとして使うか指定できます。普通はデフォルトのAlphaでいいと思いますが柔軟に設定できるようです。
スクリーンショット 2019-12-06 15.55.31.png

スクリプティング

スクリプトはSoftMaskingネームスペースに全部入ってます。コメントも書いてありますし、小さいスクリプトなので、簡単に使えるでしょう。

using SoftMasking;

public class Something : MonoBehaviour {
    void Start() {
        var mask = gameObject.GetComponent<SoftMask>();
        // なんかやる
    }
}

おわりに

以上、ソフトなマスクを使いたい人におすすめのアセット紹介でした!

紹介し切れていない部分も多いので、興味のある方はアセットストアでチェックしてみてください!
Soft Mask - Asset Store

読んでいただき、ありがとうございました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1