ステップ2 - アプリケーション構造を作成する¶

このステップでは、Activity ノードを使用して Activity Browser ウィンドウでアプリケーション構造を作成します。また、Activity Browser を使用してアクティビティ間を遷移する方法も学びます。

Activity ノードを作成する¶

このセクションでは、Activity Browser ウィンドウを使用して、アプリケーションのユーザーインターフェイスの異なる画面をそれぞれ表す Activity ノードを作成します。

アプリケーションのユーザーインターフェイスの構造を作成するには Activity ノードを使用し、Activity ノード間を移動するには Activity Host ノードを使用します。

たとえば、この方法で、Activity ノードが Navigation、Car Settings、Media の各アプリケーション画面のコンテンツを保持するユーザーインターフェイスを作成できます。各画面は、独自のコンテンツと、追加の Activity ノードおよび Activity Host ノードの階層を持つことができます。

Activity ノードを作成するには、次の手順に従います。

Node Tree で Viewport 2D ノードを削除します。次に、RootNode ノードで Alt を押しながら右クリックをクリックし、Exclusive Activity Host 2D を選択します。

この Activity Host ノードは、どの Activity ノードを表示するかを制御するルートノードとして使用します。Exclusive Activity Host 2D は、一度に 1 つのアクティビティだけがアクティブになるようにします。

Kanzi Studio プロジェクトを作成すると、プロジェクトには DefaultBackground というデフォルトの Texture Brush が含まれ、これにより RootNode ノードの背景が描画されます。

2D ノードの背景を設定するにはブラシを使用します。Kanzi では、すべての 2D ノードにデフォルトで透明な背景が設定されています。
それぞれがアプリケーション画面を表す Activity ノードを作成します。
1. Assets ウィンドウおよび Asset Packages ウィンドウの隣にある Activity Browser ウィンドウで、Exclusive Activity Host 2D ノードの下にあるをクリックし、Create Activity を選択して、Navigation という名前を付けます。
2. Activity Browser で、さらに 2 つの Activity ノードを作成し、Car Settings と Media という名前を付けます。
  
  Prefabs ウィンドウでは、Activity Browser で作成したアクティビティのプレハブを確認できます。
Activity Browser で、Navigation アクティビティを選択します。サイドパネルで、InitiallyActive プロパティを有効に設定します。

この方法で、アクティビティホストがアクティブなときにアクティビティをアクティブに設定します。これを示すために、Activity Browser はそのようなすべてのアクティビティに対してアイコンを表示します。

アクティビティにコンテンツを追加する¶

このセクションでは、Navigation アクティビティと Car Settings アクティビティにコンテンツを追加します。

アクティビティにコンテンツを追加するには、次の手順に従います。

Assets ウィンドウから NavigationMockup.png 画像を Prefabs ウィンドウにドラッグし、Navigation Activity ノードにドロップします。

Kanzi Studio は、Assets からドラッグした画像を使用する Image ノードを自動的に作成し、画像をドロップした Activity ノードにその Image ノードを追加します。
ヒント

Assets ウィンドウでは、プロジェクト内のコンテンツを検索および閲覧できます。
- 検索ボックスに探しているアイテム名に含まれる単語を入力します。
- ボタンをクリックすると、特定のタイプのコンテンツのみが表示されます。
Prefabs ウィンドウで、Car Settings ノードを Alt を押しながら右クリックし、Viewport 2D を選択します。

Viewport 2D ノードは、3D ノードである Scene と、Image や Button 2D などの 2D ノードの両方をレンダリングできます。

Kanzi Studio プロジェクトを作成すると、そのプロジェクトには、Camera と Directional Light を含む Scene を持つ Viewport 2D ノードが含まれます。Kanzi Engine では、Scene ノードは常に Viewport 2D ノードの最初の子ノードです。

ヒント

Node Tree ウィンドウのノードまたは Library ウィンドウのリソースを Alt を押しながら右クリックすると、ノードとリソースの作成メニューに直接アクセスできます。ノードまたはリソースを右クリックしただけの場合は、コンテキストメニューで Create を選択すると作成メニューにアクセスできます。
Prefabs ウィンドウで、Car プレハブをドラッグし、Activity ノード Car Settings に作成した Viewport 2D ノードにドロップします。

Prefabs ウィンドウからプレハブをドラッグすると、Kanzi Studio はそのプレハブのインスタンスをノードツリーのプレハブをドロップしたノードに作成します。

アクティビティ間のトランジション¶

Activity Browser は、アプリケーション内のアクティビティのアクティベーションをシミュレートします。Preview でアクティビティのコンテンツを表示するには、Activity Browser でアクティビティをアクティベートできます。アクティベートしたいアクティビティで、をクリックします。

Activity Browser では、アクティブなアクティビティは activity-active でマークされ、その境界線は青色です。

Kanzi はデフォルトで、Activity ノード間に即時のトランジションを使用します。ただし、独自のトランジションを追加して定義することもできます。

次のステップでは、Activate Activity アクションを使用して Activity ノード間を移動するボタンを作成します。

前のステップ次のステップ