Learn Silverlight and Blend

Nibbles offers some quick tutorials for Silverlight and Blend. Quite a nice reading.

Silverlight vs Flash

This game got famous today on digg.com. It`s a really nice flash game which requires logic. Loved the game but..when I read a MS blog I got to another Silverlight sample game. If you take a closer look at things you can see that the concept of the game is the same. I wonder how much time was needed to create the game in Flash and Silverlight. Until we find that out..enjoy the games.

Silverlight samples and code

If you enjoyed Richard Zadorozny`s bar chart, pie char or the graph you can now download the source code. This is the best way you can learn Silverlight programming.

(source)

The Start Function(Part 4)

This is part of a series of articles that shows the creation of a Silverlight game. Please read part 1,part 2 or part 3 if you haven`t done so yet.

   1:  void Start(int size,double blockProbability,Point StartPosition,Point EndPosition)

The Start function receives 4 parameters:

• size - the width and the height of the board.


• blockProbability - the probability of a blocking block to appear. Should increase as the level gets higher.


• StartPosition - the point of origin for the red rectangle


• EndPosition - the point where the red rectangle needs to get(yellow rectangle)

   2:          {

   3:              startPoint = new Point(StartPosition.X * multiplier, StartPosition.Y * multiplier);

   4:              endPoint = new Point(EndPosition.X * multiplier, EndPosition.Y * multiplier);

   5:   

We use the multiplier in order to transform from logical points to real pixels and we initialize the startPoint and the endPoint variable.

   6:              NextLevel.Visibility = Visibility.Collapsed;

   7:              NextLevelText.Visibility = Visibility.Collapsed;

   8:              Congratulations.Visibility = Visibility.Collapsed;

Here we just hide the Congratulations text(should only be visible when the user wins), the next level button which should also be visible only when the user wins and the text on top of the next level button.

   9:              steps = 0;

  10:              isMoving = false;

  11:              map = new int[size, size];

  12:              int unpassable = 0;

Here we initialize some counters. First the number of steps that the user has made must be 0. Then we say that the red rectangle is not moving. Also we initialize the map that will be composed of 0s and 1s and we initialize the variable that counts the number of unpassable regions.

  13:              for (int i = 0; i < size; i++)

  14:              {

  15:                  for (int j = 0; j < size; j++)

  16:                  {

  17:                      map[i, j] = (r.NextDouble() < blockProbability) ? 1 : 0;

  18:                      map[(int)StartPosition.X, (int)StartPosition.Y] = 0;

  19:                      map[(int)EndPosition.X, (int)EndPosition.Y] = 0;

  20:                      if (map[i, j] == 0)

  21:                      {

  22:                          AddNewRectangle(new Point(i , j ), Colors.Green);

  23:                      }

  24:                      if (map[i, j] == 1)

  25:                      {

  26:                          unpassable++;

  27:                          AddNewRectangle(new Point(i , j ), Colors.Black);

  28:                      }

  29:                  }

  30:              }

Setups the map that will be displayed. The map will be completely random and will display in avarage (blockProbability*100)% unpassable blocks. We also increase the counter of unpassable blocks each time we generate one. The function AddNewRectangle just adds a new rectangle to the board and will be discussed later.

  31:              Unpassable.Text = unpassable.ToString();

  32:              CurrentLevel.Text = level.ToString();

We display the number of unpassable blocks and the current level on the screen.

  33:              //setup visibility and location of helper objects

  34:   

  35:              Congratulations.SetValue(Canvas.TopProperty, size * multiplier + 5);

  36:              NumberOfSteps.SetValue(Canvas.TopProperty, size * multiplier + 5);

  37:              NumberOfStepsText.SetValue(Canvas.TopProperty, size * multiplier + 5);

  38:              NextLevelText.SetValue(Canvas.LeftProperty, size * multiplier + 40);

  39:              NextLevel.SetValue(Canvas.LeftProperty, size * multiplier + 5);

  40:              Restart.SetValue(Canvas.LeftProperty, size * multiplier + 5);

  41:              RestartText.SetValue(Canvas.LeftProperty, size * multiplier + 30);

  42:              UnpassableText.SetValue(Canvas.LeftProperty, size * multiplier + 19);

  43:              Unpassable.SetValue(Canvas.LeftProperty, size * multiplier + 107);

  44:              CurrentLevelText.SetValue(Canvas.LeftProperty, size * multiplier + 5);

  45:              CurrentLevel.SetValue(Canvas.LeftProperty, size * multiplier + 107);

  46:   

  47:   

Because the board of the game si expandable we need to keep the buttons out of the board region so we move them dinamically.

  48:              //setup the main objects:the start and the end(start is the moving object)

  49:              end = CreateSpecialRectangle(EndPosition, Colors.Yellow);

  50:              start = CreateSpecialRectangle(StartPosition, Colors.Red);

  51:              //setup event handler for the end object

  52:              end.MouseLeftButtonDown += new MouseEventHandler(r_MouseLeftButtonDown);

  53:          }

We then create the special rectangles that will move and will represent the end point. We also wire up an event that fires when the yellow rectangle is pressed.

The rest of the functions will be discussed in part 5.

To download the entire project just click here

Starting the C# code(Part 3)

So with the static part in place we need to get the game moving...But first we need some class variables that will help within the project:

   1:          //the level

   2:          static int level = 1;

   3:          //the number of times that the user moved the rectangle in this round

   4:          static int steps = 0;

   5:          //the probability that the block generated is a blocking block(cannot pass through it)

   6:          static double blockingProbability = 0.03;

   7:          //the current destination point of the moving rectangle

   8:          Point toMove;

   9:          //the start point of the round

  10:          Point startPoint;

  11:          //the end point of the round

  12:          Point endPoint;

  13:          //true if the user rectangle is moving

  14:          bool isMoving;

  15:          //keeps the map

  16:          int[,] map;

  17:          Random r;

  18:          //the height of the generated rectangles

  19:          const int height = 19;

  20:          //the width of the generated rectangles

  21:          const  int width = 19;

  22:          //the multiplier by which the matrix location is multiplied (Ex if multiplier is 

  23:          //20 than the location (1,2) on the map will actually be shown at

  24:          //(20,40)

  25:          const int multiplier = 20;

  26:          //the start rectangle

  27:          Rectangle start;

  28:          //the end rectangle

  29:          Rectangle end;

  30:          //the board size

  31:          static int boardSize = 10;

This variables are all straight forward and are explained through comments. They will be explained in more detail later on when we get to the functions implemented.


Now that we have the variables in place we need something to initialize them. This is where the Page_Loaded function comes into place:

   1:          public void Page_Loaded(object o, EventArgs e)

   2:          {

   3:              // Required to initialize variables

   4:              InitializeComponent();

   5:              r = new Random();

   6:              timer.Completed += new EventHandler(timer_Completed);

   7:              Restart.MouseLeftButtonDown += new MouseEventHandler(Restart_MouseLeftButtonDown);

   8:              RestartText.MouseLeftButtonDown += new MouseEventHandler(Restart_MouseLeftButtonDown);

   9:              NextLevel.MouseLeftButtonDown += new MouseEventHandler(NextLevel_MouseLeftButtonDown);

  10:              NextLevelText.MouseLeftButtonDown += new MouseEventHandler(NextLevel_MouseLeftButtonDown);

  11:              

  12:              Start(boardSize, blockingProbability, new Point(r.Next() % boardSize, r.Next() % boardSize), new Point(r.Next() % boardSize, r.Next() % boardSize));

  13:          }

This function initializes the random number generator on line 6. Then we use some event-handlers. The objects timer,Restart,RestartText,NextLevel,NextLevelText are all decalred in the XAML file.

• The timer is a storyboard variable that is used in order to create the animation for the movement of the red rectangle.


• The restart object is a rectangle used as a button.


• The RestartText object is just the text that is displayed on the Restart rectangle.


• The NextLevel object is a rectangle used as a button.


• The NextLevelText object is the text displayed on the NextLevel rectangle.

All the events that were wired here will be explained later on.

Next we call the Start function that is the core function of the game as it creates a new level and initializes the gameplay. It will be explained in the next post.

(See part 4)

XAML Code for the Silverlight game(Part 2)

As I always like seeing the final product first...here is the whole XAML code needed for the game:

   1:  <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="parentCanvas" Loaded="Page_Loaded" x:Class="PathFinder.Page;assembly=ClientBin/PathFinder.dll" Width="709" Height="558" Background="White">

   2:    <Canvas.Resources>

   3:      <Storyboard x:Name="timer">

   4:        <DoubleAnimation Duration="00:00:0.01" />

   5:      </Storyboard>

   6:    </Canvas.Resources>

   7:    <!--The restart rectangle with a gradient fill-->

   8:    <Rectangle Stroke="#FF000000" x:Name="Restart" Width="149" Height="40" Canvas.Left="550" Canvas.Top="13" RadiusX="15" RadiusY="15" Cursor="Hand">

   9:      <Rectangle.Fill>

  10:        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

  11:          <GradientStop Color="#FF3E9E35" Offset="0"/>

  12:          <GradientStop Color="#FF51FF40" Offset="1"/>

  13:        </LinearGradientBrush>

  14:      </Rectangle.Fill>

  15:    </Rectangle>

  16:    <!--The restart text-->

  17:    <TextBlock Cursor="Hand" Width="97" Height="20" Canvas.Left="581" Canvas.Top="23" TextWrapping="Wrap" x:Name="RestartText" Text="Restart Level"/>

  18:    <!--The congratulations text - Collapsed at first as it should only be visible when the user completes a level-->

  19:    <TextBlock x:Name="Congratulations" Width="303" Visibility="Collapsed" Height="26" Canvas.Left="189" Canvas.Top="529" Foreground="#FFC43E3E" Text="Congratulations you reached your target!" TextWrapping="Wrap"/>

  20:    <!--Static text-->

  21:    <TextBlock x:Name="NumberOfStepsText" RenderTransformOrigin="0.492,-1.333" Width="124" Height="21" Canvas.Left="8" Canvas.Top="529" Text="Number of steps" TextWrapping="Wrap"/>

  22:    <!--The number of moves that the user made-->

  23:    <TextBlock x:Name="NumberOfSteps" Width="49" Height="21" Canvas.Left="136" Canvas.Top="529" Text="0" TextWrapping="Wrap"/>

  24:    <!--The next level rectangle with a gradient fill-->

  25:    <Rectangle x:Name="NextLevel" Visibility="Visible" Stroke="#FF000000" RadiusX="15" RadiusY="15" Width="149" Height="40" Canvas.Left="550" Canvas.Top="77" Cursor="Hand">

  26:      <Rectangle.Fill>

  27:        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

  28:          <GradientStop Color="#FFF48F40" Offset="0"/>

  29:          <GradientStop Color="#FFDBF65C" Offset="1"/>

  30:        </LinearGradientBrush>

  31:      </Rectangle.Fill>

  32:    </Rectangle>

  33:    <!--The next level text-->

  34:    <TextBlock x:Name="NextLevelText" Visibility="Collapsed" Width="94" Height="21" Canvas.Left="584" Canvas.Top="87" Text="Next Level" TextWrapping="Wrap" Cursor="Hand"/>

  35:    <!--Static text-->

  36:    <TextBlock x:Name="UnpassableText" Width="89" Height="21" Canvas.Left="564" Canvas.Top="129" Text="Unpassable:" TextWrapping="Wrap"/>

  37:    <!--The number of unpaassable blocks-->

  38:    <TextBlock x:Name="Unpassable" Width="39" Height="21" Canvas.Left="650" Canvas.Top="130" Text="12" TextWrapping="Wrap"/>

  39:    <!--Static text-->

  40:    <TextBlock x:Name="CurrentLevelText" Width="103" Height="19" Canvas.Left="550" Canvas.Top="154" Text="Current Level:" TextWrapping="Wrap"/>

  41:    <!--The current level-->

  42:    <TextBlock x:Name="CurrentLevel" Width="28" Height="18" Canvas.Left="650" Canvas.Top="155" Text="12" TextWrapping="Wrap"/>

  43:  </Canvas>

The code by itself does absolutly nothing but display some button-like controls. The actual magic occurs behind the scene using C# but that`s another post.
This xaml was generated using Expression Blend May Preview. The file in this form looks like this:



(See Part 3 to see the C# code)

Creating a simple game in Silverlight 1.1 (Alpha)

I`ve always been interested in new technology so getting a quick understanding of how Silverlight(the flash killer) works was quite a challenge. I`ve worked on previous projects in Flash. Since I like C# a lot more than I like ActionScript I could say that Silverlight development is a lot better but that is something that you should decide.

The aim of the game: To get a red rectangle over the yellow rectangle. The red rectangle can only pass over green rectangles and not over black rectangles. As tou can see this is a primitive example of a map with a single moving object. Since the red rectangle can only move one step at a time (N - NE - E - SE - S - SW -W - NW) it should be very easy to get it on the required spot.

To see the game at work just go here

So this is what it will look like...

(See part 2 to start coding)

Silverlight

...is cool...
If you want to learn a bit about it try this