Windowsストア アプリ 作り方解説 XNA編 番外2 ~Shoot Evoのソースコード / プロジェクト ファイルを公開~

マイクロソフトの田中達彦です。今回は、Windowsストアに公開されているShoot Evoのソースコード(プロジェクト)を公開します。本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介しています。 [Shoot Evoのプロジェクト ファイル]今回、リリース1としてWindowsストアに公開したShoot Evoのプロジェクトファイルを、サンプルとして公開します。このプロジェクトファイルの使用条件は、以下のMicrosoft Limited Public Licenseに準拠します。http://msdn.microsoft.com/ja-jp/gg415737.aspx#P [Shoot Evoの改変について]Windowsストアにそのゲームを公開する場合にのみ、このプロジェクトファイルの一部を改変して、オリジナルのゲームを作ることを許諾します。プログラムには既知のバグがあり、コメントも中途半端なままですが、現状のままで提供します。ご了承ください。 [Shoot Evoで使用している素材]Shoot Evoでは、ボールやモンスターなどの素材を、以下のWindowsアプリ アート ギャラリーで提供されているものを使用しています。http://msdn.microsoft.com/ja-jp/hh544699素材をそのまま使用されるときは、Windowsアプリ アート ギャラリーのご利用上の注意事項に同意していただいた上でご使用ください。 [今までの記事]第1回 : オリジナルのWindows Phone 7 アプリ第2回 : Windows PhoneのXNAとWindowsストア アプリの違い第3回 : Update、Drawメソッドを置き換える第4回 : キャラクターの描画第5回 : ジェスチャーのシミュレート第6回 : 画面の構成番外1 : Shoot Evoリリース1を公開 マイクロソフト田中達彦 ShootEvo_121129_Store_Release1_forBlog.zip

0

Windowsストア アプリ 作り方解説 XNA編 第6回 ~画面の構成~

マイクロソフトの田中達彦です。本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介します。本連載では、C#とXAMLを使用して同様のアプリを作っていきます。 [Windows PhoneとWindows 8の画面の相違]Windows Phone 7では、画面サイズが800x480に固定されています。Windows Phone版のShoot Evoは、このサイズに合わせて作られています。 一方Windows 8の画面には、いろいろなサイズがあります。最小スクリーンサイズは1024x768で、それ以外にも1366x768、1280x800、1920x1080など様々なサイズがあります。これらの画面でも動くように画面を設計します。さらに、スナップや縦長画面にまで対応させましょう。 画面の構成については、横長画面のときには左側にゲーム本体の部分、右側に情報を表示する部分を配置しました。スナップと縦長の画面のときには、上にゲーム本体、下に情報を表示するように変えています。 画面の大きさにあわせてゲーム本体の部分を拡大/縮小し、なるべく大きくなるように表示しています。残った部分を適当な分量で分割し、各種の情報を掲載しています。 ランドスケープ ポートレイト スナップ [ゲーム本体の拡大/縮小]ゲーム本体の拡大縮小は、Gridコントロールそのものの縮尺を変えることで実現しています。下図は、画面の部分の構成です。使用しているコントロール名と、その後ろにカッコでShoot Evoで使用している名前を記しています。 Shoot Evoの全体はgrid1というGridコントロールの中に構成されています。この中に、fieldGridという名前のGridコントロールを配置しています。fieldGridの中には3つのImageコントロールを配置し、それぞれボール、モンスター、ゴールを表示させています。 Gridコントロールは、RenderTransformという、図形を変形させるためのプロパティがあります。その中で、ScaleX、ScaleYというプロパティを使うことで、Gridコントロールを拡大/縮小させることができるのです。 現在の画面の縦横のピクセル数は、field1のActualHeightとActualWidthによって取得できます。この値を使用して、適切な大きさにfieldGridを拡大/縮小させています。 アプリの実行中に画面のサイズが変わったときは、SizeChangedというイベントが発生します。このイベントが発生したときは、拡大率を再度計算しています。画面がランドスケープからポートレイトになったときや、スナップしたときもこのイベントが発生します。 [情報表示の部分]情報を表示しているところは、RectangleコントロールとTextBlockコントロールを使用して文字を表示させています。これらのコントロールの位置は、画面の大きさを元に計算しています。SizeChangedイベントが発生したときには、再計算を行っています。 [画面部分のコード]Shoot Evoの画面を構成しているMainPage.xamlの内容は、以下のとおりです。 <Page    x:Class=”App33_xnafake.MainPage”    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”    xmlns:local=”using:App33_xnafake”    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″    mc:Ignorable=”d” PointerPressed=”Page_PointerPressed_1″ PointerReleased=”Page_PointerReleased_1″ SizeChanged=”Page_SizeChanged_1″>     <Grid x:Name=”grid1″ >        <Grid.Background>            <ImageBrush ImageSource=”Assets/back2.png” Stretch=”UniformToFill”/>        </Grid.Background>        <Grid x:Name=”fieldGrid” RenderTransformOrigin=”0,0″ Margin=”120, 140, 0,…

