チュートリアル: 複数の Kanzi Studio プロジェクトを1つの Kanzi アプリケーションに統合する

このチュートリアルでは、複数の Kanzi Studio プロジェクトを組み合わせて、単一の Kanzi アプリケーションを作成する方法を学びます。

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

../../_images/completed.png

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

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

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

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

  • <KanziWorkspace>/Tutorials/Multi-project/Assets ディレクトリ内のチュートリアルの開始地点プロジェクト。

  • <KanziWorkspace>/Tutorials/Multi-project/Completed ディレクトリ内の完成済みチュートリアル。

開始地点プロジェクトの内容

このチュートリアルのアセットには、これらの準備された Kanzi Studio プロジェクトが含まれており、それらを組み合わせて単一の Kanzi アプリケーションにします。

  • Stats プロジェクトには、車の統計アプリケーションが含まれています。

    ../../_images/stats.png

  • Weather プロジェクトには、天気情報アプリケーションが含まれています。

    ../../_images/weather.png

  • Music プロジェクトには、音楽プレーヤーアプリケーションが含まれています。

    ../../_images/music.png

  • Resources プロジェクトには、このチュートリアル内のプロジェクトが共有するリソースのみが含まれています。

    ../../_images/resources-library.png

ソリューションを作成し、別のプロジェクトからコンテンツを使用する

このセクションでは、Kanzi Studio プロジェクトを組み合わせ、別のプロジェクトからプレハブを使用する Kanzi Studio ソリューションを作成します。

