プレハブのインスタンスをカスタマイズする

プレハブのインスタンスをカスタマイズする場合、そのプレハブインスタンスのプロパティ値を変更しますが、プレハブの構造は保持します。

Kanzi では、次のタイプのプレハブが利用可能です。

  • プレハブ (あらかじめ作成されたテンプレート) を使用して、アプリケーションを構造化し、一貫性のあるインターフェイスを作成します。プレハブを利用してアプリケーションの構成要素を作成し、アプリケーションのメンテナンスを容易にすることができます。

    ノードプレハブの使用 を参照してください。

  • レンダーパスプレハブを使用して、Kanzi がプロジェクト内で3Dコンテンツをレンダリングする方法を定義するレンダーパスツリーを作成します。

    レンダーパスを使用すること を参照してください。

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

    2Dノードのエフェクト を参照してください。

ノードプレハブのインスタンスをカスタマイズする

ノードプレハブは、それぞれが独自のプロパティを持つノードのツリーを含むことができます。プロジェクト内でプレハブまたはそのインスタンスのいずれかのノードを編集すると、そのプレハブのすべてのインスタンスでそれらのノードが変更されます。プレハブのプロパティ値をオーバーライドすることで、プレハブの各インスタンスに独自のプロパティ値を持たせることができます。例えば、住所録エントリのプレハブを作成する際には、各住所録エントリに異なる名前、番号、写真を表示したいと考えます。

ノードプレハブのインスタンスをカスタマイズするには:

  1. Prefabs で、プレハブのインスタンスでカスタマイズしたいプレハブ内のノードを選択します。

    例えば、プレハブの各インスタンスに異なるテクスチャを使用するには、Image ノードを選択します。

    ../../_images/reuse-edit-prefab-structure.png
  2. Properties で、カスタマイズしたいプロパティの隣にある image0 をクリックします。

    Kanzi Studio は、そのプロパティからカスタムプロパティを作成し、それをそのプレハブのルートノードに追加し、そのプレハブのルートノード内のプロパティに ##Template バインディングを作成します。

    プレハブルートのバインディング を参照してください。

    例えば、そのプレハブの異なるインスタンスで表示したいテクスチャをカスタマイズするには、Image プロパティの横にある image1 をクリックします。Kanzi Studio はカスタム Image プロパティを作成し、それをそのノードプレハブのルートノードに追加し、Image ノードにそのノードプレハブのルートノード内のカスタム Image プロパティへの ##Template バインディングを作成します。

    ../../_images/reuse-edit-prefab-publish.png ../../_images/reuse-edit-prefab-root-binding.png
  3. Node Tree で、カスタマイズしたいプレハブインスタンスのルートノードを選択します。

    ../../_images/reuse-edit-prefab-prefab-instance.png
  4. Properties で、カスタマイズしたプロパティの隣にある イメージ2 (image2) をクリックし、プロパティの値を設定します。

    このプレハブのインスタンスのみが、設定した値を使用します。

    ../../_images/reuse-edit-prefab-add-property.png ../../_images/reuse-edit-prefab-property-added.png

レンダーパスプレハブのインスタンスをカスタマイズする

レンダーパスは、それぞれ独自のプロパティを持つレンダーパスの階層を含むことができます。レンダーパスを編集すると、それらのレンダーパスを使用するすべての Viewport 2D ノードでコンテンツのレンダリング方法が変更されます。デフォルトのレンダーパスの値をオーバーライドすることで、レンダーパスの個々のインスタンスに個別の値を持たせることができます。たとえば、合成ターゲットを画面にブリットするレンダーパスの階層を作成する場合、レンダーパスの異なるインスタンスで異なるマテリアルを使用してコンテンツをブリットすることができます。

