C

Qt Quick ウルトラライト・スワイプゲーム・デモ

Qt Quick Ultraliteでのジェスチャーの使い方のデモ。

概要

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

初期ビューには、デフォルト設定でゲームを開始するためのボタンが表示されます。このデモには、垂直または水平スワイプジェスチャーでアクセスできる他の4つのビューも含まれています。以下はその4つのビューです：

時間（左）：ゲーム内の問題に制限時間を設定できます。制限時間を設定するには、ビューの外側で時計回りまたは反時計回りの円形ジェスチャーを使用して時間を増減します。右の境界線から中央に向かってスワイプすると、最初のビューに戻ります。
トライ（右）：ゲーム中に許される失敗の回数を設定できます。タイムメニューと同様に、画面外側の時計回りまたは反時計回りの円形ジェスチャーで、ゲーム内の失敗回数を増減できます。与えられた答えが間違っているか、制限時間が過ぎると失敗とみなされます。
設定（上）：アニメーションの有効／無効、タッチエリアのサイズの変更、タッチエリアの表示／非表示を設定できます。リストの左側または右側を垂直にスワイプするジェスチャーを使用して、アイテムのリストを上下にスクロールするデモです。スクロール中は視覚的なインジケーターでフィードバックされます。
ハイスコア（下）：ハイスコアのリストを表示します。最初は空ですが、ゲームを最後までプレイすると埋まっていきます。ハイスコアは永続的ではないので、アプリケーションを起動するたびにリストは空になります。

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

ゲームの開始値が中央に表示されます。ゲームをプレイするには、この値を覚えておく必要があります！
スタート値の下にはモードスイッチがあります。このスイッチでゲームの2つのモードを切り替えることができます。デフォルトのモードはNumbers 、表示された乱数が開始値より小さいか大きいかを決めるモードです。もう1つのモードはCountries 、表示される国の面積の合計が開始値より小さいか大きいかを決めるモードです。

どこでも選択したままにしておくと、最初の表示に戻ることができます。

ゲームが始まると、ビューには以下の情報が表示されます：

上部の大きな点の列は、残りトライ数を示します。
中央の現在値。中央からスワイプするジェスチャーを使用して、現在の値が開始値より小さいか大きいかを推測します。Numbers 、左にスワイプすると小さく、右にスワイプすると大きくなります。Countries 、下にスワイプすると小さく、上にスワイプすると大きくなります。
一番下に現在のスコア（正解数）が表示されます。
ストップボタンはゲームを中断し（スコアは保存されません）、初期画面に戻ります。
境界の円は、現在の推測の残り時間を示します。

あなたの推測が与えられた時間内に正しい限り、ゲームはエンドレスで実行されます。あまりに頻繁に失敗し、失敗回数の制限を超えると、ゲームは終了します。最終画面であなたのスコアが表示され、ハイスコアリストに追加されます。

注意: デフォルトのNumbers モードはリアクション・ゲームに近く、Countries モードは正しく推測するためにある程度の知識が必要です。Qt では、Numbers モードでよりチャレンジングな体験をするために、レスポンスタイムを低く設定することを推奨しています。

スワイプゲームのデモ・スクリーンショット。

対象プラットフォーム

プロジェクト構成

CMake プロジェクトファイル

Qul::Singleton とQul::ListModel の 2 つの C++ クラスが 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 のほとんどのサイズ値は、ビジュアル・アイテムがそれに応じて拡大縮小されるように、ディスプレイ・サイズに依存するからです。

ファイル

詳細はこちらをご覧ください。