Windows App: We couldn’t get your developer license for Windows 8.1

I got the following error today when trying to update my windows developer license:

renew_error

 

 

 

 

 

This wasn’t great news considering I couldn’t run my apps without a developers license. There were a lot of suggestions from both forums and Microsoft support that I either had a) a cracked version of windows or b) that I had pending windows updates that I had either failed to install or installed but not rebooted. Now, I have a very legit license of windows 8.1 and I checked for updates but had none and rebooted the computer. Still the problem remained.

I then realized that I was running Hola (VPN) running on my computer for testing and that it might upset Microsoft in some way. I turned it of and BAM it worked and I got my license.

Windows store app: Create a basic grid game using easeljs

I just wrote an article about how to use createjs in a windows store app. I thought I follow up on that article by showing how to make a basic grid-based game for Windows 8. The end result will look something like this:

The rather horrid end result
The rather horrid end result

We will use the base that we created in the previous article and just change it a bit. In the original we just created one square and added a click-handle. We will now do the following:

  • Add a 10×10 grid of squares
  • Add an event handler to each square to handle the click event
  • Let the user swap squares by clicking on one square and the clicking on another to swap it with

Basically we’ll only change the base.js file from the original article in to this:

/// <reference path="createjs/CreateJs_130514.js" />

var stage;
var colors = ["Red", "Green", "Blue"];
var selected = null;
var squares = [];

/**
 *	Returns a random number between 0-2
 */
function getRandomNumber()
{
	return Math.floor(Math.random() * 3);
}

/**
 *	Generates a 10x10 grid with randomly colored rectangles.
 */
function generateGrid()
{
	var square;
	for (var x = 0; x < 10; x++)
	{
		for (var y = 0; y < 10; y++)
		{
			var color = colors[getRandomNumber()];
			square = new createjs.Shape();
			square.graphics.beginFill(color);
			square.graphics.drawRect(0, 0, 50, 50);
			square.x = x * 50;
			square.y = y * 50;
			square.addEventListener("click", squareClick);
			stage.addChild(square);

			var id = square.x + "_" + square.y;
			squares[id] = square;
		}
	}
	stage.update();
}

function removeFromArray(x, y)
{
	var index = $.inArray(x + "_" + y, squares);
	squares.splice(index, 1);
}

/**
 *	An event handler for when the user clicks on a square
 */
function squareClick(e)
{
	if (selected == null)			//First click
	{
		selected =
		{
			x: e.target.x,
			y: e.target.y
		};

		var current = squares[e.target.x + "_" + e.target.y];
		current.alpha = 0.5;		//Set the opacity to 0.5 giving the user visual confirmation that he/she clicked it
	}
	else							//Second click
	{
		var originalIndex = selected.x + "_" + selected.y;
		var original = squares[originalIndex];
		removeFromArray(original.x, original.y);

		var currentIndex = e.target.x + "_" + e.target.y;
		var current = squares[currentIndex];
		removeFromArray(current.x, current.y);

		var tempX = original.x;
		var tempY = original.y;

		original.x = current.x;
		original.y = current.y;
		original.alpha = 1;			//Reset "selected opacity"
		squares[currentIndex] = original;

		current.x = tempX;
		current.y = tempY;
		squares[originalIndex] = current;

		selected = null;
	}

	stage.update();
}

$(document).ready(function ()
{
	stage = new createjs.Stage("gameArea");
	generateGrid();
});

I think most of the code should be fairly easy to tackle, It’s just in the click handler that there is any logic to speak of really. What we do is that we save the coordinates of the square we’ve clicked if it’s a “first click” and if it’s a “second click” we use the saved coordinates from the first click and we swap places.
To do all this we’ve saved all our squares in an array called squares so that we can keep a track of them. To avoid having to loop through that array all the time to find our squares we used the coordinates as an index (with an underline as a separator).
We then just change square coordinates and update the stage and we’re set. That’s how easy it is!

Windows store app: Using createjs in a windows store app

As I’ve tried to use createjs before in a Windows 8 app but found the lack of documentation irritating and skipped it, I thought I’d give it a second try and write down a short tutorial on how to use it here.

To start off, go to http://code.createjs.com/ and download the All Libraries latest version to get all the libraries included:

Download the full library, who cares about size :)
Download the full library, who cares about size 🙂

Then create a new empty JavaScript project in Visual Studio 2012 (Express) like in the following picture:

Javascript, blank project
Javascript, blank project

