Windowsストア アプリ 作り方解説 Line Attack編 第0回 ～開発秘話と画像の用意～

  • Article

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

[作ろうと思ったきっかけ]
ちょうど2週間くらい前のことです。
会社からの帰りで電車に乗っていたとき、隣でiPadを使っている人がいました。
ついつい画面を見ると、面白そうなパズルゲームをやっているではないですか。

次の日、また会社帰りの電車の中で、同じゲームをやっている人を見かけてしまいました。
ちょうどパズルゲームのサンプルを作りたいと思っていたとこで、そのゲームであればわりと簡単に作れそうだから、ちょっと作ってみようかなという考えが頭をよぎりました。
家に帰って調べてみると、そのゲームの名前はわからないものの、パズルとしてはラッシュアワーというパズルということがわかりました。

さらに次の日、Windows 8を立ち上げてWindowsストアを見ると、なんとそのゲームが表示されているではありませんか。
パズルゲームの名前はBlocked in。
https://apps.microsoft.com/webpdp/app/2097beb1-9f5b-42cf-8ed7-8c1ecd9522ac
Windows 8用のアプリがあるのであれば、わざわざ作る必要はありません。
しかし、サンプルとしてパズルゲームを作りたいと思っていたので、他のパズルを作れないか、頭をひねりました。

そして次の日、昼食を食べているときにLine Attackのアイデアが思い浮かびました。
とりあえずそのアイデアをアプリにしようとしたため、この後公開するアプリのプロジェクト名がPazzle_idea1という名前になっています。

単純なアイデアなので、類似しているものが既に出ているかもしれません。
とはいえ、左端と右端、上端と下端がくっついているので、少なくとも物理的な物体を使うパズルとしては存在しなそうです。

[マス目の数]
いざアプリを作ろうとして、最初に画面の設計から入りました。
標準的な解像度の1つである1366x768の画面を想定し、真ん中に正方形のメイン画面を設置するとすれば、600x600くらいが適当だろうと判断しました。
その600x600をさらに分割しようとしたときに、パッと思いついたマス目の数は6x6か10x10でした。
6x6に分割すると、ひとつのマス目の大きさは100x100ピクセル、10x10に分割した時は60x60ピクセルです。
60x60ピクセルだと、画面をタッチしたときに隣のマス目を触ってしまう可能性が高くなるので、まずは100x100ピクセルで作ることにしました。
将来的には、マス目の数を増やすことも検討しています。

[画像データ]
とりあえずアプリを作るとしても、画像データが必要です。
Line Attackで使用している画像データは、Windowsアプリ アートギャラリーのものを使用しています。
https://msdn.microsoft.com/ja-jp/hh544699
この中のゲームの素材の中の、IG168.pngとIG169.pngという素材を宝石として使用しています。
もともとこれらの素材は、爆発をイメージして作ってもらったものですが、宝石に見えれば何でもいいのです。

オリジナルの素材は、オレンジと水色の画像しかありません。
PowerPointの機能を使い、画像の色を変更して黄緑や紫など、別の画像を作成しました。

ラインとなる黒い棒も、アートギャラリーの素材を使っています。
棒という素材はないため、「図形」に含まれるIC052.pngという四角形の素材をアレンジしました。
以下の図のように、IC052を少し変形させて、棒の部分のみをトリミングして抜き出しています。

点滅している四角形の部分は、PowerPointの標準の図形として用意されている、角が円い四角形を使用しています。
このようにして、ゲームで使う画像を作っていきました。

[今後の連載]
次回から、開発途中のプロジェクトファイルを公開しつつ、コードの説明をしていきます。
最終的なプロジェクトファイルの公開は、連載終了時になる予定です。

パズルゲーム作成の参考にしたいので、早く最終的なプロジェクトファイルが欲しいという方は、個別にご連絡ください。
現在実施している、高専アプリ開発コンテストに参加している高専生の方は、高専アプリ開発コンテスト事務局事務局までお問い合わせください。
連載終了を待たずに、プロジェクトファイルをお送りします。

[Windows Phone版]
Windows Phone版も先ほど作って、Marketplaceに申請しました。
移植にかかった時間は約6時間です。
手間取ってしまったところもあるので、慣れれば2～3時間で移植できそうです。
申請が通れば、このブログで紹介します。

[次の記事]
第１回 画面のレイアウトと表示

マイクロソフト
田中達彦