DCSIMG
Windows Phone: Combining Silverlight & XNA in a Single Page - Pavel's Blog
Sign in | Join | Help

Pavel's Blog

Pavel is a software guy that is interested in almost everything
software related... way too much for too little time

Windows Phone: Combining Silverlight & XNA in a Single Page

Published at Oct 26 2011, 09:30 PM by pavely | 0 comment(s)

There are two very distinct ways to program on Windows Phone 7.x: Silverlight & XNA. Silverlight is about UI, retained graphics and is event driven. XNA is about immediate mode graphics, based on a timer and polling; Very different models indeed. Each has its strengths and weaknesses. One of the new features in WP7.1 (“mango”) is the ability to combine the two to get the best of both worlds.

Here’s a typical scenario where this need may come up: suppose you’re developing an XNA game (2D or 3D). In a typical game you need to allow some configuration, such as setting volume, level of play or simply showing a high score table. XNA is not built for that. Although you could some up with your own controls such as buttons, list, etc. implemented in XNA, that would be a lot of work, and might not look like the “native” Silverlight counterparts. If you could combine a Silverlight page with some controls and some XNA content – you would have a nice solution to the problem.

Here’s how to do that. First, we’ll start with a project template that is part of the latest Mango tools for Visual Studio 2010 called “Silverlight and XNA Application”:

image

This template sets up some tedious boilerplate code for things to start actually working. The main project has two pages: the first, MainPage.xaml is a Silverlight only page. It just hosts a single button that causes navigation to the other page, GamePage.xaml. Since the main page is not useful for our purposes, I’ll remove it and set the start page to be GamePage.xaml in WMAppManifest.xml:

  1.   <Tasks>
  2.       <DefaultTaskName ="_default" NavigationPage="GamePage.xaml"/>
  3.   </Tasks>

Next, we want to create some Silverlight UI that should function correctly along with some XNA content. This is what I added in GamePage.xaml:

  1. <Grid LayoutUpdated="Grid_LayoutUpdated" x:Name="_mainGrid">
  2.     <Grid.RowDefinitions>
  3.         <RowDefinition />
  4.         <RowDefinition Height="Auto" />
  5.     </Grid.RowDefinitions>
  6.     <Rectangle x:Name="_rect" Stroke="Transparent" Fill="Transparent" />
  7.     <StackPanel Grid.Row="1" Orientation="Horizontal" Background="Black">
  8.         <Button Content="Reset" Click="OnReset"/>
  9.         <TextBlock Text="Balls:" Margin="10,0,0,0" VerticalAlignment="Center" />
  10.         <Slider Value="1" Minimum="1" Maximum="30" Width="280" Margin="10,0,0,0"
  11.                 ValueChanged="OnChangeBalls"/>
  12.     </StackPanel>
  13. </Grid>

Disregard the event handlers for now. This is how it looks in the designer:

image

Let’s try running the application as it stands. The result (in the emulator) is pretty disappointing:

SNAGHTML5b676b

The UI we just created is nowhere to be found. In actuality, it’s all there. I can even press the button if I can guess where it is. The problem is that XNA “takes over” and draws itself on top of everything, including the Silverlight generated UI.

How do we deal with that? I just want the XNA part to be above the controls I’ve placed. For this, we have to render the Silverlight UI into a texture, and then render that texture with the XNA scene, just like any other texture.

The key class here is UIElementRenderer. We’ll add a reference of that type to the GamePage class and create one in the LayoutUpdated event of the page:

  1. private void Grid_LayoutUpdated(object sender, EventArgs e) {
  2.     if(_uiRenderer == null)
  3.         _uiRenderer = new UIElementRenderer(_mainGrid, (int)_mainGrid.ActualWidth, (int)_mainGrid.ActualHeight);
  4. }

This UIElementRenderer can render the supplied element (via its Render method) (the main Grid in our example) into a texture. Then, we can render the texture like any other in XNA using a SpriteBatch – all this in the OnDraw supplied method, called each and every frame:

  1. private void OnDraw(object sender, GameTimerEventArgs e) {
  2.     SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.LightBlue);
  3.  
  4.     _uiRenderer.Render();
  5.     spriteBatch.Begin();
  6.     spriteBatch.Draw(_uiRenderer.Texture, new Vector2(0, 0), Color.White);
  7.     spriteBatch.End();
  8. }

Note that we don’t actually need to create that texture. It’s created internally by the UIElementRenderer. If we run the app now, we should see the Silverlight UI on top of the light blue background:

SNAGHTMLce342d

Now that the hard part is out of the way, let’s add some interesting XNA content to be rendered within the area reserved for it.

I’ve added a colored “ball” texture, created a Texture2D field to hold it, and load it in the OnNavigatedTo override (if it hasn’t been loaded already):

  1. protected override void OnNavigatedTo(NavigationEventArgs e) {
  2.     // Set the sharing mode of the graphics device to turn on XNA rendering
  3.     SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(true);
  4.  
  5.     // Create a new SpriteBatch, which can be used to draw textures.
  6.     spriteBatch = new SpriteBatch(SharedGraphicsDeviceManager.Current.GraphicsDevice);
  7.     if(_ballTexture == null)
  8.         _ballTexture = contentManager.Load<Texture2D>("colorwheel");
  9.  
  10.     // Start the timer
  11.     timer.Start();
  12.  
  13.     base.OnNavigatedTo(e);
  14. }

I’ve created a simple class to hold some state of a ball object. I’d like to create several of those, and move them around the light blue area. Here’s the simple Ball class:

  1. public class Ball {
  2.     public Vector2 Speed { get; set; }
  3.     public Vector2 Position { get; set; }
  4.     public float RotationAngle { get; set; }
  5.     public float RotationSpeed { get; set; }
  6. }

