SQパズル 第2回 ～ SQパズルのカスタマイズ ～
マイクロソフトの田中達彦です。
新たなゲームのテンプレートとして、SQパズルというものを作成しました。
今回は、そのカスタマイズ方法を説明します。
[プロジェクトの作り方]
第1回の記事に添付しているSQPuzzle.zipを、「テンプレートについて」の項目のようにコピーしてください。
その状態でVisual Studio 2013を起動し、メニューの[ファイル]-[新規作成]-[プロジェクト]を選択します。Expressの場合は[ファイル]-[新規プロジェクトの作成]です。
左側のVisual C#と書かれた部分をクリックすると、中央に「SQPuzzle」というテンプレートが表示されます。
このテンプレートを選択し、任意のプロジェクト名をつけて[OK]ボタンを押します。
プロジェクトが作成されたら、[F5]キーを押すか、メニューの[デバッグ]-[デバッグ開始]を選択して、一度アプリを起動させてみましょう。
[画像の変更の方法]
まずは、表示する画像を変更しましょう。
SQパズルで使用する画像を用意し、Visual Studioのソリューション エクスプローラーに表示されているAssetsにドラッグアンドドロップしてコピーします。
もしソリューション エクスプローラーが表示されていないときは、メニューの[表示]にある[ソリューション エクスプローラー]を選びます。
画像は、横と縦の比率が2:1のものが適しています。
比率が2:1でない画像は、上下または左右が切れてしまいます。
プログラム上は、2400x1200の大きさの画像が最適です。
それ以上のものは縮小され、それ以下のものは拡大されて表示されます。
画像をAssetsにコピーしたら、ソリューション エクスプローラーに表示されているMainPage.xamlをダブルクリックします。
中央にデザイン画面が表示されたら、次にドキュメント アウトラインを表示させます。
ドキュメント アウトラインはVisual Studioの左側に隠れているか、または[表示]メニューの[その他のウィンドウ]を使用して表示させます。
ドキュメント アウトラインで、以下のようにviewBox1の下を展開していき、image1を選択します。
次に、右下のプロパティ ウィンドウのSourceの部分で、先ほどコピーした画像を選択します。
これで画像を変えることができました。
アプリを実行して、画像が変わったことをご確認ください。
[ボタンのテーマの変更]
画像が薄い色のときは、初級や中級などのボタンが見えにくいときがあります。
このようなときには、ボタンのテーマというものを変更します。
ボタンのテーマを変更するには、ソリューション エクスプローラーでMainPage.xamlを選択し、ドキュメント アウトラインを表示させます。
viewBox1を展開していくとbutton1というものがありますので、button1を選択してプロパティ ウィンドウを見ます。
以下のように、プロパティ ウィンドウに表示されているRequested Themeという部分を見つけて、Lightに変更します。
[英語リソースの削除]
本テンプレートは、日本語と英語の両方に対応しています。
OSの言語が日本語のときはアプリに表示される文字列も日本語になり、OSの言語が英語のときはアプリも英語になります。
それ以外の言語のときは英語で表示されます。
このままアプリを作ってしまうと、Windowsストアに上げるときに英語版の説明やスクリーンショットが求められます。
OSの言語の変更方法は、以下のMVA (Microsoft Virtual Academy) のトレーニングビデオの「言語と地域の管理方法」をご参照ください。
https://www.microsoftvirtualacademy.com/training-courses/xaml-windows-app-localization
英語での説明の追加がめんどくさくて、日本語版だけの提供でよいという方は、以下の2つのことをしてください。
- ソリューション エクスプローラーに表示されているstringsの下のen-usを削除します。
- Package.appxmanifestを開き、[アプリケーション]タブにある[既定の言語]をen-USからja-JPに変更します。
英語にも対応しておいたほうがダウンロード数も増えるので、できれば英語のリソースは削除しないことをお勧めします。
[タイルとスプラッシュの変更]
テンプレートには、「花と蝶」の名前が入ったタイルとスプラッシュが入っています。
このタイルなどの画像データは、PowerPointとWindows Store App logo makerというツールを使って作成しています。
PowerPointのファイルを添付していますので、それを変更して作成することもできます。
タイルの画像の作り方については、以下のMVAのトレーニングビデオをご参照ください。
https://www.microsoftvirtualacademy.com/training-courses/windows-app-tile-design
[すべての記事]
第1回 SQパズルのテンプレート
第2回 SQパズルのカスタマイズ
第3回(最終回) SQパズルのプログラムの中身
日本マイクロソフト
田中達彦