Amazonで商品を見るセール会場へ

UnityのAlpha Cutoutアニメーション:マスク・Threshold・URPの設定

Alpha Cutout(パンチスルー)は、TextureのAlphaをしきい値と比較して、領域を描くか消すかを決める方法です。Alphaにグラデーションを入れ、しきい値を動かすと、円形ワイプやディゾルブのように輪郭が動く演出を作れます。

この記事はQuad/MeshRendererでの素材・Import・Material・Animationの確認を扱います。現行の設定はUnity 6.3 LTSのURP Unlitを参照し、旧Unlit/Transparent Cutoutの画像と区別します。今回Unityや画像編集ソフトで手順を実行しておらず、描画・ビルド・性能を検証済みとはしていません。

目次

Cutoutと半透明フェードの違い

項目・症状選び方・確認先
境界を動かして領域を現すCutout/Alpha Clipping。AlphaとThresholdで残す領域を選ぶ。
画像全体を徐々に透かすAlphaブレンド。uGUI画面ならCanvasGroupによるフェードも候補。
文字を筆順どおり現すこの仕組みを使い、書き順に対応したAlpha素材を作る。文字アニメーションの記事で素材の条件を確認。
CanvasのImageへ適用するMesh用ShaderとuGUIのMask/RectMask2D対応は別。UI用Shaderの記事を参照。

Opaque+Alpha Clippingの最小例では残る部分は不透明になり、グラデーションのAlphaをそのまま半透明として表示しません。Alpha ClippingとTransparentのブレンドを組み合わせるShaderは別の構成です。Cutoutという名前だけで透明表現や負荷を決めないようにします。

素材を作る:RGBとAlphaを分けて考える

RGBには表示する色、Alphaにはいつ表示するかを決める値を入れます。白黒マスクをRGBに保存しただけでは、Base MapのAlphaを読むMaterialへマスクは渡りません。元記事のカラー素材は次の画像です。

表示対象として用意したカラーのベース画像。

円形ワイプの素材例は中心を高いAlpha、外側を低いAlphaにしたグラデーションです。Thresholdを高い値から低い値へ下げると、高いAlphaの中心から表示が広がります。逆方向へ動かすと低いAlphaの領域から消えます。黒い領域が常に消えるかは、しきい値と比較条件次第です。

中心を白、外側を黒にしたマスク用の円形グラデーション画像。
  1. 最初の切り分け用に、形状の外側はAlpha=0、表示したい形状の内側は0より大きく1未満の階調を持つRGBA画像を用意します。たとえば内側0.2〜0.8なら、Threshold 0.9で非表示、0.1で内側全体が残るという比較を計画できます。
  2. 画像編集ソフトから、必要なAlphaを実際に持つRGBAファイルとして書き出します。Photoshopで追加Alphaチャンネルを作ったことと、PNGの透明度として書き出されたことは同じではありません。ファイルを再び開き、必要なチャンネルを確認します。
  3. 元記事のTGA/PNGは保存形式の候補です。形式名だけでAlphaが正しく保持されたと判断せず、Unityへ読み込んだ後もAlphaを確認します。
ベース画像のアルファチャンネルにマスク画像を格納した画像編集画面。

上の編集画面は旧資料です。0.2〜0.8は設定を切り分けるための例で、元の画像やGIFがその範囲を持つと測定した値ではありません。元の透明輪郭にグラデーションを重ねる場合は、形状外側を0のまま残す合成にします。

UnityでAlphaのImportを確認する

  1. Projectに画像を追加し、まずTexture Type=Default、Alpha Source=Input Texture Alphaを確認します。元ファイルにAlphaがない場合、この設定だけで必要なマスクは生成されません。
  2. TextureのプレビューをAlpha表示に切り替え、外側、始点、中間、終点の階調を確認します。全部白なら元ファイルのAlphaやImport設定、全部黒なら素材や書き出しを調べます。
  3. RGBをマスクとして使いAlpha Source=From Gray Scaleを選ぶ方法は、RGB平均からAlphaを作る別の構成です。RGBにカラーを持つ素材では、色の明るさがマスクへ混ざるので、この最小例では元Alphaを使います。
  4. 境界の比較は、まず圧縮なし・Mip Mapオフなど条件を固定して行い、その後に対象端末用の圧縮やFilter・Mip Mapを戻して比べます。常に無圧縮が最適という意味ではありません。Read/WriteはMaterialで表示するだけなら必須ではありません。

Unity 6.3のDefault Texture設定では、Alpha SourceとAlpha is Transparencyは別です。後者は色チャンネルのにじみ対策で、存在しないAlphaを追加したりThresholdを設定したりする機能ではありません。

Materialを設定する:URPと旧Built-in

項目・症状選び方・確認先
Unity 6.3のURPShader=Universal Render Pipeline/Unlit。Surface Type=Opaque、Alpha Clippingをオン、Base MapへRGBA素材。Base Colorは白・Alpha 1として開始。
旧Built-inの記事・画像Shader=Unlit/Transparent Cutout、Base (RGB) Trans (A)へ素材、Alpha Cutoffを操作。現在の版へ同じ欄があると断定しない。
HDRP・独自Shader使うShaderのAlpha Clipping、TextureとTintのAlpha、Thresholdの比較条件をその版の資料で確認。URPの欄名をそのまま当てはめない。

