Text Block ノードを使用する¶
アプリケーションにテキストを表示するには、Text Block ノードを使用します。
Text Block ノードは、選択したフォントを使用してテキストをレンダリングします。Text Block 3D を使用して3D空間にテキストを表示し、Text Block 2D を使用して2D空間にテキストを表示します。
アプリケーションにテキストを追加する¶
アプリケーションにテキストを追加するには、
Node Tree Alt を押しながら右クリック で、テキストを表示したいノードを選択し、Text Block 3D または Text Block 2D のいずれかを選択します。
3Dノードは、Scene ノードのような3Dノード内でのみ作成でき、2Dノードは2Dノード内でのみ作成できます。
ヒント
Preview で Text Block 2D tool
を使用してクリックし、ドラッグして Text Block 2D ノードを作成します。レイアウト内に Text Block 2D ノードを配置するには、その Text Block 2D ノードをクリックしてドラッグし、Ctrl を押し続け、配置したいセルの上にノードをドロップします。Text プロパティの Properties に表示したいテキストを入力します。新しい行を追加するには、Shift Enter を押します。
アプリケーションにテキストを表示するには、Text Block ノードを使用します。
Kanzi がテキストを折り返し、切り詰める方法を設定できます。テキストの折り返しと切り捨て を参照してください。
Properties で、テキストを希望の見た目にするために Font プロパティを設定します。Kanzi は、Text Block ノードで設定したすべての設定をノード全体に適用します。
たとえば、Properties に追加して設定します。
テキストのサイズを定義するための Font Size。
Font Family を使用したいフォントファミリーに設定します。
Kanzi でのデフォルトのフォントファミリーは Fira Sans Regular です。フォントファイルは
<KanziInstallation>/Studio/Asset Library/Fontsに保存されています。独自のフォントを使用したい場合は、それを Kanzi Studio プロジェクトにインポートしてください。フォントのインポート を参照してください。
Fixed Character Width を使用してフォントを等幅フォントに変換します。
テキストの折り返しと切り捨て¶
Text Block ノードの幅を制限すると、Kanzi はデフォルトでその Text Block ノードの幅を超えるテキストをクリップします。次のことができます。
テキストを新しい行にラップするには、Word Wrap プロパティを追加して有効にします。
テキストを切り詰めるには、次のいずれかを追加します：
Overflow プロパティと切り捨てを示す文字の設定
Truncation プロパティと切り捨ての設定:
At character はテキストを文字ごとに切り詰めます。
At word はテキストを単語単位で切り詰めます。
切り捨てを無効にするには None
Kanzi は、Text Block ノードの垂直方向と水平方向の範囲内に収まるようにテキストを切り詰め、Overflow プロパティの文字を追加します。1 行分のテキストが収まる垂直方向のスペースがない場合、Kanzi はすべてのテキストを切り詰め、Overflow の文字を表示しません。
切り捨てを有効にすると、テキストのどの部分を切り捨てるかを設定できます。Truncation Direction プロパティを追加し、次のように設定します:
Trailing はテキストの末尾を切り詰めます。デフォルト値。
複数行テキストの場合も、単一行テキストと同様に、Word Wrap プロパティが無効に設定されている場合、Kanzi は水平に収まらない残りのテキストを切り捨てます。
Overflow プロパティの値は、切り詰められた行の末尾での切り捨てを示します。
Center はテキストの中央部分を切り詰めます。
Word Wrap プロパティが無効に設定されている場合、Kanzi は複数行のテキストを水平方向にクリップします。Kanzi は、複数行またはワードラップされたテキストの中央行を完全に切り詰めます。
Overflow プロパティの値は、切り捨てられた行の前の行の末尾での切り捨てを示します。
テキストの冒頭部分を切り捨てるには、Leading を使用します。
Word Wrap プロパティが無効に設定されている場合、Kanzi は複数行テキストを水平方向にクリップします。Kanzi は、複数行またはワードラップされたテキストの先頭行を完全に切り捨てます。
Overflow プロパティの値は、最初の表示行の先頭で切り捨てが行われることを示します。
このテーブルは、テキストレイアウトを設定するために使用できるいくつかのオプションを示しています。
目標 |
必須プロパティ値 |
結果 |
|---|---|---|
|
デフォルトのプロパティ値 |
|
|
ノードの幅を設定するための Layout Width 
|
|
|
|
|
|
|
|
テキストを1行で切り詰めます。 デフォルトで、Kanzi は収まらないテキストの末尾を切り捨てます。 |
|
|
テキストを1行に切り詰め、Text Block ノードに完全な単語のみが表示されるようにしてください。 デフォルトで、Kanzi は収まらないテキストの末尾を切り捨て、省略記号を使用して切り捨てられたテキストを示します。 |
|
|
Text Block ノードの幅より長く、高さより高いテキストを折り返して切り詰めます。 デフォルトで、Kanzi は収まらないテキストの末尾を切り捨てます。 |
|
|
Text Block ノードの幅よりもテキストが長い場合、単一行テキストの中央部分を切り詰めます。 |
|
|
|
|
|
Text Block ノードにテキストをフィットさせる¶
Text Block ノードの全テキストがそのノードの幅に収まるようにしたい場合は、Horizontal Fit プロパティと Horizontal Fit Scale Limits プロパティを使用してください。
Text Block ノードにテキストをフィットさせるには：
Node Tree または Prefabs で Text Block を選択し、Properties で追加して設定します。
Layout Width をその Text Block ノードに使用したい幅に設定します。
Horizontal Fit を有効にする
このプロパティを有効にすると、Layout Width プロパティで設定された Text Block ノードの幅にテキストが収まらない場合、Kanzi は自動的にグリフを最大で半分のサイズまでスケールします。
（オプション） グリフのスケーリングを調整するには、Horizontal Fit Scale Limits プロパティを追加し、その Min および Max プロパティフィールドをグリフの最小および最大スケール範囲に設定します。
例：
Min プロパティフィールドを次のように設定すると:
1.0、Kanzi はグリフを圧縮しません。
0.5、Kanzi はグリフを最大で半分のサイズまで縮小することを可能にします。
Max プロパティフィールドを次のように設定するとき:
1.0、Kanzi はグリフをストレッチしません。
2.0、Kanzi はグリフを最大で2倍のサイズまで拡大することを可能にします。
Text Block 3D ノードのサイズとレイアウトを設定する¶
Text Block 3D ノードをレンダリングするには、Kanzi がまずテキストをピクセルを使用して2Dテキストとして準備し、その後、準備したテキストを3D空間に投影します。
Text Block 3D ノードのサイズとレイアウトを設定するには、
Text Block 3D ノード内のテキストのサイズとレイアウトを設定するには、ピクセルを使用します。
例えば、Font Size、Character Spacing、および Fixed Character Width プロパティの値をピクセルで設定します。
2D to 3D Projection Scale プロパティを使用して、Kanzi がテキストをピクセルから3Dユニットにスケールするための係数を設定します。2D to 3D Projection Scale プロパティのデフォルト値は 0.02 です。
3D空間で Text Block 3D ノードのサイズを設定するために3Dユニットを使用します。
例えば、Layout Width および Layout Height プロパティの値を3Dユニットで設定します。
Text Block 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 で
をクリックし、ブラシを編集します。
Text Block 3D ノード内のテキストの色を設定する¶
3Dテキストノードのテキストの色を設定するには:
Node Tree で、Text Block 3D または Text Box 3D ノードを作成または選択します。
Properties に Font Color プロパティを追加して設定します。
テキストのサイズを動的に変更する¶
Text Block ノード内のテキストのサイズを動的に変更するには、Font Size プロパティの代わりに、Render Transformation または Layout Transformation プロパティの Scale プロパティフィールドを使用します。例えば、Text Block ノード内のテキストのサイズをアニメーション化したい場合にこのアプローチを使用します。Font Size プロパティを使用してテキストを動的にスケールすると、Kanzi は異なるフォントサイズの複数のテクスチャを作成し、それらをメモリから解放しません。
Text Block 2D ノードでピクセルパーフェクトなテキストをレンダリングする¶
Kanzi Studio でプロジェクトを作成すると、Screen ノードのリソースディクショナリには、Kanzi アプリケーション内のすべての Text Block 2D ノードに対して Snap to Pixel プロパティを有効にする Text Block 2D Style があります。
Snap to Pixel プロパティは、Text Block 2D または Text Box 2D ノードの変換とスケールを完全なピクセルに丸め、Kanzi がピクセルパーフェクトなテキストをレンダリングできるようにします。
Snap to Pixel プロパティを無効にするには、そのプロパティを無効にしたい Text Block 2D ノードを選択し、Properties で Snap to Pixel プロパティを追加して無効にします。
Text Block 2D ノードでの文字のレンダリング設定¶
Kanzi が2Dテキストで各文字をどのようにレンダリングするかを設定できます。Text Block 2D ノードでは、これらのプロパティはデフォルトで有効になっています。
Snap Character To Pixel プロパティは、各文字の変換とスケールをフルピクセルに丸めます。
これによりテキストの鮮明さが向上しますが、一部の文字がピクセルの一部だけずれることがあります。
Fractional Character Width プロパティは、文字間のスペーシングを変化させ、ピクセルの一部にすることを可能にします。
ほとんどの場合、これにより最良のテキストレンダリング結果が得られます。小さいフォントサイズの文字は、分数幅が原因で文字が重なったり、間隔が広すぎたりすることがあります。これにより、テキストが読みづらくなることがあります。
この表は、Text Block 2D ノードで文字のレンダリングを設定するために使用できるオプションを一覧にしています。
目標 |
必須プロパティ値 |
結果 |
|---|---|---|
ほとんどの場合におけるベストプラクティスなテキストレンダリング結果:
|
デフォルトのプロパティ値 |
|
フォントデザイナーが意図した通りに文字をレンダリングします。 各文字の変換とスケールをフルピクセルに丸めないでください。 画面解像度、アンチエイリアス、およびフォントサイズによっては、これによりテキストがよりぼやけて見えることがあります。 |
Snap Character To Pixel が無効になっています。 
|
|
小さなテキストのシャープネスを向上させます。 文字の幅を最も近いピクセルに丸めます。 これにより、小さいフォントサイズの文字が重なり合うのを防ぎ、テキストがより鮮明に見えるようになります。 |
Fractional Character Width が無効になっています。 
|
|
文字間のスペースを手動で設定します。 |
Character Spacing を文字間に設定したいスペースの量にします。 
|
|
Text Block ノードのフォントヒンティングを設定する¶
フォントヒンティングは、フォントのアウトラインを画面のピクセルにマッピングするためのラスタライズ指示を提供します。フォントヒンティングの目的は、フォントのデザイン美を維持しつつ、異なるサイズでのフォントの可読性を最適化することです。
Kanzi のテキストノードは、デフォルトでフォントに含まれるフォントヒンティングデータを使用します。
例えば、フォントヒンティングは、文字の高さと幅、行の幅、エッジのコントラスト、文字間のスペースに影響を与えることがあります。
Text Block または Text Box ノードのフォントヒンティングを設定するには、Node Tree でそのノードを選択し、Properties で Font Hinting Preference プロパティを追加し、次のように設定します:
No hinting をフォントヒンティングなしでテキストをレンダリングします。
Native hinting はフォントに含まれるヒンティングデータを使用してテキストをレンダリングします。フォントがヒンティングデータを含まない場合、Kanzi はフォントエンジンラスタライザーのヒンターを使用します。これはデフォルトの値です。
Auto hinting はフォントエンジンラスタライザーのヒンターを使用してテキストをレンダリングします。プレビューのフォントエンジンを設定する を参照してください。
テキストを複数の Text Block ノードに分割する¶
バインディングを使用してテキストを分割し、テキストの各部分にアクセスすることができます。たとえば、データソースから取得したランタイムデータを分割します。データソースを使用する を参照してください。
次のいずれかを選択できます。
Node Tree 内のノードの順序に従って、複数のノード内のテキストの部分を表示します。
テキストパーツのコレクションをプロパティに保存し、テキストの一部を表示したい各ノードで、そのコレクションのイテレーションを進めるためにバインディングを使用し、イテレータの最初の要素を表示します。
バインディングは Kanzi がそれらのバインディングを実行する順序でテキストパーツのコレクションを反復するため、Node Tree 内のノードの順序が各ノードがテキストのどの部分を表示するかを決定します。
このようにテキストの一部を表示する場合、Kanzi Studio でテキストの一部を表示するノードのプロパティ値を変更すると、Kanzi Studio Preview がそのノード内のバインディングを再インスタンス化し、分割したテキストの終わりを超えてイテレーションを進めます。これが発生した場合、正しいテキストを表示するには Preview を再起動する必要があります。
ノードツリーの順序で複数のノードにテキスト部分を表示する を参照してください。
テキストの部分を複数のノードで任意の順序で表示します。
テキストの部分の位置を別々のプロパティに保存し、特定のプロパティに保存された位置からテキストの部分を表示したい各ノードで、バインディングを使用してテキストの部分を表示します。
任意の順序で複数のノードにテキスト部分を表示する を参照してください。
プロパティ値の表示形式設定¶
format バインディング関数を使用して、Text Block ノードがプロパティ値をどのように表示するかを設定します。プロパティ値の表示形式設定 と フォーマット (Format) 関数リファレンスを参照してください。
format を使用すると、次のことができます。
ノードプロパティまたはデータソースから値をテキスト文字列に挿入します。
関数に渡す値がフォーマットされたテキストに表示される順序を設定します。ローカライズされた文字列でテキストの順序を設定する を参照してください。
浮動小数点値を特定の小数点以下の桁数に切り捨てます。
文字列内の書式設定されたテキストに最小幅を設定します。
コンテンツが最小幅よりも少ないスペースを占める場合、残りのスペースをスペースまたはゼロで埋めます。プロパティ値の表示形式設定 を参照してください。
フォーマットされたテキストを、利用可能なスペース内で左揃えまたは右揃えにします。
透明な背景でテキストをレンダリングする¶
テキストブロックノードの背景を透明にしたい場合は、Kanzi アプリケーションのノードツリー内でノードを正しい順序でレンダリングする必要があります。部分的に透過的なノードをレンダリングする を参照してください。
Text Block 2D ノードの外観を設定する¶
2D ノードの外観を設定するには:
2Dノードを単色、テクスチャ、またはマテリアルで塗りつぶすことができます。2Dノードの外観の調整 を参照してください。
2Dノードにポストプロセッシングエフェクトを適用できます。2Dノードのエフェクト を参照してください。
2Dノードを3つの軸すべてで回転させて、3Dのパースペクティブ効果を作成できます。2Dノードに3Dパースペクティブ効果を作成する を参照してください。
2Dノードにカスタムレンダリングを適用して、ポストプロセッシングエフェクトを作成できます。2Dノードにカスタムレンダリングを適用する を参照してください。
2Dノードをピクセルパーフェクトとしてレンダリングできます。ピクセルパーフェクトな2Dノードのレンダリング を参照してください。
APIで Text Block 3D ノードを使用する¶
Text Block 3D ノードを作成するには、
// Create a Text Block 3D node named Text Block.
TextBlock3DSharedPtr textBlock = TextBlock3D::create(this->getDomain(), "Text Block");
Text Block 3D ノード内のテキストのフォントファミリーを設定するには、
// Set the font family used by the Text Block node.
textBlock->setFontFamily(fontFamily);
Text Block 3D ノードによって表示されるテキストを追加するには：
// Set the text in the Text Block node to Hello world!.
textBlock->setText("Hello\nworld!");
Text Block 3D ノード内のテキストの外観を調整するには、
// Set the style of the text in a Text Block 3D node:
// Set the size of the font to 90 pixels.
textBlock->setFontSize(90.0f);
// Set the color of the font to blue.
textBlock->setFontColor(ThemeBlue);
// Set the width of the text block in 3D space to 4 3D units.
textBlock->setWidth(4.0f);
// Set the height of the text block in 3D space to 5 3D units.
textBlock->setHeight(5.0f);
// To break long text lines to multiple lines to make the text fit within
// the boundaries of the text block, set the Word Wrap property to true.
textBlock->setWordWrap(true);
// Align the text in the text block to the right.
textBlock->setTextHorizontalAlignment(TextFormat::TextHorizontalAlignmentRight);
// Enable hinting. Prefer native hinter of the font over the auto-hinter of the rasterizer.
textBlock->setHintingPreference(FontHintingPreference::NativeHinting);
2Dから3Dへのプロジェクションのスケーリングファクターを調整するには、以下のようにします。
// To scale the final text in 3D space, set the 2D to 3D projection scaling factor to 0.04.
// The default value of the Node::Projection2DTo3DScaleProperty property is 0.02f.
textBlock->setProjection2DTo3DScale(0.04f);
詳細については、TextBlock3D クラスを参照してください。
APIで Text Block 2D ノードを使用する¶
Text Block 2D ノードを作成するには：
// Create a Text Block 2D node named Text node.
TextBlock2DSharedPtr textNode = TextBlock2D::create(this->getDomain(), "Text node");
// Create a Text Block 2D node named Text node.
ObjectRef<TextBlock2D> textNodeRef = TextBlock2D.create(getDomain(), "Text node");
TextBlock2D textNode = textNodeRef.get();
// Create a Text Block 2D node named Text node.
val textNodeRef = TextBlock2D.create(domain, "Text node")
val textNode = textNodeRef.get()
Text Block 2D ノード内のテキストのフォントファミリーを設定するには、
textNode->setFontFamily(fontFamily);
textNode.setProperty(Node.FontFamilyProperty, fontFamily);
textNode.setProperty(Node.FontFamilyProperty, fontFamily)
Text Block 2D ノードによって表示されるテキストを追加するには：
// Set the text in the Text Block node to Hello world!.
textNode->setText("Hello\nworld!");
// Set the text in the Text Block node to Hello world!.
textNode.setText("Hello\nworld!");
// Set the text in the Text Block node to Hello world!.
textNode.text = "Hello\nworld!"
Text Block 2D ノード内のテキストの外観を調整するには、
// Set the style of the text in a Text Block 2D node:
// Set the line spacing to 1.5f.
textNode->setLineSpacing(1.5f);
// Set the size of the font to 36.0f.
textNode->setFontSize(36.0f);
// Set the color of the font to blue.
textNode->setFontColor(ThemeBlue);
// Align the text in the text block to the right.
textNode->setTextHorizontalAlignment(TextFormat::TextHorizontalAlignmentRight);
// Enable hinting. Prefer native hinter of the font over the auto-hinter of the rasterizer.
textNode->setHintingPreference(FontHintingPreference::NativeHinting);
// Set the style of the text in a Text Block 2D node:
// Set the line spacing to 1.5f.
textNode.setProperty(TextBlock2D.LineSpacingProperty, 1.5f);
// Set the size of the font to 36.0f.
textNode.setProperty(FontStyleConceptMetadata.SizeProperty, 36.0f);
// Set the color of the font to blue.
textNode.setProperty(
TextConceptMetadata.FontColorProperty, new ColorRGBA(0.0f, 0.0f, 1.0f));
// Align the text in the text block to the right.
textNode.setProperty(TextBlock2D.TextHorizontalAlignmentProperty,
TextFormatEnums.TextHorizontalAlignment.TextHorizontalAlignmentRight);
// Enable hinting. Prefer native hinter of the font over the auto-hinter of the rasterizer.
textNode.setProperty(
TextBlock2D.FontHintingPreferenceProperty, FontHintingPreference.NativeHinting);
// Set the style of the text in a Text Block 2D node:
// Set the line spacing to 1.5f.
textNode.setProperty(TextBlock2D.LineSpacingProperty, 1.5f)
// Set the size of the font to 36.0f.
textNode.setProperty(FontStyleConceptMetadata.SizeProperty, 36.0f)
// Set the color of the font to blue.
textNode.setProperty(TextConceptMetadata.FontColorProperty, ColorRGBA(0.0f, 0.0f, 1.0f))
// Align the text in the text block to the right.
textNode.setProperty(TextBlock2D.TextHorizontalAlignmentProperty, TextFormatEnums.TextHorizontalAlignment.TextHorizontalAlignmentRight)
// Enable hinting. Prefer native hinter of the font over the auto-hinter of the rasterizer.
textNode.setProperty(TextBlock2D.FontHintingPreferenceProperty, FontHintingPreference.NativeHinting)
詳細については、TextBlock2D クラスを参照してください。
Text Block プロパティタイプとメッセージ¶
Text Block ノードの利用可能なプロパティタイプとメッセージのリストについては、Text Block 2D と Text Block 3D を参照してください。