0

Windowsストア 審査の通し方 No.05 ~[1.1] アプリは、サポートしているすべての言語と市場で、ユーザーに独特かつ独創的な価値または実用性を提供しなければならない

マイクロソフトの田中達彦です。本連載では、Windowsストアの審査でよく引っかかるポイントを説明します。 [注意事項]Windowsストアの審査に通るかどうかと、良いWindowsストア アプリかどうかの基準は別のものです。良いWindowsストア アプリでも、必要な機能がないと審査に落ちることがあります。本連載は、「Windows 8 アプリの認定の要件」バージョン4.0(2012年10月19日改定)の中からポイントとなるものを抜き出しています。下記リンクの最新の要件を必ずお読みください。http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694083.aspx [アプリの価値とは]アプリは、ユーザーに使ってもらってなんぼのものです。使っていて面白くないアプリや役に立たないアプリは、ユーザーもダウンロードしたいとは思わないでしょう。しかし、ある人にとっては全く役に立たないアプリでも、他の人から見ると役に立つような場合もあります。 アプリの認定の要件の1.1にある「ユーザーに独特かつ独創的な価値または実用性を提供しなければならない」は、主観的なものであり、判断が難しい項目でもあります。 [1.1で落ちたとき]もしストアの審査に落ちたとき、その理由が1.1であるならば、テスターから見て実用性を提供していないと判断されたということです。よくある例としては、1人の開発者が似たようなアプリを複数作成し次々にストアに登録していくと、最初のいくつかのアプリは審査に通ったとしても、途中から審査に落ちてしまうことがあります。この場合は、審査に通ったアプリと審査に落ちたアプリはほぼ同じものにも関わらず、落ちたアプリは1.1の項目に引っかかります。特に、同一の開発者が同じようなアプリを次々に申請したときは、後で申請されるアプリの実用性がないと判断されるからです。 他にも、Visual Studioで作成したプロジェクトをそのままビルドしたものをストアに申請しても、おそらく1.1で落ちます。 実用性があるにもかかわらず1.1で落ちた場合には、ストアへの申請時にテスターへのコメントとして、そのアプリが提供する実用性について説明し、再度申請を試みてください。 [前後の記事]No.04 : [2.4] Webブラウザーに飛ばさない マイクロソフト田中達彦

0

Windowsストア アプリ 作り方解説 XNA編 番外1 ~ Shoot Evo リリース1を公開 ~

マイクロソフトの田中達彦です。現在連載している「Windowsストア アプリ 作り方解説 XNA編」のネタとなっているShoot EvoのWindowsストア バージョンを公開しました。http://apps.microsoft.com/webpdp/ja-JP/app/shoot-evo/930a9542-8fe0-46f9-aa86-8bb8302f52b9 まだ連載の途中ですが、動いているものがあったほうが分かりやすいので、ざっと作ったリリース1を公開しました。今回のリリース1の画面はこんな感じです。 スナップにも対応させました。 ほぼ全世界を対象に公開したので、英語環境で見るとUIが英語になります。 共有とライブタイルには対応していないので、リリース2ではこれらの機能を追加する予定です。 今回、Windowsストアにアプリを申請したのは昨日の18時です。このブログを書いている時点で審査に合格して公開されているので、申請から公開まで24時間かかっていません。審査にかかる時間は、いろいろな要素によって左右されますので、10営業日程度を見ておいたほうが無難です。とはいえ、今であれば審査にかかる時間が比較的早そうです。 ちょっと力を入れた点は、プロモーション用の画像です。このブログを書いている時点でWindowsストアを見てみると、以下のように、スポーツの部分はプロモーション用画像が表示されていません。 ということは、日本発のスポーツのカテゴリーのアプリで、プロモーション用画像を用意すれば、もしかしたらストアのトップページにShoot Evoの画像が載るかもしれません。そこで、全4種類のプロモーション画像を用意しました。その中の1つの414x468の画像はこんな感じです。 まだまだ日本発のアプリは多くないので、今ならストアで露出される可能性が高そうです。なお、マイクロソフト社員と言えども、ストアのトップページにどういうロジックでプロモーション画像が掲載されるアプリを決めているかは知らされていません。 マイクロソフト田中達彦

