Releasing HTML5 Games for Windows 8 (2013)

Chapter 6. Publishing Your Game to the Windows 8 Store

It is incredibly easy to set up a developer account for the Windows Store. Like every app store out there you will have to register, pay a developer fee, and work through a submission process in order to launch your game. Fortunately, submitting to the Windows Store is a painless process, and it all starts by creating your developer account here.

From here you will need to register as a developer. I suggest getting a Microsoft Outlook account before registering. You may have already done this when setting up Windows 8 on your computer. This will allow you to keep your PCs in sync and keep all your account information in one place. Likewise, you can use this account to log into everything you need on Microsoft’s developer accounts and resources.

When you are ready to continue with the registration you will have to pay a small fee. The registration fee for individuals is $49, with a $99 fee for companies. The revenue share is 70 percent to the developer, but when an app achieves $25,000 in revenue—aggregated across all sales in every market—that changes to 80 percent revenue share for the rest of the lifetime of the app. So, unlike other markets, the more you sell on the Windows Store the higher your revenue share goes, which is a great deal!

After paying the fee, you should be all set with a developer account and ready to publish your first game.

Reserving Your Game’s Name

It’s important to reserve your game’s name as soon as you have a developer account. These names are unique in the store, similar to domain names, so if you want to make sure your game’s name doesn’t get taken you should register it quickly. Also, you can register multiple app names, so don’t feel pressured if you haven’t finished your other game ideas yet. Simply select the option to create a new App in the developer dashboard and you can begin the process of registering your game’s name, see Figure 6-1. After you have reserved your game’s name you can start filling out details, such as the description, screenshots, and other relevant information, including price and markets you want to distribute your game in.

As you can imagine, this should all be self-explanatory, but I have included a quick walkthrough with some screenshots so you know what to expect when you are ready to do it. Usually the hardest part of releasing a game is simply filling out the forms and preparing all the assets you need to be approved on the store.

Figure 6-1. Here you can see I have registered my game’s name.

Now you will need to add some key data to get the game ready for release. This will include your desired release date, what categories your game falls into, and hardware requirements (Figure 6-2).

Figure 6-2. Here you can set up release date, category, and other important options.

It’s important to also pick the appropriate age range for your game (Figure 6-3). Be conservative or you may not pass the submission process.

Figure 6-3. It’s important to pick the correct age rating and rating certificates (if needed).

There is no need to harp on the details of this process. The Windows Store submission process is well laid out and broken up into clear tasks that should easily walk you through the process of getting your game ready for submission. Plus, you can do it at your own pace. Once you fill out a section you can return to the rest of the submission process at any time, so don’t feel pressured to do it all in one sitting. Also make sure to check out Chapter 7 for tips on monetization and how to sell your app on the store once it’s ready for submission.

Submitting Your Game with Visual Studio

When you are finally ready to publish your game, you will be happy to know that it can easily be done through Visual Studio. Simply go to the Project menu in Visual Studio and go down to the Store option.

NOTE

If you are using Visual Studio Express, the option for publishing to the store is in its own menu next to Tools at the top. Other than that, the same process applies.

Select “Upload App Packages” as you can see in Figure 6-4 and Visual Studio will begin the process for validating, testing, and submitting your game. To do this, Visual Studio must create an app package (Figure 6-5).

Figure 6-4. In the Project menu you will find options for submitting a game to the store.

Figure 6-5. The Visual Studio wizard will walk you through creating an app package for your game.

As you continue, you will need to select the reserved name of the project you want to upload to. Figure 6-6 shows a few projects registered that I have yet to complete.

Figure 6-6. Here I am getting ready to submit my Super Paper Monster Smasher game to the store.

It’s important to highlight two things here. First, you can also reserve a name from the panel in Figure 6-6 so, if you haven’t set one up yet, you still can without exiting the Create App Packages wizard.

NOTE

I would suggest getting in the habit of reserving an app name as soon as you create a new Windows 8 project in Visual Studio. This way you can rest assured you will get the name you are looking for right up front.

Second, you should leave “Include app names that already have packages” unchecked. This is used for submitting an update to an existing app. We will discuss submitting updates in the next section.

Next, you will need to set up the version number and platforms you want to release your game on (Figure 6-7).

Figure 6-7. Set up the version number and platforms your game will run on.

As you can see, you can choose x86, x64, and ARM as the desired platform architecture, or Neutral for all of them. If you are building an HTML5 game there shouldn’t be any issues having it run on all platform architectures, outside of performance differences.

