10 Minute Silverlight Game Programming Tutorial - Shootorial Conversion #2 (C#)

I knew you’d come back for more :).

Welcome to the next tutorial in my Silverlight game programming tutorial series. For those out of the loop, I recently started a series of tutorials porting Kongregate’s Flash game programming tutorial series over to Silverlight. In my last Silverlight game programming tutorial I converted their Shootorial #1 tutorial, so this time I will convert Shootorial #2.

As I stated before, Kongregate’s tutorials assume no programming knowledge and holds your hand while walking you through the IDE. Conversely, I assume a basic understanding of C# programming and I don’t use the IDE at all. Also, I assume you read enough of my previous Silverlight tutorials to know how to deploy a basic Silverlight application. If not, check the previous game programming tutorial’s prerequisites to learn more.

Okay,…onward!

Prerequisites

QuickStart

If you want to see the end result of this tutorial and you have installed all the prerequisites, then please download the ZIP file below, unzip it and open the shootorial.html file in your browser. As with the first tutorial, you should see a little ship that you can move using the arrow keys, but you should also see a scrolling background, giving the ship the affect of “flying”. Note, you will need to click on the Silverlight control to give it focus first.

You can also see it in action, here.

Lesson

Step 1: Add the background to the XAML

Out of the many different methods of creating a scrolling background, this tutorial will use the simplest: a really big image :). Go ahead and download Kongregate’s background image for Shootorial #2 and add it to “ShootorialControl.xaml”, like so:


<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ShootorialApplication.ShootorialControl">
  <Canvas x:Name="theCanvas" Width="640" Height="300">
    <Image x:Name="background" Canvas.Left="0" Canvas.Top="0" Source="/scrollingBackground.jpg">
    </Image>
    <Image x:Name="spaceShip" Canvas.Left="281" Canvas.Top="132" Source="/ship.png">
    </Image>
  </Canvas>
</UserControl>

Similar to the “ship” image, the highlighted Image element references an JPEG file stored in the same directory as the XAP Silverlight package and displays it in the upper-left hand corner of the Canvas. Since the length of the image (2110 pixels) dwarfs the length of the Canvas (640) pixels, if you skipped ahead to build and run the application right now, you would see only the portion of the background that fit into the Canvas with the rest clipped away…lost somewhere in the Silverlight ether. However, we will see the rest of that image in a moment.

Step 2: Scroll the background (part 1)

Time to make that background move. To do this, we will finally make use of the CompositionTarget.Rendering event. Remember, the CompositionTarget.Rendering event fires once every frame, very similar to the onEnterFrame function that contains to background scrolling logic in step 5 of Kongregate’s Shootorial #2. To have a function called every time Silverlight raises this event, simply assign an event handler, in “ShootorialControl.xaml.cs”:


...
public ShootorialControl()
{
  InitializeComponent();
 
  this.KeyDown += new KeyEventHandler(ShootorialControl_KeyDown);  
  CompositionTarget.Rendering += new EventHandler(ShootorialControl_Rendering);
}
...

And now, to define the ShootorialControl_Rendering funciton:


private void ShootorialControl_Rendering(object sender, EventArgs e)
{
  Canvas.SetLeft( background, Canvas.GetLeft(background) - 1);
}

So for every frame, the background will scroll offscreen to the left by one pixel. And, if you want it to scroll faster, just subtract a bigger number.

Perfect! So, we’re done, right?

Step 3: Scroll the background (part 2)

Not quite :). If you built and ran this application right now, you would see it scroll left for the entire length of the image,…and then keep scrolling, eventually leaving your ship flying over a blank screen.

Kinda takes you out of the moment, doesn’t it?

Fixing that issue requires two things. First, every time the image reaches the end, it should reset back to the beginning, creating a continuous scrolling affect:


private void ShootorialControl_Rendering(object sender, EventArgs e)
{
  Canvas.SetLeft( background, Canvas.GetLeft(background) - 1);
 
  if( Canvas.GetLeft(background) < -2110 )
    Canvas.SetLeft(background, 0);
}

The highlighted “if” statement checks to see if the image has made it to the end of the image. When true, it resets the image to start back at the beginning.

The number 2110 repersents the length of the image in pixels and the statement checks for less than -2110 because the image position starts at zero and then gets subtracted, thus making the position a negative number.

Again, if you built and ran it now, you would see the image scroll to the end, and then “pop” back to the beginning. Not quite the seamless scrolling effect we seek. To fix this, developers employ many different techniques, and Kongregate’s Shootorial #2 takes the brute force approach of DOUBLING the image. By doubling the image, I simply mean opening up the image in an image editor, copying the image, increasing it to twice its current length, and then pasting a mirror copy of the image right next to itself. Using the Flash IDE, Kongregate explains how to do this in step 8 of their tutorial, however, I already created this new doubled image, which you can download here. By using the doubled image, when the position reaches -2110, the Canvas will now show the beginning of the second image, and when the position resets to 0, the user won’t even realze that Silverlight effectively moved the original pixels they first saw back on screen, creating a smooth scrolling effect.

If you think this method wastes lots of memory, you’re right :). However, more efficient methods for scrolling exist and I plan on exploring those in a future tutorial.

Step 3: Build it

In order to deploy the background image so Silverlight can find it, the build file needs to change:


...
<ItemGroup>
  <None Include="ship.png">
    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
  </None>
</ItemGroup>
 
<ItemGroup>
  <None Include="scrollingBackground.jpg">
    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
  </None>
</ItemGroup>
 
<ItemGroup>
<Reference Include="mscorlib" />
<Reference Include="system" />
<Reference Include="System.Windows" />
</ItemGroup>
...

Just like the ship.png image before it, this new ItemGroup, highlighted in red, instructs MSBuild to copy the background image into the same directory as the XAP file. As noted previously, the Image object defined in the XAML looks there to find the JPEG and load it for display.

To compile the XAP, use the same command line as before:


"C:\WINDOWS\Microsoft.NET\Framework\v3.5\msbuild.exe" ShootorialApplication.csproj
Step 4: Run it!

To run it, simply open the shootorial.html file in your browser. You should see a continuously scrolling background underneath the ship. Remember, to control the ship, you need to give Silverlight focus by clicking on the Silverlight control first (i.e just click on the ship).

Conclusion

Similar to Kongregate’s Shootorial #2, this tutorial walked through adding a scrolling background to a Silverlight game. Although not the most efficient scrolling method, by providing an easy way to quickly prototype game concepts, Silverlight allows developers to easily demo and then triage their ideas. Optimizations can always happen later ;).

Next time, we will put the “shoot” in “Shootorial” (yes, I know that was cheesy :)) See you soon!

Share and Enjoy:
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • Reddit
  • del.icio.us
Related Posts:
10 Minute Silverlight Game Programming Tutorial - Shootorial Conversion #4 (C#)
10 Minute Silverlight Game Programming Tutorial - Shootorial Conversion #3 (C#)
10 Minute Silverlight Game Programming Tutorial - Shootorial Conversion #5 (C#)
10 Minute Game Programming Tutorial: Silverlight - Shootorial #1 Conversion (C#)

November 6, 2008 | Filed Under Games, Tutorial, Silverlight 

Comments

Leave a Reply