Windowsストアアプリ作り方解説 Line Attack編第9回～表紙ページの追加～

Article
02/13/2013

マイクロソフトの田中達彦です。
本連載では、Windowsストアアプリとして作成したパズルゲームである、Line Attackのプログラムを解説します。
Line Attack : https://apps.microsoft.com/webpdp/app/f11e327c-6228-4c8f-8245-ea57d65e0f09

[注意事項]
- この連載で提供するプロジェクトファイルは、サンプルとして提供しています。
- 毎回の記事で提供するプロジェクトファイルは、その時点でのソースコードです。最終バージョンのソースコードと異なる場合があります。

[今回のプロジェクトファイル]
今回提供するプロジェクトは、アプリの起動時に説明ページが表示されるように実装しています。
Windowsストアアプリ版のLine Attackのプロジェクトファイルの公開は、今回が最後です。

[説明ページの追加]
今回は、既にあるアプリに別のページを追加して表示する方法を説明します。
前回までのプロジェクトを実行すると、いきなりゲームが始まりました。
Line Attackのような単純なゲームであれば、特に説明がなくても何とかなるかもしれません。
しかし、ゲームの説明があったほうが良いことは明らかです。
そこで、ゲームの起動時に以下のような説明のページを追加しました。

このページは空白のページとして追加したものに、必要な要素を追加したものです。
空白のページを追加するには、Visual Studioのソリューションエクスプローラーのプロジェクト名が表示されているところ(本プロジェクトの場合はPazzle_Idea1)で右クリックして、[追加]-[新しい項目]を選択し、[空白のページ]を選択します。
(今気づきましたが、プロジェクト名のパズルのスペルが間違ってますね...)
ここでは、HowToPlay.xamlという名前の空白のページを追加しています。

その中身は、たったこれだけです。
黄色くマーカーした部分が、追加した部分です。

説明の部分は画像ファイルで用意し、Imageコントロールを使用して表示させています。
あとはこの説明を表示させるかどうかを決めるCheckBoxと、その右側に表示させる文字列のTextBlockのみで構成しています。
上記のデフォルトの状態では英語の情報が入っていますが、これは起動時に環境に応じて日本語/英語を切り替えています。

C#のファイルであるHowToPlay.xaml.csも、それほど複雑なことはしていません。
下記のマーカーした部分を追加したのみです。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    ResourceLoader resource = new ResourceLoader();
    string imageUri;
    string s;

    s = resource.GetString("StringHowToPlayPage");
    imageUri = "ms-appx:///Assets/" + s;
    ImageHowToPlay.Source = new BitmapImage(new Uri(imageUri));

s = resource.GetString("StringShowHowToPlay");
CheckBoxNoShow.Content = s;

s = resource.GetString("StringTapPage");
TextBlock1.Text = s;
}

private void CheckBoxNoShow_Checked(object sender, RoutedEventArgs e)
{
ApplicationData.Current.LocalSettings.Values["ShowHowToPlay"] = true;
}

private void CheckBoxNoShow_Unchecked(object sender, RoutedEventArgs e)
{
ApplicationData.Current.LocalSettings.Values["ShowHowToPlay"] = false;
}

private void Grid_PointerReleased_1(object sender, PointerRoutedEventArgs e)
{
this.Frame.Navigate(typeof(MainPage));
}

黄色くマーカーした部分は、環境に応じて日本語と英語のリソースを変えているところです。
説明部分は、日本語の画像ファイルと英語の画像ファイルを用意し、どちらのファイルを表示させるかを環境に応じて変えています。
水色でマーカーした部分は、起動時に説明ページを表示させるかどうかのチェックの状態を記録しています。
ここで記録した情報は、App.xaml.csで使用しています。
黄緑でマーカーした部分は、画面をタップまたはタッチしたらゲームの画面に遷移させる部分です。

[説明ページを表示させるかどうかの判断]
App.xaml.csには、アプリケーション全体にかかわるプログラムが記述されています。
アプリの起動時には、このApp.xaml.csにあるOnLauncedイベントハンドラーが呼ばれます。

