Preview でアプリケーションを編集する

2Dノードを作成して配置し、Text Block ノードを作成および編集し、トリガーを追加し、Camera ノードを作成して配置し、Preview の周りをズームおよびパンします。

Preview でアプリケーションを編集するには、Preview ツールを使用します。

../../_images/edit-mode.png

Preview ツール

これらのツールを使用して、プロジェクト内のコンテンツを編集できます。

ツール

操作

ディスクリプション (Description)

ショートカットキー
../../_images/node-tool.png

Node tool を使用して、任意のノードを選択します。
../../_images/move.png

選択したノードを移動します。

1
../../_images/rotate.png

選択したノードを回転させます。

2
../../_images/scale.png

選択したノードをスケールします。

3
../../_images/align.png

四角をクリックして、選択した2Dノードをその側面に揃えます。例えば、この画像の設定では、Vertical Alignment プロパティを Top に、Horizontal Alignment プロパティを Left に設定します。
../../_images/horizontal-stretch.png

選択した2Dノードを水平方向にストレッチします。Horizontal Alignment プロパティを Stretch に設定します。
../../_images/vertical-stretch.png

選択した2Dノードを垂直にストレッチします。Vertical Alignment プロパティを Stretch に設定します。

イメージ7 (image7)

選択した2Dノードを水平方向および垂直方向にストレッチします。Horizontal Alignment および Vertical Alignment プロパティを Stretch に設定します。

イメージ8 (image8)

選択したノードを配置するには、Layout Transformation プロパティフィールドを使用します。2Dノードの場合、X と Y プロパティフィールドに値を入力します。レイアウトのレンダリングを最適化する を参照してください。

イメージ9 (image9)

選択したノードを配置するには、Render Transformation プロパティフィールドを使用します。2Dノードの場合、X と Y プロパティフィールドに値を入力します。レイアウトのレンダリングを最適化する を参照してください。

image10

Layout Height と Layout Width プロパティを使用して、選択した2Dノードのサイズを設定します。

画像11

選択した2Dノードのサイズまたは位置を、周囲のノードの最も近い座標にスナップします。

画像12

選択したノードのサイズを設定するには、Layout Transformation または Render Transformation プロパティの Scale を使用します。

image13

選択した3Dノードを配置するためにワールド座標を使用します。

image14

選択した3Dノードを配置するためにローカル座標を使用します。

画像15

Grid Layout 2D tool。Preview でクリックしてドラッグし、Grid Layout 2D を作成します。作成する領域のサイズがレイアウトのサイズを定義します（Layout Width と Layout Height）。Grid Layout ノードを使用する を参照してください。

画像16

Text Block 2D tool。Preview でクリックしてドラッグし、Text Block 2D を作成します。作成したエリアのサイズがレイアウトのサイズ（Layout Width と Layout Height）を定義します。Text Block ノードを使用する を参照してください。

画像17

Text Block 2D が表示するテキストを入力します。

画像18

四角をクリックして、テキストをその側に揃えます。例えば、この画像の設定では、Text Vertical Alignment プロパティを Top に、Text Horizontal Alignment プロパティを Left に設定します。

画像19

Text Block 2D ノードに使用したいデバイスに依存しないピクセルでのフォントサイズを選択します。

image20

Text Block 2D ノードに使用したいフォントを選択してください。ドロップダウンメニューには、現在のプロジェクトにあるフォントのみが表示されることに注意してください。フォントのインポート を参照してください。

image21

Stack Layout 2D tool。Preview でクリックしてドラッグし、Stack Layout 2D を作成します。作成する領域のサイズがレイアウトのサイズ（Layout Width と Layout Height）を定義します。Stack Layout 2D がアイテムをx軸またはy軸に沿って配置するように設定するには、Stack Layout 2D がアイテムを配置したい軸に沿って長い領域を作成します。Stack Layout ノードを使用する を参照してください。

画像22

Flow Layout 2D tool。Preview でクリックしてドラッグし、Flow Layout 2D を作成します。作成したエリアのサイズがレイアウトのサイズ（Layout Width と Layout Height）を定義します。Flow Layout ノードを使用する を参照してください。

image23

Camera tool を使用して、プレビューカメラを使ってシーンを移動し、プロジェクト内でカメラを作成および配置します。Camera ノードを使用する を参照してください。

ヒント

Preview ウィンドウで Node tool を使用する際に、Camera ノードの位置を操作できます。

Orbit Camera を動かすには、Alt を押しながら以下の操作を行います。

  • マウスの左ボタンをクリックしてドラッグすると回転します。

  • マウスの中央ボタンをクリックしてドラッグするとパンします。

  • マウスホイールを回すとズームします。