0

Windowsストア アプリ(旧Metroスタイル アプリ)を初めて作るときのおすすめ

マイクロソフトの田中達彦です。今まで、.NET FrameworkやWin32 APIを使ってWindowsアプリを作っていた開発者の方や、Webアプリを作っていた方が、初めてWindowsストア アプリを作るときに試しておいてもらいたいことがあります。それは、簡単なアプリを作ってWindowsストアに登録することです。 初めてのWindowsストア アプリを完成させてから、そのアプリをWindowsストアに登録しても、もちろん構いません。とはいえ、Windowsストアにアプリを登録するという手順は今までに経験したことがないですので、初めてのWindowsストア アプリの開発と並行して簡単なアプリを作成し、Windowsストアへの登録の手順を試してみることをお勧めします。 Windowsストアにアプリと登録する際にあらかじめ用意しておくものや、登録してから審査に合格するまでの時間、審査に落ちたときはどうなるかなどを知っておくと、本番のWindowsストア アプリを登録するときにスムーズに処理を行えます。 簡単なWindowsストア アプリを作るには、以下のテンプレートを使用すると作りやすいです。http://msdn.microsoft.com/ja-jp/jj556277.aspx もしストアの審査に落ちてしまったときは、以下の「Windowsストア 審査の通し方」の連載をご参照ください。http://blogs.msdn.com/b/ttanaka/archive/2012/10/23/windows-no-01-12.aspx マイクロソフト田中達彦

0

Windowsストア アプリ 作り方解説 XNA編 第5回 ~ジェスチャーのシミュレート~

マイクロソフトの田中達彦です。本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介します。本連載では、C#とXAMLを使用して同様のアプリを作っていきます。 [使用しているジェスチャー]Shoot EvoのXNA版では、ジェスチャーとしてフリックとタップを使っています。フリックは、画面をシュッと指でなぞる操作で、ボールを蹴るときに使っています。タップは、画面を触る操作で、シュート後に画面を元に戻すときに使っています。 XNAでは、以下のようにフリックとタップを使用しています。 // タッチパネルの状況を検知するwhile (TouchPanel.IsGestureAvailable){    GestureSample gs = TouchPanel.ReadGesture();     // 画面がフリックされたかどうか    if (gs.GestureType == GestureType.Flick)    {        // もしボールが動いていないときは、フリックに合わせてボールを動かす        if (BallSpeed.X == 0 && BallSpeed.Y == 0)        {            BallSpeed.X = gs.Delta.X / 50;            BallSpeed.Y = gs.Delta.Y / 50;             // シュートの情報を記録            TotalShoot++;             CurrentShoot++;            if (CurrentShoot > MaxShoot)                CurrentShoot…

0

Windowsストア アプリ 作り方解説 XNA編 第4回 ~キャラクターの描画~

マイクロソフトの田中達彦です。本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介します。本連載では、C#とXAMLを使用して同様のアプリを作っていきます。 [XNAの描画方法]XNAとC#/XAMLで全く違う部分が、キャラクターなどの画像の描画の部分です。XNAでは、例えばボールを描画するときには以下のようにBallというTexture2Dのフィールドを作成します。 Texture2D Ball; そして、Loadメソッドでball.pngという画像を以下のように読み込み、Ballフィールドに代入します。 Ball = Content.Load<Texture2D>(“ball”); 描画は、Drawメソッドで行います。以下のように、描画するものと位置、色を指定して描画します。 spriteBatch.Draw(Ball, BallLocation, Color.White); BallLocationはVector2で定義されたフィールドで、描画する位置のX座標をY座標を含んでいます。 [C#/XAMLでの描画方法]C#/XAMLの場合は、XAMLに画像イメージを表示させるためのImageコントロールを用意し、そのパラメーターを変えることで目的の画像を表示させます。まずXAMLには、以下のようにImageコントロールを貼り付けます。 <Image x:Name=”ball1″ HorizontalAlignment=”Left” Height=”60″ Margin=”338,403,0,0″ VerticalAlignment=”Top” Width=”60″ Source=”Assets/ball.png” Stretch=”Fill”/> このときのMarginの値はボールの位置です。この値はプログラム中で変更していきます。もしプログラム中で画像データを読み込むときは、以下のようなコードを書きます。初期値として設定している画像以外の画像を表示させるときに使います。 string imageUri = “ms-appx:///Assets/ball.png”;BitmapImage bitmap = new BitmapImage(new Uri(imageUri));ball1.Source = bitmap; Drawメソッドに相当する部分では、表示する位置のみを以下のように設定します。ImageコントロールにはMarginというプロパティがあり、そこで位置を決めます。Pointとして定義したBallLocationを使い、ball1というImageコントロールの位置を定義しています。 ball1.Margin = new Thickness(BallLocation.X, BallLocation.Y, 0, 0); [XAMLでの画面構成]C#/XAML版では、サッカーのフィールド(芝生の部分)、サッカーゴール、ボール、モンスターの4つの要素にそれぞれImageコントロールを使って画像を表示させています。以下は、そのときのXAMLのコードの例です。プロジェクト名や、画像を貼り付ける位置によって細かいパラメーターが変わることがあります。 <Page    x:Class=”App33_xnafake.MainPage”    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”    xmlns:local=”using:App33_xnafake”    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″   …

