Porting Air Soccer to Windows 8 – Reached Final Round

Update: Air Soccer for Windows 8 reached Final round of Windows 8 First Apps Contest. I can almost feel a Windows 8 slate in my hands 😉 So I got 2 more weeks i.e. nights of ninja coding to polish it! I cant remember how many times I checked my email since yesterday to get any news on the results. Thank you Judges and MS Rocks!

Since Windows 8 Developer preview came out, I have been watching the BUILD sessions and getting excited to enter a new era for the Windows OS. I did download the developer preview and installed it in a virtual machine but dint play around with Visual Studio 2011. I was also busy developing my next game for WP7 but then I stumbled upon a tweet about “Windows 8 First Apps Contest”. I found out about it very late… only 2 weeks were left for submission. But I though why not port Air Soccer Tour to Windows 8… would give me an opportunity to learn about WinRT, Metro , Visual Studio 2011 and maybe I will make it into the final round at least 🙂

Ad-based FREE version Air Soccer Tour – Free.

Ad-free Paid version  Air Soccer Tour.


Windows 8 Metro inspired Splash screen & logo for Air Soccer

First decision was to reduce the scope since there was no time for a complete port:

  • Provide basic 1-player and 2-player mode (no tournament)
  • Provide minimal settings
  • Provide minimal gameplay features (no leaderboards, no particle effects)

New things to be handled specific to Windows 8:

  • Different aspect ratios and resolutions
  • Different layouts and orientations

New technology stack

  • XNA is not available in Windows 8 preview
  • New WinRT APIs  – async stuff everywhere 🙂

Air Soccer Tour for WP7 is developed using C#, XNA and Farseer Physics Engine. There are other libraries for particles effects and leaderboards etc but I cut down on those features already.

Air Soccer Windows 8 Metro

Air Soccer Windows 8 Metro - Landscape Full Screen Mode

Physics Engine & Game Logic

First thing was to sort out Farseer Physics since thats the core of the game. Fortunately I found a Windows 8 port “Farseer XAML for that on codeplex.. one problem solved 🙂

