Asset Toolkit

Asset Toolkit には、類似した構造とプロパティセットを持つ、使いやすい既製のコンポーネントとマテリアルが含まれており、Kanzi アプリケーションをより迅速に作成するために使用できます。

ここで、すべての Asset Toolkit コンテンツを見つけることができます。

  • プロトタイプアプリケーションで使用できる高品質なプレースホルダーの車モデル。Car を参照してください。

  • プロジェクト内の3Dコンテンツに適用できるマテリアル。マテリアル (Materials) を参照してください。

  • シーンにパースペクティブを与えるために使用できる環境テクスチャ。環境 を参照してください。

  • アプリケーションでコンテンツを表示するために使用できるフリップブックおよびトランジションのマテリアルタイプ。マテリアルタイプ (Material Types) を参照してください。

  • ユーザー入力を受け取るために使用できるインタラクティブなユーザーインターフェースコンポーネント。インタラクティブコントロールコンポーネント を参照してください。

  • 円弧状にプログレスを表示できるラジアル UI コンポーネント。ラジアル UI コンポーネント を参照してください。

  • アプリケーションで使用できるシンプルなシェイプ。シンプルシェイプ UI コンポーネント を参照してください。

  • アイテムのコレクションを表示できるスクロール可能なリスト。スクロールリスト UI コンポーネント を参照してください。

  • これらのアセットを組み合わせて、より複雑で再利用可能なコンポーネントを作成する方法を示すコンポーネントの例。例 を参照してください。

Kanzi Studio プロジェクトで Asset Toolkit のアセットを使用するには、Asset Packages からアセットを Node Tree 内のノード、Prefabs、または Preview にドラッグします。Asset Toolkit のアセットの使用 を参照してください。

../../_images/asset-packages-asset-toolkit-selected.png

Car

Car を使用して、シーンに車モデルを追加します。

../../_images/car-asset1.png

車を配置するには、Preview で Node tool または Camera tool を使用します。Preview でアプリケーションを編集する と Camera ノードを使用する を参照してください。

車の各部分にマテリアルを設定するには、Assets ウィンドウから Preview ウィンドウの Car に、または Node Tree 内の車の該当部分にマテリアルをドラッグすることができます。Asset Toolkit のアセットの使用 を参照してください。

マテリアル (Materials)

Asset Toolkit には、プロジェクト内の3Dコンテンツに適用できる物理ベースレンダリング (PBR) マテリアルが含まれています。

../../_images/carpaint-blue.png

PBR Carpaint-blue

../../_images/carpaint-orange.png

PBR Carpaint-orange

../../_images/chrome.png

PBR Chrome

../../_images/glass.png

PBR Glass

../../_images/plastic.png

PBR Plastic

Kanzi アプリケーションで Asset Toolkit のマテリアルを使用する方法について学ぶには、Asset Toolkit マテリアルをプロジェクトで使用する を参照してください。

環境

Asset Toolkit には 2 つの環境テクスチャが含まれています。これらは車および PBR マテリアルにも含まれていますが、独自のマテリアルやモデルで使用できるように個別にも提供されています。

  • アセット内のガラスやプラスチックと同様に、シーン内のマテリアルに拡散した環境光を与えるには Environment Studio Irradiance を使用します。

../../_images/environment-irradiance.png

Environment Studio Irradiance

  • アセット内の金属や塗装と同様に、シーン内のマテリアルにシャープで滑らかな反射面を与えるには Environment Studio Specular を使用します。

../../_images/environment-specular.png

Environment Studio Specular

プロジェクトで環境テクスチャを使用するには、Assets ウィンドウで右クリックしてインポートし、マテリアルのプロパティで Ambient テクスチャまたは Reflection テクスチャ(あるいはその両方)として設定してマテリアルに適用します。Factor スライダーを調整して、その強度を操作します。

../../_images/set-environment-texture.png

環境テクスチャについて詳しく知るには、環境テクスチャを使用する を参照してください。

マテリアルタイプ (Material Types)

