ブラシの使用¶

ブラシは、2Dコンテンツがどのように描画されるかを説明するグラフィックオブジェクトです。

Brushes を使用して、2Dノードの前景と背景の外観を設定します。例えば、ブラシを使用して Text Block 2D ノード内のテキストの色を定義したり、2Dノードの背景を画像パターンで塗りつぶしたり、2Dコンテンツにマテリアルエフェクトを適用したりできます。

ほとんどの2Dノードには前景と背景があります。ブラシを使用すると、両方の外観を変更できます。

これらのブラシは Kanzi で利用可能です。

Color Brush を使用して、2D ノードを単色で塗りつぶします。

2D ノードを単色でフィルする。を参照してください。
Texture Brush を使用して、2Dノードにテクスチャを貼ります。

2Dノードをテクスチャで埋めるを参照してください。
Material Brush を使用して、2Dノードにマテリアルを貼ります。

2Dノードにマテリアルを適用するを参照してください。

Kanzi Studio は、ブラシを Library > Materials and Textures > Brushes に保存します。

例えば、ブラシを使用して次のことができます:

2Dテキストの色を設定します。2Dテキストノードでテキストの色を設定するを参照してください。
異なるアプリケーション状態でのブラシの外観を定義します。ブラシの外観を制御するを参照してください。
2Dノードのポストプロセッシングエフェクトを作成します。2Dノードにカスタムレンダリングを適用するを参照してください。

2D ノードを単色でフィルする。¶

Color Brush を使用して、2D ノードを単色で塗りつぶします。

2Dノードを単色で塗りつぶすには:

Library Alt を押しながら右クリック Materials and Textures で、Color Brush を選択し、ブラシに名前を付けます。
Node Tree で作成したブラシで塗りつぶしたい2Dノードを選択し、Properties で Background Brush または Foreground Brush プロパティを追加し、最初のステップで作成したブラシを選択します。

例えば、Button 2D ノードを作成し、Properties に Background Brush プロパティを追加し、最初のステップで作成したブラシに設定します。
Properties で、前のステップで追加したプロパティの隣にあるをクリックし、前のステップで作成したカラーブラシの色を設定します。

Preview では、作成した Color Brush が、プロパティを設定したノードを埋めていることがわかります。

ヒント

ブラシを素早く編集するには、Background Brush または Foreground Brush プロパティの隣にある Properties でをクリックし、ブラシを編集します。

2Dノードをテクスチャで埋める¶

Texture Brush を使用して、2Dノードにテクスチャを貼ります。

2Dノードをテクスチャで埋めるには:

Library Alt を押しながら右クリック Materials and Textures で、Texture Brush を選択し、ブラシに名前を付けます。
Node Tree で作成したブラシで塗りつぶしたい2Dノードを選択し、Properties で Background Brush または Foreground Brush プロパティを追加し、最初のステップで作成したブラシを選択します。

例えば、Grid Layout 2D ノードを作成し、Properties に Background Brush プロパティを追加し、最初のステップで作成したブラシに設定します。
Properties で、前のステップで追加したプロパティの隣にあるをクリックして、そのプロパティで使用されるブラシに移動し、このテクスチャブラシで使用するテクスチャを設定し、Texture Brush がそのテクスチャをどのように使用するかを調整します。
- Brush Modulate Color はブラシの変調色を設定します。
- Brush Horizontal Tiling は、テクスチャの水平タイル設定のためにテクスチャ座標のスケールに影響を与えます。
- Brush Vertical Tiling は、テクスチャの垂直タイルを設定するためにテクスチャ座標のスケールに影響を与えます。
- Brush Texture はブラシのテクスチャを設定します。

2Dノードにマテリアルを適用する¶

2Dノードをマテリアルで塗りつぶすには、Material Brush を使用します。

2Dノードにマテリアルを適用するには:

Library Alt を押しながら右クリック Materials and Textures で、Material Brush を選択し、ブラシに名前を付けます。
Properties で、Material プロパティを2Dノードを埋めるために使用したいマテリアルに設定します。

