Image ノードを使用する¶

ビットマップ画像を表示するには、Image ノードを使用します。

画像ファイルを使用してビットマップアセットを Kanzi Studio に取り込みます。これらのファイル形式で画像を Kanzi にインポートできます:

.png、アルファチャンネルを含む
.tga、アルファチャンネルを含む
.psd、レイヤーを含む。Adobe Photoshop PSD ファイルのインポートを参照してください。
.dds は、キューブマップ、ミップマップ、またはその両方を含むことができます。
.bmp、.exr、.gif、.hdr、.ico、.iff、.jng、.jpg、.jpeg、.jif、.mng、.pcx、.pmb、.pgm、.ppm、.pfm、.pict、.ras、.sgi、.tiff、.tif、.wbmp、.xmb、および.xpm

最適なアプリケーションパフォーマンスを実現するために、Kanzi Studio プロジェクト内の画像を正しく設定してください。画像とテクスチャのベストプラクティスを参照してください。

Image ノードの作成¶

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

Assets ウィンドウで Import Assets をクリックします。
インポートしたいファイルを選択し、Open をクリックします。

Assets から画像をドラッグし、Preview または Node Tree 内の任意の2Dノードにドロップします。
（オプション）使用する画像に対して、アプリケーションに最も適したターゲットフォーマットを設定できます。画像のターゲットフォーマットの設定を参照してください。

または

Node Tree Alt を押しながら右クリックで、Image ノードを作成したいノードを選択し、Image を選択します。

3Dノードは、Scene ノードのような3Dノード内でのみ作成でき、2Dノードは2Dノード内でのみ作成できます。
Properties で、Image プロパティを Image ノードに表示したい画像に設定します。

Image ノードは、Image プロパティに設定された画像から幅と高さを継承します。異なるサイズを設定するには、プロパティを追加して設定します。
- Layout Width と Layout Height を使用して、Image ノードのサイズを設定します。
- Content Stretch は、Kanzi が Image ノードのコンテンツをどのようにストレッチするかを設定します。
（オプション）画像の位置を設定するには、Horizontal Alignment プロパティと Vertical Alignment プロパティを設定します。
（オプション）使用する画像に対して、アプリケーションに最も適したターゲットフォーマットを設定できます。画像のターゲットフォーマットの設定を参照してください。

画像のターゲットフォーマットの設定¶

プロジェクトを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 および各画像ファイルのプロパティで設定できます。

Image ノードにカスタムレンダリングを適用する¶

Image ノードにカスタムレンダリングを適用して、ポストプロセッシングエフェクトを作成します。例えば、2Dノードのカラー画像をグレースケールに変換することができます。

Image ノードにカスタムレンダリングを適用するには、Foreground Brush プロパティを使用して、Material Brush で画面にノードをレンダリングします。例えば、Image ノード内の画像や Text Block 2D ノード内のテキストなど、ノードのコンテンツをレンダリングするには、Foreground Brush プロパティを使用します。

Image ノードにカスタムレンダリングを適用するには：

カスタムレンダリングを適用したいマテリアルを作成します。

例えば、色をグレースケールに変換するマテリアルを作成するには：
1. Library で、Alt を押しながら右クリック Materials and Textures を選択し、Material Type を選択します。Kanzi Studio は、マテリアルタイプとそのマテリアルタイプを使用するマテリアルを作成します。
2. Library > Materials and Textures > Material Types で、作成したマテリアルタイプを展開します。Vertex Shader をダブルクリックして Shader Source Editor で開き、既存のシェーダーコードをこのコードに置き換えて、シェーダーを保存します。
```
attribute vec3 kzPosition;
attribute vec2 kzTextureCoordinate0;
uniform highp mat4 kzProjectionCameraWorldMatrix;

varying mediump vec2 vTexCoord;

void main()
{
    precision mediump float;
    vTexCoord = kzTextureCoordinate0;
    gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition.xyz, 1.0);
}
```
3. Fragment Shader を開き、既存のシェーダーコードをこのステップのコードに置き換え、シェーダーを保存します。
  
  シェーダーでは、これらの Kanzi デフォルトのユニフォームを使用します。
  - ContentTexture を使用して、レンダリングされたノードがレンダリング時に提供するテクスチャを定義します。
  - RenderOpacity を使用して、レンダリングされたノードの不透明度を定義します。
  シェーダーユニフォームを参照してください。
```
uniform sampler2D ContentTexture;
varying mediump vec2 vTexCoord;
uniform lowp float RenderOpacity;

void main()
{
    precision mediump float;
    // Use this algorithm to convert the colors in the texture used by
    // the 2D node to grayscale.
    // To integrate to the Kanzi rendering pipeline, the shader must output
    // premultiplied alpha.
    vec4 color = texture2D(ContentTexture, vTexCoord);
    float grayscale = dot(color.rgb, vec3(0.21, 0.72, 0.07));
    float alpha = color.a * RenderOpacity;
    vec3 premultipliedColor = vec3(grayscale) * alpha;
    gl_FragColor = vec4(premultipliedColor, alpha);
}
```
Library で、Alt を押しながら右クリック Materials and Textures を選択し、Material Brush を選択します。Properties で、Material プロパティを前のステップで作成したマテリアルに設定します。
Node Tree で、作成したマテリアルを適用したい Image ノードを作成または選択し、そのノードを画像を表示するように設定します。
Properties で、Image ノードの Foreground Brush プロパティを、適用したいマテリアルを使用するマテリアルブラシに設定します。
（オプション）画像のブレンディングを設定します。
1. Library > Materials and Textures > Material Types で作成したマテリアルタイプを選択し、Properties で Property Types ドロップダウンメニューをクリックし、Blend Mode を選択して、Sync with Uniforms をクリックします。
  
  この方法で、このマテリアルタイプを使用するマテリアルに Blend Mode プロパティを追加します。
2. Properties で、次のいずれかの場所に Blend Mode プロパティを追加して設定します。
  - Blend Mode プロパティを追加したマテリアルを使用する Material Brush
  - Material Brush を使用する Image ノード
  例えば、Node Tree で Image ノードを選択し、Properties で Blend Mode プロパティを追加し、それを Alpha: Premultiplied に設定します。
（オプション）画像の半透明度を調整するには、Node Tree で Image ノードを選択し、Properties で Opacity プロパティを追加して設定します。