UPDATE 3/5/2008: Destroy All Invaders has been ported to Silverlight 2 Beta 1!

In my last post, I talked a bit about Destroy All Invaders, a scrolling game I am working on using Silverlight which uses Microsoft Virtual Earth oblique (birds-eye) images for the background. In this post, I am making available the source code for Destroy All Invaders, and I'll talk a bit about how the scrolling background is accomplished.

Links to the Goodies!

You can play the game by clicking an image above, and you can get the source code here.

About the Scrolling

In order to do the scrolling background, I used a Canvas called ScrollBackground in Page.xaml to hold all the map tile images from Virtual Earth:

Each map tile for the oblique imagery is 256x256, and if you look at the function SetupTiles in Page.xaml.cs, you can see how these tiles are created and added into the ScrollBackground canvas:

string xaml = "<IMG height=256 width=256 \?? source="\">";
_imgTiles[i, j] = (Image)XamlReader.Load(xaml);
_imgTiles[i, j].SetValue(Canvas.TopProperty, i * 256);
_imgTiles[i, j].SetValue(Canvas.LeftProperty, j * 256);
ScrollBackground.Children.Add(_imgTiles[i, j]);

In order to create the scrolling effect, we then only need to change the position of ScrollBackground. This is done with two vars _scrollOffsetX and _scrollOffsetY.

Looking at the CheckScroll method, which controls the scrolling movement, we see that a handy utility function is used to calculate the X and Y position change of an object based on its Direction (angle) and Speed:

Utils.CalculateMovement(_scrollAngle, _scrollSpeed, out xdiff, out ydiff);

 ... after which we can change the location of the scrolled background:

ScrollBackground.SetValue(Canvas.LeftProperty, _scrollOffsetX);
ScrollBackground.SetValue(Canvas.TopProperty, _scrollOffsetY);

So much more...

There is a lot more going on in Destroy All Invaders, like the actual integration with Microsoft Virtual Earth... which I hope to hit on in posts soon to come!