チュートリアル: ガウスぼかし効果を作成する

このチュートリアルでは、ガウスぼかし効果を適用する方法と、その効果を条件が満たされたときに適用する方法を学びます。

このビデオはチュートリアルの結果を示しています。

このチュートリアルは、Kanzi Studio を扱う基本を理解していることを前提としています。Kanzi Studio に慣れるための最適なエントリーポイントは次のとおりです。

• チュートリアル: Kanzi Studio の始め方

• チュートリアル: アプリケーションUIの構造

チュートリアルを入手する

チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Blur チュートリアルの横にある をクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。

• <KanziWorkspace>/Tutorials/Blur/Start ディレクトリにあるチュートリアルの開始地点プロジェクト。

• <KanziWorkspace>/Tutorials/Blur/Completed ディレクトリにある完成したチュートリアル。

開始プロジェクトの内容

スタートポイントとなるプロジェクトには、このチュートリアルを完了するのに必要なコンテンツが含まれています。

• Button プレハブは、カスタマイズされたバージョンの Factory Content Button です。

  

• UpdateContent プレハブは、ポップアップ通知のコンテンツを提供します。

  

• PopupBackground テクスチャは、ポップアップ通知の背景を提供します。

  

ぼかし効果を作成する

このセクションでは、ぼかし効果を作成します。

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

1. Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Blur チュートリアルの横にある Open をクリックし、Start project を選択します。

   Activity Browser では、Root パラレルアクティビティホストが CarScreen アクティビティを含んでおり、次の内容を表示します:

   • 3D車モデルを表示する Car ノード。

   • このチュートリアルでポップアップ通知を表示するために使用する ProfileButton。

   ヒント

   Preview のコンテンツ全体が見えない場合は、Preview の右上隅で Preview のズームレベルを調整できます。

   
   

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

   Blur Effect 2D エフェクトは、2Dノードのコンテンツにガウスぼかしを適用します。

   

3. Library から Blur Effect 2D エフェクトを Prefabs にドラッグし、CarScreen > Car ノードにドロップします。

   この方法で、Car ノードに Effect Prefab プロパティを Blur Effect 2D に設定します。

   Blur Effect 2D エフェクトはデフォルトで2Dノードに適用され、ピクセルが互いにブレンドする円形領域の半径は8ピクセルです。

   

4. ぼかしの量を制御する:

   1. Library > Effects で、Blur Effect 2D エフェクトを選択します。Properties で、Blur Radius プロパティの隣にある をクリックします。Publish Property ダイアログで、OK をクリックします。

      Kanzi Studio は Blur Radius プロパティからカスタムプロパティを作成し、Blur Effect 2D 内のそのプロパティに ##Template バインディングを作成します。

      

   2. Prefabs で、CarScreen > Car ノードを選択します。Properties で、Blur.BlurEffect2D.Radius プロパティを追加します。

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

      

   You can now control the amount of blur in the Car node by adjusting the value of the Blur.BlurEffect2D.Radius property in that node.

   

ステートマネージャーでぼかし効果を制御する

このセクションでは、Car ノードのぼかし効果を制御するために使用するステートマネージャーを作成します。ステートマネージャーを使用して、通常のレンダリング状態とぼかし状態の間の遷移をアニメーション化します。次のセクションでは、ポップアップ通知を作成し、その通知が表示されたときに Car ノードのコンテンツをぼかすためにステートマネージャーを使用します。

ステートマネージャーでぼかし効果を制御するには:

1. Prefabs で、CarScreen > Car ノードを選択します。State Tools で、Create State Manager をクリックします。

   Kanzi Studio はステートマネージャーを作成し、それを Car ノードに割り当てます。

   

2. Create State を2回クリックして2つのステートを作成し、それらに Default と Blur という名前を付けます。

   Default ステートを使用して、Car ノードがぼかしを適用せずにレンダリングされるときのアプリケーションの状態を定義し、ノードがぼかされるときの Blur ステートを定義します。

   

3. <No Controller Property> をクリックし、+ Create Property Type を選択して、設定します。

   • Name から Blur.BlurScreen へ

   • Type から Boolean へ

   ステートマネージャーでは、Controller Property として選択したプロパティの値が、ステートグループ内の各ステートがアクティブになる条件を定義します。

   

