複数のエフェクトの使用

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

Kanzi Studio は、2Dノードに複数のエフェクトを素早く適用するために使用できる Default Effect Stack 2D プリセットが付属しています。デフォルトのエフェクトスタック2Dプリセットを使用する を参照してください。

2Dノードに複数のエフェクトを適用する

2Dノードに複数のエフェクトを適用するには：

1. Library で、Alt を押しながら右クリック Effects を選択し、Effect Stack 2D を選択します。

   

2. Node Tree または Prefabs で、複数のエフェクトを適用したい2Dノードを作成します。

   

3. Properties に Effect Prefab プロパティを追加し、Effect Stack 2D に設定します。

   この方法で、エフェクトプレハブをノードに割り当てることで、Preview でのエフェクトの作成を追跡できます。

   

4. Effect Stack 2D エフェクトプレハブの Library で、2Dノードに適用したいエフェクトを作成します。

   Kanzi は、Effect Stack 2D に表示される順序で、上から下に向かってノードのコンテンツにエフェクトを適用します。

   たとえば、作成します:

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

      

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

      

5. （オプション） で、Kanzi がスタック内でエフェクトを適用する方法を制御するには、エフェクト内に Effect Stack 2D > Effect Stacking Mode プロパティを追加し、次のように設定します。

   • 前のエフェクトの出力を入力として使用する Chained。

     例えば、この方法では、Outline Effect 2D の後に Shadow Effect 2D を適用すると、アウトラインにもシャドウが適用されます。デフォルトで、アウトラインはシャドウに含まれません。

   • 前の連鎖されたエフェクトの出力を入力として使用する Layered。

     これは、Shadow Effect 2D および Outline Effect 2D エフェクトのデフォルトモードです。

   Effect Stacking Mode プロパティは Mask Effect 2D および Blur Effect 2D エフェクトに影響を与えません。これらは常に Chained モードを使用します。

   

デフォルトのエフェクトスタック2Dプリセットを使用する

Effect Stack 2D を始めるのに役立つように、Kanzi Studio には Default Effect Stack 2D プリセットが付属しています。

Default Effect Stack 2D プリセットを使用するには、

1. Library で、Alt を押しながら右クリック Effects を選択し、Default Effect Stack 2D を選択します。

   

   Kanzi Studio は、Library > Effects > 2D Effects に Effect Stack 2D エフェクトプレハブ Default Effect Stack 2D を作成し、その中に:

   • Mask Effect 2D エフェクト名 Mask

   • Shadow Effect 2D エフェクト名 Shadow

   • Outline Effect 2D エフェクト名 Outline

   • Blur Effect 2D エフェクト名 Blur

   各エフェクトの最も一般的なプロパティは、Default Effect Stack 2D にバインディングされています。この方法で、Default Effect Stack 2D で各エフェクトを設定できます。

   

2. Node Tree または Prefabs で、複数のエフェクトを適用したい2Dノードを作成します。

   

3. Properties に Effect Prefab プロパティを追加し、Default Effect Stack 2D に設定します。

   デフォルトで、Default Effect Stack 2D プリセットはデフォルトの Shadow Effect 2D エフェクトを適用します。Default Effect Stack 2D の他のすべてのエフェクトは無効になっています。

   ノードを Default Effect Stack 2D として設定すると、Kanzi Studio はそのノードに Default Effect Stack 2D でぼかし、マスク、アウトライン、シャドウ効果を設定するために使用できるプロパティを追加します。

   

4. Properties で、Effect Stack プロパティを追加して設定します。

   たとえば、次を追加して設定します:

   • Mask Enabled を有効にする

   • マスクとして使用したいテクスチャに Mask Texture を設定します。

   • Outline Enabled を有効にする

   • アウトラインに使用したい色に Outline Color します。

   • Shadow Distance から 20 まで

   

   各プロパティを追加するたびに、Kanzi Studio はノードに To Source バインディングを追加し、プロパティ値を Default Effect Stack 2D プリセットにプッシュします。

   ヒント

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

   

