Skip to content
November 2, 2012 / iunkn

Windows 8 Game Development Workshop

I’ll be presenting a game development workshop in Bellevue and Seattle Microsoft Stores. This will be on Windows 8 casual game development with a special focus towards Construct 2!

There are other similar developer focussed events happening across the US in the Microsoft Stores and you can find the Store and events near you in the links below:

Go ahead and register if you are around and see you there!

Seattle 11/5: https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032532967&Culture=en-US&community=0

Bellevue 11/13: https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032532941&Culture=en-US&community=0

 

Advertisements
October 19, 2012 / iunkn

Testing your games with VS2012

With VS2012 there are multiple options to test your games – LocalMachine, RemoteMachine and Simulator. Let’s take a look at them one by one:

Deploying to Local Machine

This is the default and most basic option which you are probably already aware of: Once you export your game from Construct 2, you should be able to open it with VS2012 and hit F5 and your game should execute on your local machine.

Deploying to Remote Machine

Most of the developers generally have a developer machine and typically a less powerful test machine to test their game (like a tablet – have you preordered yours? :)) During development you will develop your game with Construct 2, export as Windows 8 app and test it on your dev machine(with mouse and keyboard) which is pretty straightforward. But how do you deploy and test on your tablet/test machine(to test the touch behavior)? A low-tech solution would be to create a package in VS, share it out in your HomeGroup or even low-tech (but effective nonetheless) solution is use a portable USB drive. – you will install the package in your test machine and try your game.

Clearly the process of creating the package, copying it over, then installing  will become cumbersome after a few times and you will start reducing the frequency of testing it on the tablet. Alternatively you can deploy directly to your test machine quite effortlessly with the following steps if  both your test machine and your dev machine are in the same subnet:

1. On your test machine (say Surface RT) download and install Remote Tools for Visual Studio. (Make sure to get the installer corresponding to your machine’s architecture – arm for Surface RT).

2. Launch the installed Remote Debugger from Start Screen. You may be prompted for giving permissions for remote debugging. Accept it.

3. On your dev machine, select Remote Machine as the target and hit F5. You will be provided with a Remote Debugger Connections dialog to configure your remote machine. If you have properly followed 1 and 2 and both your machines are under same subnet, you will find the remote machine under “My Subnet”. You can select it from there and you are good to go. VS will package your game and deploy and launch it on the remote machine.

(If you face any trouble setting this up refer to this post for further clarifications)

At this point, you can frequently test your game on the local machine (for example with mouse/keyboard)  and remote machine (for example a touch machine) just by changing the target option from VS2012. Quite convenient.

Simulator

One final option that VS2012 provides is to use the built in simulator. If you select this option, it will launch a simulator and deploy and launch your game. This is especially useful to test various resolutions. Be sure to check out how your game looks in different resolutions using the simulator.

October 10, 2012 / iunkn

Trials and purchases in Settings Charm

This post assumes that you have already read Trials and In App Purchases revisited post and are familiar with the related terminology introduced there. (I have added a additional section on JavaScript console to the above mentioned post which will help you better test your trials/purchases. So make sure to give it a read).

As you know, the plugin already supports adding Help, About and Preferences pages to the app settings for your game, accessible from the Settings charm.

Aside: I get asked why we would want to support these pages when you can expose every preference (like audio/music controls etc,.), Help or About through the game’s main UI. The answer is that Windows 8 introduces the concept of accessing the app’s settings (in fact Windows’s settings) in a consistent and reliable manner. It is in the best interest of the user that you would want to consider doing this. If not, users might be frustrated when you don’t have these information exposed via app settings/settings charm, while every other app exposes it.

The plugin also supports a Purchase page if you chose to enable it. By default it is turned off. This is because it needs a little bit of work from your part to customize that page properly. It is really easy. Trust me. Besides, you stand to gain by supporting this because the more places you provide an option for the user to make a purchase, the better (of course balancing subtlety to discoverability is important else you user might hate it).

Alright, the first thing to do is to opt-in to show the Purchase page by setting the Show Purchase option to True:

After you have enabled it, go ahead and export your project. As discussed in Trials and In App Purchases revisited you can edit the In-App-Purchase-Testing-Only.xml file in your VS2012 project to reflect your strategy for monetization (trial true/false, features etc,.).

