SpriteStudioのマスク機能は、参照イメージの「アルファチャンネルの値」とアトリビュートの「マスク強度」により制御されます。
マスクパーツに設定された参照セルの「アルファチャンネルの値」と「マスク強度」の合計が255以上になった際に、マスクパーツより下に表示されるパーツ画像が表示される状態になります。
なお、マスクの境界にアンチエイリアスはかかりません。
できるだけ画面のピクセルに合わせたマスク画像を作成したほうが良いでしょう。
(拡大するとピクセルが目立ちます)
目次
事前準備
互換性を確認する
まず、「プロジェクト設定」の「互換性」でマスク機能を有効にする必要があります。
マスク用の画像を作成する
マスクはアルファチャンネルの値を読み取りますのでアルファチャンネル情報の含んだ画像を用意します。
色がついていてもPNGファイルやPSDファイルのような透明部分が存在する画像であれば問題ありません。
αチャンネルを利用したマスクの表示例
- 以下のようなパーツを作成し、マスクパーツとして配置します。
画像のアルファチャンネルの値について調整を行いました (2021/2/12)
- 先頭フレームで、キーを作成し、アトリビュートのマスク強度を「０」に指定します。
- 末尾のフレームでキーを作成し、マスク強度を「２５５」に指定します。
- マスク強度に応じて文字部分のグラデーションがマスクされ、以下のアニメーションのような効果を得ることができます。
操作手順
マスクの設定方法
マスクは通常パーツと同じように配置することができます。
セルリストからマスクパーツを作成する
|
1.マスクパーツを作成します。 セルリスト上で、マスクに使用したいパーツを右クリックします。 コンテキストメニューの「マスクパーツを作成する」を選択します。 |
 |
|
2.選択したセルをマスクパーツとして配置します。 マスクパーツは「mask_セル名」というパーツ名で追加されます。 |
 |
|
3.マスク強度を設定します。 マスク強度が0のままだと、マスクされないためです。 |
 |
|
4.レイアウトウィンドウで「マスクの有効化」をＯＮにすると、マスクパーツの箇所がマスクされます。
|
 |
|
5.マスクパーツは通常のパーツと同様、アニメーションデータ上で編集が可能です。 不要になった場合は「削除」を行ってください。 |
|
アトリビュートウィンドウから設定する
通常パーツをアトリビュートウィンドウからマスクパーツに変更することができます。
また、マスクパーツを通常パーツに戻すことも可能です。
マスクパーツからＮＵＬＬパーツに変更することはできません。
マスク対象となるパーツ
マスクは下記のパーツに対して対象となります。
|
通常パーツ マスクパーツの下に置いた通常パーツはマスクされ、見えなくなります。 |
 |
|
マスクパーツ 重なった部分のマスク効果を打ち消します。 |
 |
|
インスタンスパーツ インスタンスパーツの「マスク対象」をＯＮにした場合ソースアニメーションでの各パーツの「マスク対象」の設定に則ってマスク対象となります。 インスタンスパーツの「マスク対象」をＯＦＦにした場合ソースアニメーションの各パーツの「マスク対象」の設定に関わらず、すべてがマスクの対象外になります。
|
 |
|
エフェクトパーツ マスクパーツの下に置いたエフェクトパーツはマスクされ、見えなくなります。 |
 |
|
メッシュパーツ マスクパーツの下に置いたメッシュパーツはマスクされ、見えなくなります。 |
 |
マスク機能を応用する
マスクパーツを複数使用する
マスクパーツは1枚だけでなく、複数合成して使用することができます。
複数のマスクパーツを重ね、座標移動や回転、スケールを設定することで、複雑なアニメーションを作り出すことが可能です。
実際の使用例
カットイン演出に使用する
マスク機能を利用することで、カットイン演出を作成することができます。
事前にマスク機能を利用してカットインアニメーションを作成し、合成したいアニメーションにインスタンスパーツで組み込むことで実現しています。
| カットイン演出の元となるアニメーションを作成します。 |  |
|
カットイン演出をインスタンスパーツとして配置を行い、その上に、マスクパーツを載せます。 ベースとなるアニメーションデータをマスク対象から外し配置することで、カットイン演出を挿入することが可能です。 |
 |
