Bubble Breaker in Silverlight

A good tutorial for beginner’s to develop game in Silverlight.

Introduction

It is great fun to work in Silverlight 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 silverlight technology.

Bubble breaker is a puzzle game developed in Silverlight. 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 Bubble control is very simple. I used Canvas control as a container because Canvas control provides to positioning controls. Canvas Contains Border control as a child control, which allows to set Top and Left coordinates easily. Finally Button is a child of Border control which will draw actual Bubble shape.

<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 silverlight 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 silverlight. 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.  

<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.

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 Silverlight. 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.

UserControl.Resources>
   <Storyboard x:Name="StoryboardShakeBubble" RepeatBehavior="Forever">
    ......
    ......
   </Storyboard>
</UserControl.Resources>

StoryBoard provides Begin() method to start animation and Stop() method to stop animation.

if (Seleted)
{
    StoryboardShakeBubble.Begin();
}
else
{
    StoryboardShakeBubble.Stop();
}