NOTE

It’s important to take note of the output location. This is where your app package will be saved. You will need to know this path when you are finally ready to upload the package in the last step of this process.

I also leave the version number to be automatically incremented for me. This takes care of continual updates if you run into any issues during the approval process so you don’t have to manually manage the version number when submitting.

Now you should be ready to validate your app. You will see a screen that prompts you to Launch Windows App Certification Kit (Figure 6-8).

Figure 6-8. Once you have completed everything you will need to select the Launch Windows App Certification Kit option.

Once you launch the certification kit it will begin validating your game. This is done locally, and you will not be able to submit your game until it passes (Figure 6-9).

Figure 6-9. Here you can see the app certification kit running.

This should be a smooth process and you shouldn’t have any issues. Unfortunately, chances are good that if you built your game outside of Visual Studio and copied it over during your development process your game is going to fail the certification process (Figure 6-10).

If your app fails certification there is nothing to worry about. There are a few common issues that will trigger a failure, and I am going to go over the top reason next. No matter what the game’s issue is, there will be a detailed report generated outlining exactly what caused the problem (Figure 6-11). The report is an XML file, which you can easily open and view in Internet Explorer.

Figure 6-10. If your game fails certification you will be presented with a full report.

Figure 6-11. You can see issues in the report in any section marked as failed.

You may be wondering what to do now. You may have gotten a similar error:

File C:\Program Files\WindowsApps\GameCook.SuperPaperMonsterSmasher_1.0.0.1_neutral__bneq9tj00a2pj\game.min.js is not properly UTF-8 encoded. Re-save the file as UTF-8 (including Byte Order Mark).

While this error may seem strange it’s actually quite easy to fix. You have to re-save your problematic JavaScript files in a different encoding. You can quickly do this by opening the file in question and selecting Advanced Save Options from the file menu. You will see the option window inFigure 6-12.

Figure 6-12. This window allows you to save your file in different encodings.

Once you correct the files by saving them with the right encoding you should be all set. This is something I try to do from the very beginning when possible.

WARNING

It is important to make sure that your JavaScript files are saved as Unicode (UTF-8 with signature) – Codepage 65001. Without this your app will fail certification every time.

Now we are ready to upload our app package to the store once you pass certification (Figure 6-13). You will need to go back to the developer portal and upload the file manually. Select the Packages tab and you will be prompted to choose the final package that was generated by Visual Studio. Remember how I told you to take note of where it was going to be saved? Now is the time to navigate to that location, which is usually in your own project (unless you changed the default output path) and select the package to be uploaded (Figure 6-14).

Figure 6-13. The game has passed certification.

Figure 6-14. Once your package has been uploaded you are ready to move onto the next part of submitting your app.

Creating Collateral for Your Game

Perhaps the most important part of the entire submission process is filling out your app’s description. It’s mandatory, and it will be the driving force to getting people to buy or try out your game. Before you start this next process, think long and hard about how you are going to market your game.

Here is a breakdown of the key pieces of information you will need to complete this next section:

§ Description: There is a 10,000 character limit for your description.

§ Keywords: You’ll need at least two to four of these to help with searching and discoverability.

§ Screenshots: These can be 1366x7×68 or 768×1366 and saved as PNGs. You will also need to provide no more than 200-character captions for each screenshot.

§ Promotion Imagery: While not mandatory, this will help you get your app featured if the editors like it. You will need to supply the following size PNGs: 846×468, 558×756, 414×468, and 414×180.

Figure 6-15. Be prepared to fill out a description, app features, and keywords.

I highly suggest planning out your screenshots ahead of time. It’s not something you want to rush at the last minute, considering your screenshots will directly impact if the person buys or at least tries out your game (see Figure 6-16).

Figure 6-16. Here you can see the screenshots section of the form.

Also, make sure you fill in the website and support contact for your game as well. Not only can you help drive some additional traffic back to your site but buyers may be interested in seeing other games you have made or contact you to suggest features or file bugs.

WARNING

Don’t forget to add a URL to the location of your privacy policy. If your app uses an Internet connection in any way you will have to submit this in order to pass certification. See the Privacy Policy section later in this chapter for more information on the privacy policy.

Now we are ready to finally submit the game. The last thing you need to do is fill out the notes section for the testers (Figure 6-17). On your first attempt to submit you may not have anything to share with the testers, but this space is invaluable if you are having issues re-submitting a game due to failing certification on the testing side of things.

Figure 6-17. Once you are done you can add comments for the testers.

