When each year comes to an end people tend to reflect on the past year and their accomplishments. For a programmer this often results in a look through the previous years source code. Of all the projects that I did last year my favorite project was the asteriods silverlight clone that I built. The asteroids clone was my first attempt at a Silverlight game and it was really fun to build. The project was developed over the course of a weekend and it helped me to get acquainted with Silverlight. I will go through some of the source code in case you are considering building something similar and need some tips to on how to get started. Getting Started Like most games, you need to have a main loop where you can draw and redraw sprites based on some variables. This is accomplished by created a DispatcherTimer that invokes a drawing routine at a predefined interval. The drawing routine is responsible for looping through all the objects on the canvas and updating their positions. For ex... [More]

I recently completed a series of articles on how to create a Frogger clone in Silverlight. Since the article was posted, I received quite a few emails from people requesting a copy of the source code. Therefore, I decided to post a modified version of the article along with source code on the codeproject.com.

In Part 2 of this series I introduced the SpriteBase class. In addition I talked about how I initially populated the sprites on the screen using some random calculations. Now its time to discuss animation and collision detection. In order to animate the sprites I create a new System.Windows.Threading.DispatcherTimer class and implement the Tick event. In the tick event I call a method called MoveSprites(). This method iterates over the list of sprites that were added to the screen and updates their X and/or Y coordinates. In addition, it also detects if a sprite moves off of the screen. When a vehicle, log or turtle move off the screen they are replaced by a new random sprite. This makes the game a little more interesting. Finally, if the frog happens to be hopping across the river I detect which object the frog is sitting on and move the frog at the same speed as that object. Let's take a look at the code: 1: private void MoveSprites() 2: { 3: for (int i = 0; i... [More]

In Part 1 of this series I discussed some of the prep-work that I did before I could get to any of the coding. This included a little bit of image manipulation using GIMP and some basic layout work in XAML. Now its time to discuss the mechanics of the game engine. Let me start by giving you the definition of a Sprite: In computer graphics a sprite is a two-dimensional/three-dimensional image or animation that is integrated into a larger scene. Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. As computer performance improved, this optimization became unnecessary and the term evolved to refer specifically to the two dimensional images themselves that were integrated into a scene. That is, figures generated by either custom hardware or by software alone were all referred to as sprites. As three-dimensional graphics became more prevalent, the term was used to describe a technique whereby fla... [More]

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 uni... [More]