Outline Effect 2D エフェクトを使用する¶
Outline Effect 2D エフェクトを使用して、2Dノードのコンテンツにアウトラインを適用します。
例えば、データソースからのテキストにアウトラインを適用するために、Outline Effect 2D エフェクトを使用します。
アウトラインカラーエフェクトの作成¶
アウトラインカラーエフェクトを作成するには：
Library で、Alt を押しながら右クリック Effects を選択し、Outline Effect 2D を選択します。
Node Tree または Prefabs で、アウトライン効果を適用したい2Dノードを作成します。
Library > Effects > 2D Effects から、アウトライン効果を適用したい 2D ノードに Outline Effect 2D エフェクトをドラッグします。
この方法で、その2Dノードに Effect Prefab プロパティを Outline Effect 2D エフェクトに設定します。
Kanzi は、2Dノード内のコンテンツの視覚的な形状に、黒色で幅が4ピクセルのアウトラインを適用します。
Library で、Outline Effect 2D エフェクトを選択します。Properties で、これらのプロパティを使用してアウトラインの外観を設定します。
Outline Blend Mode は、Kanzi がアウトラインをレンダリングするために使用するブレンドモードを設定します。
Outline Width はアウトラインの太さをピクセル単位で設定します。
Outline Color はアウトラインの色を設定します。
Outline Softness は、アウトラインの幅に対して相対的にアウトラインを柔らかくするグラデーションの長さを設定します。
テクスチャ付きアウトラインの作成¶
Outline Effect 2D エフェクトで作成したアウトラインに一次元テクスチャを適用できます。例えば、テクスチャを使用してテキストに複数のストロークを追加することができます。
テクスチャ付きアウトラインを作成するには、以下のようにします。
2Dノードにアウトライン効果を作成します。アウトラインカラーエフェクトの作成 を参照してください。
Library で、Outline Effect 2D エフェクトを選択します。Properties で、追加して設定します。
Outline Width をアウトラインにしたいピクセルの太さに設定します。
アウトラインテクスチャの色値を変調したい色に Outline Color します。
アウトラインテクスチャの色をそのまま適用するには、Outline Color を白に設定します。
アウトラインに適用したいテクスチャに Outline Texture を設定します。
Kanzi は、このテクスチャの最上段のピクセルにのみアウトラインを適用します。テクスチャの最も左のピクセルはアウトラインの最も内側の部分にマッピングされ、最も右のピクセルはアウトラインの最も外側の部分にマッピングされます。Kanzi は、テクスチャの幅をアウトラインの幅にスケーリングします。
例えば、Outline Texture ドロップダウンで + Import Image を選択し、この画像をインポートします。
（オプション） テクスチャをアウトラインに沿って配置およびスケーリングするには、Properties で次の Outline Effect 2D プロパティを追加して設定します。
Outline Texture Offset は、Kanzi がテクスチャのサンプリングを開始する相対的な開始位置を設定します。
例えば、例のテクスチャで中間のグレーのシェードでアウトラインを開始するには、Outline Texture Offset を0.33に設定します。
Outline Texture Tiling は、Kanzi がアウトラインテクスチャをスケールする値を設定します。
例えば、テクスチャを2回表示するアウトラインを作成するには、Outline Texture Tiling を2に設定します。
ヒント
アウトラインをカバーするためにテクスチャを繰り返したい場合、Library > Materials and Textures > Textures でそのテクスチャを選択し、Properties で Wrap Mode を Repeat に設定します。
アウトラインエフェクトのインスタンスをカスタマイズする¶
Library > Effects でエフェクトのプロパティを編集すると、そのエフェクトを使用するすべてのノードの外観が変更されます。エフェクトのプロパティ値をオーバーライドすることで、各エフェクトインスタンスをカスタマイズできます。例えば：
Shadow Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスで影の柔らかさを変えることができます。
Mask Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスでマスクのサイズを変えることができます。
Blur Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスでぼかしの量を変えることができます。
Outline Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスでアウトラインの色を変えることができます。
エフェクトのインスタンスをカスタマイズするには:
エフェクトを作成し、ノードをそれに使用するように設定します。
例えば、Shadow Effect 2D エフェクトを作成し、Image ノードにそれを使用するように設定します。2Dノードにシャドウ効果を作成する を参照してください。
エフェクト内のプロパティをカスタマイズする:
Library で、作成したエフェクトを選択します。カスタマイズしたいプロパティの隣にある Properties で、
をクリックします。Kanzi Studio はそのプロパティからカスタムプロパティを作成し、それをエフェクトプレハブのルートに追加し、2Dエフェクト内のプロパティに
##Templateバインディングを作成します。例えば、Shadow Blur Radius プロパティの隣にある
をクリックします。Kanzi Studio はカスタム Shadow Blur Radius プロパティを作成し、それをルートエフェクトプレハブに追加し、Shadow Effect 2D エフェクトプレハブ内にカスタム Shadow Blur Radius プロパティへの ##Templateバインディングを作成します。
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 を選択します。
Outline Effect 2D エフェクトをAPIで使用する¶
アウトライン効果を作成するには：
// Create an outline effect template.
NodeEffectTemplate2DSharedPtr outlineEffectTemplate =
NodeEffectTemplate2D::create(OutlineEffect2D::getStaticMetaclass()->getName(), "OutlineEffect");
// Set the value of the WidthProperty in the outline effect template.
// The WidthProperty defines the maximum width of the outline outside the content area.
outlineEffectTemplate->addPropertyValue(OutlineEffect2D::WidthProperty, Variant(8));
// Create an outline effect prefab.
NodeEffectPrefab2DSharedPtr outlineEffectPrefab =
NodeEffectPrefab2D::create(getDomain(), "OutlineEffect prefab", outlineEffectTemplate);
// Assign the outline effect to a 2D node.
node2d->setEffectPrefab(outlineEffectPrefab);
// Get the node-specific effect instance created from the assigned prefab.
OutlineEffect2DSharedPtr outlineEffect = dynamic_pointer_cast<OutlineEffect2D>(node2d->getEffect());
// Set the SoftnessProperty to 0.7 for this node only. This overrides
// the property default value defined by the OutlineEffect2D metaclass.
outlineEffect->setSoftness(0.7f);
詳細については、OutlineEffect2D クラスを参照してください。