At this point you should have checks on every section of filling out your game and are ready to submit.

During the submission process you can check on the status of your app (Figure 6-18). Each step has an estimated timeframe on when it will complete and be ready for the next step.

Figure 6-18. You can monitor the progress of your submitted game from the developer dashboard.

At each step of the certification process you will be notified of the estimated time it will take and whether that step has passed or not (Figure 6-19).

Figure 6-19. Here you can see my game has just been submitted and is going through the certification process.

If for any reason your app fails certification you will be presented with a report detailing the reason why. I have seen apps take anywhere from a few days to be approved to less than 12 hours. Here is a list of common reasons your app may fail:

§ Privacy Policy – Make sure you include a privacy policy in your app in the Settings Charm.

§ Screenshots – You need to include screenshots that accurately reflect your game. If you modify them in a way that doesn’t match up with the real experience of your game it will fail.

§ Crashes – If your game crashes during the testing process it will fail and a crash report will be included.

§ Feature Incomplete – If you declare your game as a beta or work in progress they will fail your app. Make sure your app is 100 percent complete before submitting.

Outside of this, it should be easy to get your game certified and in the store in a few days.

Submitting Updates and New Releases

Eventually you will want to update or patch your game. New releases are straightforward and will follow similar steps to the submission process. To start with an update you will need to create a new app package.

Figure 6-20. Your game will automatically be selected since you already submitted it.

Figure 6-20 shows “Include app names that already have packages” is auto-selected. This will allow you to submit your package to a project that has already been approved in the store.

You will also notice that, during the submission process, your app’s version number will continue to increment with each new submission if you had already auto-selected that option (Figure 6-21).

Figure 6-21. Here is the new version of my game’s package.

You will also need to take note of where the new build is saved. Just like before, you will need to locally verify your game’s package and upload it through the developer dashboard (Figure 6-22).

Figure 6-22. Here you can see this is automatically being labeled as my second release.

Next, you have to submit an update description for the store to display (Figure 6-23).

Figure 6-23. Here you can see the mandatory update description field.

While your app is being approved you are able to view its progress and update log in your developer dashboard (Figure 6-24).

Figure 6-24. Here you can see the game is in the process of being released.

Once the update has been certified, which will take less time than the original submission process, your game will be released to the Windows Store.

Reviewing Your Game’s Stats and Ratings

The developer dashboard is not just a place to submit your apps, it’s also home to important stats on your game. You can access all of this by selecting Reports under your game’s title in the dashboard. Here you will find the following reports:

§ Crashes and App Quality

§ Download Stats

§ User Demographics

§ Usage Stats

§ Ratings and Reviews

Let’s take a look at the most important report, which is quality.

Figure 6-25. Here you can see a summary of your game’s crashes.

Hopefully this section (Figure 6-25) is not showing a lot of activity but, if you do see reports of crashing in user reviews, it’s important to be able to access the crash data. It might take a large amount of crashes before they start showing up on the summary section of this report. You can drill into it and see if any minor crashes are showing up. In the detail view, you can see all crashes your players may have experienced (Figure 6-26).

Figure 6-26. Here you can see more granular details on the crashes in your game.

At first I wasn’t seeing any crashes in the summary section, but I received a few reviews saying the game did crash. After going into the details I was able to track the issue down to a sound file that wasn’t properly loading. Here is what my own crash report looked like:

ErrorDescription=Failed to load resource: media/sounds/hurt2.*

ErrorType=7

ErrorTypeText=Custom error

ErrorNumber=800A139E

SourceFile=ms-appx://gamecook.superpapermonstersmasher/game.min.js

Line=248

Character=20

DocumentURL=/default.html

OSProduct=Windows 8 Pro

OSVersion=6.2.9200.0

OSServicePack=0

UserAgentString=Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; MSAppHost/1.0)

StackTraceAvailability=2

StackTrace=ms-appx://gamecook.superpapermonstersmasher/game.min.js:248:20 _loadCallback(string, boolean, object)

ms-appx://gamecook.superpapermonstersmasher/game.min.js:178:266 Anonymous function(object)

StackTraceHash=93186aa1da5762c6cceb8cfff38f9d13

PackageFullName=GameCook.SuperPaperMonsterSmasher_1.0.0.5_neutral__bneq9tj00a2pj

AppUserModelID=GameCook.SuperPaperMonsterSmasher_bneq9tj00a2pj!App

IsTerminal=True

DependentPackageList=Microsoft.WinJS.1.0_1.0.9200.20512_neutral__8wekyb3d8bbwe

