×
Namespaces

Variants
Actions

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

From Nokia Developer Wiki
Jump to: navigation, search

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: hamishwillee (22 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 phone application page 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 behaviour.

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-centre text within the viewport dimensions, centre it within WVGA's 800-pixel width instead.

This page was last modified on 22 July 2013, at 10:47.
228 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×