Asset Toolkit には、アプリケーション内のコンテンツの表示をアニメーション化するために使用できる 2 つのマテリアルタイプが含まれています。

  • Flipbook Material Type を使用すると、グリッドレイアウトで配置された複数の画像を含むテクスチャアトラスを使用できます。このマテリアルタイプを使用して、そのテクスチャアトラスから画像を選択して表示したり、アニメーションシーケンスを再生したりできます。これは、たとえばクラスター内のナビゲーション矢印のステートを設定したり、歩行者のシンプルな歩行アニメーションを作成したりするのに便利です。

    ../../_images/flipbook.png

    Flipbook Material Type

    プロジェクトで Flipbook Material Type を使用するには、次の手順に従います。

    • 右クリックしてインポートするか、プレビューまたはノードツリーにドラッグします。

    • シーン内の 2D ノードまたは 3D ノードにブラシとして適用します。

    • Flipbook Material Type のプロパティウィンドウで、テクスチャアトラス内の画像のレイアウトに対応するようにグリッドを設定します。

      ../../_images/flipbook-configuration.png
    • Static Image Index プロパティを設定して、表示する静止画像を設定します。

      ../../_images/static-image-index.png
    • Time プロパティの値を進めて、フリップブックのアニメーションシーケンスを再生します。

      ../../_images/time-sequence.png

    タイルアトラスの使用方法について学ぶには、タイルアトラスを使用する を参照してください。

  • Transition Material Type を使用すると、Fade、Sweep、または Noise のいずれかのモーションでノード間をトランジションできます。

    ../../_images/transition.png

    Transition Material Type

    プロジェクトで Transition Material Type を使用するには、次の手順に従います。

    • 右クリックしてインポートするか、プレビューまたはノードツリーにドラッグします。

    • シーン内の 2D ノードまたは 3D ノードにブラシとして適用します。

    • Transition Material Type のプロパティウィンドウで、

      • トランジションに適用する Transition Type を設定します。

      • トランジションする対象のテクスチャを Transition Texture Start プロパティと Transition Texture End プロパティとして選択します。

      ../../_images/transition-textures.png
    • Fade トランジションを適用するには、Transition type プロパティを Fade に設定します。

      • Transition Progress プロパティの値を進めて、フェードの進行を操作します。

      ../../_images/fade-properties.png
    • Sweep トランジションを適用するには、Transition type プロパティを Sweep に設定します。

      • Transition Smoothing プロパティを設定して、スムージングの強度を操作します。

      • Transition Rotation プロパティを使用して、スイープモーションの向きを設定します。

      ../../_images/sweep-properties.png
    • Noise トランジションを適用するには、Transition type プロパティを Noise に設定します。

      • さらに、Transition Noise Scale プロパティを設定して、ノイズの粒度を操作します。

      ../../_images/noise-properties.png

インタラクティブコントロールコンポーネント

Asset Toolkit で提供されている UI Components を使用して、ユーザー入力を受け取り、アプリケーションでインタラクティブなユーザーエクスペリエンスを提供します。

../../_images/interactivity-ui-components.png

Asset Toolkit に含まれるインタラクティブな UI コンポーネントはすべて、同じ方法で公開され、同じ名前が付けられた類似のプロパティと動作を共有しています。そのため、一貫したスタイルを適用したり、プロジェクト内でそれらを組み合わせたりすることが容易になります。

UI コンポーネントをインポートすると、Kanzi Studio は、そのコンポーネントのレンダリングに必要なシェーダーとマテリアルをプロジェクトの Library と Prefabs に追加します。

すべての UI コンポーネントには FillStrokeBrush マテリアルが BackgroundBrush として適用されており、このマテリアルによって外観と動作を制御するプロパティが公開されます。

../../_images/fillstrokebrush.png ../../_images/fillstrokebrush-properties.png

たとえば、Button の外観と動作を調整するには、Button をプロジェクトに追加した後、Properties で次のように設定します。

  • UI - Appearance では、ボタンの角の丸みを調整する Corner Radius の値を設定します。

  • UI - Fill では、ボタン背景の Fill Color を設定します。

  • UI - Fill Gradient では、ボタン背景の Fill Gradient Color とその Rotation を設定します。

  • UI - Fill Texture では、ボタン背景にテクスチャを適用し、その適用方法を設定します。

  • UI - Progress では、ボタンの背景全体にプログレスバーの状態を適用します。

  • UI - Segments では、ボタン背景をセグメントに分割し、セグメントの数とウェイトを設定します。

  • UI - Stroke では、ボタンにアウトラインを適用し、その色とウェイトを設定します。