レンダーパスのインスタンスをカスタマイズするには:

  1. Library > Rendering > Render Pass Prefabs でカスタマイズしたいレンダーパスを選択します。

    たとえば、コンポジションターゲットをスクリーンにブリットするために使用するマテリアルをカスタマイズするには、コンテンツをコンポジションターゲットにレンダリングし、その結果をスクリーンにブリットする Compose and Blit Pass レンダーパスプレハブで、Blit レンダーパスを選択します。コンポジションターゲットへのコンテンツのレンダリング を参照してください。

    ../../_images/blit-render-pass-in-render-target-tree.png
  2. Properties で、カスタマイズしたいプロパティの隣にある 編集を有効にする をクリックします。

    Kanzi Studio は、そのプロパティからカスタムプロパティを作成し、それをレンダーパスプレハブのルートに追加し、レンダーパスプレハブのルート内のプロパティに ##Template バインディングを作成します。プレハブルートのバインディング を参照してください。

    たとえば、コンポジションターゲットをスクリーンにブリットするために使用するマテリアルをカスタマイズするには、Material プロパティの横にある 編集を有効にする をクリックします。Kanzi Studio は Compose and Blit Pass レンダーパスプレハブに Material プロパティを追加し、Blit レンダーパスに、その Compose and Blit Pass の Material プロパティへの ##Template バインディングを作成します。

    ../../_images/publish-material-property.png ../../_images/template-binding-to-blit-material.png
  3. Node Tree または Prefabs で Viewport 2D ノードを選択し、Properties でカスタマイズしたレンダーパスプレハブに Render Pass Prefab プロパティを設定します。

    Viewport 2D ノードまたはプレハブをレンダーパスプレハブを使用するように設定すると、Kanzi Studio はその Viewport 2D ノードにレンダーパスプレハブのプロパティを頻繁に使用されるプロパティとして表示します。

    ../../_images/viewport-2d-in-the-project.png ../../_images/render-pass-prefab-set-to-compose-and-blit-pass.png
  4. Properties で、カスタマイズしたプロパティの隣にある プロパティを追加 をクリックし、プロパティの値を設定します。

    Kanzi Studio は、Viewport 2D ノードに対して、Viewport 2D ノードの Viewport2D::RenderPassProperty プロパティを通じて利用可能なレンダーパスプレハブインスタンスにそのプロパティの値をプッシュするソースバインディングを追加します。

    複数の Viewport 2D ノードを同じレンダーパスプレハブを使用するように設定でき、各 Viewport 2D ノードでレンダーパスプレハブプロパティを追加および設定して異なる値を持たせることができます。

    ../../_images/group-render-pass-material-frequently-used.png ../../_images/tosource-binding-to-material.png

    ヒント

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

2Dエフェクトプレハブのインスタンスをカスタマイズする

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

  • Shadow Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスで影の柔らかさを変えることができます。

  • Mask Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスでマスクのサイズを変えることができます。

  • Blur Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスでぼかしの量を変えることができます。

  • Outline Effect 2D エフェクトを作成する際、そのエフェクトの異なるインスタンスでアウトラインの色を変えることができます。

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

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

    例えば、Shadow Effect 2D エフェクトを作成し、Image ノードにそれを使用するように設定します。2Dノードにシャドウ効果を作成する を参照してください。

    ../../_images/effect-prefab-property-set.png ../../_images/image-in-preview-w-shadow.png
  2. エフェクト内のプロパティをカスタマイズする:

    1. Library で、作成したエフェクトを選択します。カスタマイズしたいプロパティの隣にある Properties で、image-publish-property をクリックします。

      Kanzi Studio はそのプロパティからカスタムプロパティを作成し、それをエフェクトプレハブのルートに追加し、2Dエフェクト内のプロパティに ##Template バインディングを作成します。

      例えば、Shadow Blur Radius プロパティの隣にある image-publish-property をクリックします。Kanzi Studio はカスタム Shadow Blur Radius プロパティを作成し、それをルートエフェクトプレハブに追加し、Shadow Effect 2D エフェクトプレハブ内にカスタム Shadow Blur Radius プロパティへの ##Template バインディングを作成します。

      ../../_images/properties-publish-shadow-blur-radius.png ../../_images/properties-shadow-blur-radius-template-binding.png
    2. Node Tree または Prefabs で、作成したエフェクトを使用する2Dノードを選択します。Properties で、カスタマイズしたプロパティの横にある image-add-property をクリックし、プロパティの値を設定します。

      Kanzi Studio は2Dノードに To Source バインディングを追加し、そのプロパティの値をノードの Node2D.Effect プロパティを通じて利用可能なエフェクトインスタンスにプッシュします。

      複数の2Dノードに同じエフェクトを設定することができ、各2Dノードでプロパティを追加して異なる値を設定することができます。

      例えば、Properties で、Shadow Effect 2D Properties > ShadowEffect2D.BlurRadius プロパティを追加し、Image ノードでのみ影の柔らかさを調整するために使用します。

      ../../_images/properties-shadow-effect-2d-blur-radius.png ../../_images/preview-shadow-effect-2d-blur-radius.png
  3. (オプション) カスタマイズしたい各エフェクトプロパティに対して、前のステップを繰り返します。

    ヒント

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

関連項目

ノードプレハブの使用

レンダーパスを使用すること

レンダリング

2Dノードのエフェクト

バインディングの使用