4. Blur ステートで、Blur.BlurScreen コントローラープロパティの値を True に設定します。

   

5. State Tools で、Default ステートを選択し、Properties で Blur.BlurEffect2D.Radius プロパティを0に設定します。Default ステートの State Tools で、Set をクリックして、Blur.BlurEffect2D.Radius プロパティの値をそのステートに保存します。

   この方法で、Default ステートを設定し、Car をぼかしを適用せずにレンダリングします。

   

6. Properties で、Blur.BlurEffect2D.Radius プロパティを40に設定します。Blur ステートの State Tools で、Set をクリックします。

   この方法で、Blur ステートを設定して、Car にぼかしを適用します。

   

7. State Tools で、Any -> Any をクリックします。State Transition Settings で、Duration を500に設定し、Save をクリックします。

   この方法で、Default ステートと Blur ステート間の遷移の長さを500ミリ秒に設定します。

   

8. Edit State Manager をクリックして、ステートツールを非アクティブ化します。

   

9. Prefabs で、CarScreen > Car ノードを選択します。Properties で、Blur.BlurEffect2D.Radius プロパティを削除します。

   このプロパティを削除するのは、ステートマネージャーを使用してこのプロパティの値を制御するためです。

   

10. Properties で、Controller Properties > Blur.BlurScreen プロパティを追加します。

    Blur.BlurScreen プロパティが無効になっている場合、Kanzi はぼかしを適用せずに Car ノードをレンダリングします。次のセクションでは、ポップアップ通知を作成し、その通知が表示されたときに Car をぼかすために Blur.BlurScreen プロパティを使用します。

    

ポップアップ通知を作成する

このセクションでは、CarScreen の上に表示するポップアップ通知を作成します。次のセクションでは、ポップアップ通知が表示されたときに Car ノードのコンテンツをぼかします。

ポップアップ通知を作成するには、以下のようにします。

1. Activity Browser で、Root アクティビティホストの下にある をクリックし、Create Activity を選択して、アクティビティとそのプレハブに UpdateNotification という名前を付けます。

   このアクティビティを使用して、CarScreen アクティビティの上にポップアップ通知を表示します。

   

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

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

   

3. Prefabs で、UpdateContent プレハブを UpdateNotification アクティビティプレハブにドラッグします。

   

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

   • Background Brush から PopupBackground へ

   • Layout Width から 741 へ

   • Layout Height を604に

   • Horizontal Alignment から Center へ

   • Vertical Alignment から Center へ

   この方法で、ポップアップの背景とサイズを設定し、ポップアップを Root アクティビティホストの中央に配置します。

   

5. Prefabs で、Button プレハブを UpdateNotification プレハブにドラッグします。

   

6. Prefabs で、UpdateNotification > Button ノードを選択します。Properties で、追加して設定します。

   • Name から InstallButton へ

   • Label から Install Now へ

   • Vertical Alignment から Bottom へ

   • Layout.Item > Vertical Margin プロパティ Bottom プロパティフィールドを55に設定

   チュートリアルの次のセクションでは、このボタンを使用してポップアップを閉じます。

   

7. Activity Browser で、UpdateNotification アクティビティを右クリックし、Add Transition > Fade Out Fade In を選択します。

   Kanzi Studio は、Library > State Managers にフェードアウトおよびフェードイントランジションを定義するステートマネージャーを作成し、UpdateNotification アクティビティがそれを使用するように設定します。

   UpdateNotification State Manager > ActivityState ステートグループには、アクティビティノードの異なるステータスにマップされるステートが含まれています。Active ステートでは、UpdateNotification の Opacity プロパティの値は1であり、他のすべてのステートでは0です。

   

8. Library > State Managers で、UpdateNotification State Manager > ActivityState ステートグループを選択します。Properties で、次のステート遷移を削除します。

   • Inactive --> Activating

   • Deactivating --> Inactive

   Active ステートへの遷移とそこからの遷移を定義するステート遷移を保持し、UpdateNotification アクティビティが完全な不透明度を持つようにします。

   

UpdateNotification アクティビティのアクティベーションとディアクティベーションをシミュレートすると、ポップアップ通知がフェードインおよびフェードアウトするのに500ミリ秒かかります。

ポップアップ通知とぼかし効果を制御する

