マイクロソフトの田中達彦です。
本連載では、Windows Phone 7用のXNAで開発したShoot EvoというゲームをWindowsストア アプリとして移植したときのポイントを紹介します。
本連載では、C#とXAMLを使用して同様のアプリを作っていきます。


[Windows 8のスナップ]
Windows 8には、スナップという機能があります。
スクリーンサイズが1366x768以上のとき、画面を分割して2つのアプリを同時に表示させる機能です。
デスクトップとアプリの2つを同時に表示させることもできます。

以下の図は、Shoot Evoと「この漢字読めるかな? vol.4」を同時に表示させている画面です。



右側にShoot Evoがスナップされて表示されています。
スナップの画面の横幅は320ピクセルです。
ちなみに、左側のスナップ以外の領域のことをフィルと呼んでいます。
フィルの画面は、最低でも1024x768のサイズになります。

Windowsキーと . キー(ピリオド)を同時に押すとスナップ画面になるので、スナップのテストをするときはこのショートカットを覚えていると便利です。


[スナップ時の注意点]
第6回の記事で書いているように、画面の解像度に応じてゲームのフィールド(緑色の部分)の縮尺を変えることによって、さまざまは解像度に対応させています。
スナップ時も同様に、ResizeScreenメソッドの中で以下のように縮小率を決めて表示させています。

{   // スナップの場合
    Scale = 240.0 / 400.0;

    FieldX = LeftMarginSnap;

通常400ピクセルで表示させるフィールドの横幅を、スナップの画面では240ピクセルで表示させるようにします。
Scaleにはフィールドの縮小率として、240を400で割ったものを入れています。
その下のFieldXは、フィールドの左端の座標です。
LeftMarginSnapには40が入っています。
すなわち、スナップ画面の左から40ピクセルのところにフィールドの左端を設置します。

本来であれば、このコードでうまく動くはずなのですが、このまま実行すると以下の図のようにフィールドの右側が切れて表示されます。



なぜ切れてしまうかの正確な理由は分かっていません。
おそらく、縮小する前のフィールドが画面の右端からはみ出してしまうためその部分の描画が省略され、そのままフィールドを縮小したために右側が切れてしまうのではと予想しています。
そこで、この現象を回避するコードを追加します。
まずは、ResizeScreenメソッドの以下の黄色くマーカーした部分をコメントアウトし、新たに水色でマーカーした部分を追加します。

{   // スナップの場合
    Scale = 240.0 / 400.0;

    //FieldX = LeftMarginSnap;
    FieldX = -150;

フィールドの左端をスナップ画面の左側よりもさらに左に設定することにより、いったんフィールドそのものの描画位置を左寄りに設定します。
ここでは描画位置を-150に設定しています。

そして以下のように、いったん左側に描画したフィールドを右側に移動させています。

// ScaleXが1未満の時、スナップ時にRenderSizeが小さくなってしまい、
// 画像の右側が切れてしまうことに対する処置
if (FieldX == -150)
    fieldScale1.TranslateX = 190;
else
    fieldScale1.TranslateX = 0;

X座標が-150の位置に描画したフィールドを、190ピクセル分右側に移動させることにより、スナップ画面の左端から40ピクセルの位置にフィールドが表示されます。


[前後の記事]
第6回 : 画面の構成
番外1 : Shoot Evoリリース1を公開
番外2 : Shoot Evoのソースコード / プロジェクト ファイルを公開


マイクロソフト

田中達彦