You should now see your standard empty javascript project. In the solution explorer, go to the “js”-folder and add the latest version of jQuery (at least version 2 for Windows Store App development) and your createjs file. Also, create a new script where we’ll put our code. I called mine base.js. You should see something like this:

Our basic project structure
Our basic project structure

Open the default.html file and drag your jQuery file, createjs file and your base.js file into the head section and you should have a file that looks like this:

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8" />
		<title>CreateJsExample</title>

		<!-- WinJS references -->
		<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
		<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
		<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
		<script src="js/jQuery-2.0.3.js"></script>
		<script src="js/CreateJs_130514.js"></script>
		<script src="js/base.js"></script>

		<!-- CreateJsExample references -->
		<link href="/css/default.css" rel="stylesheet" />
		<script src="/js/default.js"></script>
	</head>
	<body>
		<canvas id="gameArea" width="800" height="600"></canvas>
	</body>
	</html>

Then open your base.js file and enter the following code:

/// <reference path="createjs/CreateJs_130514.js" />

var stage;
var square;

function start()
{
	stage = new createjs.Stage("gameArea");

	square = new createjs.Shape();
	square.graphics.beginFill("White");
	square.graphics.drawRect(0, 0, 50, 50);
	square.x = 100;
	square.y = 100;
	square.addEventListener("click", squareClick);

	stage.addChild(square);
	stage.update();
}

function squareClick()
{
	square.x += 5;
	square.y += 5;
	stage.update();
}

$(document).ready(function ()
{
	start();
});

Now, notice that I’ve made a reference to the createjs file at the first line so that I’ll get intellisense support. You can do this by dragging the file you want references to into your javascript file. Notice: the intellisense won’t work until after you added the file AND rebooted VS.

If you try the above program you will see a fairly pointless app that creates a white square which you can click on and it will move. But it shows you the basics of createjs usage.

The terrible app we've made
The terrible app we’ve made

If you want more you can read the next article on EeaslJs: http://maffelu.net/windows-store-app-create-a-basic-grid-game-using-easeljs/

Windows store app: certifying a game

The Panic Grid

As I had tested my first game developed for windows 8, The Panic Grid, and submitted it I was fairly confident it would pass all their tests. After all, I had used the Windows App Certification Kit (WACK) to test it prior to submitting it and it passed all its tests.
Well, it didn’t. Here are some of the complaints I got back:

“The app failed to resume properly from snapped view. More information on snapped views can be found here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx”
I had completely missed out on the fact that an app had to be compliant with the Windows 8 snap feature. My last app has apparently made it passed this check but it could handle both landscape and portrait mode which probably explains it. This app only handles landscape.
So, what to do? Well, I had to handle it somehow and from what I could read in various forums it should be sufficient to show some kind of splash screen if the app goes into snap-mode so to speak and that’s what I did. As it is a HTML5 app I put this in my default.js file:

    window.addEventListener("resize", function (e)
    {
    	var viewStates = Windows.UI.ViewManagement.ApplicationViewState;
    	var newViewState = Windows.UI.ViewManagement.ApplicationView.value;
		
    	if (newViewState === viewStates.fullScreenLandscape)
    	{
			//Handle landscape
    	}
    	else
    	{
			//Handle everything else
    	}
    });

This was an easy way to handle the snap changes. But it didn’t solve it all together though. I also forgot to pause the game when it snapped so I had to fix that as well 🙂

When I had added the GFD project to my solution and added the RC files to it and compiled I got the following issue:
“Error RC1015: cannot open include file ‘afxresh.h’”

This was a bit easier though. The problem, and I’m no C++ expert here, is that the afxresh.h file is used for MFC (Microsoft Foundation Class) and if your project doesn’t utilize the UI controls from that package then you can simply change that include file to ‘windows.h’ instead. (for more information read this SO thread)

“One or more links, including privacy policy, websites or support contact links, provided with your submission do not resolve to a functional webpage and/or do not appear to be complete.”
This error was most likely triggered by the fact that I was linking to a page for the app that wasn’t complete. I didn’t think they actually checked them so I was going to finish it the day after but they were, it seems. Make sure that whatever content you link to is complete and correct.