As you can see, these kinds of reports can be very helpful for figuring out the source of a problem in your game.

The other reports are not as grim and are a great insight into the userbase of your game. Here (Figure 6-27) you can see the download summary for my game compared to other apps in similar categories:

Figure 6-27. Your downloads compaired to other games in the same category.

I can also dig into this user data and look at some interesting user stats, such as age, location, and gender of my players (Figure 6-28).

Figure 6-28. Here is a visualiztion of the age and location breakdown of my userbase.

Since this information is optional to peole who register in Windows 8, you will see a group of users marked as unspecified (Figure 6-29). You can also dig into how long people are playing your game. This is also compared to the average of other apps in the same category.

Figure 6-29. Here you can see breakdowns for 1-, 3-, 6-, and 12-minute usage.

You can also get reports on each type of form factor, which may be critical if you are recieveing poor reviews from users on one type of device and want to see how large that userbase is. It also helps to find out where your game is more popular, so you can spend more time on that demographic.

Finally, you can go through the ratings and reviews of your app across each reagon you have released your game in (Figure 6-30).

Figure 6-30. Here are reviews of my game for the United States.

All in all, you will find a great deal of information in these reports that may allow you to skip adding your own tracking in your game. Most of this kind of data wouldn’t be tracked by third-party stats, so use this to your advantage.

Tips and Tricks for Publishing a Game to the Windows Store

Privacy Policy

The privacy policy is probably the most important thing you will need to do when submitting an app. If you fail to supply one you will most likely fail certification for the following reason:

“The app has declared access to network capabilities and no privacy statement was provided in the Description page. The app has declared access to network capabilities and no privacy statement was provided in the Windows Settings Charm.”

The sad part is that this is so easy to fix. First, you will need to create a new HTML file. I called mine “privacy.html,” and it lives in my pages/settings directory.

From here you will need to add some HTML to your new file. I got this text from Keith Peters, who in turn also failed to pass certification due to a missing privacy policy. He found this online and, if your app is doing serious things, you could consult someone such as a lawyer on what your privacy policy should say. My app doesn’t do anything with its Internet connection so I am comfortable with the following text, but I assume no responsibility if you end up sticking it in your app as is. Here is the template:

< !doctype HTML>

<html>

<head>

<title>App settings flyout</title>

<script type="text/javascript" src="/js/settings.js"></script>

</head>

<body>

<!-- BEGINSETTINGSFLYOUT -->

<div data-win-control="WinJS.UI.SettingsFlyout"

" id="privacyPolicy"

data-win-options="{settingsCommandId:'privacyPolicy', width:'narrow'}">

<div class="win-ui-dark win-header">

<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>

<div class="win-label">Privacy Policy</div>

</div>

<div class="win-content">

<p>This application does not share personal information with third parties nor does it store any information about you.</p>

<p>This privacy policy is subject to change without notice and was last updated on [INSERT DATE]. If you have any questions feel free to contact me directly at <a href="mailto:[INSERT EMAIL ADDRESS]">[INSERT EMAIL ADDRESS]</a>.</p>

</div>

</div>

<!-- ENDSETTINGSFLYOUT -->

</body>

</html>

Now you just need a quick way to add this to your app. Add the following code in your default.js file inside of the activated event listener:

WinJS.Application.onsettings = function (e) {

e.detail.applicationcommands = { "privacyPolicy": { title: "Privacy Policy", href: "/pages/settings/privacy.html" } };

WinJS.UI.SettingsFlyout.populateSettings(e);

};

Now when you run the app, you will see a new privacy policy option in the Settings Charm.

And when you click on it you will see the privacy policy text we added to our privacy.html.

As you can see these two steps, adding a privacy HTML file and linking it up to the settings flyout, was all we needed to do in order to satisfy this critical step for getting an app approved. The last thing you need to make sure you do is supply a URL to an HTML page (hosted on your site) with the same privacy policy in your app’s description.

Setup Capabilities

If your game does not use the Internet, you should uncheck the Internet (Client) setting in the .appxmanifest under the Capabilities tab. Most games don’t require an Internet connection, and this will save you from having to include a privacy policy. Here (Figure 6-31) is what the panel looks like:

Figure 6-31. This screen alows you to configure your game’s capabilties.

If your game does use the Internet or needs access to the local storage or anything else in the list you will want to go over and set that up now before you move onto the chapter on publishing. Each capability has its own requirements and settings, so read through the description to make sure you meet the requirements.