Add OpenXLive in your Silverlight Games on WP7

Introduction

Since OpenXLive Beta for Windows Phone 7 XNA was released 6 weeks ago, it has been well adopted by the game developer community and game players. There have been 5 OpenXLive games published on Windows Phone Marketplace, amongst which 7Bomb and Super Hoops have been very popular.

While OpenXLive became popular and successful on XNA framework, there have been strong requests from Silverlight developers to get support of OpenXLive for Silverlight games on Windows Phone 7. After all, Silverlight enables rapid development for games with lower requirements on performance and graphical effects.

Fortunately, we considered the extensibility of OpenXLive in its initial design. In OpenXLive architecture, all business logics related to gaming features are encapsulated in OpenXLive.dll, and OpenXLive.Forms.dll provides XNA forms and controls. In order to support Silverlight games, we just need to introduce a new Silverlight form and control library, namely, OpenXLive.Silverlight.dll.

In OpenXLive.Silverlight.dll, we implement the same UI controls and forms as in the XNA version. We make sure the UIs resemble those in XNA version as much as possible. Silverlight developers will work on the same experiences as XNA developers do, and that’s exactly our goal.

Again, Silverlight version of OpenXLive shares the same business logic library, OpenXLive.dll, with the XNA version. In terms of functionalities, they will be exactly the same.

In the near future, we’ll add OpenXLive for Silverlight into OpenXLive SDK, and provide Visual Studio templates. We’re also considering make the Silverlight version an open source project so the community can contribute to it.

Background

With the introduction of XNA, Silverlight, and related developer tools on Windows Phone 7, it became much easier to develop games on this new mobile platform than ever before. Individual developers can now build rich and interesting games on Windows Phone 7 with shorter timeframe and less development efforts. However, there are still huge gaps in terms of user experiences compared to games from leading game studios. Individual developers spend a great amount of time working on features not directly related to game contents, for example, Start-up Screen, Leaderboard, Achievement, etc. It takes even longer time and more efforts to develop and integrate SNS functionalities, such as Online Player and Cloud Storage. Research shows that such features may take longer than the development of the game itself.

OpenXLive makes these features readily available to individual game developers and small development teams, so that their games can compete with those from major game studios.

Open XLive is a cloud service providing social networking services for Windows Phone 7 games. It brings cloud and SNS features to single player games, making it possible for developers to integrate cloud services into their games. These cloud services include, but are not limited to, Leaderboard, Achievements, Online Gaming, Social Networking, and Cloud Storage. OpenFeint on iOS provides similar services to iOS devices.

OpenXLive now supports both XNA and Silverlight framework on Windows Phone. Without developing any UI components for OpenXLive, game developers can start using OpenXLive features and user interfaces. XNA and Silverlight are different application frameworks, thus OpenXLive different APIs and reference libraries.

This article introduces OpenXLive game development with Silverlight. If you’re using XNA, please refer to “Getting Started with OpenXLive”:

• http://wiki.openxlive.net/Getting-Started-with-Open-XLive.ashx

Using the Code

You can download the OpenXLive Silverlight SDK from here.

Adding References

First of all, let’s assume you’ve already developed a Silverlight game on Windows Phone. If you’re starting from the beginning, you can refer to the next chapter “Using OpenXLive Silverlight Wizard”.

Sample project OpenXLiveGameSilverlight can be found at http://resource.openxlive.com/.

First, open bin folder under OpenXLive SDK, and copy 2 files OpenXLive.dll and OpenXLive.Silverlight.dll to your Silverlight game project directory.

Now open the OpenXLiveGameSilverlight project in Visual Studio 2010, in Solution Explorer right click the project name, and choose “Add Reference…” form the context menu, select Browse in the popup dialog, and choose OpenXLive.dll and OpenXLive.Silverlight.dll in the project directory to add them as references.

After the references are added successfully, you can see them in Solution Explorer:

Modifying Startup Page

Adding references are added, we need to modify WMAppMainifest.xml file to change the startup page when the Silverlight game starts.

Locate WMAppMainifest.xml file under Properties folder in the project, and open it by double clicking it:

WMAppMainifest.xml file structure is shown here:

<?xml version="1.0" encoding="utf-8"?>
<Deployment xmlns="<a href="http://schemas.microsoft.com/windowsphone/2009/deployment">
http://schemas.microsoft.com/windowsphone/2009/deployment</a>" AppPlatformVersion="7.0">

Locate the node DefaultTask in WMAppMainifest.xml file, and change attribute NavigationPage to “OpenXLive.Silverlight;component/Forms/StartupPage.xaml”, which will make sure when the Silverlight game starts, it’ll first load OpenXLive startup page.

Next, we’ll initialize the XLiveSLFormManager instance. Open App.xaml.cs file in the project, add namespace OpenXLive.Silverlight at the top of the file:

using OpenXLive.Silverlight;

Then locate Application_Launching method in App class, and add the following code to create an XLiveSLFormManager instance:

// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
   XLiveSLFormManager manager = new XLiveSLFormManager(this, "xxxxxxxxxxxxxxxx");
}

The first parameter is the reference to the App object. The second parameter is the secret key generated when the game is created on OpenXLive website, which is the unique identifier of the game. Please keep the key safe and prevent your game being impersonated by others.

For more information about game identification, please refer to “Create OpenXLive Game in Website”:

• http://wiki.openxlive.net/Tutorial-4-Create-OpenXLive-Game-in-website.ashx

We can also make FormManager a static member of the App class so it can be referenced outside of the method, but this is not necessary.