Every ball has its own position, speed, rotation angle and rotation speed (around its own axis). Now let’s add a List<Ball>  field (_balls) to hold those, create one when the page is loaded and add or remove balls whenever the slider’s value change:

First, a general method to create a new, randomized ball:

 

  1. Ball CreateNewBall() {
  2.     var ball = new Ball {
  3.         Position = new Vector2(_rnd.Next((int)_rect.ActualWidth - _ballTexture.Width / 2), _rnd.Next((int)_rect.ActualHeight - _ballTexture.Height / 2)),
  4.         Speed = new Vector2((float)_rnd.NextDouble() * 8 - 4, (float)_rnd.NextDouble() * 8 - 4),
  5.         RotationAngle = (float)_rnd.NextDouble() * 360,
  6.         RotationSpeed = (float)_rnd.NextDouble() * 1.5f - .75f
  7.     };
  8.     return ball;
  9. }

_rnd is a Random instance, created at construction time, and _rect is a transparent Rectangle that is stretched to the first row of our grid (where the XNA content resides).

When the page is loaded, create a single ball (in the GamePage constructor):

  1. Loaded += delegate {
  2.     _balls.Add(CreateNewBall());
  3. };

Whenever the slider value changes, we’ll update the number of balls (in the _balls object):

  1. private void OnChangeBalls(object sender, RoutedPropertyChangedEventArgs<double> e) {
  2.     if(_rect == null) return;
  3.     int value = (int)e.NewValue;
  4.  
  5.     if(value < _balls.Count)
  6.         _balls.RemoveRange(value, _balls.Count - value);
  7.     else {
  8.         int count = _balls.Count;
  9.         for(int i = 0; i < value - count; i++)
  10.             _balls.Add(CreateNewBall());
  11.     }
  12. }

Now we need to update the balls position (and speed, if a ball hits the boundaries of the “game field”). This is done in the OnUpdate method, supplied by the project template (similar to a classic XNA Update method). I’ve also added some code that allows the user to touch a ball and swirl it to some direction based on finger drag:

  1. private void OnUpdate(object sender, GameTimerEventArgs e) {
  2.         if(TouchPanel.IsGestureAvailable) {
  3.             var sample = TouchPanel.ReadGesture();
  4.             foreach(var ball in _balls) {
  5.                 if(Math.Abs(sample.Position.X - ball.Position.X) < _ballTexture.Width / 2
  6.                     && Math.Abs(sample.Position.Y - ball.Position.Y) < _ballTexture.Height / 2) {
  7.                     // found ball
  8.                     ball.Speed = new Vector2(Math.Min(25, sample.Delta.X), Math.Min(25, sample.Delta.Y));
  9.                     break;
  10.                 }
  11.             }
  12.         }
  13.  
  14.         foreach(var ball in _balls) {
  15.             // update ball position
  16.             Vector2 pos = ball.Position + ball.Speed;
  17.             if(pos.X < _ballTexture.Width / 2) {
  18.                 pos.X = _ballTexture.Width / 2;
  19.                 ball.Speed = new Vector2(-ball.Speed.X, ball.Speed.Y);
  20.             }
  21.             else if(pos.X > (float)_rect.ActualWidth - _ballTexture.Width / 2) {
  22.                 pos.X = (float)_rect.ActualWidth - _ballTexture.Width / 2;
  23.                 ball.Speed = new Vector2(-ball.Speed.X, ball.Speed.Y);
  24.             }
  25.             else
  26.                 pos.X += ball.Speed.X;
  27.  
  28.             if(pos.Y < _ballTexture.Height / 2) {
  29.                 pos.Y = _ballTexture.Height / 2;
  30.                 ball.Speed = new Vector2(ball.Speed.X, -ball.Speed.Y);
  31.             }
  32.             else if(pos.Y > (float)_rect.ActualHeight - _ballTexture.Height / 2) {
  33.                 pos.Y = (float)_rect.ActualHeight - _ballTexture.Height / 2;
  34.                 ball.Speed = new Vector2(ball.Speed.X, -ball.Speed.Y);
  35.             }
  36.             else
  37.                 pos.Y += ball.Speed.Y;
  38.  
  39.             ball.Position = pos;
  40.  
  41.             ball.RotationAngle += ball.RotationSpeed;
  42.         }
  43.     }

The next step is drawing the balls, as they’re simply updating positions for now. This is done in another project-supplied method, OnDraw (where we rendered our Silverlight UI):

  1. private void OnDraw(object sender, GameTimerEventArgs e) {
  2.     SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.LightBlue);
  3.  
  4.     _uiRenderer.Render();
  5.     spriteBatch.Begin();
  6.     spriteBatch.Draw(_uiRenderer.Texture, new Vector2(0, 0), Color.White);
  7.     foreach(var ball in _balls)
  8.         spriteBatch.Draw(_ballTexture, ball.Position, null, Color.White, ball.RotationAngle, new Vector2(_ballTexture.Width / 2, _ballTexture.Height / 2), 1.0f, SpriteEffects.None, 0);
  9.     spriteBatch.End();
  10. }

That’s basically it. I’ve also added a handler for the “Reset” button that creates randomly a new set of balls (you can look it up in attached code). This is how it looks with several balls all bouncing at different speeds, directions and rotations:

SNAGHTMLd9dd48

You can simply watch, or catch & drag some ball to change its direction or speed…

תגים:, , , , , , ,

Comments List

No Comments

Leave a Comment

(required) 
(
required
) 
(optional)
(required) 

Enter the numbers above: