C

Qt Quick Ultralite swipe_game デモ

Qt Quick Ultraliteでのジェスチャーの使用方法を紹介します。

概要

このデモは、さまざまな種類のジェスチャーを実装する方法を示す小さなゲームです。

初期ビューには、デフォルト設定でゲームを開始するためのボタンが表示されます。また、このデモには他にも4つのビューが含まれており、縦または横のスワイプジェスチャーを使って切り替えることができます。その4つのビューは以下の通りです：

「Time」（左）：ゲーム内の問題に対する制限時間を設定できます。制限時間を設定するには、ビューの外周部分で時計回りまたは反時計回りの円を描くようなジェスチャーを行い、時間を増減させます。右端から中央に向かってスワイプすると、初期ビューに戻ります。
試行回数（右）：ゲーム内で許容される失敗回数を設定できます。時間メニューと同様に、ビューの外側領域で時計回りまたは反時計回りの円を描くようなジェスチャーを行うと、ゲーム内の失敗回数を増減できます。回答が間違っていた場合や制限時間が経過した場合は、失敗とみなされます。
設定（上部）：アニメーションの有効／無効、タッチエリアのサイズ変更、およびタッチエリアの表示／非表示を設定できます。リストの左側または右側で縦方向のスワイプジェスチャーを行うと、アイテムリストを上下にスクロールできます。スクロール中は視覚的なインジケーターがフィードバックを表示します。
ハイスコア（下部）：ハイスコアのリストを表示します。最初は空ですが、ゲームを最後までプレイするとデータが追加されます。ハイスコアは保存されないため、アプリケーションを起動するたびにリストは空の状態になります。

ゲームを開始する準備ができたら、初期画面の「スタート」ボタンを選択してください。これにより、ゲーム開始前の基本情報を表示する新しい画面に移動します。画面内のどこかをタップしない限り、数秒後にゲームが自動的に開始されます。ここには2つの重要な要素があります：

画面中央にはゲームの初期値が表示されています。ゲームをプレイするには、この値を覚えておく必要があります！
開始値の下にはモード切り替えボタンがあります。これを使って、ゲームの2つのモードを切り替えることができます。デフォルトのモードは「Numbers 」モードで、表示された乱数が開始値より小さいか大きいかを判断する必要があります。もう一つのモードは「Countries 」モードで、表示された国の総面積が初期値より小さいか大きいかを判断する必要があります。

画面の任意の場所を長押しすると、初期画面に戻ることができます。

ゲーム開始時、画面には以下の情報が表示されます：

上部に並ぶ大きなドットは、残りの挑戦回数を示しています。
中央には現在の値が表示されます。中央からスワイプ操作を行い、現在の値が開始値より小さいか大きいかを推測します。「Numbers 」モードでは、左にスワイプすると「小さい」、右にスワイプすると「大きい」と推測します。「Countries 」モードでは、下にスワイプすると「小さい」、上にスワイプすると「大きい」と推測します。
下部には現在のスコア（つまり、正解した回数）が表示されます。
「停止」ボタンを押すと、ゲームが終了し（スコアは保存されません）、初期画面に戻ります。
画面の端に表示される円が徐々に大きくなるにつれて、現在の推測に残された時間が少なくなっていることを示します。

与えられた時間内に正解し続ける限り、ゲームは無限に続きます。失敗が頻繁に続き、失敗回数の上限を超えた場合、ゲームは終了します。最終画面にはスコアが表示され、ハイスコアリストに追加されます。

注：「 Numbers 」モードは 反応速度を競うゲームですが、「Countries 」モードでは正解するためにある程度の知識が必要です。Qt XMLでは、「Numbers 」モードでより難易度の高い体験を得るために、応答時間を短く設定することを推奨しています。

Swipe_gameのデモ画面のスクリーンショット。残り挑戦回数、現在の値、現在のスコア、残りゲーム時間、および停止ボタンが表示されています。

対象プラットフォーム

プロジェクト構造

CMakeプロジェクトファイル

2つのC++クラス、Qul::Singleton とQul::ListModel がQMLに公開されています:

  InterfaceFiles {
    files: [
    "Globals.h",
    "HighscoreModel.h"
    ]
  }

さらに、Style.qml およびSwipe.qml をモジュールに追加し、シングルトンとしてインポートできるようにしています：

  MCU.Module {
    uri: "StyleModule"
  }

  QmlFiles {
    files: ["Style.qml"]
  }
  MCU.Module {
    uri: "SwipeModule"
  }

  QmlFiles {
    files: ["Swipe.qml"]
  }

端から始まる方向指定のスワイプ

DirectionSwipeArea.qml ファイルは、direction プロパティと Direction 列挙型を使用して、一方向のみのスワイプを検出する再利用可能なコンポーネントを実装しています。また、現在設定されている方向を視覚的に示すための画像も提供します。このコンポーネントは、異なるビュー間の基本的なナビゲーションのために複数回使用されます。

中心から始まる方向性スワイプ

GameRunningView.qml ファイルでは、単一のMouseArea を使用して、現在のゲームモードに応じて、垂直および水平のスワイプジェスチャを同時に検出します。

円形のスワイプ

CircularSwipeArea.qml ファイルでは、MouseArea と角度計算を使用して、円形のスワイプジェスチャー（時計回りおよび反時計回り）を検出します。画像を使用して、現在のタッチ座標がバウンディング領域内にあるかどうかを視覚化します。検出されたジェスチャーが所定の角度閾値を超えた場合、それに応じてシグナルが発信されます。バウンディング領域から外れると、その閾値はリセットされます。

ビューの配置

ConfigContainer.qml は、配置やアニメーションを活用してさまざまなビューを整理し、ビュー間を移動する方法を示すヘルパーコンポーネントです。

グローバル値

Globals クラスはQul::Singleton を継承し、ゲームの流れを制御するグローバルなプロパティと関数を提供します。

ハイスコアモデル

HighscoreModel クラスはQul::ListModel を継承し、ハイスコアの動的なリストを保存・ソートします。

スタイル

Style.qml は、シングルトンとしてインポートできるようにモジュールとして構成されています。これは、他のすべてのqmlファイルで共通して使用されるスタイルを提供します。

注： SwipeGame.qml コンポーネントは 、appSize プロパティをオーバーライドしています。これは、Style.qml 内のほとんどのサイズ値が表示サイズに依存しており、視覚要素がそれに応じて適切にスケーリングされるようにするためです。

ファイル：

特定のQtライセンスの下で利用可能です。
詳細はこちら。