“The app has declared access to network capabilities and no privacy statement was provided in the Windows Settings Charm.”
This is the standard error. Very embarrassing to get it. I had, however, forgotten to add a privacy policy to my Settings Charm. When I did, however, it turned out you couldn’t just add an external link in your default.js applicationcommands settings. I did the following thing to solve it:

    app.onsettings = function (e)
    {
    	e.detail.applicationcommands = {
    		// Add an About command
    		"about": {
    			href: "/pages/about/about.html",
    			title: "About"
    		},
    		"tips": {
    			href: "/pages/tips/tips.html",
				title: "Tips & Tricks"
    		}
    	};

    	WinJS.UI.SettingsFlyout.populateSettings(e);

    	var vector = e.detail.e.request.applicationCommands;
    	vector.append(new Windows.UI.ApplicationSettings.SettingsCommand("privacy", "Privacy policy", function ()
    	{
    		window.open("http://games.maffelu.net/the_panic_puzzle/privacy_policy.txt");
    	}));
    };

“Your submission includes markets which require a rating from a recognized ratings board. Please see http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh694080.aspx for more information on the ratings boards for the Windows Store. For more information on obtaining a game rating certificate, please see: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452763.aspx”
Well, I had totally missed out on the ratings. As I wanted my game to be allowed from 7 years and older I had to get approved from a whole lot of country. The good news is that it’s fairly straight forward to get certificates for Europe, US and large parts of the countries around the world, you simply fill out some forms that are linked in the sections regarding age rating. The bad news is that if you want to get approved everywhere (such as in Germany) you have to have your game approved and tested by some comity or something. I opted out of this and just removed those countries from my list of countries to distribute my app in.

After that the game was approved so my fixes seems to work. You can find it here:
http://apps.microsoft.com/windows/en-US/app/eb598e79-6941-48c4-bc7c-30289e724fa6

Windows store app: detecting if your app is visible or not

I wanted to find out if my game app was visible or not because I wanted to pause the game if the user Alt-Tabbed or pressed the windows key. I found the following article on stack overflow that explained that you can listen to the msvisibilitychange event to detect changes like this:

document.addEventListener("msvisibilitychange", function ()
{
    //Pause function
});

However Microsoft doesn’t seem to be very happy with you putting to much code in this event as it might cause a “less fluid user experience”. I just pause the game there though 🙂

Windows store app: How to test in-app purchases

I just added a simple in-app purchase in my latest app to allow for the user to remove the advertisement. Before releasing the app I wanted to try the in-app purchase function to see if everything worked out as it should. To just try the function you simply have to change your

Windows.ApplicationModel.Store.CurrentApp

to

Windows.ApplicationModel.Store.CurrentAppSimulator

and run your purchase function. Simple enough.
But this testing function has a limitation in that it resets every time you start the app. I wanted to see how it looked after purchasing and then restarting the app (to make sure the ads were removed on start-up if the purchase had been made).

It turned out it could be done by finding a file on your computer that should be in the following path:

C:\Users\YOURUSERNAME\AppData\Local\Packages\YOURAPPGUID\LocalState\Microsoft\Windows Store\ApiData

where YOURUSERNAME is, well, your user name and YOURAPPGUID is the identifier for your app (find this in your package.appmanifest file in the packaging section). The file is called WindowsStoreProxy.xml and looks like this:

<?xml version="1.0" encoding="utf-16" ?>
<CurrentApp>
    <ListingInformation>
        <App>
            <AppId>00000000-0000-0000-0000-000000000000</AppId>
            <LinkUri>http://apps.microsoft.com/webpdp/app/00000000-0000-0000-0000-000000000000</LinkUri>
            <CurrentMarket>en-US</CurrentMarket>
            <AgeRating>3</AgeRating>
            <MarketData xml:lang="en-us">
                <Name>AppName</Name>
                <Description>AppDescription</Description>
                <Price>1.00</Price>
                <CurrencySymbol>$</CurrencySymbol>
                <CurrencyCode>USD</CurrencyCode>
            </MarketData>
        </App>
        <Product ProductId="1" LicenseDuration="0">
            <MarketData xml:lang="en-us">
                <Name>Product1Name</Name>
                <Price>1.00</Price>
                <CurrencySymbol>$</CurrencySymbol>
                <CurrencyCode>USD</CurrencyCode>
            </MarketData>
        </Product>
    </ListingInformation>
    <LicenseInformation>
        <App>
            <IsActive>true</IsActive>
            <IsTrial>true</IsTrial>
        </App>
        <Product ProductId="1">
            <IsActive>true</IsActive>
        </Product>
    </LicenseInformation>
</CurrentApp>

I have highlighted the two lines that you need to edit. Change the ProductId to whatever you’ve named your “product” in your code to and you are ready to test your app with the purchases complete.

Note: If you happen to ruin the file in some way, just remove it and VS will generate a new one for you.