これらのプロパティを自由に組み合わせて、UI コンポーネントの外観を調整できます。各プロパティは、Active にチェックを入れることで個別に有効になります。

../../_images/fill-gradient-active.png

バインディングを使用して UI - Progress プロパティを制御できます。バインディングの使用 を参照してください。

インタラクティブなコントロールについて詳しくは、インタラクティブコントロール を参照してください。

ラジアル UI コンポーネント

Asset Toolkit に含まれる Radial UI Components を使用すると、円形のコントロールで値を進捗として表示できます。

../../_images/radial-components.png

Asset Toolkit に含まれるラジアル UI コンポーネントはすべて、同じ方法で公開され、同じ名前が付けられた共通のプロパティと動作を備えています。

UI コンポーネントをインポートすると、Kanzi Studio は、そのコンポーネントのレンダリングに必要なシェーダーとマテリアルをプロジェクトの Library と Prefabs に追加します。

すべての UI コンポーネントには FillStrokeRadialBrush マテリアルが BackgroundBrush として適用されており、このマテリアルによって外観と動作を制御するプロパティが公開されます。

../../_images/fillstrokeradialbrush.png ../../_images/fillstrokeradialbrush-properties.png

たとえば、Gauge Progress コントロールの外観と動作を調整するには、それをプロジェクトに追加した後、Properties で次のように設定します。

  • UI - Appearance では、進捗を適用するアングル、ラジアルウェイト、およびキャップの形状を設定します。

  • UI - Fill では、UI 背景の Fill Color を設定します。

  • UI - Progress では、ダイヤルの背景全体に進捗の状態を適用し、その色を設定します。

  • UI - Segments では、ゲージをセグメントに分割し、セグメントの数とウェイトを設定します。

  • UI - Stroke では、ゲージにアウトラインを適用し、その色とウェイトを設定します。

これらのプロパティを自由に組み合わせて、ラジアル UI コンポーネントの外観を調整できます。各プロパティは、Active にチェックを入れることで個別に有効になります。

../../_images/segments-active.png

バインディングを使用して UI - Progress プロパティを制御できます。バインディングの使用 を参照してください。

シンプルシェイプ UI コンポーネント

Asset Toolkit に含まれるシンプルシェイプ UI コンポーネントを使用すると、プラグインを使わずにアプリケーションに基本的な図形を追加できます。

../../_images/simple-shapes.png
  • Box with Rounded Corners では、Corner Radius プロパティを設定して、図形の角を直角にしたり丸めたりします。

  • Circle では、UI - Fill プロパティの値を設定して色を適用します。

スクロールリスト UI コンポーネント

Asset Toolkit に含まれるスクロールリスト UI コンポーネントを使用すると、4 つのレイアウトパターンのいずれかで、スクロール可能なリストをアプリケーションに追加できます。

../../_images/scroll-list-ui-components.png
  • Scroll List Vertical を使用すると、垂直方向にスクロール可能なリストに項目を 2 次元で表示できます。

  • Horizontal List Vertical を使用すると、水平方向にスクロール可能なリストに項目を 2 次元で表示できます。

  • Scroll Trajectory 3D Horizontal を使用すると、水平面上に項目を 3 次元で表示できます。

  • Scroll Trajectory 3D Arc を使用すると、円弧上に項目を 3 次元で表示できます。

リストについて詳しくは、List Box ノード を参照してください。

データソースを使用してリストコンポーネントに独自のデータを表示するには、データソースを使用する、および チュートリアル: データソースからアプリケーションデータを取得する を参照してください。

例

Asset Toolkit を展開すると、これらのアセットを組み合わせて、より複雑で再利用可能なコンポーネントを作成する方法を示すサンプルコンポーネントのフォルダがあります。

../../_images/examples.png

これらのサンプルコンポーネントを参考にして、アセットを組み合わせて独自のカスタムコントロールを構築するための実践的なアイデアを得てください。

関連項目

Asset Toolkit のアセットの使用

アセットパッケージ

バインディングの使用

3D アセット (3D Assets)

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

チュートリアル: マテリアルとテクスチャ

ノードプレハブの使用

Factory Content アセット