このセクションでは、ぼかし効果とポップアップ通知を設定し、通知が表示されたときに通知の背後にある Car ノードのコンテンツがぼかされるようにします。

ポップアップ通知とぼかし効果を制御するには:

1. 通知を表示:

   1. Prefabs で、CarScreen > ProfileButton ノードを選択します。Node Components で、Button: Click トリガーを Alt を押しながら右クリック し、Dispatch Message Action > Activity Host > Activate Activity を選択します。

      ポップアップ通知を表示するアクティビティをアクティブにするために、ProfileButton を使用します。

      

   2. Activate Activity アクションで、Activity Activation Path を UpdateNotification に設定します。

      Activity Activation Path プロパティで設定したアクティビティへのパスは、Target Item プロパティで設定したアクティビティホストノードに対して相対的です。

      この方法で、Button: Click トリガーを設定して、Activate Activity アクションを実行し、UpdateNotification アクティビティをアクティブにします。

      Preview でプロフィールボタンをクリックすると、通知が表示されます。

      

2. 通知を閉じる:

   1. Prefabs で、UpdateNotification > InstallButton ノードを選択します。Node Components で、Alt を押しながら右クリック Triggers を行い、Message Trigger > Button > Click を選択します。

      

   2. Button: Click トリガーで、Alt を押しながら右クリック Actions を行い、Dispatch Message Action > Activity Host > Deactivate Activity を選択します。アクションで、Activity Activation Path を UpdateNotification に設定します。

      この方法で、Button: Click トリガーを設定して、Deactivate Activity アクションを実行し、UpdateNotification アクティビティを非アクティブ化します。

      Preview で「今すぐインストール」ボタンをクリックすると、ポップアップが閉じます。

      

3. 通知の背後にある CarScreen のコンテンツをぼかす:

   1. Prefabs で、CarScreen アクティビティを選択します。Node Components で、Alt を押しながら右クリック Triggers を選択し、Data Trigger を選択して、Popup Blur と名付けます。

      データトリガーは、そのデータトリガー内の条件式が満たされている限り、そのデータトリガー内のアクションを適用し続けます。

      

   2. Popup Blur データトリガーで、Expression を設定します。

      {../UpdateNotification/ActivityConcept.Status} == 0
      

      Apply をクリックします。

      この Data Trigger を設定して、UpdateNotification アクティビティにいるときにのみ、そのデータトリガー内のアクションが適用されるようにします。つまり、Activity Status プロパティが Active （列挙値0）である場合、アクティビティがアクティブであることを意味します。

      

   3. In the Node Components, Alt を押しながら右クリック the Popup Blur Data Trigger, select Apply Property Action, and in the Apply Property Action set:

      • Target Item から Prefab Placeholder 2Ds > Prefabs/CarScreen/CarScreen/Car

      • Target Property から Blur.BlurScreen へ

      • Fixed Value を有効にする

      この方法で、UpdateNotification アクティビティがアクティブなときに、Car ノードの Blur.BlurScreen プロパティを有効に保つように Popup Blur データトリガーを設定します。

      

Preview にいるとき、次のことができます:

• プロフィールボタンをクリックすると、Kanzi がポップアップ通知を表示し、車にぼかし効果を適用します。

• 「今すぐインストール」ボタンをクリックすると、Kanzi がポップアップを閉じ、ぼかし効果を適用せずに車をレンダリングします。

次の作業

このチュートリアルでは、Blur Effect 2D エフェクトの使用方法と、条件が満たされたときにそのエフェクトを適用する方法を学びました。これで、次のことができます。

• レンダーパスを使用して3Dコンテンツにブルーム効果を適用する方法を学びます。チュートリアル: ブルームエフェクトを作成する を参照してください。

• アクティビティのアクティベーション状態を制御するための条件の使用について詳しく学びましょう。チュートリアル: アプリケーションUIを制御する を参照してください。

関連項目

Factory Content アセットについて詳しく知るには、Factory Content アセット を参照してください。

2Dエフェクトについて詳しく知るには、2Dノードのエフェクト を参照してください。

アクティビティシステムについて詳しく学ぶには、アクティビティ を参照してください。

バインディングの使用方法について詳しくは、バインディングの使用 および バインディング式リファレンス を参照してください。

Kanzi ステートマネージャーについて詳しく知るには、ステートマネージャー (State Manager) を参照してください。