プロジェクトを作成し、別のプロジェクトからコンテンツを使用するには:

  1. Kanzi Studio Quick Start ウィンドウで New をクリックし、プロジェクトに Center stack という名前を付けます。

    このプロジェクトを使用して、このチュートリアル内の他の Kanzi Studio プロジェクトを単一の Kanzi アプリケーションに結合します。

    ../../_images/multi-project-new-project.png

  2. Node Tree で Screen ノードを選択し、Properties で Screen Resolution プロパティを 1280x480 - UWVGA に設定します。

    このようにして、アプリケーション画面のサイズを設定します。

    ../../_images/screen.png ../../_images/screen-resolution1.png

  3. アプリケーションの背景を設定する:

    1. Assets で Import Assets をクリックし、<KanziWorkspace>/Tutorials/Multi-project/Assets/Images ディレクトリに移動して、Background.png 画像を選択し、Open をクリックします。

      ../../_images/cluster-stack-assets.png

    2. Node Tree で RootNode ノードを選択し、Properties で Background Brush プロパティを + Texture Brush に設定してブラシに名前を付け、プロパティ名の横にある image0 をクリックして、ブラシの Brush Texture プロパティを Background テクスチャに設定します。

      ../../_images/background-texture-brush.png

  4. Node Tree で Viewport 2D ノードを右クリックし、Delete を選択します。

    このチュートリアルでは3Dコンテンツを作成しないため、Viewport 2D ノードを削除できます。

    ../../_images/delete-viewport-2d.png

  5. Library で Project References を Alt を押しながら右クリック し、Existing Project を選択して、<KanziWorkspace>/Tutorials/Multi-project/Assets/Stats/Stats.proj.kzm プロジェクトを選択します。

    Kanzi Studio のロード:

    • Stats プロジェクト Stats プロジェクトには、車の統計アプリケーションが含まれています。これを最終的な Kanzi アプリケーションのメイン部分に配置します。

    • Resources プロジェクト Kanzi Studio は Resources プロジェクトをロードします。なぜなら、Stats プロジェクトが Resources プロジェクトを指すプロジェクト参照を含んでいるからです。

    プロジェクトタブでは、Preview アイコン アクティブ が Preview でアクティブなプロジェクトを示します。

    ../../_images/project-reference-create-existing-project.png ../../_images/stats-and-resources-project-tabs.png

    ヒント

    Kanzi Studio が Preview に表示されているプロジェクト、または参照されているプロジェクトのいずれかに、プロジェクトのkzbファイルにまだエクスポートしていない変更が含まれている場合、Preview の Restart ボタンはオレンジ色になります。

    Preview のコンテンツが古くなっているプロジェクトを確認するには、ボタンにカーソルを合わせてください。

    ../../_images/preview-content-outdated-tooltip.png

  6. Preview で Restart をクリックし、Kzb export ダイアログで Yes をクリックして、参照されているプロジェクトのkzbファイルをエクスポートします。

    Kanzi Studio は、Stats および Resources プロジェクトからkzbファイルと設定ファイルを作成します。Kanzi Studio は、エクスポートされたファイルを Stats および Resources プロジェクトの Binary ディレクトリに保存します。

    この方法で、Stats プロジェクトのコンテンツを Center stack プロジェクトの Preview に利用可能にします。

    ../../_images/preview-restart-button-orange-in-context.png

  7. プロジェクトタブで、Stats プロジェクトのタブを右クリックし、Show in Preview を選択します。

    Preview ウィンドウで Stats プロジェクトの内容が表示されます。

    ../../_images/stats-show-in-preview.png ../../_images/stats-project-in-preview.png

  8. プロジェクトタブバーで Stats プロジェクトを選択し、Prefabs で Stats プレハブを選択し、Properties で Visibility Across Projects プロパティを Public に設定します。

    Visibility Across Projects プロパティは、参照プロジェクトのドロップダウンメニューでリソースの利用可能性を制御します。

    Prefabs と Library では、左上隅の緑色のアイコンがパブリックアイテムを示します。

    ../../_images/stats-project-selected.png ../../_images/stats-in-prefabs.png ../../_images/stats-visibility-across-projects-public.png ../../_images/stats-marked-public.png

    ヒント

    Library または Prefabs でアイテムを直接公開するには、アイテムを右クリックして Make Public を選択します。

    ../../_images/make-public.png

  9. プロジェクトタブバーで、Center stack プロジェクトをダブルクリックします。

    この方法で、Center stack プロジェクトを選択し、Preview でそれを見ることができます。

    ../../_images/select-center-stack-project.png

  10. Node Tree で RootNode ノードを Alt を押しながら右クリック し、Prefab Placeholder 2D を選択して、Stats という名前を付けます。

    この Prefab Placeholder ノードを使用して、Stats プロジェクトから Stats プレハブをインスタンス化します。

    ../../_images/stats-prefab-placeholder.png

  11. Properties で、Stats プロジェクトの Stats プレハブに Prefab Template プロパティを設定します。

    Kanzi Studio は、Prefab Template を Stats プレハブの kzb URL に設定します。これは、この手順の前に参照プロジェクトに対して可視に設定したものです。

    ../../_images/stats-prefab-template-select-stats.png ../../_images/stats-properties.png

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

    • Layout Width から 880 へ

    • Layout Height を480に

    これらのプロパティを使用して、Center stack プロジェクト内の Stats プロジェクトからプレハブのサイズを設定します。

    ../../_images/stats-properties-width-height.png ../../_images/stats-in-preview.png

他のプロジェクトからプレハブを追加する

このセクションでは、Center stack プロジェクトに Weather および Music プロジェクトからプレハブを追加します。

