Update: This article was mentioned on Microsoft's channel 9! I am humbled. Check out the video:
Classic games are so much fun to play and they are even more fun to try to recreate. A few months ago I decided to build an asteroids clone in Silverlight in order to familiarize myself with the technology. I had so much fun with the project that I decided to build a Frogger clone this time. This series of articles will basically walk you through the steps that I used to recreate this arcade classic.
Since I am by no means a graphic designer I needed to find some stock images before I could get started. I figured that I would be able to at least find a few screenshots using Google image search. Luckily I was able to find the Xbox live arcade screenshots which gave me the image you see to the left. Now that I had something to work with I opened the image I downloaded in GIMP and I started cropping out images. This process took a while because I needed to crop each unique image and make the background transparent. I ended up with 5 vehicles, 3 different size logs, 3 different turtles, a frog, the frog head and finally a plain background image. Here are some of the images that were extracted.
Tractor 
The Frog 
Frog Head
Now that I have the images out of the way it is time to start coding. For my project I used Visual Studio 2008 with the Silverlight Tools Add-on. This add-on allows you to create Silverlight projects directly from Visual Studio which means you do not have to download any of the Expression products.
Once you get the add-on installed it is time to fire up Visual Studio and create a new project using the 3.5 Framework. Then select either VB or C# as your language. Finally, choose to create a new Silverlight Application. Follow the prompts and when the Add Silverlight Application dialog appears choose the option to Automatically generate a test page to host Silverlight at build time. I like this option because when you run your project from Visual Studio an Internet Explorer will appear so you can test out your application.
Now that your project has been created you can navigate to the solution explorer and open up the design surface for Page.xaml. My first step was to take the background image that I created from the original and set it as the background image for the page. This was done by adding a image element to the canvas.
< Image Source="media/background.png" Stretch="None" Canvas.Top="50"/>
I also wanted to add some space to the top and bottom of the page for displaying the score and some other information that is relevant to the game. Therefore I changed the width and the height of the canvas to be large enough to contain the background image and also have enough margin for the footer and header. Now that the basic elements were on the page I needed to think about how I was going to program the game. Just for some background information, the whole idea of the game is for the frog to safely make it to the "homes" shown at the very top of the screen. In order to get home, the frog has to make it through the 5 lane highway by avoiding contact with the cars. Then the frog must hop on the logs to make it to safely home. So with that bit of information, I figured I needed a way to define "lanes". The lanes would basically create physical boundaries for the sprites to move in. I ended up using Rectangles (these are represented by the red outlines you see on the image to the left) to achieve this affect. After creating all the Rectangles here is what my screen ended up looking like. Also, you will notice that there are some additional rectangles at the top which define the areas where the frog can jump into.
In Part 2 of this series I will discuss the basic concepts that I used when developing the game. This will start with an introduction of sprites.
Go to Part 2
Download The Source Code - 2.94 MB
Play the Game (Opens in new window)