フロストガラス効果の作成

この手順では、Effect Stack 2D エフェクトプレハブを Blur Effect 2D、Mask Effect 2D、および Shadow Effect 2D エフェクトと組み合わせて、すりガラス効果を作成します。

フロストガラス効果を作成するには、以下のようにします。

1. フロストガラス効果の背景を作成する:

   1. フロストガラスの背景として使用したいノードを作成します。

      例えば、Node Tree で、Image ノードを作成し、Background と名付けます。Properties で、追加して設定します。

      • Image をフロストガラス効果の背景として使用したい画像を表示するテクスチャにします。

      • Horizontal Alignment と Vertical Alignment を Stretch に

      • Content Stretch から Uniform to fill へ

      

   2. Library の Alt を押しながら右クリック Materials and Textures で、Render Target Texture を選択し、Background Render Target と名付けます。Properties で、Width と Height プロパティを、前のステップで作成した背景の幅と高さ以上に設定します。

      背景のサイズが固定されている場合、Automatic 設定を有効にすることができます。これにより、このテクスチャを使用するノードのサイズにレンダーターゲットテクスチャを設定します。

      

   3. Node Tree で、フロストガラスの背景を表示するノードを選択します。Properties で、Render Target > Render Target プロパティを追加し、それを Background Render Target に設定します。

      この方法で、Kanzi を設定して、背景を画面と Background Render Target レンダーターゲットテクスチャの両方にレンダリングします。この手順の後半で、Background Render Target レンダーターゲットテクスチャを使用して、フロストガラスを表示するノード内の背景の一部をレンダリングします。

      

   4. Node Tree で、Alt を押しながら右クリック ノードがフロストガラスの背景を表示し、Alias を選択します。

      Kanzi Studio は、Screen ノードのリソースディクショナリ内に、バックグラウンドノードを指すエイリアスを作成します。この手順では、後でこのエイリアスを使用して、バインディングでバックグラウンドノードにアクセスします。

      

2. テクスチャの特定の部分を表示するために使用できるマテリアルを作成します。

   1. Library の Alt を押しながら右クリック Materials and Textures で、Material Type を選択し、BackgroundCaptureBlit と名付けます。

      

   2. Library > Materials and Textures > Material Types > BackgroundCaptureBlit で、Vertex Shader をダブルクリックして Shader Source Editor で開きます。シェーダーファイルの内容を以下に置き換えます。

      precision mediump float;
      
      attribute vec3 kzPosition;
      attribute vec2 kzTextureCoordinate0;
      uniform mediump vec2 kzTextureSize0;
      uniform highp mat4 kzWorldMatrix;
      uniform highp mat4 kzProjectionCameraWorldMatrix;
      uniform vec2 BlitOffset;
      varying vec2 vTexCoord;
      
      void main()
      {
          vec2 scaledPosition = kzPosition.xy * vec2(kzWorldMatrix[0][0], kzWorldMatrix[1][1]);
          vTexCoord = (scaledPosition + BlitOffset) / kzTextureSize0;
          vTexCoord.y = 1.0 - vTexCoord.y;
      
          gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition.xyz, 1.0);
      }
      

      Save をクリックします。

   3. Library > Materials and Textures > Material Types > BackgroundCaptureBlit で、Fragment Shader の内容を以下に置き換えます。

      precision mediump float;
      
      uniform sampler2D RenderTexture;
      uniform float BlendIntensity;
      uniform vec4 ModulateColor;
      
      varying vec2 vTexCoord;
      
      void main()
      {
          vec4 color = texture2D(RenderTexture, vTexCoord);
          gl_FragColor = ModulateColor * color * BlendIntensity;
      }
      

      Save をクリックします。

   4. Library > Materials and Textures > Material Types で、BackgroundCaptureBlit マテリアルタイプを選択します。Properties で Sync with Uniforms をクリックします。

      

      Kanzi Studio:

      1. Library > Property Types に BlitOffset プロパティタイプを作成します。

      2. シェーダーで定義した以下のプロパティを BackgroundCaptureBlit マテリアルタイプに追加します。

         • Blend Intensity (BlendIntensity)

         • BlitOffset (BlitOffset)

         • Brush Modulate Color (Brush.ModulateColor)

         • Brush Texture (TextureBrush.RenderTexture)

         BackgroundCaptureBlit マテリアルタイプを使用する BackgroundCaptureBlitMaterial マテリアルで、これらのプロパティを設定できるようになりました。

