【Unity】マスクで画像を切り抜いて表示する方法

こんにちは！Unityで画像を扱う時にはマスク機能が使えると非常に便利です。

特にUIを作る時にはマスクを使ってぼかしをいれると美しいデザインになりますよ！

そこで本記事ではマスクで画像を切り抜いて表示する方法や

ソフトマスクでぼかしを入れる方法を紹介します。

マスクとは

マスクとは画像を任意の形に切り抜いて表示する処理の事です。

画像をマスクの形で切り抜いたり、逆にマスクの外側だけを表示させることもできます。

Unityでは標準機能でマスクが用意されているので

Maskコンポーネントを追加することで簡単にマスクが作成できます。

マスクさせたい画像がImageかSpriteかによって、設定方法やできることが変わってきます。

マスクは２Dや３Dで使える？

マスクは２DではUnity標準機能として用意されているので、簡単に使うことができます。

画像を切り抜いたり、ぼかしたりといったことができます。

３Dの場合マスクを自作するのは大変ですが、アセットを利用することで手っ取り早く実現できます。

Unity標準機能としては、特定の部位だけアニメーションが無効化できるアバターマスクという機能があります。

アバターマスクについて詳しい設定方法は下の記事が参考になります。

LIGHT11

【Unity】特定部位だけモーションを無効化するAvatarMaskの基礎知識 - LIGHT11 UnityのAvatarMaskについての基礎知識をまとめました。

マスクの使い方

マスクで画像を切り抜いて表示する

2Dの画像をマスクで切り抜いて表示させる方法を紹介します。

下の手順でマスクで画像を切り抜くことができます。

• SpriteMaskを作成する
• マスクさせたいSpriteのMaskInteractionを設定する

今回は下のSpriteの画像を例にマスクを設定してみましょう。

まずはヒエラルキー内で右クリック→2D Object→SpriteMaskを選択します。

このようなスプライトマスクが作成されます。

シーンにはあらかじめ配置しておいたマスクさせたいSpriteと、SpriteMaskがある状態です。

マスクをかけたいSpriteのSpriteRenderer内のMaskInteractionを設定します。

Noneとなっているところを「Visible Inside Mask」または「Visible Outside Mask」

と選択することで、マスクの内側を切り抜くか、マスクの外側を切り抜くかが変わります。

SpriteMaskのScaleやPositionを変えることで、マスクの大きさや位置を変えることができます。

また、マスクさせるSpriteをレイヤーで分けることができます。

例えばOrder in Layerが0に設定されているSpriteの場合

FrontのOrder in Layerが１、Backは-１と入力すると0が範囲に含まれるのでマスクされます。

Alpha Cutoffは、どれだけ透明部分を含めるかのマスクの範囲を手動で調整することができます。

ソフトマスクでぼかした表現を作る

RectMask2Dというコンポーネントを使うことで、ぼかした表現のマスクを作ることができます。

ソフトマスクを作るには、Imageの画像を使用します。

下の手順で設定していきましょう。

• Canvas内にMaskオブジェクトを作成しRectMask2Dコンポーネントを追加する
• Maskオブジェクトの子にぼかしたいImageを配置する
• RectMask2DのSoftnessを設定する

まず、ヒエラルキー内で右クリック→UI→Canvasを作成しましょう。

作成されたCanvasを右クリックしCreateEmptyを選択します。

空のGameObjectが作成されますので、名前をMaskとしておきます。

Maskのインスペクターを開き、AddComponentをクリック→maskで検索→RectMask2Dを選択します。

続いてMaskで右クリック→UI→Imageを選択します。

Maskの子としてImageが作成されました。

Imageのインスペクター内の、Source Imageにマスクさせたい画像をドラッグアンドドロップします。

シーン内に画像が描画されます。

大きさを変えたいときはMaskとImage両方について、WidthとHeightを変更しましょう。

それではぼかす表現を設定しましょう。

RectMask2D内のSoftnessの数値を大きくすることで画像をぼかすことができます。

このRectMask2Dでは、このような四角形の設定方法のみになります。

例えば円形のぼかしなどを入れたい場合には、「SoftMaskForUGUI」のようなアセットを利用する必要があります。

GitHub

GitHub - mob-sakai/SoftMaskForUGUI: Enhance Unity UI (uGUI) with advanced soft-masking features to c... Enhance Unity UI (uGUI) with advanced soft-masking features to create more visually appealing effects! - mob-sakai/SoftMaskForUGUI

マスクマップとは

マスクマップとは、HDRPで使われる、マテリアルのエフェクトの対象領域を制限するものです。

マスクマップは以下のような4 つのグレイスケールテクスチャを持ちます。

それぞれのチャンネルは、グレイスケールでエフェクトの強弱の情報を持つことになります。

カラーチャンネル	マップ
Red	メタリック
Green	オクルージョン
Blue	ディテールマスク
Alpha	スムースネス

マスクマップの例は下の画像の通りです。

マスクテクスチャの作り方

マスクテクスチャを作成するためには、まずメタリックマップ、スムースネスマップのような

それぞれのグレイスケールテクスチャを画像編集ソフトで作成する必要があります(GIMP、Adobe Photoshop など)。

グレイスケールテクスチャが用意できたら下の画像のように、各テクスチャをそれぞれのカラーチャンネルにドラッグします。

最後に画像をエクスポートすることで、マスクテクスチャが作成できます。

おすすめアセット

画像を任意の形に切り抜くアセット

SoftMaskForUGUI

GitHub

GitHub - mob-sakai/SoftMaskForUGUI: Enhance Unity UI (uGUI) with advanced soft-masking features to c... Enhance Unity UI (uGUI) with advanced soft-masking features to create more visually appealing effects! - mob-sakai/SoftMaskForUGUI

こちらは、任意の形のソフトマスクが作れるアセットです。

RectMask2Dでは四角形のパラメータでマスクを指定しましたが

こちらはマスク画像を自分で用意し、その形で切り抜いてぼかすことができます。

シェーダーでマスクできるアセット

Amplify Color

あわせて読みたい

Amplify Color | Fullscreen & Camera Effects | Unity Asset Store Add depth to your project with Amplify Color asset from Amplify Creations. Find this & more VFX options on the Unity Asset Store.

こちらは２００種類以上も用意されているカメラエフェクトのアセットです。

２D、３Dにも対応しており、カメラに取り付けるだけで簡単にエフェクトが使用できます。

特定のエリアを除くマスクとしても使用することができます。

まとめ

• SpriteMaskを作成することで画像を切り抜くマスクが作れる
• RectMask2Dを使うことで画像をぼかすソフトマスクが作れる
• アセット「SoftMaskForUGUI」を使えば任意の形のソフトマスクが作れる

以上、マスクで画像を切り抜いたり、ぼかしを入れる方法について解説してきました！

画像を上手くマスクできれば、美しくてそれっぽい見た目のUIが作れます。

特にUIを作る際にはぜひマスターしておきたい機能ですね！