Adding Thrust
Full source for this tutorial: http://www.bluerosegames.com/silverlight-games-101/samples/AddingThrust.zip
A famous April Fools Day network RFC stated:
With sufficient thrust, pigs fly just fine. However, this is not necessarily a good idea. It is hard to be sure where they are going to land, and it could be dangerous sitting under them as they fly overhead.
Fortunately, we're not dealing with pigs, we're dealing with space ships, although a DreamBuildPlay contest warmup entry replaced space ships with space cows http://udderassault.whatsupnow.com/ so I guess you could make this game with space pigs, but I digress.
So what do we need to do to make the ship move around the screen?
- We need to store the current velocity and current position of the ship somewhere
- When the "up" key is pressed, we need to change the velocity based on the direction the ship is currently pointing, and compare this new value against the maximum velocity of the ship and adjust it appropriately if it exceeds the max velocity
- Based on the velocity, we need to reposition the ship in the game loop
- If the ship hits an edge, we need to "wrap" to the other end of the screen by repositioning the ship
During my previous work with game frameworks, the data type that was used more than any other was the Vector. Unfortunately, the Vector value type is available in WPF, but is omitted in Silverlight 2. Because I feel it is important to have access to Vector in game programming, I have implemented my own version of the Vector struct in BlueRoseGames.Helpers. It follows the interface of the WPF version, so if it becomes available, it should be easy to switch.
Vectors are made up of a direction and a magnitude, and in games programming, are most commonly represented as an X and Y value. A vector with a magnitude of 3 in the X direction and 1 in the Y direction can be written as (3,1). We will be using Vectors to store the velocities of our sprites in this game.
Repositioning a Sprite
It may seem strange at first that the User Interface elements in Silverlight don't have a Left or Top property. The explanation that I have heard for this is that Canvases (and other Xaml graphics elements) are not always absolutely positioned, many times they are in a "flow" layout, where there is no absolute positioning, it is all relative to the container and other elements within that container. For this reason, the absolute positioning properties are not built in to the object, and must be accessed indirectly through the SetValue and GetValue methods.
So to set the Left position of an element, you do something like the following:
this.SetValue(Canvas.LeftProperty, 100d);
Since this is a bit verbose, let's encapsulate this logic in a Property. Position and Velocity are going to be needed for each sprite in our game, so it makes sense to create a class which our other sprites can inherit from so that we don't have to duplicate this logic. So let's create a user control called Sprite in our SpaceRocks project. Here is the XAML for the Sprite user control:
<UserControl x:Class="SpaceRocks.Sprite"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="50" Height="50" RenderTransformOrigin=".5,.5">
<UserControl.RenderTransform>
<RotateTransform x:Name="rotate"/>
</UserControl.RenderTransform>
<Grid x:Name="LayoutRoot" Background="Red">
</Grid>
</UserControl>
And this is the code behind:
using System.Windows;
using System.Windows.Controls;
using BlueRoseGames.Helpers;
namespace SpaceRocks
{
public partial class Sprite : UserControl
{
Point position;
public Vector Velocity;
public Sprite()
{
InitializeComponent();
}
public Sprite(FrameworkElement content)
{
InitializeComponent();
this.Content = content;
this.Width = content.Width;
this.Height = content.Height;
}
public Point Position
{
set
{
position = value;
this.SetValue(Canvas.LeftProperty, value.X - Width / 2);
this.SetValue(Canvas.TopProperty, value.Y - Height / 2);
}
get
{
return position;
}
}
public double RotationAngle
{
get
{
return rotate.Angle;
}
set
{
rotate.Angle = value;
}
}
}
}
Notice that when setting the position, we subtract half the length and half the width. This is so that Position actually corresponds to the center of the object. This is a matter of preference and also depends on the type of game. In this case, I felt it made sense to center the objects around their position values. If the X and Y values were set without this offset, the position of the sprite would correspond to the top left corner.
Now instead of declaring the ship sprite in the Page.xaml, let’s declare the Ship as type Sprite and create it in the Page constructor. First in Page.xaml.cs, declare the ship sprite:
Then make the Page constructor look like this:
public Page()
{
InitializeComponent();
ship = new Sprite();
ship.Position = new Point(320, 240);
gameSurface.Children.Add(ship);
this.GotFocus += new RoutedEventHandler(Page_GotFocus);
this.LostFocus += new RoutedEventHandler(Page_LostFocus);
this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
gameLoop = new CompositionTargetGameLoop();
gameLoop.Update += new GameLoop.UpdateHandler(gameLoop_Update);
keyHandler = new KeyHandler(this);
}
So basically we’re creating the sprite for the ship, setting its position, and adding it to the gameSurface canvas. Everything else can stay the same. Now if you run the game, it will look like this:
The sprite is a red block since that’s what the XAML for the Sprite control has by default. Notice, however, that there’s another constructor on the Sprite control which takes a FrameworkElement:
public Sprite(FrameworkElement content)
{
InitializeComponent();
this.Content = content;
this.Width = content.Width;
this.Height = content.Height;
}
When you use this one, whatever is specified for the FrameworkElement is used as the content for the sprite. So if we change the ship creation in the Page constructor to this:
ship = new Sprite(new Ship());
Then things will look and behave like they did before. The difference is that now we have a Sprite control that we can reuse for other sprites in the game and it can have our common sprite logic in it.
Now to add code to change the position of the ship. First, if we're thrusting, we need to modify the velocity of the ship based on the ship's current rotation. Let's add a method to the Sprite class called Thrust, and a couple of helper methods:
private double DegreesToRadians(double degrees)
{
double radians = ((degrees / 360) * 2 * Math.PI);
return radians;
}
public Vector CreateVectorFromAngle(double angleInDegrees, double length)
{
double x = Math.Sin(DegreesToRadians(180 - angleInDegrees)) * length;
double y = Math.Cos(DegreesToRadians(180 - angleInDegrees)) * length;
return new Vector(x, y);
}
public void Thrust(TimeSpan ElapsedTime)
{
Vector v = CreateVectorFromAngle(RotationAngle, ElapsedTime.TotalSeconds * 300);
Velocity += v;
if (Velocity.Length > 500)
{
Velocity *= (500 / Velocity.Length);
}
}
So what does this do? It converts the current rotation and a magnitude to a Vector. This Vector is in the direction that the ship is currently facing. Then we add that to the current velocity. Then, if the magnitude (Length) of the Velocity is greater than a maximum Velocity of 500, we scale the Velocity vector to have a magnitude of 500.
Now, we need code to call the Thrust method if a certain key is pressed. We'll use the "W" key. So in the gameLoop_Update method in the Page class, add the following:
if (keyHandler.IsKeyPressed(Key.W))
{
ship.Thrust(elapsed);
}
Now all we need to do is to update the position based on the velocity for the sprite in the game loop. We also need to see if the sprite has gone off the screen, and if so, we need to wrap it to the other edge of the screen. Add the following to the Sprite class:
Point WrapPositionToScreen(Point p)
{
Point result = p;
if (result.X > 640) result -= new Vector(640, 0);
if (result.X < 0) result += new Vector(640, 0);
if (result.Y > 480) result -= new Vector(0, 480);
if (result.Y < 0) result += new Vector(0, 480);
return result;
}
public void Update(TimeSpan ElapsedTime)
{
Position = WrapPositionToScreen(Position + Velocity * ElapsedTime.TotalSeconds);
}
And then in the gameLoop_Update method of the Page class, call this update method for the ship object:
and we're done for now. Run the program again and you should be able to maneuver the ship.