Introduction
It is great fun to work in Silver light technology and it is very exciting experience for me to develop game in web. This article has good stuff for beginners who want to develop game in silver light technology.
Bubble breaker is a puzzle game developed in Silver Light. Select bubbles with same color by clicking and destroy by clicking. The more you break with one click the higher score you get.
Draw Bubble
The XAML of the Bubblecontrol is very simple. I used Canvascontrol as a container because Canvascontrol provides to positioning controls. CanvasContains Bordercontrol as a child control, which allows to set Top and Left coordinates easily. Finally Buttonis a child of Bordercontrol which will draw actual Bubble shape.
Collapse<Canvas>
<Border x:Name="CanvasBubble" Width="26" Height="26" RenderTransformOrigin="0.5,0.5">
<Button x:Name="btnBubble" Height="Auto" Width="Auto"
Style="{StaticResource ButtonStyleBlue}" Click="btnBubble_Click"
Background="AliceBlue" BorderThickness="0,0,0,0" HorizontalAlignment="Center"
VerticalAlignment="Center" MouseLeave="btnBubble_MouseLeave" Cursor="Hand"
RenderTransformOrigin="0.5,0.5">
</Button>
</Border>
</Canvas>
Template and Style
In silver light we can easily change the default shape of the controls. As I changed the default shape of the Button to circle. Expression blend provides an easy way to change/create Template for controls. Right click on element and select “Edit Control Parts(Template)” and then select “Create Empty”. It opens dialog where you give a name of template and press ok. Then it shows design view where user can create/change template.
You can also create styles for controls in silver light. As I set style for button using Style="{StaticResource ButtonStyleBlue}"property. For creating style select control from “Object and Timeline” panel and then click “Object” from menu, click on “Edit Style” and select “Create Empty”. It opens a form where you can set style.
Bubble Breaker has five colors of bubble and I created style for each color. I did not create separate template. Each style has its on template.
Collapse
<Style x:Key="ButtonStyleBlue" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Ellipse Height="25" Width="25" StrokeThickness="1" x:Name="ellipse"
RenderTransformOrigin="0.5,0.5" Stroke="#FF000000" Margin="0,0,0,0">
........
........
</Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can easily set control style at runtime.
Collapse
switch (_bubbleColor)
{
case BubbleColor.Blue:
{
btnBubble.Style = (Style)App.Current.Resources["ButtonStyleBlue"];
break;
}
case BubbleColor.Red:
{
btnBubble.Style = (Style)App.Current.Resources["ButtonStyleRed"];
break;
}
case BubbleColor.Green:
{
btnBubble.Style = (Style)App.Current.Resources["ButtonStyleGreen"];
break;
}
}
Animate Bubble
You can easily animate controls in Silver light. Click on “+” Button. It opens a dialog where you give the name of “Story Board”. StoryBoard is container where you can put animation objects. Story Board saves as a resource that is available to the object that you want to animate.
Collapse
<UserControl.Resources>
<Storyboard x:Name="StoryboardShakeBubble" RepeatBehavior="Forever">
......
......
</Storyboard>
</UserControl.Resources>
StoryBoardprovides Begin()method to start animation and Stop()method to stop animation.
Collapse
if (Seleted)
{
StoryboardShakeBubble.Begin();
}
else
{
StoryboardShakeBubble.Stop();
}