0

Windowsストア アプリ 作り方解説 XNA編 第3回 ~Update、Drawメソッドを置き換える~

マイクロソフトの田中達彦です。本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介します。本連載では、C#とXAMLを使用して同様のアプリを作っていきます。 [XNAのUpdateとDrawメソッド]C#などで作成したアプリは、イベントドリブンでプログラムが動きます。ユーザーが何か操作したときなどに発生するイベントに対して、プログラムを用意するのです。XNAはイベントドリブンではなく、1/30秒ごとに特定のメソッドが呼ばれるので、その中にコードを書いていきます。1/30秒ごとに呼ばれるメソッドには、UpdateメソッドとDrawメソッドの2つがあります。Updateメソッドは各種フィールド等の値の更新を行うためのメソッドで、Drawメソッドは描画を行うためのメソッドです。 [タイマーを使用した呼び出し]WinRTには、XNAのようなUpdateメソッドとDrawメソッドがないので、DispatcherTimerというタイマーを使用してUpdateとDrawの代わりにします。まずは、以下の黄色でマーカーしている部分のようにTimerというフィールドを用意します。 public sealed partial class MainPage : Page{    DispatcherTimer Timer = new DispatcherTimer(); 次に、コンストラクタの中で、何秒ごとにタイマーによるイベントを発生させるかを定義し、イベントハンドラーを設定します。ここでは、33ミリ秒ごとにイベントが発生するように設定します。この値は、ほぼ1/30秒ごとに相当します。 以下の黄色くマーカーした部分を入力する途中で、2行目の += を入力した直後にTabキーを2回押します。Tabキーを押すことで、イベントハンドラーが自動的に生成されます。最後の3行めのStartメソッドの呼び出しで、タイマーをスタートさせます。 public MainPage(){    this.InitializeComponent();     Timer.Interval = new TimeSpan(0, 0, 0, 0, 33);    Timer.Tick += Timer_Tick;    Timer.Start();} 上記の += を入力したときに自動的に生成されたTimer_Tickイベントハンドラーに、以下のようにUpdateとDrawに該当する部分を用意します。 void Timer_Tick(object sender, object e){    // Update     // Draw } Updateメソッドはそのままコピーして、次回以降の連載で説明する方法でXNAのコードからストア アプリのコードに移植できます。Drawメソッドは、XNAとストア…

0

Windowsストア アプリ 作り方解説 XNA編 第2回 ~Windows PhoneのXNAとWindowsストア アプリの違い~

