このページでは

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.qml

メモリーゲーム

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

モジュール

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

  • SettingsData
  • GameState

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

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

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

ファイル:

画像:

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

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