URPの設定項目は公式のUnlit Shader説明を参照します。Materialは今回の表示用に分け、Quadへ割り当てます。別のMeshも同じMaterialを共有している状態で、意図せず同時に演出が動かないかも確認してください。

  1. HierarchyにQuadを作り、Cameraの前へ置きます。MeshRendererへMaterialを割り当て、Textureの形と向きが見える状態にします。まずAnimatorを付けずに確認します。
  2. Thresholdを上げ下げして、形状が消える値・全体が残る値・中間の境界を記録します。素材の範囲0.2〜0.8を想定した切り分け例なら、0.9→0.5→0.1の順に比べます。
  3. 見えない場合はMaterialのShaderエラー、TextureのAlpha、CameraとQuadの位置・向き・Layerを確認します。Thresholdを動かすだけでMaterial全体が薄くなるなら、Surface Typeやブレンド設定も確認します。
スライダーを動かしてアルファカットオフの値による表示範囲の変化を確認する様子。

このGIFは旧Unlit/Transparent Cutoutの資料で、新しいURP手順の実行結果ではありません。カリングや両面・加算の派生設定は次の記事で区別しています。

しきい値が0・0.5・1のとき何が残るか

Threshold 0ですべて表示、1で必ず消えるとは限りません。たとえばHLSLのclipは引数が0未満なら破棄するため、clip(alpha−threshold)ではAlphaとThresholdが同じ値の領域は残ります。Alpha 0の外側もThreshold 0では残り得ます。旧Alphatest Greaterは厳密に大きい値を残すため、同値の扱いが異なります。

項目・症状選び方・確認先
Alpha 0/0.2/0.5/0.8、Threshold 0.1clip(alpha−threshold)を想定すると0は除外、0.2・0.5・0.8は残る。
同じAlpha、Threshold 0.5同じ比較なら0.5・0.8が残る。旧Greaterの比較では0.5は除外される。
同じAlpha、Threshold 0.90.8以下なので全部除外。実際のTextureに0.9以上のAlphaがあれば残る。
Threshold 0/1の端点等値、Tintとの合成、Import後の値を確認。絶対的な全表示/全非表示の値として使わない。

表は比較式から求めた期待値で、Unityで描画を測定した結果ではありません。素材に使うAlpha範囲より下・上のThresholdを使うと端点を切り分けやすくなりますが、圧縮や補間後の実際のAlphaでも結果を確認してください。

AnimationでThresholdを動かす

  1. 手動操作で表示範囲が変わることを確認してから、Quadを選択してAnimationウィンドウで専用Clipを作ります。AnimatorとControllerの割り当ても確認します。
  2. Add PropertyからMeshRendererのMaterialにあるCutoff/Thresholdのプロパティを探します。表示名はShaderとEditor版で異なります。標準例の内部名は_Cutoffですが、独自Shaderでは別名の場合があります。Materialを変更しながらRecordするときも、実際にそのプロパティのキーが追加されたか確認します。
  3. 非表示から表示する切り分け例では、0秒に手動で確認した非表示側の値、1秒に全表示側の値を置きます。上の例なら0.9→0.1です。一定のしきい値変化が必要ならカーブ補間も確認します。
  4. Loop Timeをオフ、Controllerの既定状態にこのClipを設定してMotionを割り当てます。RecordとPreviewを解除してPlayし、開始・中間・終了で対象Quadだけが変化するか確認します。
  5. キーを作れない場合は記録対象のRenderer/MaterialとShaderプロパティを調べます。非対応の独自ShaderをAnimatorで動かせると決めつけません。開始値、終点、再生後の状態を保存してから別の演出へ組み込みます。

基本の記録操作は公式のGameObjectアニメーション手順を参照します。この1回再生の例に、Buttonからの再実行・キャンセル・連打制御までは含めていません。

境界が荒れる・最後まで消えない場合

項目・症状選び方・確認先
四角い背景まで表示される外側Alpha、Threshold 0の等値、TintとAlphaの合成を確認。
円形の境界がギザギザ・まだらになる素材の階調と解像度、ディザ、圧縮、Filter、Mip Mapを一つずつ比較。
Thresholdを動かしても変化しないAlpha Source、Base Map、Alpha Clippingのオン、Materialの共有と記録対象を確認。
端点で少しだけ残るImport後の最大/最小Alpha、等値比較、フィルタ後の値。0と1を万能な端点にしない。
CanvasでMaskが効かないMesh用Shaderの条件とUIのStencil/Clipは別。uGUI対応Shaderと対象Graphicを確認。

Cutoutには形状の切り替えという用途がありますが、半透明ブレンドがないことだけで描画負荷が低いとは断定できません。画面を覆う面積、重なり、対象GPU、Passと圧縮を揃えて、必要な端末で測定して判断してください。

アニメーションと演出の記事は、ほかにもあります。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Unityのおすすめ書籍

開発PCの選び方

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次