Now, open up Settings-purchase.html and you will find the code below: If your app uses trial version then you will find this part of the code useful. All you have to do is change the highlighted text to whatever you want. If you find the generic text useful enough, you don’t have to change anything.

// If in trial mode, prompt the user to upgrade to full version
if (!currApp.licenseInformation.isActive || currApp.licenseInformation.isTrial) {
  currApp.loadListingInformationAsync().done(
  function (listing) {
    // Provide pricing info if possible
    userPrompt.innerText = "Please consider upgrading to full version for: " + listing.formattedPrice + ".";
    showTrialUpgradeOption(divPurchase, purchaseContext, "Upgrade");
  },
  function (errMsg) {
    userPrompt.innerText = "Please consider upgrading to full version.";
    showTrialUpgradeOption(divPurchase, purchaseContext, "Upgrade");
  });
}

If your app supports in-app-purchases you will find a similar section of code as below. You will have to obviously update the featureId variable with the string that you have chosen to use throughout your project and also update the greeting string visible to your user. (If your app does not have any in-app-purchases, go ahead and delete this section from settings-purchases.html)

// If already in full version, prompt the user to purchase in-app-feature
var featureId = "MyPaidFeature1";
if (!currApp.licenseInformation.productLicenses.lookup(featureId).isActive) {
  currApp.loadListingInformationAsync().done(
  function (listing) {
    // Provide pricing info if possible
    var featureListing = listing.productListings.lookup(featureId);
    userPrompt.innerText = "You own the full version of this app. Please purchase Pink Monsters at " + featureListing.formattedPrice + " for added fun!";
    showFeaturePurchaseOption(divPurchase, purchaseContext, "Purchase Pink Monsters", featureId);
  },
  function (errMsg) {
    userPrompt.innerText = "You own the full version of this app. Please purchase Pink Monsters for added fun!";
    showFeaturePurchaseOption(divPurchase, purchaseContext, "Purchase Pink Monsters", featureId);
  });

I told you it would be easy! You can just change the texts mentioned above and you get a custom tailored purchase option for your game in the app settings part of the Settings charm for your game. Of course if you are little more into programming you know that you can extend the code above to more than one in-app-purchase etc,.

If you are still not sold and you want to find a live example which uses the above method to expose a purchase pane, please go ahead and check out Blast the bricks game that I wrote with Construct 2 and the Metro/Windows8 plugin.

October 8, 2012 / iunkn

Shipped a game to Windows Store

Construct 2

One fine day, I thought of writing a game for Windows 8 and stumbled upon Construct 2. I could not believe such a platform existed and I was so glad to have found it. Shortly after, I started working on a game – Blast the Bricks and it is during the development of this game that I realized the need for a Windows 8 plugin for Construct 2. Hence for the past few weeks, I have been working on the game and the plugin side by side. It has been absolutely amazing to work with Construct 2 for the game and also to author the plugin. More than anything, I was really curious to see a game through creation and finally see it in the Store. I should say that I picked up a simple game with my limited creative abilities to actually go through the process and I thoroughly enjoyed it!

If you liked the plugin/used it, you might want to download the game from Windows Store and try it out. You will recognize most of the features that I have exposed through the plugin being used in this game. I greatly welcome your feedback!

Assets: I am glad the way the game turned out. I designed all the assets from the ground up – although they look simple for pro-s, it was quite a time consuming effort for me but  (I greatly benefitted from http://2dgameartforprogrammers.blogspot.com/ for an intro to Inkscape). The sound effects and background music that I got from Construct 2 proved great for my purposes.

Windows 8 submission

The submission process could not have gone any smoother. The exported game from Construct 2 passed the WACK test without any glitches. The process of submitting to the store was smooth. It worked as advertised during the certification and the app went live in the Store as promised by the guideline times (you will see the guideline times when you start with the certification process in the developer portal ).

Metro/Windows 8 plugin features used

Here are the Windows 8 features that I used in this game from the plugin:

Hope you like it! Let me know what you like and what you don’t!

P.S: Actually I had released the game ~10 days ago, I was waiting for the R2 to go live before letting everyone know 🙂

October 3, 2012 / iunkn

How to make money with Windows 8 apps

[Copy of the tutorial I posted at Scirra’s Construct 2 tutorial section.]

You have a great game made with Construct 2 and you want to make money. Read along for understanding your options:

There are multiple ways in which you can monetize your Windows 8 apps. If you are a follower of this blog/plugin you would know that we already have support for advertisements/in-app-purchases and trial mode. This blog post is to think out loud about the various options and hopefully help you chose the best option for your case.

1. Free app

User can download and use your app for free for indefinite time. No special handling from Construct 2 wrt licensing is required.

2. Full-featured paid app

When you submit your app through the Windows Dev center, you will get a chance to price your app for $1.49 and above. Such apps MUST be purchased by the customer before they can use it. For this case, from Construct 2 you don’t have to check for anything. IMO unless you earn reputation, people might be wary of paying before having a chance to try out your game. For this reason, Windows Store provides the following options as well.

3. Time limited trial-app

You can list an app for a price and specify the expiry date of the trial. After that period, the customer will not be able to launch the app. But during the trial period, the app will be fully featured – remember this is time limited. Like #2 above, here again you as a Construct 2 game dev, do not have to do anything special from within Construct 2. Windows does all the license checking and validation. This is still better than 2 because user gets a chance to play your game.

4. Feature limited trial-app

You can list an app for a price and specify an expiry date. In addition, you can also limit the set of available features during your trial game.

If you want to achieve this behavior, you can do so with this plugin. A few example implementations for this type of strategy:

  • Limit the user to be able to play only a subset of levels in your game.
  • Limit the user to be able use only a subset of power-ups available in your game.
  • Provide an unlimited trial but have advertisements hosted in your game. Remove the advertisements when the user purchases full version of your game.

5. In-app purchases

You can list your game to be free or type 2 or 3 or 4 above and also include in-app-purchase offers. These can be used to unlock more levels, enable virtual points/virtual goods/power-ups etc,. Important thing to note is that In-app-purchases can be offered and available for users only in a full version of app — either a free or fully-paid version. These are not available when the user is using a trial version of your app.

If you want to use In-app purchases, you can do so with this plugin. A few example implementations for this type of strategy:

  • List the game as free. Add advertisements to the app. Provide an in-app-purchase feature to remove advertisements.
  • List the game as free. Limit the user to play only one level. Request the user to make an in-app-purchase to proceed further (method used by the game Cut The Rope)
  • List the game as paid. After the game is purchased, you can provide further in-app-purchase offers.

6. In app advertisements

As noted above, you can show advertisements in the following cases. You can add advertisements in combination with the above choices by following this post.

  • Free game with ads
  • Paid game with ads in trial mode; Remove ad in full version.
  • Free game with ads, with an in app purchase option to remove ads (the advantage/the only difference is that your app will be listed in Free section as opposed to the “Paid game with ads in trial mode” which will be listed in paid version)

In all the above options, regarding the pricing information for your app – like how much your game costs, how long is your trial period, what are all the in-app-purchase features that you would like support, what is the price for them, etc.. you will get a chance to fill these details when you upload your app for certification through the Windows Dev center.

Do this at the minimum: At least support time limited trial mode. Feature limited trial is also very easy. All you have to do is do a “Is in Trial mode” check and limit features.

Important note: You customer’s experience is the most important thing. Make sure to think about the best possible experience for them(eg: don’t spoil the game experience with too much ad etc,.) and mention what is supported in your game in trial mode/ in app purchase features etc,. in the description to avoid surprises and frustrations for your customer.

Refer to this MSDN article if you need more details.

October 2, 2012 / iunkn

Trials and In App Purchase revisted

The plugin now supports trial version of Windows 8 apps for Construct 2 and also in-app-purchases are revamped significantly.

Trial version

Let’s say you want to provide a feature limited trial version of your game in Windows 8. All you need is from within Construct 2, you need to check if the app is currently running in trial mode then you want to restrict some of the features from your app. For this purpose, the plugin provides a simple check: Is in Trial mode which returns true if you app is in trial mode and returns false if your app is in full purchase mode. Note that if your game is a free app, Is in Trial mode will always return true.

Use Is in Trial mode condition to check if your app is currently in trial mode and restrict functionality.

You can limit the game’s feature and once you feel you want to prompt the user, you can do so and direct the user to the purchase page with this action: Request App Purchase.

Limit the feature of the game with Is In Trial Mode check and prompt the user to buy using Request App Purchase option.

After the user completes a purchase you will receive the trigger On Purchase Completed. At this point, you can check if the app is in trial mode again and activate the features that you want to expose in full mode.

Once the user purchases the app/upgrades from trial mode, you can enable functionality for full version.

In app purchases

Earlier the plugin used to support only one kind of in-app-purchase. Now I have extended it to supported as many in app feature kinds as you want 🙂

Condition: Is In-App Feature Purchased – supply the feature id which you want to check. This is valid only in case of a full version – either a free or a non-trial version of the game.

Check if the user has purchased an in-app-feature and if so, activate the feature. Note that In app features can be purchased only in full mode. Not in trial mode.

Action: Request In-App Purchase – supply the feature id which you want the user to purchase.

Prompt the user to buy an in app feature and enable a feature when the user buys it.

OnPurchaseCompleted will be invoked when the user finishes purchasing. At this point, check if your feature is purchased with Is InApp Feature Purchased and enable the feature.

Testing trial mode/in app purchases

Set “Purchasing Test Mode” to true in Metro object properties in Construct 2. This means that the exported app is going to use the in-app-purchase-testing-only.xml file to simulate a listing of your app in the Windows Store. You can edit this file to simulate how you want to display your app – for example free/ with trial/ with in app purchase etc,.

Set Purchasing Test Mode when you are testing your app for scenarios around trial mode/purchasing.

You will be able to see in-app-purchase-testing-only.xml in the project when you export your game as Windows 8 app. Edit it as required:

1) By default I have set up the file for a trial version. If your game is a free game, change IsTrial to false in VS2012:

    <LicenseInformation>
        <App>
            <IsActive>true</IsActive>
            <!-- Set this to false if you are going for a free app-->
            <IsTrial>true</IsTrial>
        </App>
    :
    <LicenseInformation>

2) By default I have provided 2 in app features MyPaidFeature1 and MyPaidFeature2. Feel free to change these to something meaningful and use them throughout your project in Construct 2. Give something like “AdFreeExperience” or “Level2Unlock” etc, Note that this id as such is not visible to the user. You will get to describe a user visible description later.

    <LicenseInformation>

        :
        <!-- Make sure you use the same Id here, while referring in Construct 2 and while
             you upload your app for certification in the Windows Store. Note that you can
             set the price values in the ListingInformation section above--> 
        <Product ProductId="MyPaidFeature1">
            <IsActive>false</IsActive>
        </Product>
        <Product ProductId="MyPaidFeature2">
            <IsActive>false</IsActive>
        </Product>
    </LicenseInformation>

