Construct 2 Windows 8 Object – Charms Bar Part 1

As I mentioned in my Windows 8 Object Intro post, we will focus on a couple of different areas but will start with the Charms Bar.  I would recommend going back and reading the Intro if you have not for a high level overview of what we will be looking at with Charms Bar.  Regardless, here is a brief recap.  We will be working with the Share Charm to be able to share high score, links to your app, etc. and the Settings Charm where we will add About, Privacy, and Support Pages.  The majority of this work will take place in Construct 2 with the Windows 8 Object, but we will have to export and open the project in Visual Studio to finish the job.  If you don’t have Visual Studio, you can now download the fully featured and FREE Visual Studio Community here.

To begin, I am going to open up a previous project, Golden Ball ( a game I demoed in my Microsoft Virtual Academy Jumpstart for Construct 2).  To make things easier, I have make my starter project of Golden Ball available here.  Simply follow the link and click “View Raw” to download the .capx Construct 2 file.  This should make things easier for you to follow along!  If you recall, Golden Ball has a Start Screen (shown below), an About Screen, a Game Screen, and an End Screen.  The overall specifics of the game are not that important right this second, so you can open your own project if you wish of follow along with my demo project.  You can see the Start Layout for Golden Ball below.


Screenshot (136)


The first thing we want to do is add the Windows 8 Object.  We do this the same way we would for any other Object (sprite, button, text, etc.) by double clicking in the layout and then scrolling down to Windows 8.




Now that we have inserted our Windows 8 Object, adding our three pages (Privacy, About, and Support) are incredibly easy.  Simply choose the Windows 8 object from your Objects Pane on the right hand side.  Then, take a look at its properties on the left hand side and you should see the following.


Screenshot (137) 


In the Properties Pane, you should see a yes or no dropdown for “About Setting”, “Support Setting”, and “Privacy Setting”.  Simply choose yes for each of these three and these pages will be added to your project.  You might notice that “Test Mode” is another option.  We will discuss this in the future with In App Purchases, but for now, just make sure that it is set to no!




Now that we have those pages, our next step is to ad a share button for the user to share his high score.  For this, I am going to open up my End Layout, the screen the user reaches when he finishes the game.  In this screen, the user can see the score he just received, his high score, and a button to Restart or go back Home.  This is where we will add our new “Share Score” button.


Screenshot (138)






Double Click to add a Text Object, call it “ShareScoreButton” and click Insert.


Screenshot (139)


After I resize, change the text to “Share Score”, and change the font size, this is what my button looks like.


Screenshot (140)


Now, let’s add the functionality for this button.  Add an Event for when the ShareScoreButton is touched.



For the action, we want to choose Windows8->Show Share UI.  This will trigger the Share menu to be shown in the Charms Bar.


 Screenshot (141)


Let’s now add the event that handles when the Share UI is displayed.  Add Event->Windows8->On Share.


Screenshot (142)


…and lastly, let’s add the action for Sharing.  Once you go into the Windows8 Object Actions list, you will notice that there are several choices to choice from under the Sharing section, shown below.




These choices fairly descriptive, but I will mention a couple of these.  The Share HTML option gives you the ability to add raw HTML.  This means you could type up an HTML page, test it in the browser to see what it looks like, then simply copy the HTML code in.




The Share sprite image is pretty straight forward as well.  You can simply choose one of your sprites to share.




You can use any of these, but I am going to end up using the Share Text.  This way we can just include the text that we want the user to share.  For example, I will include the user’s score, my twitter handle, and a link to the app as shown below.











Unfortunately, we can’t test this feature out until we export and open the project in Visual Studio.  Take a look here for my post on Exporting a Construct 2 Project to Windows.  You can export your project as either Windows 8, Windows 8.1 or Windows Universal App.  I personally will be exporting as a Universal App.  After you have done so, go ahead and open up your .sln Visual Studio solution file and proceed to Part 2!


If you are having issues with any of the above steps please comment and ask questions below.  Alternatively, you can find the end solution here.