Question

I created a simple 2D game in XNA for Windows and Xbox. I’m in the process of porting this game to Silverlight 5 (at the time of this writing, still in RC), which supports SpriteBatch, Texture2D, and all sorts of other XNA goodies that I’m using in my game. I successfully ported most of my code to Silverlight, but I’m still struggling with resolution/sizing issues.

My original code and content are configured to work at a resolution of 1280×720 — and I want to keep it that way — but I want to embed the Silverlight game on a webpage at a more manageable size: 640×360 (half of its original size).

So my question is this: How can I shrink an entire Silverlight app to 50% of its original size?

I think I’m on the right track, but I can’t quite get it working. I discovered the RenderTransform and ScaleTransform XAML elements, and they seem to almost accomplish what I’m looking for, but not quite. My XAML looks like this:

<!-- Some attributes omitted for brevity -->
<UserControl x:Class="Silverlight3dApp.MainPage"
  d:DesignWidth="1280"
  d:DesignHeight="720">

  <Grid x:Name="LayoutRoot" Background="White">
    <Grid.RenderTransform>
      <ScaleTransform x:Name="Scale" ScaleX="0.5" ScaleY="0.5" />
    </Grid.RenderTransform>
    <DrawingSurface x:Name="myDrawingSurface" Draw="myDrawingSurface_Draw" />
  </Grid>
</UserControl>

And my HTML object looks like this:

<object data="data:application/x-silverlight-2,"
  type="application/x-silverlight-2"
  width="640"
  height="360">
  <!-- etc. -->
</object>

So the embedded HTML object is set to 640×360 (as desired), and the Silverlight app is set to 1280×720 but then scaled to 0.5 for both ScaleX and ScaleY. This kind of works; the app is being scaled down to 50% size, but the content that’s drawn is cropped. I can only see the upper left quadrant, so I only see 320×180 worth of content (what would have been 640×360 at the original size).

The X’s in this crude drawing represent where I see content in the Silverlight embedded object, everything else is abruptly cropped and empty:

 ___________
|XXXXX      |
|XXXXX      | 360px
|           |
|___________|
    640px

I’m a Silverlight noob, so I have a feeling I’m missing something obvious. Any ideas?

Answer 1

I think with the way the XNA integration works you’ll need to actually draw at 50% size. This is pretty easy to do if you’re using SpriteBatch, just use the overload of Begin that lets you specify a Matrix:

spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend,
    SamplerState.LinearClamp, DepthStencilState.None, 
    RasterizerState.CullCounterClockwise, null, Matrix.CreateScale(.5f));