×
Namespaces

Variants
Actions
(Difference between revisions)

Auto-Scaling WVGA XNA Games to WXGA & 720P with MonoGame for WP8

From Nokia Developer Wiki
Jump to: navigation, search
Dan Colasanti (Talk | contribs)
(Dan Colasanti - - Related Issues)
pavan.pareta (Talk | contribs)
(Pavan.pareta - - Summary)
(One intermediate revision by one user not shown)
Line 31: Line 31:
 
== Summary ==
 
== Summary ==
  
Use the code below to scale-up your WVGA-resolution WP8 game to fit perfectly on a WXGA (1280×768) screen and display full-height centered with letterboxing on a 720P (1280×720) screen.  The trick is to get the GamePage’s DrawingSurface object to do the scaling for you.  Here are the 3 easy steps:
+
Use the code below to scale-up your WVGA-resolution WP8 game to fit perfectly on a WXGA (1280×768) screen and display full-height centered with letterboxing on a 720P (1280×720) screen.  The trick is to get the GamePage’s {{Icode|DrawingSurface}} object to do the scaling for you.  Here are the 3 easy steps:
  
 
'''Step 1:'''
 
'''Step 1:'''
Your game's GamePage.xaml file should have a DrawingSurface tag, like the one below:
+
Your game's '''GamePage.xaml''' file should have a {{Icode|DrawingSurface}} tag, like the one below:
  
 +
<code xml>
 
  <grid x:Name="LayoutRoot">
 
  <grid x:Name="LayoutRoot">
 
  <mediaelement></mediaelement>
 
  <mediaelement></mediaelement>
 
  <drawingsurface x:Name="XnaSurface"></drawingsurface>
 
  <drawingsurface x:Name="XnaSurface"></drawingsurface>
 
  </grid>
 
  </grid>
 
+
</code>
Note that a DrawingSurface object contains these fields:
+
Note that a {{Icode|DrawingSurface}} object contains these fields:
# ''RenderTransform'' field that can be assigned to a ScaleTransform object
+
# {{Icode|RenderTransform}} field that can be assigned to a {{Icode|ScaleTransform}} object
# ''Margin'' field that can be used to center the game-screen with letterboxing
+
# {{Icode|Margin}} field that can be used to center the game-screen with letterboxing
 
<br />
 
<br />
 
'''Step 2:'''
 
'''Step 2:'''
Add a static Instance field to the GamePage class and initialize it to the GamePage object in the class constructor.
+
Add a static Instance field to the {{Icode|GamePage}} class and initialize it to the {{Icode|GamePage}} object in the class constructor.
+
 
 +
<code csharp>
 
  public static GamePage Instance = null;
 
  public static GamePage Instance = null;
   
+
</code>
 +
  <code csharp>
 
  public GamePage() {
 
  public GamePage() {
 
   InitializeComponent();
 
   InitializeComponent();
Line 59: Line 62:
 
   _game = XamlGame<YourGameSubclass>.Create("", this); //Where YourGameSubclass is the name of your game-class
 
   _game = XamlGame<YourGameSubclass>.Create("", this); //Where YourGameSubclass is the name of your game-class
 
  }
 
  }
 +
</code>
 
<br />
 
<br />
 
'''Step 3:'''
 
'''Step 3:'''
Define a ''SetupScreenAutoScaling()'' function in your Game subclass that will automatically scale the screen and call it from your Game subclass constructor:
+
Define a {{Icode|SetupScreenAutoScaling()}} function in your Game subclass that will automatically scale the screen and call it from your Game subclass constructor:
 
+
<code csharp>
 
  using System.Windows.Media; // This is needed for ScaleTransform below
 
  using System.Windows.Media; // This is needed for ScaleTransform below
 
+
</code>
 +
<code csharp>
 
  private void SetupScreenAutoScaling() {
 
  private void SetupScreenAutoScaling() {
 
   
 
   
Line 94: Line 99:
 
   GamePage.Instance.XnaSurface.RenderTransform = scaleTransform;
 
   GamePage.Instance.XnaSurface.RenderTransform = scaleTransform;
 
  }
 
  }
 
+
</code>
That's it - you're done!  Your WVGA game is now auto-scaling to WXGA and 720P screen sizes!  
+
That's it - you're done!  Your WVGA game is now auto-scaling to WXGA and 720P screen sizes!
  
 
== Related Issues ==
 
== Related Issues ==

Revision as of 07:37, 12 July 2013

This article explains how to make your WVGA-resolution game built using MonoGame to display full-screen on WXGA and 720P resolution Windows Phones.

WP Metro Icon Joystick.png
WP Metro Icon UI.png
WP Metro Icon WP8.png
Article Metadata
Tested with
SDK: Windows Phone 8 SDK and MonoGame 3.0 SDK
Devices(s): All WVGA, WXGA, and 720P Windows Phone 8 SDK Emulators & Nokia Lumia 620
Compatibility
Platform(s): Windows Phone 8
Windows Phone 8
Article
Created: Dan Colasanti (11 Jul 2013)
Last edited: pavan.pareta (12 Jul 2013)

Introduction

MonoGame doesn't automatically scale WVGA (800x480) games to display full-screen on WXGA (1280×768) or 720P (1280x720) Windows Phones, although this is the expected XNA behavior. Instead, it displays the WVGA game in an 800x480 rectangle in the upper left corner of the screen. Some developers might prefer to resize graphics and adjust code to handle the different screen resolutions, but for those who would prefer to automatically scale their WVGA-designed games to display full-screen on WXGA and 720P phones (for example, those porting existing WP7 XNA games to WP8 with MonoGame), this article shows you how to easily do just that.

This article summarizes my blog post found here: http://www.improvisoft.com/blog/?p=937, and includes step-by-step instructions for auto-scaling your WVGA games to higher resolution phones.

Summary

Use the code below to scale-up your WVGA-resolution WP8 game to fit perfectly on a WXGA (1280×768) screen and display full-height centered with letterboxing on a 720P (1280×720) screen. The trick is to get the GamePage’s DrawingSurface object to do the scaling for you. Here are the 3 easy steps:

Step 1: Your game's GamePage.xaml file should have a DrawingSurface tag, like the one below:

 <grid x:Name="LayoutRoot">
<mediaelement></mediaelement>
<drawingsurface x:Name="XnaSurface"></drawingsurface>
</grid>

Note that a DrawingSurface object contains these fields:

  1. RenderTransform field that can be assigned to a ScaleTransform object
  2. Margin field that can be used to center the game-screen with letterboxing


Step 2: Add a static Instance field to the GamePage class and initialize it to the GamePage object in the class constructor.

 public static GamePage Instance = null;
 public GamePage() {
InitializeComponent();
 
if (Instance != null)
throw new InvalidOperationException("There can be only one GamePage object!");
 
Instance = this;
_game = XamlGame<YourGameSubclass>.Create("", this); //Where YourGameSubclass is the name of your game-class
}


Step 3: Define a SetupScreenAutoScaling() function in your Game subclass that will automatically scale the screen and call it from your Game subclass constructor:

 using System.Windows.Media; // This is needed for ScaleTransform below
 private void SetupScreenAutoScaling() {
 
// Get the screen’s WVGA ''ScaleFactor'' via reflection. scaleFactor will be 100 (WVGA), 160 (WXGA), or 150 (WXGA).
int? scaleFactor = null;
var content = App.Current.Host.Content;
var scaleFactorProperty = content.GetType().GetProperty("ScaleFactor");
 
if (scaleFactorProperty != null)
scaleFactor = scaleFactorProperty.GetValue(content, null) as int?;
 
if (scaleFactor == null)
scaleFactor = 100; // 100% WVGA resolution
 
double scale = ((double)scaleFactor)/100.0; //scale from WVGA to Viewport Bounds
 
// For 720P, we will scale to 150% WVGA resolution, resulting in a 1200x720 viewport inside a 1280x720 screen,
// which is why letterboxing will be required. By centering the viewport on the screen, it will be less noticeable.
 
if (scaleFactor == 150) {
// Centered letterboxing - move Margin.Left to the right by ((1280-1200)/2)/scale
GamePage.Instance.XnaSurface.Margin = new System.Windows.Thickness(40/scale, 0, 0, 0);
}
 
// Scale the XnaSurface:
 
ScaleTransform scaleTransform = new ScaleTransform();
scaleTransform.ScaleX = scaleTransform.ScaleY = scale;
GamePage.Instance.XnaSurface.RenderTransform = scaleTransform;
}

That's it - you're done! Your WVGA game is now auto-scaling to WXGA and 720P screen sizes!

Related Issues

Landscape Orientation Support

Unlike XNA, MonoGame 3.0 supports Portrait games by default. To create a game with only Landscape orientations (like the XNA default), add the following to your game class constructor:

graphics.SupportedOrientations =
DisplayOrientation.LandscapeLeft | DisplayOrientation.LandscapeRight;

and change the SupportedOrientations in your GamePage.xaml’s phoneapplicationpage markup:

<phone:phoneapplicationpage
 ...
SupportedOrientations="Landscape" Orientation="Landscape"

Preferred Back Buffer Size

MonoGame doesn’t do anything with graphics.PreferredBackBufferWidth or graphics.PreferredBackBufferHeight – if you used their 800x480 defaults in your XNA game, you’ll find that they’re zeroed in MonoGame and setting them to anything else has no effect on the game’s behavior.

Viewport Width and Height

Viewport.Width and Height are adjusted by MonoGame to the scaled viewport sizes in the above function, so the Viewport rectangle will be larger than WVGA graphics resolution on WXGA and 720P screens. In using the function above, any text and graphics that should be visible in your game should be drawn within the WVGA dimensions (rather than the resulting viewport dimension). For example, don't horizontally-center text within the Viewport dimensions, center it within WVGA's 800-pixel width instead.

373 page views in the last 30 days.