Air Soccer Tour itself is designed pretty well so my whole game logic project (C#) got ported with just a recompile.

So half the task was done or so I thought…

Air Soccer Windows 8 Metro

Air Soccer Windows 8 Metro - goaaaallllllllll

Graphics APIs

Absence of XNA was my first big hurdle. I looked at C++/DirectX samples and even though I was a decent C++ and DirectX 8 programmer back in the day..  I realized that .Net has reallllllly spoiled me and most probably every .Net developer out there 🙂 – the sugary C# syntax, great frameworks & APIs that abstract out all the complexity and the ease of garbage collection 🙂

C++ syntax looked a little scary since it was a little different than I remembered… new language features and extensions of course over the past 8 years. I dint have time to go down the memory lane so it was time to google with bing 😉

Found two cool libraries SlimDX and SharpDX, both are managed wrappers directly on top of DirectX. Mind you these libraries are not like XNA, the great framework that enabled even dummies like me to start game programming 🙂 They are really low level wrappers – no “utilities” or “helper classes” that will do the dirty work for you. BUT if you are looking to use DirectX in .Net – these two are great options.

SlimDX has more following and looks more established but SharpDX has two things going for it.

The way SharpDX wraps native DirectX makes it the fastest managed wrapper for DirectX, it supports DirectX 11 and most importantly SharpDX has a very early Alpha release that is WinRT/Metro compliant. There is no WinRT/Metro port for SlimDX at this time.

So I started playing around with SharpDX and the absence of documentation was really becoming painful. I will shamelessly admit that it took me several hours to render a texture on screen and move it around. Since Air Soccer Tour is 2D, I used the Direct2D object in SharpDX and did some helper classes. But soon I hit a road block – one of the Draw method overloads that takes source and destination rectangles for the texture uses the old Rectangle struct that is not available in WinRT/Metro. I shoot out an email to the author of SharpDX and got bad news… Since his “metro” port was  in very early stages, he did not completely port the Direct2D portion of SharpDX, and he could not promise another release within a week time.

So I had to find another option. Even though I did not use SharpDX, I recommend keeping a close eye on the project. Its a great managed wrapper for DirectX, will definitely work in Windows 8 Desktop Mode AND hopefully it will be completely ported for WinRT/Metro in a couple of months. From the 3 days of work that I did with SharpDX: D3D, DirectWrite, WIC, XAudio are ported for metro and I did play around with them without any issues

Since I was aware of a great feature in Windows 8 – I reserached a bit on doing a WINMD component in C++ to implement just enough draw calls and use them from C#. I started planning for it but soon realized that I may not be able to finish it in time considering I had to work in C++ and DirectX.

I was about to give up on the project when I realized that I could use XAML for basic rendering. I hadn’t used Silverlight rendering in WP7 for performance reasons but on Windows 8 tablet/desktop, it shouldnt be a problem at all to do basic 2D graphics.

  • Used CompositionTarget.Rendering event as the main game loop
  • Used Canvas as the soccer field
  • Used Canvas.SetTop , Canvas.SetLeft to move ball/players around on the field

Sound APIs

MediaElement can be used in XAML to do basic sound effects. They are non-UI elements that can be added to the Visual Tree. I just added instances of MediaElement to Grid i.e Grid.Children.Add(mediaElement);

Input APIs

WinRT input APIs combines the handling of mouse plus touch input so you can be sure that the same code will work for both. I just used 3 events on the Canvas:

  • PointerPressed
  • PointerMoved
  • PointerReleased

User Interface, Layout & Orientation

Its important for a metro style app to support Landscape and Portrait Orientations as well as the 3 layouts in landscape mode:

  • Full Screen Landscape – when your application is the only app on the screen
  • Filled Landscape – when your application is sharing screen space with another application; your application taking the bigger portion of the screen
  • Snapped Landscape – when your application is sharing screen space with another application; your application taking the smaller portion of the screen i.e 320 pixels wide

Air Soccer supports all options and provides gameplay in every option. In snapped mode, the field is rotated (like in portrait mode). You can test all modes by using the built in simulator in Visual Studio 2011. Use drop down icon on the Debug button to see that you can debug on local machine, windows 8 simulator, and remote machine.

Air Soccer Windows 8 Metro

Air Soccer Windows 8 Metro - Snapped mode

Command Bar is where you would put your application commands, you can have two command bars (top & bottom). In Air Soccer, the top command bar provides help text and the bottom command bar provides gameplay settings/options. The options are divided into two stack panels aligned left and right so its easier for thumb access.

Air Soccer Windows 8 Metro

Air Soccer Windows 8 Metro - Command bar options and Help

For screens besides the main gameplay, the Metro samples demonstrate how to use Grid and List so your application will auto adjust to the different orientations and layouts. VisualSates are used to show/hide the XAML elements that are appropriate for the target orientation/layout.

Air Soccer Windows 8 Metro

Air Soccer Windows 8 Metro - Team Selection

I didnt get time to implement the JumpViewer which is used for semantic zoom in case you have too much information e.g. the team selection screen shows 94 team flags. It would be beneficial to do a semantic zoom in and zoom out here to provide better user experience.

File I/O

File I/O was tough in the beginning. It took some trial and error to get used to Windows.Storage namespace, StorageFile, IRandomAccessStream and fully async File I/O operations

Metro samples demonstrated:

  • Using FileOpenPicker to have the user select a file on disk
  • Using XAML to specifiy relative file path at design time

But it took some time to figure out how to load files programmatically.

You could either use a relative Uri based approach if its available or directly use async file loading approach.

Loading Sound based on URI:

var soundKick = new MediaElement();

soundKick.Source = new Uri(container.BaseUri, relativeFilePath);

(container is your UserContorl/Page/Screen)

Loading Image based on URI:

var fieldImageSource = new BitmapImage( new Uri( container.BaseUri, relativeFilePath) );

Image fieldImage = new Image();

fieldImage.Source  = fieldImageSource;

(container is your UserContorl/Page/Screen)

Loading Image based on StorageFile:

var fieldImageSource = new BitmapImage();

StorageFile imageFile = await Package.Current.InstalledLocation.GetFileAsync(relativeImageFilePath);

IRandomAccessStream imageStream = await imageFile.OpenAsync(Windows.Storage.FileAccessMode.Read);


Image fieldImage = new Image();

fieldImage.Source  = fieldImageSource;

Loading XML based on StorageFile:

StorageFile xmlFile = await Package.Current.InstalledLocation.GetFileAsync(relativeXmlFilePath);

XmlDocument doc = await XmlDocument.LoadfromFileAsync(xmlFile);

Issues & Conclusion

Working with pre-beta stuff is never easy, you get stuck in things and there is less guidance available but the metro forums and some blogs did help. But it was a very exciting exercise and I am looking forward to Windows 8 coming out and changing the whole PC concept. Barring the pre-beta issues, the whole UI and application model is really a breath of fresh air and I have no doubt that Windows 8 will be a huge success.

One issue that I could not figure out till the end was a nasty intermittent crash – no stack trace, it didnt break in my code and there was no dis-assembly to be found – looks like a CLR bug or maybe I have done something really sneaky to corrupt managed stack/heap 🙂


Managed Debugging Assistant ‘FatalExecutionEngineError’ has detected a problem in ‘C:\Users\emi_oasis\AppxLayouts\DanglingConcepts.AirSoccerVS.Release.AnyCPU.emi.oasis\airsoccer.xaml.exe’. Additional Information: The runtime has encountered a fatal error. The address of the error was at 0x7353dcf1, on thread 0x42c. The error code is 0xc0000005. This error may be a bug in the CLR or in the unsafe or non-verifiable portions of user code. Common sources of this bug include user marshaling errors for COM-interop or PInvoke, which may corrupt the stack.


Another issue was that sometime the field image would not “display” on application startup. Once I clicked on the “change field” option on the command bar, it would display the field. I couldnt figure out why.. 🙂

I am not too happy with Air Soccer for Windows 8 – the end result but hey, it was just a first shot at it. It definitely needs a lot of polish… but hopefully I will get through to the next round to work some more on it… fingers crossed !!!

Tagged with: , ,
Posted in Windows 8
5 comments on “Porting Air Soccer to Windows 8 – Reached Final Round
  1. Glad to see you found Physics Helper XAML useful!

    It’s the last day of judging (1/15) and I haven’t heard anything yet on the first round winners 😦

    I saw there is a small bit of conversation going on here –


    Good Luck!

  2. […] Read original post by Imran Shafiq at Dangling Neuron […]

  3. […] Air Soccer by Imran Shafiq  @danglingneuron […]

  4. […] I have been porting over Air Soccer to Windows 8 and submitted it to the First Apps contest. Air Soccer W8 has been selected as a finalist in the […]

  5. […] Read Air Soccer Metro – First Entry with Development Story […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog Stats
  • 142,877 hits

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 368 other followers

%d bloggers like this: