Nine Patch Image ノードを使用する¶

Nine Patch Image ノードを使用して、Nine Patch Image コンテンツのサイズに応じて拡縮するスケーラブルなボタン背景を作成します。

Nine Patch Image は、画像を1つのユニットとしてスケーリングするのではなく、制御された方法でスケーリングします。3x3のグリッドに9つの画像を配置し、エッジの画像がフレームを形成し、中央の画像が Nine Patch Image のコンテンツを保持します。

Nine Patch Image を使用する際は、次の点に注意してください。

中央の画像はすべての方向に伸びます。ベストプラクティスとして、その画像は透明または単色にしてください。
コーナーの厚さは、中央画像のフレームの厚さを定義します。Kanzi は、ナインパッチ画像のコーナーをスケーリングしません。
デフォルトで、Nine Patch Image のサイズが変わると、上部、下部、右側、および左側のテクスチャは、コーナーテクスチャ間のスペースの変化に応じてスケールします。この設定は、Wrap Mode と各テクスチャのテクスチャタイププロパティで制御できます。Nine Patch Image ノードの作成を参照してください。

Nine Patch Image ノードの作成¶

Nine Patch Image ノードを作成するには、

サードパーティツールで、Nine Patch Image ノードの各部分の画像を作成し、それぞれを個別のファイルに保存します。

次のための画像を作成する必要があります：
- コーナー（top-left、top-right、bottom-right、bottom-left）
- サイド (top、right、bottom、left)
- センター (Center)
Assets の Kanzi Studio で Import Assets をクリックし、Nine Patch Image ノードで使用したいすべての画像をインポートします。
Node Tree Alt を押しながら右クリックで、Nine Patch Image ノードを作成したいノードを選択し、Nine Patch Image を選択します。

3Dノードは、Scene ノードのような3Dノード内でのみ作成でき、2Dノードは2Dノード内でのみ作成できます。
Properties で、Nine Patch Image プロパティを Nine Patch Image ノードの各部分に使用したい画像に設定します。
- Top-Left Image を左上隅のテクスチャに
- Top Image を上部境界のテクスチャに
- Top-Right Image を右上隅のテクスチャに
- 左境界のテクスチャへの Left Image
- Center Image を中央のテクスチャに
- 右境界のテクスチャへの Right Image
- Bottom-Left Image を左下隅のテクスチャに
- Bottom Image を下部境界のテクスチャに
- Bottom-Right Image を右下隅のテクスチャに

（オプション） Nine Patch Image ノードが上、右、下、左のテクスチャをどのように表示するかを制御できます。

Library > Materials and Textures > Textures で、Nine Patch Image ノードが使用する各テクスチャを選択し、各テクスチャに使用したい Wrap Mode プロパティを設定します。
Node Tree で Nine Patch Image ノードを選択し、Properties で制御したいテクスチャのテクスチャタイプを設定します (Stretch Type Top、Stretch Type Bottom、Stretch Type Left、Stretch Type Right、Stretch Type Center)。

Wrap Mode プロパティ値	テクスチャストレッチプロパティ値	ディスクリプション (Description)
Clamp	Stretch	デフォルト値。Nine Patch Image のコーナーテクスチャ間のスペースを埋めるようにテクスチャをスケーリングします。
Clamp	Wrap	選択したテクスチャの最後の列または行のピクセルを拡張します。これは、Nine Patch Image のコーナーテクスチャ間のスペースの幅または高さが、選択したテクスチャの幅または高さを超える場合に行います。
Repeat	Stretch	Nine Patch Image のコーナーテクスチャ間のスペースを埋めるようにテクスチャをスケーリングします。
Repeat	Wrap	Nine Patch Image のコーナーテクスチャ間のスペースの幅または高さが選択したテクスチャの幅または高さを超える場合、テクスチャをタイルします。

（オプション） For each image in a Nine Patch Image you can set the target format that is the most suitable for your application. See 画像のターゲット形式の設定.

画像のターゲット形式の設定¶

プロジェクトをkzbファイルにエクスポートする際、Kanzi Studio はプロジェクト内の画像を元の画像のフォーマットで読み込み、各画像に対して Target Format プロパティで設定したフォーマットでkzbファイルに書き込みます。

元の画像のファイル形式が Target Format プロパティで選択した形式と同じ場合、Kanzi Studio は次の条件下で画像をkzbファイルに書き込む際に画像を変更しません。

Premultiply Alpha は無効になっているか、アルファチャンネルをプリマルチプライ処理する必要がありません。

この設定を変更するには、Project > Properties で Premultiply Alpha プロパティを使用します。異なる設定を使用したい画像ファイルのプロパティでこの値をオーバーライドできます。
Generate Mipmaps は無効です

各画像ファイルで Generate Mipmaps プロパティの値を設定できます。
Round up Image Dimensions to Nearest Power of Two プロパティは無効になっています。

Project > Properties で Round up Image Dimensions to Nearest Power of Two プロパティの値を設定できます。

Round up Image Dimensions to Nearest Power of Two プロパティを有効にすると、Kanzi Studio はプロジェクト内の画像の幅と高さを kzb ファイルのエクスポート時に最も近い2のべき乗に切り上げます。例えば、Kanzi Studio は 40 x 30 ピクセルの画像を kzb ファイルに 64 x 32 ピクセルのサイズでエクスポートします。

画像がJPEGまたはPNG形式であり、Kanzi Studio がkzbファイルにエクスポートする画像を変更したくない場合は、画像の Properties で Use Original Image プロパティを有効にしてください。

../../_images/use-original-image-enabled.png

画像のターゲットフォーマットを設定するには、以下のようにします。

Library > Resource Files > Images で、ターゲットフォーマットを設定したい画像を選択します。
Properties で、Kanzi アプリケーションで使用したい画像フォーマットに Target Format プロパティを設定します。

選択するフォーマットは重要です。なぜなら、これがkzbファイルのサイズや、Kanzi アプリケーションが画像をロードする際の読み込み時間に影響を与えるからです。ターゲットデバイスが選択した画像のフォーマットをサポートしていることを確認してください。画像とテクスチャのベストプラクティスおよびテクスチャを圧縮する (Compressing textures) を参照してください。
前のステップで選択した画像フォーマットが圧縮をサポートしている場合、使用したい圧縮方式を設定してください。テクスチャを圧縮する (Compressing textures) を参照してください。
sRGBをサポートする画像フォーマットの場合：
- 画像にsRGBカラ情報が含まれている場合、sRGB Content プロパティを有効に設定します。これはデフォルトの設定です。
  
  sRGBカラー情報を含む画像の sRGB Content プロパティを無効にすると、Kanzi がその画像を使用するテクスチャを予想以上に明るくレンダリングすることがあります。
- 画像に法線、粗さ、またはオクルージョンマップなどの非カラー情報が含まれている場合は、sRGB Content プロパティを無効に設定してください。
  
  非色情報を含むテクスチャはリニアフォーマットで保存されます。sRGB Content プロパティを無効にすることで、Kanzi を設定し、カラースペース変換を行わずにイメージデータをシェーダーに直接渡します。
Kanzi でアルファチャンネルをプリマルチプライ処理したい場合は、次のようにします。
- リニアカラースペースでは、Linear Premultiply プロパティを有効に設定します。
  
  これはデフォルト値であり、sRGB画像で最もアーティファクトが少なくなります。
- 画像のカラースペースは通常sRGBで、Linear Premultiply プロパティを無効に設定します。
  
  これは、レガシーカラーワークフロー用に作成された画像に対してより良い結果をもたらす可能性があります。
サードパーティツールでの画像の準備を参照してください。

PNG圧縮を使用する¶

PNG圧縮を使用する場合、圧縮されたPNG画像は圧縮形式でGPUに送られないため、PNG圧縮はkzbファイルからデバイスメモリへのPNG画像データの読み込みに影響を与えることを念頭に置いてください。

PNG圧縮を使用して、kzbファイルから画像を保存およびロードします。アプリケーションのパフォーマンスを向上させるために、Kanzi がデバイスのGPUに直接圧縮された状態で送信できる画像フォーマットを使用することを検討してください。テクスチャを圧縮する (Compressing textures) を参照してください。

PNG圧縮を使用するには、

Library の Kanzi Studio で Resource Files > Images を選択し、圧縮を適用したい画像を選択します。
Properties で Target Format を PNG に設定します。
Properties で、PNG Compression Level プロパティをこの画像に使用したい圧縮に設定します。
- Project default は PNG Compression Level プロパティの Project > Properties で設定されたPNG圧縮を使用します。
- No compression が画像に圧縮を使用しないようにする
- Best compression speed (zlib level 1) はファイルサイズが大きくなりますが、すばやく圧縮されます。
- Default (zlib level 6) はファイルサイズを小さくしますが、圧縮に時間がかかります。これは、Kanzi Studio がPNG画像に使用するFreeImageライブラリのデフォルトオプションです。
- Best compression (zlib level 9) は最小のファイルを作成しますが、圧縮に最も時間がかかります。
ヒント

PNG Compression Level プロパティの値は、Project > Properties および各画像ファイルのプロパティで設定できます。