プロジェクトにマテリアルがない場合は、マテリアルを作成してください。マテリアルの作成を参照してください。
Node Tree で作成したブラシで塗りつぶしたい2Dノードを選択し、Properties で Background Brush または Foreground Brush プロパティを追加し、最初のステップで作成したブラシを選択します。

例えば、Button 2D ノードを作成し、Properties に Background Brush プロパティを追加し、最初のステップで作成したブラシに設定します。
マテリアルの外観を調整するには、Material プロパティを次のいずれかで設定します。
- Material Brush。
  
  例えば、Material Brush のマテリアルの環境色、テクスチャ、およびブレンディングを変更するには、Ambient Color、Texture、および Blend Mode プロパティを追加して設定します。
- Material Brush を使用するノード。
  
  例えば、ノードのマテリアルの環境色、テクスチャ、およびブレンディングを変更するには、そのノードに Ambient Color、Texture、および Blend Mode プロパティを追加して設定します。

2Dテキストノードでテキストの色を設定する¶

Text Block 2D または Text Box 2D ノードでテキストの色を設定するには、

Node Tree で、Text Block 2D または Text Box 2D ノードを作成または選択します。
Properties に Foreground Brush プロパティを追加します。
Foreground Brush プロパティを既存の Color Brush に設定するか、+ Color Brush を選択し、ブラシに名前を付け、プロパティの横にあるをクリックし、作成した Color Brush の色を設定します。

ヒント

ブラシを素早く編集するには、Background Brush または Foreground Brush プロパティの隣にある Properties でをクリックし、ブラシを編集します。

ブラシの外観を制御する¶

異なるアプリケーション状態でブラシの外観を定義できます。例えば、ブラシを使用して Button 2D ノードを塗りつぶすとき、ユーザーがボタンを押したときにブラシの外観を変更できます。

ブラシの外観を制御するには、ブラシを使用するノード内でブラシのプロパティを設定するステートマネージャーを作成します。

ブラシの外観を制御するには:

ブラシを作成し、それを使用して2Dノードを塗りつぶします。

例えば、テクスチャブラシを作成し、Button 2D ノードの Background Brush プロパティを作成したテクスチャブラシに設定します。2Dノードをテクスチャで埋めるを参照してください。
最初のステップで作成したブラシの外観を制御するために使用するステートマネージャーを作成します。

例：
1. Button 2D ノードに対して、Released と Pressed という2つの状態を持つステートマネージャーを作成し、ステートマネージャーが Button > Is Down コントローラープロパティを使用するように設定します。ステートマネージャーを使用してボタンの状態を設定するを参照してください。
2. Released および Pressed の状態でブラシの外観を設定します。
  
  例えば、Background Brush プロパティの隣にある Properties でをクリックし、Brush Modulate Color プロパティを設定し、State Tools で Pressed ステートのをクリックしてプロパティ値を Pressed ステートに保存します。

Preview でノードと対話すると、Kanzi が作成したブラシの外観を変更します。

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

2Dノードにカスタムレンダリングを適用して、ポストプロセッシングエフェクトを作成します。

例えば、2Dノード内のカラー画像をグレースケールに変換することができます。

2Dノードにカスタムレンダリングを適用するには、Composition Brush プロパティを使用して Material Brush で画面上にノードを構成し、Force Composition プロパティを有効にします。

2Dノードにカスタムレンダリングを適用するには:

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

例えば、色をグレースケールに変換するマテリアルを作成するには：
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 で、作成したマテリアルを適用したい2Dノードを作成または選択します。例えば、Stack Layout 2D ノードを作成します。Stack Layout 2D ノードで、Image ノードを作成します。
Properties に追加して設定します。
- そのノードに適用したいマテリアルを使用するマテリアルブラシに Brush Composition Brush します。
- Node 2D > Force Composition を有効にする
- （オプション） Render Target > Multisample Level に、コンテンツに適用したいアンチエイリアスサンプルの数を設定します。
- （オプション） Node > Opacity を使用してノードの半透明度を制御します。