My Profile
Gifts
Active Members
TodayLast 7 Days
more...
|
The Padding Ball game in WPF
Posted Date: 05 Jun 2008 Resource Type: Articles Category: .NET Framework
|
Posted By: Balamurali Balaji Member Level: Diamond
Rating:  Points: 90
|
Padding Ball v1.0
Introduction
Remember, in those good olden days, there was a game to play the ball that moves around all corners of your screen using a little pad and the “Brick and Ball” game that had swept all our joy by breaking the bricks stacked on top of the window. One could not easily forget the same game available in windows form in the recent days.
This article deals with the development of a little game called “Paddling Ball” using WPF technology and is just a demo-like game that uses minor user interactions with not so much of graphical items in it.
Game Window
XAML allows you to create menu, ball and pad objects declaratively as below:
<Window x:Class="PaddingBall.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Padding Ball v1.0" Height="500" Width="700" Background="Gray" Name="playground" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" SizeToContent="Manual">
<Canvas Width="700" Height="500">
<Menu VerticalAlignment="Top" HorizontalAlignment="Left"
Height="20" Width="700" Background="AliceBlue" Foreground="Blue">
<MenuItem Header="File">
<MenuItem Header="Start Game" Background="AliceBlue" Click="StartGame"></MenuItem>
<MenuItem Header="Exit" Background="AliceBlue" Click="ExitGame"></MenuItem>
</MenuItem>
<MenuItem Header="About" Click="ShowAboutBox"></MenuItem>
</Menu>
<Grid Height="462" Width="700">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="700*" />
<ColumnDefinition Width="0*" />
<ColumnDefinition Width="0*" />
</Grid.ColumnDefinitions>
<Rectangle Margin="114,132,0,0" Name="ball" Stroke="Black" RadiusX="120" RadiusY="120" Fill="Blue" Height="38" VerticalAlignment="Top" Stretch="UniformToFill" HorizontalAlignment="Left" Width="38">
<Rectangle.BitmapEffect>
<BevelBitmapEffect BevelWidth="11" />
</Rectangle.BitmapEffect>
<Rectangle.BitmapEffectInput>
<BitmapEffectInput />
</Rectangle.BitmapEffectInput>
</Rectangle>
<Rectangle Height="13" Margin="200,390,0,0" Name="pad" Stroke="Black" VerticalAlignment="Bottom" Fill="Black" HorizontalAlignment="Left" Width="100" />
</Grid>
</Canvas>
</Window>
As you look at it, each of the menuitem is bind to the respective event handlers for the Click event. When you open the application, you could see a window with the Menu bar on top of it. You start the game by selecting the “Start Game” command in the File menu.
WPF implications
While developing this game with WPF, I had experienced a part easier when the drawings for Ball and Pad, the background are created, thanks to XAML. On the other hand, the behaviour part of the game still had its own intricacies especially during the animation of the ball and pad. Nevertheless, the controlling of animation with the keyboard interaction by the user had also thrown new ideas in WPF programming.
Most of the animation and positioning of ball and pad was done with the Thickness structure found in System.Windows namespace and ThicknessAnimation class found in System.Windows.Media.Animation namespace of the PresentationFramework.dll assembly.
The Thickness structure describes the thickness of a frame around a rectangle, in this case, Ball and Pad. Four Double values describe the Left, Top, Right, and Bottom sides of the rectangle that encapsulates the Ball and Pad objects, respectively.
The ThicknessAnimation class creates a transition between two target values. To set its target values, use its From and To properties of the Ball and Pad elements inside the window.
Needless to say, we need a StoryBoard object to host the whole animation. The ThicknessAnimation instances created for Ball and the Pad objects, along with the specified duration is added as a child to the StoryBoard and use the Begin method to start the animation.
Here is the code for animating the Pad as the user presses the Right and Left arrow keys.
void AnimatePad(double x)
{
moveThePad = new ThicknessAnimation();
moveThePad.From = PadCurrentPos;
moveThePad.To = new Thickness(pad.Margin.Left+x, pad.Margin.Top, 0, 0);
moveThePad.Duration = new Duration(TimeSpan.FromSeconds(0));
Storyboard.SetTargetName(moveThePad, "pad");
Storyboard.SetTargetProperty(moveThePad, new PropertyPath(Rectangle.MarginProperty));
PlayPad = new Storyboard();
if (PlayPad.Children.Count > 0)
PlayPad.Children.RemoveAt(0);
PlayPad.Children.Add(moveThePad);
PlayPad.Begin(this, true);
}
The value x refers to the increment or decrement values specified for the target location(Left property of the Margin) for the pad. This could be easily done by writing the following code in the KeyDown event of the Window.
void playground_KeyDown(object sender, KeyEventArgs e)
{
PadCurrentPos = pad.Margin;
double xPadValue=0;
if (e.Key == Key.Left)
if (pad.Margin.Left > -100)
xPadValue = -50;
if (e.Key == Key.Right)
if (pad.Margin.Left <= (playground.Width - pad.Width))
xPadValue = 50;
AnimatePad(xPadValue);
}
Animating the Ball
When the Ball moves around within the window, the Left and Top properties of the Margin property changes and promptly triggers the LayoutUpdated event of the particular WPF element. Therein, we can write some code to control the behaviour of the animated Ball like checking if it crosses the boundaries of the window or if the Ball is hit by the Pad.
void ball_LayoutUpdated(object sender, EventArgs e)
{
BallCurrentPos = ball.Margin;
if (((ball.Margin.Top - ball.Height) >= pad.Margin.Top) && ball.Margin.Left >= pad.Margin.Left && ball.Margin.Left <= (pad.Margin.Left + 30))
{
BallNextPos.Top = 0;
BallNextPos.Left = BallCurrentPos.Left - 200;
AnimateBall(BallNextPos, BallCurrentPos);
}
else if (((ball.Margin.Top - ball.Height) >= pad.Margin.Top) && ball.Margin.Left >= (pad.Margin.Left + 30) && ball.Margin.Left <= (pad.Margin.Left + 60))
{
BallNextPos.Top = 0;
AnimateBall(BallNextPos, BallCurrentPos);
}
else if (((ball.Margin.Top - ball.Height) >= pad.Margin.Top) && ball.Margin.Left >= (pad.Margin.Left + 60) && ball.Margin.Left <= (pad.Margin.Left + 100))
{
BallNextPos.Top = 0;
BallNextPos.Left = BallCurrentPos.Left + 200;
AnimateBall(BallNextPos, BallCurrentPos);
}
else if (ball.Margin.Top <= 5)
{
BallNextPos.Top = playground.Height;
AnimateBall(BallNextPos, BallCurrentPos);
}
else if (ball.Margin.Left <= 0)
{
BallNextPos.Left = playground.Width;
AnimateBall(BallNextPos, BallCurrentPos);
}
else if (ball.Margin.Left >= playground.Width - 50)
{
BallNextPos.Left = 0;
AnimateBall(BallNextPos, BallCurrentPos);
}
}
You would get useful information and instructions about the game when you select the “About” command in the menu bar.
Summary
It is a nice experience to go back and bring the Pad and Ball to the WPF environment. There is still a lot more to do with this such as Duration of the Game, Number of Balls, and Counting of points scored by the player, besides just playing the ball with the pad. When these features get implemented, it would be perfect game for anyone to see WPF in full action. Hope I would come up with these things with the version 2 of the game.
|
Responses
|
| Author: shyamalendu prusty 06 Jun 2008 | Member Level: Silver Points : 0 | good one.
| | Author: Mahesh Raj 07 Jun 2008 | Member Level: Gold Points : 1 | This is very good information,Continue posting such useful articles.
|
|