Free Camera を動かすには、マウスの右ボタンを押しながら以下の操作を行います。

  • マウスを動かすと、カメラのアングルを任意の方向に傾けたり回転させたりできます。

  • W、S、A、D を使用して、カメラの位置を前、後ろ、左、右に移動します。

  • E と Q を使用して、カメラの位置を上下に移動します。

  • マウスホイールを回してカメラスピードを設定します。

  • 移動中に Shift を押し続けると速度が2倍になります。

  • F を使用すると、Preview で選択された3Dオブジェクトにカメラを移動します。

ヒント

配置するには：

  • ノードを Preview 内の Camera の現在のビューの位置に配置するには、Node Tree でそのノードを右クリックし、Align With View を選択します。

  • Preview のビューを任意のノードの位置に配置するには、Node Tree でそのノードを右クリックし、Align View To Selected を選択します。

たとえば、Camera ノードを Scene ノード内の任意のノードの位置に配置するには、次のようにします。

  1. Camera ノードを配置したい位置にあるノードを右クリックし、Align View To Selected を選択します。

  2. その位置を Camera に保存するには、Camera を右クリックし、Align With View を選択します。

../../_images/node-tree-align-view-align-to-selected.png

画像24

カメラの現在の位置をプレビュー Camera ノードに保存します。

image25

プレビュー Camera ノードの現在の位置にカメラをリセットします。

image26

カメラの現在位置から新しい Camera ノードを作成します。

J

image27

Orbit Camera は移動を可能にします。

  • Node Tree で選択するノード。

  • カメラの Constraints > Look At プロパティで設定したノード。

image28

Free Camera は、特定のポイントに縛られずに移動することができます。

画像29

Node Tree または Preview で選択された3Dオブジェクトにカメラを持ってくる。

image30

現在のシーンを表示したい Camera ノードを選択します。

画像31

3Dノードを使用する場合、カメラの視野を度単位で設定します。

Preview でのパンとズーム

Preview でパンおよびズームするには:

アクション

ショートカット

パン

マウスの中央ボタンをクリックしてドラッグします。

ズーム

  • Preview の右上隅にあるコントロールを使用します。

    ../../_images/adjust-the-preview-zoom-level.png

  • マウスホイールを回します。

  • Shift キーと Alt キーを押し、左マウスボタンをクリックしてドラッグします。

Preview でビューをリセットする

Preview のズームレベルを100%に戻し、アプリケーション画面を Preview の中央に配置したい場合は、image32 をクリックするか、Ctrl 1 を押して Preview のビューをリセットします。

../../_images/view-in-the-preview-needs-resetting.png ../../_images/view-in-the-preview-position-and-zoom-reset.png

Preview でアンチエイリアスを設定する

デフォルトで、Windows上の Kanzi Studio Preview と Kanzi Application Player は4サンプルを使用してアンチエイリアスを適用します。どちらも、使用したいアンチエイリアスの量を設定することができます。

Kanzi アプリケーションを C++ アプリケーションと共に使用している場合、ターゲットデバイスで Kanzi アプリケーションを実行するのと同じように、Kanzi Studio Preview と Kanzi Application Player でコンテンツを表示するには、application.cfg ファイルでアンチエイリアスを設定できます。アプリケーション全体へのアンチエイリアシングの適用 を参照してください。

C++アプリケーションなしで Kanzi アプリケーションの Kanzi Studio Preview でアンチエイリアスを設定するには、

  1. Kanzi Studio メインメニューで、Project > Properties を選択します。Preview セクションの Properties で、Preview Working Directory プロパティの値を、Preview を構成するために application.cfg を保存したいディレクトリに設定します。

    例えば、Preview Working Directory プロパティを Application Player に設定します。これにより、Windows上で Preview と Kanzi Application Player に同じアンチエイリアス設定を適用できます。<ProjectName>/Application Player ディレクトリがまだ存在しない場合は、File > Export > Export as KZB Player for Windows を選択します。Kanzi Studio から Windows への Kanzi アプリケーションのビルドとデプロイ を参照してください。

    ../../_images/project-properties-myproject.png ../../_images/preview-working-dir-application-player.png

  2. 前のステップで設定したディレクトリで、application.cfg ファイルを作成または開いてください。Preview が使用するアンチエイリアスサンプルの数を SurfaceSamplesAntialiasing パラメータに追加して設定してください。

    たとえば、Preview でアンチエイリアスを無効にするには、application.cfg で次を追加します。

    SurfaceSamplesAntialiasing = 0

  3. Kanzi Studio で、Preview を再起動します。

    ../../_images/preview-restart-button-gray.png

関連項目

プレビューでアプリケーションを分析する

Preview の制御

Camera ノードを使用する

プレビュー (Preview)

ルーラーとガイドの使用

アンチエイリアスの適用