| 作成したアニメーションをインスタンスパーツとして呼び出し、呼び出した側のアニメーションデータ上で、カットインの形に抜いたマスクパーツで抜き出すことも可能です。 |  |
特定のパーツの上にのみ演出を表示する
特定のパーツの上にのみ何か演出を表示したい場合、マスク機能を利用することで実現することができます。
キャラクターの形に作成したマスクパーツを利用して、キャラクターの前のみに文字がスクロールするようにしています。
作例「てのひらの冒険」
背景を切り替えるワイプ演出でマスク機能を活用しています。その他、メッシュ・ボーン機能や従来の機能も活かした作品となっています。
詳しい解説は以下のページをご覧ください。
クリッピングマスク
この機能は Ver.7.5.0 で追加されました。
2025/08/22時点ではレンダリングでのみ利用可能です。
Unity などのプレイヤー対応は順次行っていきます。
「クリッピングマスク」とは一般的に従来のマスクパターンで削り取る動作とは逆で、マスクパターンの内側に絵を描画する動作になります。
SpriteStudio ではこの動作を「マスクの内側に描画」フラグの状態を切り替えることで実現しています。
例）マスクを適用していない場合
例）クリッピングマスクを適用した場合
使い方
設定の有効化
初めに「プロジェクト設定」の「互換性」ページで「クリッピングマスクを使用する」にチェックを入れます。
パーツ情報の変更
マスクパーツではなく、描画する側、つまり通常パーツの方にある「マスクの内側に描画」にチェックを入れます。
パーツの配置順
従来マスクと同様、描画順で奥（ツリーでは上方）にある通常パーツに対して、描画順で手前（ツリーでは下方）にあるマスクパーツが作用します。
描画順で示した場合、
描画パーツ
↓
マスクパーツ
の順番になります。
マスクの対象になるパーツの種別は従来マスクと同じです。
マスク書き込みフラグ
この機能は Ver.7.5.0 で追加されました。
2025/08/22時点ではレンダリングでのみ利用可能です。
Unity などのプレイヤー対応は順次行っていきます。
通常パーツ・メッシュパーツの絵を通常通りに描画しつつ、描かれた不透明の領域をマスクとして使えるようにする機能です。
クリッピングマスクの用途を考慮してより効率的にデータ制作できるように追加したオプションです。
以下の動画では雲が「マスク書き込み」フラグをオンにしたメッシュパーツで、★が「マスクの内側に描画」フラグをオンにして雲の不透明領域にのみ描画するように設定されています。
使い方
設定の有効化
初めに「プロジェクト設定」の「互換性」ページで「マスク書き込みを使用する」にチェックを入れます。
パーツ情報の変更
絵を描画する「通常パーツ」「メッシュパーツ」に限り、選択できるオプションです。
以下のチェックボックスにチェックを入れます。
マスク強度の設定
マスクパーツ同様「マスク強度」アトリビュートの値を指定する必要があります。
マスクパーツとの違い
マスクパーツでは描画順において、奥にマスクされるパーツを、手前にマスクパーツを配置していましたが、マスク書き込みフラグによってマスク化したものは、マスクされるパーツを手前に配置する必要があります。
マスクパーツ同様、マスク対象をオンにすることで他のマスクパーツによってマスク領域を削ることもできます。
応用：メッシュを利用した自由な形状のマスク
これによりマスク専用の画像を予め用意する必要がなくなります。
頂点をデフォームで動かすことでマスクの形状を細かくアニメーションさせることも出来ます。
ただし、細かく滑らかな輪郭を作る場合、頂点の数が多くなりメッシュ編集（とデフォーム編集）の手間が増えるため適材適所での利用が必要です。
※従来のマスクパーツでも４点の頂点変形は可能です。
ポイント
- メッシュにするセルの縦横サイズは最小にしてテクスチャサイズを節約します。色は基本的に一色のベタ塗りで問題ありません。
- メッシュパーツの不透明度を0にして絵を消すようにします。※非表示フラグをオンにするとマスクがされなくなるためこの方法は使えません。
- マスク強度は254以下にしておきます。255にするとジャギーが目立つためです。
マスク機能の注意点
- インスタンスパーツのソースアニメーションにマスクを利用しても、マスクパーツの効果は無視されます。
ソースアニメーションにマスク機能を使用しないでください。 - マスクパーツに不透明度を設定しても、表示に影響しません。マスクパーツを親パーツとしている場合、子パーツに継承されます。
- マスクパーツはパーツカラー、ローカル不透明度を設定することはできません。
関連ページ
- レイアウトウィンドウにマスクパーツを置いたがマスクされない
マクスパーツを配置してもマスクされていない場合について説明しています。 - SpriteStudio Ver.6の活用例「てのひらの冒険」
マスク機能を実際に使用した動画作品の解説です。