Shadow Effect 2D エフェクトを使用する¶

Shadow Effect 2D エフェクトを使用して、2Dノードのコンテンツに影を適用します。

../../_images/shadow-effect-2d-large.png

2Dノードにシャドウ効果を作成する¶

2Dノードにシャドウ効果を作成するには:

Library Alt を押しながら右クリック Effects で、Shadow Effect 2D を選択します。
Node Tree または Prefabs で、シャドウ効果を適用したい2Dノードを作成します。
Library > Effects > 2D Effects から Shadow Effect 2D エフェクトを Node Tree または Prefabs にドラッグし、シャドウエフェクトを適用したい 2D ノードにドロップします。

この方法で、その2Dノードに Effect Prefab プロパティを Shadow Effect 2D エフェクトに設定します。

Kanzi は、2Dノード内のコンテンツの視覚的な形状に、正のx軸に対して45度の角度で向けられた部分的に透明な黒いドロップシャドウを適用します。

影の外観を調整するには、Library で Shadow Effect 2D エフェクトを選択し、Properties で Shadow Effect 2D プロパティを追加して設定します。

../../_images/shadow-effect-2d-properties.png

../../_images/shadow-effect-in-preview.png

Shadow Blend Mode は、Kanzi がシャドウをレンダリングするために使用するブレンドモードを設定します。デフォルトは Alpha: Premultiplied です。例えば、よりリアルな影を作成するために、Multiply (advanced khr) ブレンドモードを使用します。 2Dノードのブレンディングとコンポジティングを参照してください。
Shadow Blur Radius は、影の各エッジから外側に影のぼかしが広がるピクセル単位の距離を定義することで、影の柔らかさを設定します。値が高いほど、影はよりぼやけます。デフォルトの半径は8ピクセルです。
Shadow Type はシャドウのタイプを設定します。 Drop Shadow はオブジェクトの後ろまたは下に表示されます。これがデフォルトです。 Inner Shadow はオブジェクト内に表示されます。
Shadow Distance は、オブジェクトからどのくらい離れた場所に影が落ちるかを設定します。デフォルトの距離は10ピクセルです。
Shadow Angle は、影の方向を正のx軸に対して時計回りの角度として設定します。デフォルトの角度は45度です。
Override Shadow Offset は、オブジェクトからの影のオフセットをx軸およびy軸に沿って設定します。デフォルトのオフセットは、両方の軸に沿って7ピクセルです。このプロパティを設定すると、Shadow Distance および Shadow Angle プロパティは効果がありません。
Shadow Color は影の色を設定します。
Shadow Only は、ノードのビジュアルコンテンツなしで影のみをレンダリングするかどうかを設定します。
Shadow Quality は影の視覚的な品質を設定します。低品質は、計算およびメモリリソースをより少なく使用します。

シャドウエフェクトのインスタンスをカスタマイズする¶

Library > Effects でエフェクトのプロパティを編集すると、そのエフェクトを使用するすべてのノードの外観が変更されます。エフェクトのプロパティ値をオーバーライドすることで、各エフェクトインスタンスをカスタマイズできます。例えば：

Shadow Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスで影の柔らかさを変えることができます。
Mask Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスでマスクのサイズを変えることができます。
Blur Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスでぼかしの量を変えることができます。
Outline Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスでアウトラインの色を変えることができます。

エフェクトのインスタンスをカスタマイズするには:

エフェクトを作成し、ノードをそれに使用するように設定します。

例えば、Shadow Effect 2D エフェクトを作成し、Image ノードにそれを使用するように設定します。2Dノードにシャドウ効果を作成するを参照してください。
エフェクト内のプロパティをカスタマイズする:
1. Library で、作成したエフェクトを選択します。カスタマイズしたいプロパティの隣にある Properties で、をクリックします。
  
  Kanzi Studio はそのプロパティからカスタムプロパティを作成し、それをエフェクトプレハブのルートに追加し、2Dエフェクト内のプロパティに ##Template バインディングを作成します。
  
  例えば、Shadow Blur Radius プロパティの隣にあるをクリックします。Kanzi Studio はカスタム Shadow Blur Radius プロパティを作成し、それをルートエフェクトプレハブに追加し、Shadow Effect 2D エフェクトプレハブ内にカスタム Shadow Blur Radius プロパティへの ##Template バインディングを作成します。
2. Node Tree または Prefabs で、作成したエフェクトを使用する2Dノードを選択します。Properties で、カスタマイズしたプロパティの横にあるをクリックし、プロパティの値を設定します。
  
  Kanzi Studio は2Dノードに To Source バインディングを追加し、そのプロパティの値をノードの Node2D.Effect プロパティを通じて利用可能なエフェクトインスタンスにプッシュします。
  
  複数の2Dノードに同じエフェクトを設定することができ、各2Dノードでプロパティを追加して異なる値を設定することができます。
  
  例えば、Properties で、Shadow Effect 2D Properties > ShadowEffect2D.BlurRadius プロパティを追加し、Image ノードでのみ影の柔らかさを調整するために使用します。
（オプション）カスタマイズしたい各エフェクトプロパティに対して、前のステップを繰り返します。

ヒント

ノードからプロパティとその To Source バインディングを削除したい場合は、そのプロパティを右クリックして Remove Property And Binding を選択します。

Shadow Effect 2D エフェクトをAPIで使用する¶

影の効果を作成するには、以下のようにします。

// Create an effect template.
NodeEffectTemplate2DSharedPtr shadowEffectTemplate =
    NodeEffectTemplate2D::create(ShadowEffect2D::getStaticMetaclass()->getName(), "DropShadow");

// Set the value of the AngleProperty in the template. This value serves as the default value
// of the property in instances of the effect prefab.
shadowEffectTemplate->addPropertyValue(ShadowEffect2D::AngleProperty, Variant(35.f));

// Create an effect prefab.
NodeEffectPrefab2DSharedPtr shadowEffectPrefab =
    NodeEffectPrefab2D::create(getDomain(), "DropShadow prefab", shadowEffectTemplate);

// Assign the effect to a 2D node.
node2d->setEffectPrefab(shadowEffectPrefab);

// Get the node-specific effect instance created from the assigned prefab.
ShadowEffect2DSharedPtr shadowEffect = dynamic_pointer_cast<ShadowEffect2D>(node2d->getEffect());

// Set the shadow distance to 15 pixels for this node only. This overrides
// the property default value defined by the ShadowEffect2D metaclass.
shadowEffect->setDistance(15.f);

// Set the direction of the shadow to 55 degrees relative to the positive x axis.
// This overrides the default value of 35 degrees set in the shadow effect template.
shadowEffect->setAngle(55.f);

詳細については、ShadowEffect2D クラスを参照してください。

Shadow Effect 2D エフェクトを使用する¶

2Dノードにシャドウ効果を作成する¶

シャドウエフェクトのインスタンスをカスタマイズする¶

Shadow Effect 2D エフェクトをAPIで使用する¶

関連項目¶