Friday, November 22, 2013

Turning your Construct 2 project into a Windows 8 Application

This requires Windows 8 and Visual Studios 2012 or higher.

This is going to be A LONG post, so I apologize in advance.  We are going to cover exporting your Construct 2 app, compiling your app with Visual Studios, and uploading it to the Windows Store.  I'll try to break it up into steps as much as possible to make it easier to follow along.  Please leave any suggestions in the comments or shoot me an email.

1.  Exporting from Construct 2

When you are ready to export your app from Construct 2 the process is fairly easy.

Turn test mode off in the Windows 8 object

If you added the Windows 8 object that controls some Windows 8 features you may have forgotten to turn off test mode in the property panel.  It's important to do this before exporting otherwise you will get a test message each time you try to run the app when it's compiled by Visual Studios.

Click Export in the Home menu then follow the onscreen directions.  Be sure to save the exported files in a location that is easy to access, like your desktop.  We will be working with several of those files directly so you want to be able to get to them as quickly and easily as possible.

1.5 Edit app images before compiling in Visual Studios

Navigate to the exported files, which I hope you placed on your desktop, and take a look at some of the files we will be working with.

There are a total of eight app images we will have to edit before we go any further.  These app images will become the app icons that are shown on the computers, tablets, and phones running Windows 8.  The easiest way to edit this is to open them with your favorite picture editing software and save directly over these images (for me I prefer Photoshop, but Paint.NET is a great free alternative).  It is VERY IMPORTANT that you do not rename the files or alter the sizes.  Each photo is a specific size that the Windows Store needs, if one image is a pixel too big or small it won't meet requirements and will be rejected by the store.  Going along with that, if the photo is named incorrectly, then Visual Studios won't know where to look for it.

Also, I would highly recommend starting to work with with the largest of the images once you open them all up.  Then you can just copy it to the smaller images and resize it.  The Windows Store doesn't have any fancy design requirements so just give your app a solid background with a suitable image and you should be good.

Also, there are three HTML documents in that folder that you will want to change as well (support.html, about.html, and privacy.html).  For these just open each of them using Visual Studios and replace the generic text that is prepared by Construct 2.  I recommend making both your support, about, and privacy pages as generic as possible so you can save them and just copy them into future applications to save you some.

Step 2.  Compile your app in Visual Studios

This part is going to be surprising easy.  Open up the .sln file that is in the folder you exported from Construct 2.  It should be whatever you named your application and says Microsoft Visual Studio Solution in the Type field.  Once there you may or may not get a message about rebuilding the app for Windows 8.1.  Do yourself a favor and just exit out of that window...  Currently there is an issue where Construct 2 apps that are rebuilt for Windows 8.1 don't pass certification in the app store.  Honestly though this won't affect your app much now.  Users of both Windows 8 and 8.1 will both be able to use your app just fine.

Navigate to the app manifest file in the explorer window on the right.  Once you open it you should notice that the Packaging tab has a red error.

All you need to do to fix this is upload a test certificate, like in the photo above.  When it prompts you for a password you do not need to enter one.  Just click okay.

Now at the top of the window change the debug setting to release.  Then go to Build > Build Solution and your app should compile without errors.

3.   Upload your app to the Windows Store

Ahh, now you are in the final stretch!  You are going to want navigate to Project > Store and you will see all of the steps that we need to complete.

If you have already opened your developer account so you can skip that one, otherwise start with that step.  Then go to the Reserve App Name, before proceeding to Associate App with the Store, Create App Packages and Upload app packages.  You shouldn't need to do the others, and I will show you an easier way of getting the screenshots you need for the Windows Store description.

To associate your app with the app store start by pressing the button and going through the process on the screen.  It should be fairly straightforward.

After that you are going to want to create your app packages.  This churns out the files that you need to upload to the store.  At the end of this step be sure to run the certification test when prompted.  This is a good way to tell if your app will fail submission instead of hearing back from testers in a couple of days that your app did not make it through.  It will take about 5 minutes to run the test and is best that you don't touch your computer at all during this time.

Almost there!

Now select to Upload your App Packages from the menu and it will open up this webscreen that you saw when you reserved your app name.  Just work your way down the options and you are good to go!

When selecting which countries to off the app to we are just going to select the United States for now.  Some countries require you to obtain certifications before uploading your app or have other specific requirements you must meet, so for the sake of publishing this one quickly we will just target our app to the US.

You don't need to do anything on this page.  Just hit save.

Very important here that you select 12+ Suitable for ages 12 and older.  If you select a younger age the app is much more strictly reviewed and is much more likely to fail. 

For this part just select no and check the check box.

Find the .appxupload file you exported when you created your app packages and upload it here.  After uploading it you should see that it shows up under the Windows 8 area.

Here you are going to fill out all the required information for your app.  Try to be as descriptive as possible.  When you get to the part about adding screen shots you can just launch your app using Visual Studios (the play button in the top menu bar) and use Print Screen.  Be sure that your images are 1366x768 or higher.

Congrats at this point you should be finished!  It's not required to write a note to the testers, but sometimes it's helpful if you app gets rejected and you are resubmitting. 

I hope you liked this walk-through. If you have any questions, comments, or suggestions, feel free to comment.

No comments:

Post a Comment