3. Library > Materials and Textures > Brushes で、Material Brush を作成し、BackgroundCaptureBlitBrush と名付けます。Properties で、Material を BackgroundCaptureBlitMaterial に設定します。

   このマテリアルブラシを使用するように設定したノードでは、以下のプロパティを使用できます。

   • ノードでレンダリングしたいテクスチャを設定するための Brush Texture

   • ブラシの変調色を設定するには、Brush Modulate Color を使用します。

   • BlitOffset は、Brush Texture をオフセットするための x 軸および y 軸に沿った距離を設定します。

   

4. フロストガラス効果を表示したいUIエリアを作成します。

   例：

   1. Node Tree で、Background ノードの兄弟として Parallel Activity Host 2D ノードを作成します。Properties で、Horizontal Alignment と Vertical Alignment プロパティを Stretch に追加して設定します。

      

   2. Activity Browser で、Parallel Activity Host 2D の下にある をクリックし、Create Activity を選択して、アクティビティとそのプレハブテンプレートに Login という名前を付けます。

      

   3. Activity Browser の Login アクティビティで、 をクリックします。

      この方法で、Login アクティビティのアクティベーションをシミュレートし、そのコンテンツを Preview で確認できます。

      

   4. Prefabs で、Login プレハブを選択します。Properties で、追加して設定します。

      • Layout Width と Layout Height プロパティを使用して、フロストガラスのサイズを設定します。

      • Horizontal Alignment と Vertical Alignment プロパティを Center に。

      

   5. Prefabs で、Content Layout 2D プレハブを作成し、Frosted Glass と名付けます。

      フロストガラスを再利用可能にするために、プレハブで作成します。

      Content Layout 2D はデフォルトで、子ノードをクリップしません。エフェクトをホストするために他のタイプのノードを使用する場合は、そのノードで Node > Clip Children プロパティを無効にしてください。これにより、Kanzi がこの手順で後から適用するエフェクトをクリップしないようにします。

      

   6. Prefabs で、Frosted Glass プレハブを Login アクティビティプレハブにドラッグします。

      この方法で、Frosted Glass プレハブを Login アクティビティに追加し、Login アクティビティがアクティブ化されたときに Preview でその内容を確認できます。

      

   7. Prefabs で、Frosted Glass プレハブを選択します。Properties で、次の Brush プロパティを追加して設定します。

      • Brush Texture から Background Render Target へ

      • Foreground Brush から BackgroundCaptureBlitBrush へ

      • Brush Modulate Color を Foreground Brush に使用したい変調色に設定します。

        背景よりもすりガラスを明るくするには、Brush Modulate Color プロパティの Lightness (L) プロパティフィールドを255より大きい値に設定します。

        たとえば、350 に設定します。

      

   8. Properties で + Add Binding をクリックします。Binding Editor で設定します。

      • Property から Material Properties > BlitOffset

        このプロパティは、Brush Texture をオフセットするための x 軸および y 軸に沿った距離を設定します。

      • Expression が Frosted Glass ノード内の Background Render Target をオフセットしたい量を決定する2Dベクトルを返します。

        例えば、画面の中央にすりガラスをレンダリングするには、Expression を設定します。

        offset = Vector2(0,0)
        # Set the offset along the x axis to half of the difference between the widths of the
        # Background node and Frosted Glass node.
        offset.X = 0.5 * ({#Background/Node.ActualWidth} - {@./Node.ActualWidth})
        # Set the offset along the y axis to half of the difference between the heights of the
        # Background node and Frosted Glass node.
        offset.Y = 0.5 * ({#Background/Node.ActualHeight} - {@./Node.ActualHeight})
        # Return the offset along the x and y axes.
        offset
        

      Save をクリックします。

      

5. フロストガラス効果を作成する:

   1. Library の Alt を押しながら右クリック Effects で、Effect Stack 2D を選択し、Frosted Glass Effect と名付けます。

      

   2. Prefabs で、Frosted Glass プレハブを選択します。Properties で、Effect Prefab プロパティを追加し、Frosted Glass Effect に設定します。

      この方法で、エフェクトスタックをノードに割り当てることで、Preview でのエフェクトの作成を追跡できます。

      

   3. Library > Effects > 2D Effects で、Alt を押しながら右クリック Frosted Glass Effect を選択し、Mask Effect 2D を選択します。Properties で、追加して設定します:

      • フロストガラス効果を適用する領域の形状を定義するために使用したいテクスチャに Mask Texture します。

        例えば、Mask Texture ドロップダウンで + Import Image を選択し、この画像をインポートします。

        

      • Mask Stretch から Fill へ

        この方法で、Mask Effect 2D エフェクトを適用するノードを埋めるようにマスクを拡張します。

      • Mask Texture でマスクの入力として使用したいチャンネルに Mask Channel を設定します。

        デフォルトで、Kanzi はマスクの入力として Mask Texture のアルファチャンネルを使用します。

        例えば、上記の画像をマスクテクスチャとして使用する場合、Mask Channel を Luminance に設定します。このようにして、Kanzi をマスクの入力として使用するために、マスクテクスチャの色チャンネルから計算された輝度値を設定します。

      

   4. Library で、Alt を押しながら右クリック の Frosted Glass Effect を選択し、Blur Effect 2D を選択します。

      この方法で、Frosted Glass Effect にガウスぼかしを追加します。

      

   5. Properties に追加して設定します。

      • Blur Radius を、ぼかし効果を互いにブレンドさせたいピクセルの円形領域の半径にします。

        たとえば、32 に設定します。

      • Masked Blur を有効にする

        ノード内のアルファチャンネル値がゼロでないピクセルのみをぼかすように、ぼかし効果を設定します。この方法により、ぼかしが完全に透明なピクセルに広がるのを防ぎ、コンテンツのエッジがシャープに保たれます。

      

   6. Library > Effects > 2D Effects で、Alt を押しながら右クリック Frosted Glass Effect を選択し、Shadow Effect 2D を選択します。

      この方法で、フロストガラスにドロップシャドウを追加します。

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

      

6. フロストガラス効果の上に表示したいコンテンツを示すノードを作成します。

   例えば、Login アクティビティプレハブで、ログイン画面用の入力フィールドを作成します。

   

Kanzi Engine APIを使用して2Dノードに複数のエフェクトを割り当てる

Kanzi Engine APIを使用して2Dノードに複数のエフェクトを割り当てるには、

// 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 effect stack template.
NodeEffectTemplate2DSharedPtr effectStackTemplate = NodeEffectTemplate2D::create(EffectStack2D::getStaticMetaclass()->getName(), "Group");

// Add the outline effect template to the effect stack template.
effectStackTemplate->addChild(outlineEffectTemplate);

// Create a shadow effect template and add it to the effect stack template.
effectStackTemplate->addChild(NodeEffectTemplate2D::create(ShadowEffect2D::getStaticMetaclass()->getName(), "DropShadow"));

// Create a prefab from the effect stack template.
NodeEffectPrefab2DSharedPtr effectStackPrefab =
    NodeEffectPrefab2D::create(getDomain(), "Effect Stack prefab", effectStackTemplate);

// Set a 2D node to use the effect stack prefab.
// This way, you apply to the node both the outline and the shadow effect.
node->setEffectPrefab(effectStackPrefab);

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

関連項目

2Dノードのエフェクト

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

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

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

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

バインディングの使用

ブラシの使用

レイアウトコントロール (Layout control) ノード

マテリアルタイプとマテリアル