You can also change the price information for your in-app-purchases. Make sure to change MyPaidFeature1 in all the places within this xml file.

        <Product ProductId="MyPaidFeature1">
            <MarketData xml:lang="en-us">
                <Name>Product1Name</Name>
                <Price>1.99</Price>
                <CurrencySymbol>$</CurrencySymbol>
                <CurrencyCode>USD</CurrencyCode>
            </MarketData>
        </Product>

Edit: Added the following section on JavaScript console on 10/09/2012

When you are running with VS2012 and you test the trials and in-app-features, I have added some helpful messages to keep track of what is going on wrt the purchases. If you see the JavaScript Console below(you should be able to see this in the default view. If not, type in JavaScript console in the Quick Launch box on top right corner of the VS2012 window), you will see messages whether your purchases went through etc,. For example, you can fail a purchase and see if you game is behaving well and double check with the output below to what you are expecting. Here you can see I purchased the full version of the app and failed a purchase request for feature “MyPaidFeature1” and then tried again and succeeded the request. This logging happens only if you are using the test mode of course.

 
Important: Select a feature id like (“AdFreeExperience” or “GoldPack”) and use it in the above xml in ProductId field and also in the calls in Construct 2 like Is In-app feature purchased – “AdFreeExperience” and Request In-App Purchase “AdFreeExperience”. Since this is a testing environment, purchasing is not persisted when you restart the game.