他のプロジェクトからプレハブを追加するには:

  1. Library で Project References を Alt を押しながら右クリック し、Existing Project を選択して、<KanziWorkspace>/Tutorials/Multi-project/Assets/Weather/Weather.proj.kzm プロジェクトを選択します。

    Weather プロジェクトには天気情報アプリケーションが含まれています。これを Center stack プロジェクトの右上隅に配置します。

    ../../_images/project-references-weather.png

    ヒント

    Library > Project References のプロジェクト参照の順序は、アプリケーションを実行する際に Kanzi がプロジェクトの kzb ファイルを読み込む順序を決定します。

  2. Preview で restart-orange をクリックして Preview をリスタートし、Weather プロジェクトの kzb ファイルをエクスポートします。

    この方法で、Weather プロジェクトのコンテンツを Center stack プロジェクトの Preview に利用可能にします。

  3. プロジェクトタブバーで Weather プロジェクトを選択し、Prefabs で Weather プレハブを選択し、Properties で Visibility Across Projects プロパティを Public に設定します。

    ../../_images/select-weather-project.png ../../_images/weather-in-prefabs.png ../../_images/weather-visibility-across-projects-public.png

  4. プロジェクトタブバーで Center stack プロジェクトを選択し、Node Tree で RootNode ノードを選択して、Prefab Placeholder 2D ノードを作成して Weather という名前を付け、Properties で以下を追加して設定します。

    • Weather プロジェクトの Weather プレハブへの Prefab Template

    • Layout Width から 400 へ

    • Layout Height を240に

    • Horizontal Alignment から Right へ

    ../../_images/weather-prefab-placeholder.png ../../_images/weather-properties.png

  5. このセクションの手順を繰り返して、<KanziWorkspace>/Tutorials/Multi-project/Assets/Music/Music.proj.kzm Kanzi Studio から Music プレハブを追加します。

    1. Music プロジェクトで、Music プレハブの Visibility Across Projects プロパティを Public に設定します。

    2. Center stack プロジェクトで Prefab Placeholder 2D ノードを Music に名前を付け、Properties で追加して設定します。

      • Music プロジェクトの Music プレハブへの Prefab Template

      • Layout Width から 400 へ

      • Layout Height を240に

      • Horizontal Alignment から Right へ

      • Vertical Alignment から Bottom へ

    ../../_images/music-prefab-placeholder.png ../../_images/music-properties.png ../../_images/stats-weather-and-music-in-preview.png

  6. メインメニューで File > Save All を選択します。

    この方法で、Center stack、Stats、Weather、および Music プロジェクトに加えた変更を保存します。

    ../../_images/save-all.png

別のプロジェクトからリソースを使用する

Kanzi アプリケーションが複数の Kanzi Studio プロジェクトで構成されている場合、これらのプロジェクト全体で使用されるリソースのみを含む専用のプロジェクトを使用してください。たとえば、そのようなリソースプロジェクトには、Kanzi アプリケーションの複数の Kanzi Studio プロジェクトで使用したいフォント、ブラシ、スタイル、画像を保存できます。

このセクションでは、Music プロジェクトの共通リソースを Resources プロジェクトのリソースに置き換えます。

