スクロールビューの例

この例では、Scroll View ノードをコントローラーとして使用し、シーン内のマッププレーンを移動する方法を示しています。例では、Kanzi Studio プロジェクトに Scroll View ノードが含まれており、スクロール位置の座標をノードの変換フィールドに変換します。この例では、Kanzi Engine API を使用して C++ アプリケーションでより高度な機能を実装しています。

Scroll View ノードを使用する際の重要な側面は、カメラからのスクロールビュープレーンの距離に基づいて入力感度を制御することです。この例では、背景プレーンとカメラからの距離と向きを同じにすることで、1対1のマッピングを使用しています。しかし、スクロールビューと背景プレーンは同じ変換の下で結びつけられていません。なぜなら、そうするとユーザーのパンジェスチャー中に入力座標空間が背景プレーンと一緒に移動してしまうからです。スクロールビュープレーンをカメラから遠ざけることで、スクロールビューのジェスチャーの感度が増します。

この例では、C++アプリケーションで生の InterpolatedValue インスタンスを使用して、動きの速度に基づいてzオフセット(ズーム)を影響させる方法を示しています。

スクロールビューとトラジェクトリリストボックスコンポーネントは、値の補間器を通じて入力を出力座標に操作し、タッチスクリーンベースのインタラクションに最も適したスムーズなジェスチャーマッピングを実現します。

例の入手

この例を入手するには、Kanzi Studio Quick Start ウィンドウで Examples をクリックします。Scroll_view の例の横にある ダウンロード をクリックします。

Kanzi Studio は、この例を <KanziWorkspace>/Examples/Scroll_view ディレクトリにダウンロードします。

例を実行する

例を実行するには、

  1. Kanzi Studio で、File > Open Kanzi Command Prompt を選択します。

    Kanzi Command Prompt は、Kanzi 環境変数が設定された Windows コマンドプロンプトを開き、Kanzi のバージョンに対して Kanzi Command Prompt を開きます。

    Kanzi Command Prompt を使用して、絶対パスや環境変数を設定せずに、Gradle、SCons、CMake などの Kanzi ユーティリティおよびビルドツールにアクセスします。

    ../../_images/open-kanzi-command-prompt.png

    ヒント

    Kanzi Command Prompt は、Rightware ディレクトリの Windows スタートメニューで見つけることができます。

    Kanzi のバージョンが複数インストールされている場合は、そのコマンドプロンプトで作業したい Kanzi のバージョンに対応する Kanzi Command Prompt を起動するようにしてください。

  2. <KanziWorkspace>/Examples/Scroll_view/Application ディレクトリ内の Kanzi Command Prompt で、サンプルアプリケーション用の Visual Studio ソリューションを生成するスクリプトを実行します。

    たとえば、Visual Studio 2019 を使用している場合は、次のコマンドを実行します。

    generate_cmake_vs2019_solution.bat
    

    このスクリプトは、ディレクトリ <KanziWorkspace>/Examples/Scroll_view/Application/build_vs2019 内のアプリケーション用の Visual Studio ソリューションを生成します。

  3. Visual Studioで <KanziWorkspace>/Examples/Scroll_view/Application/build_vs<Version>/Scroll_view.sln Visual Studioソリューションを開きます。

  4. Visual Studio のソリューションエクスプローラーで Scroll_view プロジェクトを右クリックし、Set as StartUp Project を選択します。

  5. 使用したいソリューション構成を選択し、アプリケーションを実行します。

    開発中は、Debug 構成を選択します。製品版を作成する準備ができたら、Release 構成を選択します。

    ../../_images/debug-configuration.png

関連項目

Scroll View ノードを使用する