Switching to production

Once you are done thorough testing with the simulated environment above, you will have to do the following steps to prepare your app for Windows Store submission and before running WACK:

1. In the Windows Dev center Dashboard, while you are going through the steps, you will get a chance to enter the In-App-Purchase Id in the “Advanced Features” step. It is just a string.  You will get to define the user visible description and pricing details later in the process. This should be same as the ones that you have tested with. For example “AdFreeExperience” or “Level2Unlock”

2. In Construct 2 project, set “Purchasing Test Mode” to False. Double check if you are using the same ids from step 1. (Very important)

3. At this point, when you export the project, you are configured for using the Windows Store payment gateway. Of course, when you try to run the app and invoke purchase, now you will get some error like “This app is currently not in the Windows Store” (or something similar). This is understandable because the app is not listed yet. Once the app gets published in the store, the purchase action will work fine.

The key point to note is that you don’t get to do a real testing of the purchase scenario in production environment (which makes sense) before the app is listed. So you will have to use the testing method described above to thoroughly test things and switch to production environment with the above 3 steps and submit your app.

 

September 30, 2012 / iunkn

Generating revenue with advertisements

With Windows 8 app store, there are a lot of ways in which you can plan on monetizing your creation. This particular post focusses on the In-app advertising model, where you place an advertisement in your game and generate revenue from impressions and click through actions. Let’s take a look how you can add advertisement to your Construct 2 exported game, with an option to show and hide the advertisement as required. In particular, this post is focusing on utilizing the ads from Microsoft Advertising SDK for Windows 8.

