このページでは

C

Qt Quick Ultraliteローダーの例

Loader QML 型の使用方法を示します。

概要

「loader 」サンプルでは、Loader というQMLタイプの使用方法を示しています。

この例では、シンプルなメモリーゲームが実装されています。プレイヤーは、画面に表示される順序通りに色を選択する必要があります。間違った色を選択するとゲームは終了します。一連の色の最後を選択すると、最高スコアが更新され、新しいラウンドが始まります。

アプリケーションのUI

このアプリケーションは、以下の3つのページで構成されています:

  • ロゴ
  • メモリーゲーム
  • 設定

アプリケーションのメインビューはローダーとして実装されており、これにより RAM にはいずれか1つのページのみが格納されるようになっています。

各サイドのボタンが押されるたびに、ローダーのソースが対応するページのソースに切り替わります。

    Loader {
        id: mainView

        anchors.fill: parent
        source: "Logo.qml"

        Connections {
            target: root
            function onCurrentPageChanged(currentPage: int) {
                if (currentPage === 0) {
                    mainView.source = "memory_game/MemoryGame.qml"
                } else if (currentPage === 1) {
                    mainView.source = "settings/Settings.qml"
                    GameState.running = false
                }
            }
        }
    }
Logoページ

ロゴページには、紹介用の画像が表示されます。この画像は、アプリケーションの起動時に一度だけ表示されます。

アプリケーションのタイトル画面を表示した、Loaderのロゴページの例。

メモリーゲームページ

メモリーゲームは、表示部分と操作部分の 2 つの部分に分かれています。表示部分はラウンドの開始時に、プレイヤーが覚えなければならない色を表示します。

表示部分には、統計情報、現在のスコア、最高スコアも表示されます。

操作部分は色付きのボタンが並んでおり、プレイヤーは正しい順序でこれらをクリックする必要があります。

Rectangle {
    id: root

    color: SettingsData.backgroundColor

    Item {
        id: positioningWrapper

        anchors { fill: parent; leftMargin: parent.width/10; rightMargin: parent.width/10; }

        GameWindow {
            anchors { left: parent.left; top: parent.top; right: parent.right; bottom: gameControls.top }
        }

        ColorButtons {
            id: gameControls

            anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
            width: parent.width
            height: width * 0.2
        }

        StatsOverlay {
            anchors { left: parent.left; right: parent.right; }
        }
    }
}

ゲームウィンドウ、色付きのボタンが並んだ列、および現在のスコアと最高スコアを表示する統計情報がある、Loaderのサンプルゲームページ。

設定ページ

「設定」ページでは、アプリケーションの背景色を調整したり、ゲームの難易度を変更したりすることができます。

背景色や難易度レベルの設定が表示された、ローダーの設定例ページ。

プロジェクトの構造

メインアプリケーション

メインアプリケーションウィンドウは、以下で定義されています。loader.qml

記憶ゲーム

ゲームの UI は、loader/memory_game ディレクトリ内の QML ファイルによって定義されています。

モジュール

ローダーのサンプルでは、2つのモジュールが定義されています:

  • SettingsData
  • GameState

SettingsData モジュールは、背景色や難易度などのアプリケーション設定を格納します。

GameState モジュールは、ゲームの制御に使用されます。

どちらのモジュールも、ロードされたアイテム間の通信手段として使用されます。

ファイル:

画像:

「Communication with the loaded items」も参照してください 。

特定のQtライセンスの下で利用可能です。
詳細はこちらをご覧ください。