public static XLiveSLFormManager FormManager { get; internal set; }
// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
    FormManager = new XLiveSLFormManager(this, "xxxxxxxxxxxxxxxxxx");
}

Now let’s start the game, and OpenXLive interfaces will be added to the game:

At this moment OpenXLive for Silverlight only supports portrait mode. In the future, we’ll add supports for landscape mode. We only use back in background other than the startup page to save system resources.

Adding Background Image and Event Handling

We’ll now add a background image for startup up page. It’s quite simple, actually. In Solution Explorer, select the Project node, right click, choose “Add – Existing Item”, and select a PNG or JPG image which you’re going to use as the background image for startup page. The ideal image size is 800x480 to make perfect effect on Windows Phone.

Please also ensure “Build Action” of the image is set to “Resource”, and “Copy to Output Directory” property is set to “Do not copy”.

After the background image is added to the project, return to the Application_Launching method in App.xaml.cs file:

// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
FromManager = new XLiveSLFormManager(this, "xxxxxxxxxxxxxxxxxxx");
StartupPage.BackgroundPath = 
	"/OpenXLiveGameSilverlight;component/OpenXLive.Portrait.png";
}

Change the value for StartupPage.BackgroundPath property and set it to the image we just added. The path is the path pointed to the image resource; OpenXLiveGameSilverlight is the name of the assembly where the resource is loaded from; component/OpenXLive.Portrait.png is the path to the resource; if resource is contained in a folder, add the folder name: component/MyFolder/OpenXLive.Portrait.png.

Don’t forget the “/” at the beginning of the path; otherwise an exception will be thrown.

Next we’ll add event handling for the startup page. An event will be triggered when user clicks on one of the buttons. Here we add handling logic for two events:

public static XLiveSLFormManager FromManager { get; internal set; }
// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
    FromManager = new XLiveSLFormManager(this, "xxxxxxxxxxxxxxxxxx");
    StartupPage.BackgroundPath = "/OpenXLiveGameSilverlight;
		component/OpenXLive.Portrait.png";
    StartupPage.NewGameButtonClick += new EventHandler(StartupPage_NewGameButtonClick);
    StartupPage.AboutButtonClick += new EventHandler(StartupPage_AboutButtonClick);
}
void StartupPage_AboutButtonClick(object sender, EventArgs e)
{
    MessageBox.Show("OpenXLive Silverlight Demo 1.0");
}
void StartupPage_NewGameButtonClick(object sender, EventArgs e)
{
    this.RootFrame.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
}
// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
    FromManager = new XLiveSLFormManager(this, "xxxxxxxxxxxxxxxxxxx");
    StartupPage.BackgroundPath = 
	"/OpenXLiveGameSilverlight;component/OpenXLive.Portrait.png";
}

It’s quite simple to handle AboutButtonClick, which will show the game version using Message class. NewGameButtonClick event should launch the main page of the Silverlight game.

Finally, the Startup page in our Silverlight game looks like above. There is no Exit button in the Silverlight interface, because Silverlight framework doesn’t support exiting from the application, and only Back button is supported to exit the application.

Using OpenXLive Silverlight Wizard

Now we are going to use the Visual Studio 2010 Template to create an OpenXLive Silverlight game. The template will be included in the OpenXLive SDK.

Launch Visual Studio 2010 and select New-Project from the File menu. Choose the OpenXLive Silverlight node under Silverlight for Windows Phone in Visual C#, and type in a name for the game to be created, e.g. “OpenXLiveSilverlightGame”.

If the project is built immediately after it’s created, you’ll get an error:

This error is used to remind the developer to create the game on the OpenXLive website and retrieve the Secret Key.

To retrieve the Secret Key, please refer to “Create OpenXLive Game in Website”:

• http://wiki.openxlive.net/Tutorial-4-Create-OpenXLive-Game-in-website.ashx

Open the App.xaml.cs file, find the following code:

public static XLiveSLFormManager FromManager { get; internal set; }
#error Please full your game Secret Key in below code
private string APISecretKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxx";
// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
    FromManager = new XLiveSLFormManager(this, APISecretKey);
    StartupPage.BackgroundPath = 
	"/OpenXLiveSilverlightGame2;component/OpenXLive.Portrait.png";
    StartupPage.NewGameButtonClick += new EventHandler(StartupPage_NewGameButtonClick);
    StartupPage.AboutButtonClick += new EventHandler(StartupPage_AboutButtonClick);
}

Replace the highlighted string with the Secret Key and comment the #error line. Now the project can be built successfully.

We may change the New Game Button event handling method to modify what to load as the game page.

void StartupPage_NewGameButtonClick(object sender, EventArgs e)
{
    this.RootFrame.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
}

Till now, we have completed the introduction on how to create an OpenXLive Silverlight game using Visual Studio 2010 wizard.

What’s Next?

We introduced how to add OpenXLive support to a Windows Phone Silverlight game, following almost the same order as the XNA version. In the next article, we will show how to submit scores and achievements. Considering it’s much easier to program Silverlight user interface, we are not providing a standard submission UI, but rather we’ll provide sample code to demonstrate how it is done.

• http://wiki.openxlive.com/OpenXLive-Silverlight.ashx

References

• OpenXLive Website - http://www.openxlive.com/
• OpenXLive Developer Website - http://developer.openxlive.com/
• Getting Started with Open XLive - http://wiki.openxlive.com/Getting-Started-with-Open-XLive.ashx

History

• 1^st April, 2011: Initial post

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)