Familiarize yourself with the Ad SDK:

First lets see the basic steps in adding and displaying advertisements – try to do this with a small test project. This post is highlighting the steps from this walkthrough. Do consult it if you have additional questions in the steps below.

1. Export a test game from Construct 2 as Windows 8 store app.

2. Install the SDK following the instructions.

3. Open up the project in Visual Studio, Project->Add a reference and add “Microsoft Advertising SDK for Windows 8 (JS)” which you installed in the previous step.

4. Add the highlighted code to index.html:

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

    <!-- Microsoft Advertising required references -->
    <script src="/MSAdvertisingJS/ads/ad.js"></script>

5. Add the highlighted code as below. Note that this is using an illustrative advertisement from Microsoft Ad SDK. We will see later how to add real advertisements. With this code, you are just adding a div control hosting an ad control. Check the available ad sizes and try out different ones by changing the adUnitId value below.

<div id="fs">
    <!-- The canvas must be inside a div called c2canvasdiv -->
    <div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'testclient', adUnitId: 'ADPT33'}">
     </div>
     <div id="c2canvasdiv">
         <canvas id="c2canvas"></canvas>
     </div>
</div>

6. Now hit F5 and see the test ad show up on the top left corner.

Moving to real Ads:

Now that you are familiar with adding advertisements and gotten the hang of it, lets see what it takes to really add an advertisement to your game.

A. Think about the game layout: Placing an advertisement in a game can be a necessary evil. It might bring down the user experience quotient of your game but it is also enticing because of the obvious reasons (from the developer point of view). Hence while you are designing the game, think about where you want to place your ads. Take a look at the available ad sizes and think about how many pixels you are willing to sacrifice for ads and decide on the placement of them.

B. Register with Pubcenter: Please have a quick read about Microsoft Advertising pubCenter. In step 5 above, you see that you have used applicationId and adUnitId as test values. Visit the pubCenter register an app and create an ad unit of the size you desire. You can plug the values provided from the pubCenter website into the applicationId and adUnitId fields in the step 5 above. Additional reading.

C. Hide/show ads: Often you need better control towards when you want to show the ad and hide the ad from within Construct 2. Some scenarios include you want to hide the app in the main screen, level select screens for aesthetic reasons. You might want to have an in-app-purchase model where you want to check if the user had purchased your app and show/hide the ads as required. For this purpose you can make use the plugin and use the following events:

Using Set Advertisement visibility action to show or hide ads. Make sure you are specifying the correct id as used in index.html.

The only important thing to note is that you need to be careful in providing the ad div id to the actions above. In this case, if you see above we have used “<div id=”myAd” ..”. So we have used that same ad id in the Construct 2 project as above. As you would have guessed, you can have multiple ads showing up in your game (for example bigger ads in pages like score page/level select page etc,. and smaller ads while actually playing the game) and you can show/hide them independently.