別のプロジェクトからリソースを使用するには:

  1. プロジェクトタブバーで Music プロジェクトを選択し、Library で Project References を Alt を押しながら右クリック して Existing Project を選択し、<KanziWorkspace>/Tutorials/Multi-project/Assets/Resources/Resources.proj.kzm プロジェクトを選択します。

    Resources プロジェクトには、このチュートリアル内のプロジェクトが共有するリソースのみが含まれています。

    ../../_images/select-music-project.png ../../_images/music-library-existing-project.png ../../_images/music-project-references-resources.png

    ヒント

    Kanzi ソリューションでプロジェクト間で共有したい共通リソースを保存するプロジェクトを作成したい場合、Alt を押しながら右クリック Library > Project References を選択し、New Resource Project を選択します。

    リソースプロジェクトは、ノードツリーに Screen ノードのみを含み、Default Texture や DefaultBackground テクスチャのようなデフォルトの Kanzi Studio プロジェクトリソースを含みません。

    ../../_images/new-resource-project.png

  2. プロジェクトタブバーで、Resources プロジェクトのタブを右クリックし、Make Public を選択します。

    この方法で、Resources プロジェクトの Resource Visibility Across Projects プロパティを Public に設定します。

    プロジェクトの Resource Visibility Across Projects プロパティを Public に設定すると、そのプロジェクトのすべてのリソースが参照プロジェクトのドロップダウンメニューで利用可能になります。

    Kanzi Studio は、プロジェクトタブの左上隅に緑色のマーカーで公開プロジェクトを示します。

    ../../_images/resources-make-public.png ../../_images/resources-resource-visibility-across-project-public.png ../../_images/resources-project-tab-public-icon.png

  3. プロジェクトタブバーで Music プロジェクトを選択し、Prefabs で Music プレハブを選択し、Properties で Background Brush プロパティを Resources プロジェクトの White alpha 2 カラーブラシに設定します。

    ../../_images/music-prefab.png ../../_images/music-properties-background-brush.png

  4. Prefabs > Music で Artist ノードを選択し、Properties で Foreground Brush プロパティを Resources プロジェクトの White alpha 64 カラーブラシに設定します。

    ../../_images/music-artist.png ../../_images/music-properties-foreground-brush.png

  5. Prefabs で Song と Artist ノードを選択し、Properties で Font Family プロパティを Resources プロジェクトの Exo 2 フォントファミリーに設定します。

    ../../_images/music-song-artist.png ../../_images/music-properties-font.png

  6. Library で Font Families と Materials and Textures ライブラリを選択し、Materials and Textures を右クリックして、Delete Unreferenced Items を選択します。

    Exo 2 フォントファミリー、および White alpha 64 と White alpha 2 ブラシを Music プロジェクトから削除できます。なぜなら、Music プロジェクトを Resources プロジェクトからこれらのリソースを使用するように設定したからです。

    ../../_images/music-delete-unreferenced-items.png

  7. Library > Resource Files で Fonts を右クリックし、Delete Unreferenced Items を選択します。Music プロジェクトから Exo 2 Medium フォントを削除できます。このプロジェクトではもう使用されていないためです。

    ../../_images/music-fonts-delete-unreferenced-items.png

  8. Preview で restart-orange をクリックして Preview をリスタートし、Music プロジェクトの kzb ファイルをエクスポートします。

別のプロジェクトからプレハブを編集する

このセクションでは、Center stack プロジェクトに、Music プロジェクトの音楽プレーヤーの進行バーの位置を制御する機能を追加します。

別のプロジェクトからプレハブを編集するには:

  1. プロジェクトタブバーで Music プロジェクトを選択し、Prefabs > Music プレハブで Progress Bar プレハブプレースホルダを選択し、Progress プロパティの隣の Properties で image3 をクリックし、Publish Property ダイアログで OK をクリックします。

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

    これにより、プレハブのルートからプレハブの外観を編集することができます。このチュートリアルでは、Music プレハブ内の Progress プロパティを使用して Progress Bar の外観を編集することができます。

    ../../_images/music-progress-bar.png ../../_images/music-progress-bar-properties.png

  2. Preview で restart-orange をクリックして Preview をリスタートし、Music プロジェクトの kzb ファイルをエクスポートします。

    Kanzi Studio は、Music プロジェクトから kzb ファイルと設定ファイルを作成します。kzb ファイルには、前のステップで作成したカスタムプロパティが含まれています。

  3. プロジェクトタブバーで Center stack プロジェクトをダブルクリックして、Preview に表示します。Node Tree で Music プレハブプレースホルダを選択します。Properties で Music.Music.ProgressBarProgress プロパティを追加します。

    これで、Center stack プロジェクトの Music.Music.ProgressBarProgress プロパティを使用して、Music プロジェクトのミュージックプレイヤーのプログレスバーを制御できるようになりました。

    ../../_images/music-prefab-placeholder.png ../../_images/music-properties-progress.png

次の作業

このチュートリアルでは、Kanzi Studio プロジェクトを単一の Kanzi アプリケーションに結合する方法を学びました。これで、次のことができます。

関連項目

複数の Kanzi Studio プロジェクトを組み合わせる際に利用可能なオプションについて詳しく知るには、Kanzi Studio プロジェクトを Kanzi アプリケーションに統合する をご覧ください。

プレハブの使用方法について詳しくは、ノードプレハブの使用 をご覧ください。