マイクロソフトの田中達彦です。本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介します。本連載では、C#とXAMLを使用して同様のアプリを作っていきます。 [XNAにあってWindowsストア アプリにないもの]Windows PhoneのXNAにあって、Windowsストア アプリを作るときのAPIであるWinRTにないものがいくつかあります。画面描画に関する実装方法も違います。元のXNAのアプリで使用していて、Windowsストア アプリでそのまま動かない部分を列挙しました。 a. 表示させる画像やキャラクターの扱いXNAでは、Texture2Dクラスを使用して画像を保持し、表示させています。 b. Initialize、LoadContent、Updata、Drawの各メソッドXNAでは、これらのメソッド内で必要な処理を行います。 c. 座標の管理XNAでは、Vector2クラスを使用して2次元の座標を管理しています。WinRTでは、2次元の座標を保持させるために、代わりにPointクラスを使用できます。 d. 文字列の扱いXNAでは、SpriteFontクラスを使用して文字列の保持し、表示させています。 e. タッチパネルの状態の検知XNAでは、TouchPanel.ReadGesture()を使用してフリックなどのジェスチャーの状況を検知できます。 f. 衝突判定XNAでは、RectangleクラスのIntersectsメソッドを使用して衝突判定を行えます。WinRTでは、RectクラスのIntersectメソッドを代わりに使用できます。 g. 分離ストレージへの情報の読み書きXNAとWinRTでは、分離ストレージへの読み書きの方法が違います。 ざっとこれらの部分を変更すれば、Shoot EvoをWindows 8上で動かせるようになります。実際に移植をしたところ、これらの部分は3時間程度で終わりました。 [Windowsストア アプリにあって、Windows Phone 7のXNAにないもの]Windows Phone 7のXNAにはない機能で、Windowsストア アプリを作るときに対応させないといけないものもあります。対応させないといけない項目を列挙しました。 A. 異なる解像度への対応Windows Phone 7は800x480の解像度しかありませんでしたが、Windows 8は1024x768、1366x768、2560x1440など、様々な解像度があります。 B. スナップへの対応Windows 8にはスナップと呼ぶアプリを2つ同時に実行できる機能があります。このスナップに対応させる必要があります。 移植に時間がかかるのはこちらのほうで、まだ移植作業の途中です。次回以降は、個別の項目をどのように移植していったかを説明していきます。 [前後の記事]第1回 : オリジナルのWindows Phone 7 アプリ (ソースコード掲載)第3回 : Update、Drawメソッドを置き換える番外1 : Shoot Evo…

0

良いWindowsストア アプリの作り方 vol.11 ~様々な解像度への対応~

マイクロソフトの田中達彦です。本連載では、良いWindowsストア アプリを作るために、知っておくべきポイントを紹介します。 [Windows 8が対応する画面の最小解像度と推奨解像度]Windows 8が動作する画面の最小解像度は、1024×768です。推奨解像度は1366×768以上です。 推奨解像度の横幅が1366ピクセル以上という理由は、Windows 8の特長の1つでもあるスナップの対応です。横幅が1366未満の場合は、スナップ画面を表示できません。アプリをスナップしたときの横幅は、320ピクセルに固定されています。横幅が1366の場合にスナップすると、スナップしたアプリの横幅は320ピクセルで、スナップとそれ以外のアプリ(フィルと呼びます)の境界線が22ピクセルですので、フィルの部分のアプリの横幅は1024ピクセルになります。 [ランドスケープとポートレイト]画面の向きも、ランドスケープと呼ばれる横長の画面と、ポートレイトと呼ばれる縦長の画面をサポートしています。画面の向きはタブレット型のPCでは自動的に変更するものもありますが、コントロールパネルで変更することもできます。 [様々な画面サイズへの対応]Windowsストア アプリを作るときには、特定の画面サイズに対応させるのではなく、様々な画面サイズに対応するように作らなければなりません。このことをスケーリングと呼びます。 様々な画面サイズに対応する方法は、大きく2つあります。1つは、画面サイズに対応して全体を拡大/縮小させる方法です。もう1つは、画面サイズに応じて表示するものの数を変える方法です。 例えばぐるなびのアプリの場合は、画面サイズに応じて縦方向に表示するものの数が、2つ、3つ、4つと変わっています。 1366x768の画面 1920x1080の画面 2560x1440の画面 [テストの方法]異なる画面サイズにアプリを対応させるとき、シミュレーターを使うことでいろいろな解像度のテストを行えます。 シミュレーターの右側にモニターのアイコンがあります。このアイコンをクリックすると、以下のようにシミュレーターの解像度を変えることができます。 モニターのアイコンの上にある回転矢印アイコンをクリックすると、画面の向きを変えることができます。シミュレーター上でスナップのテストをするときは、[Windows]キーを押しながら[.]キーを押すショートカットを使うと、楽にスナップできます。 画面に合わせたスケーリングの詳細は、下記ページをご参照ください。http://msdn.microsoft.com/ja-jp/library/windows/apps/hh780612.aspx [前後の記事]vol.10 : コントロールの大きさ マイクロソフト田中達彦 ※ 「Metroスタイル アプリ」は、「Windowsストア アプリ」に名前が変わりました。

0