ここでは、黄色くマーカーした部分を追加しています。
記録されている、説明ページを表示させるかどうかを示すCheckBoxの記録されている値を見て、もし表示させるときはHowToPlayのページを、表示させない時はMainPageを表示させています。
値が記録されていないときは、HowToPlayのページを表示させます。

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
Frame rootFrame = Window.Current.Content as Frame;

    // ウィンドウに既にコンテンツが表示されている場合は、アプリケーションの初期化を繰り返さずに、
    // ウィンドウがアクティブであることだけを確認してください
    if (rootFrame == null)
    {
        // ナビゲーションコンテキストとして動作するフレームを作成し、最初のページに移動します
        rootFrame = new Frame();

        if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: 以前中断したアプリケーションから状態を読み込みます。
        }

        // フレームを現在のウィンドウに配置します
        Window.Current.Content = rootFrame;
    }

    if (rootFrame.Content == null)
    {
        object value = Windows.Storage.ApplicationData.Current.LocalSettings.Values["ShowHowToPlay"];
        if (value == null || (bool)value == true)
        {
            if (!rootFrame.Navigate(typeof(HowToPlay), args.Arguments))
            {
                throw new Exception("Failed to create initial page");
            }
        }
        else
        {
            // ナビゲーションスタックが復元されていない場合、最初のページに移動します。
            // このとき、必要な情報をナビゲーションパラメーターとして渡して、新しいページを
            // 構成します
            if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
            {
                throw new Exception("Failed to create initial page");
            }
        }
    }
    // 現在のウィンドウがアクティブであることを確認します
    Window.Current.Activate();

// add setting charm
SettingsPane.GetForCurrentView().CommandsRequested += App_CommandsRequested;
}

水色でマーカーしている部分は、次の説明で使います。

[設定チャームで説明ページを表示させる]
説明ページのCheckBoxのチェックを外すと説明ページが表示されなくなり、直接ゲームが始まるようになります。
もう一度説明ページを表示させるようにするには、どうすればよいでしょうか?
そのようなときには、設定チャームを使用します。

設定チャームには、特定のページへのリンクなどのコマンドを追加できます。
ここでは、クリックすると起動時に説明ページを表示させるようなコマンドを、以下のように追加しています。

設定チャームに何らかのコマンドを追加するには、設定チャームのCommandsRequestedイベントに対するイベントハンドラーを用意します。
先ほど説明に使用したコードにある水色でマーカーした部分は、イベントハンドラーを設定している部分です。

イベントハンドラーは以下のように実装します。
黄緑でマーカーした部分では、設定チャームに表示する文字列を取得しています。
日本語のみに対応したアプリでは、この部分は必要ありません。

水色でマーカーした部分で、設定チャームにコマンドを追加しています。
SettingCommandの第1引数はコマンドの名前で、任意の文字列を設定します。
第2引数は、設定チャームに表示させる文字列です。
第3引数は、設定チャームに表示された文字列をクリックしたときに実行されるメソッドです。
ここではonSettingsCommandを指定しているので、黄色くマーカーしたメソッドが呼ばれます。

void App_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
{
ResourceLoader resource = new ResourceLoader();
string s = resource.GetString("StringShowHowToPlay");

args.Request.ApplicationCommands.Add(new SettingsCommand(
"ShowHowToPlayPage", s, new UICommandInvokedHandler(onSettingsCommand)));
}

void onSettingsCommand(IUICommand command)
{
    switch (((SettingsCommand)command).Id.ToString())
    {
        case "ShowHowToPlayPage":
            Windows.Storage.ApplicationData.Current.LocalSettings.Values["ShowHowToPlay"] = true;
            break;
    }
}

設定チャームのどのコマンドをクリックしてもこのメソッドが呼ばれるので、上記のようにどのコマンドが呼ばれたかを判断して、それに対応した処理を実装します。
コードを見てわかるように、コマンドは1つだけではなく複数追加できます。

[前後の記事]
第8回アプリ内購入(アプリ内課金)

マイクロソフト
田中達彦

Pazzle_idea1_201301222111_HowToPlay.zip

Windowsストア アプリ 作り方解説 Line Attack編 第9回 ～表紙ページの追加～

Additional resources

Windowsストアアプリ作り方解説 Line Attack編第9回～表紙ページの追加～