2Dノードのエフェクト

エフェクトを使用して、2Dノードにポストプロセッシングエフェクトを適用します。

Kanzi Studio では、Library > Effects のエフェクトを見つけることができます。

../../_images/effects-library.png

これらのエフェクトは Kanzi で利用可能です。

Blur Effect 2D エフェクトを使用して、2Dノードにガウスぼかしを適用します。

Blur Effect 2D エフェクトを使用する を参照してください。

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

Mask Effect 2D エフェクトを使用して、2Dノードにマスクを適用します。

Mask Effect 2D エフェクトを使用する を参照してください。

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

Outline Effect 2D エフェクトを使用して、2Dノードのコンテンツにアウトラインを適用します。

Outline Effect 2D エフェクトを使用する を参照してください。

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

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

Shadow Effect 2D エフェクトを使用する を参照してください。

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

2Dノードに複数のエフェクトを適用するには、Effect Stack 2D エフェクトプレハブを使用します。

複数のエフェクトの使用 を参照してください。

../../_images/effect-stack-2d.gif

Kanzi が2Dエフェクトを適用する方法

Kanzi は、ノードおよびその子孫ノード内のコンテンツの視覚的な形状に2Dエフェクトを適用します。

../../_images/effect-node.png ../../_images/parent-children-effect-preview.png

エフェクトをノードに適用したいが、その子孫ノードには適用したくない場合、子孫ノードをエフェクトを適用するノードの兄弟ノードに配置します。その兄弟ノードを、エフェクトを適用するノードの下にノードツリー内で配置します。兄弟ノードが同じサイズ、レイアウト、変換、および不透明度であることを確認してください。

../../_images/effect-node-2.png ../../_images/parent-only-effect-preview.png

エフェクトとレイアウト

エフェクトを使用する際は、次の点に注意してください:

  • Kanzi は、レイアウトを計算する際にエフェクトを考慮しません。デザインでエフェクトがレイアウトの境界を超えないようにする場合、そのエフェクトのためにレイアウトに十分なスペースがあることを確認してください。

    例えば、ドロップシャドウを適用する Text Block 2D ノードを含むレイアウトでは、その Text Block 2D ノードで Horizontal Margin プロパティと Vertical Margin プロパティを設定して、シャドウのための十分なスペースを確保してください。

    ../../_images/shadow-margin.png
  • Kanzi が2Dノードにエフェクトを適用すると、そのノードを合成し、Clip Children プロパティの値に関係なく、そのノードの境界に子孫ノードをクリップします。これは、レンダリングターゲットテクスチャのサイズがノードのサイズと一致するためです。

エフェクトがアプリケーションのパフォーマンスに与える影響

エフェクトのインスタンスごとに、Kanzi はコンポジションマネージャーに一時的なコンポジションターゲットを提供するよう要求します。Kanzi コンポジションマネージャーは、サイズとパラメーターが互換性がある場合、一時的なコンポジションターゲットを再利用します。

エフェクトを使用するアプリケーションの最終的なパフォーマンスは、次の要素に依存します。

  • アプリケーションのUIをレンダリングするために必要な帯域幅と、割り当てられたメモリの量

  • ドローコールの数

  • レンダリングターゲットまたはテクスチャスイッチの数

エフェクトを最も効率的に使用する方法を見つけるために、次のアプローチでアプリケーションのパフォーマンスをテストしてください。

  • 各UI要素に個別のエフェクトを適用して、領域を最小限に抑えます。

  • UI要素のグループにエフェクトを適用して、より広い領域をカバーします。

アンチエイリアスの適用

2Dノードにエフェクトを適用すると、Kanzi がそのノードを合成ターゲットにレンダリングします。デフォルトで、Kanzi は合成されたノードの子ノードにアンチエイリアスを適用しません。例えば、これらのノードを回転させると、そのエッジがギザギザに見えることがあります。

../../_images/node-tree-flow-layout.png ../../_images/preview-no-msaa.png

マルチサンプルアンチエイリアシングを適用するには:

  1. Node Tree または Prefabs で、エフェクトを適用するノードを選択します。

  2. Properties で、Render Target > Multisample Level プロパティを追加し、使用したいアンチエイリアスサンプルの数に設定します。

    Kanzi アプリケーションを実行したいデバイスのドキュメントを参照して、サポートされている値を確認してください。アンチエイリアスサンプルの数はデバイスに依存するためです。デバイスがサポートしていない値に Multisample Level プロパティを設定した場合、Kanzi Engine はその値をデバイスドライバがサポートする最大値にクランプします。

    ../../_images/properties-multisample-level.png ../../_images/preview-4x-msaa.png

関連項目

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

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

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

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

複数のエフェクトの使用

Kanzi Engine APIでエフェクトを使用する

2Dノードの外観の調整

ブラシの使用

レンダリング