Skip to content
September 14, 2012 / iunkn

Scaling for various screen sizes in Windows 8

(This is a copy of the entry made in Construct 2 tutorial section.)

Windows 8 runs on a wide variety of screen sizes and it is important to make sure that your game looks great on all the screen sizes. While it may sound daunting it is not really that hard to get things right on various screen sizes.

I started off by reading the MSDN article Guidelines for scaling to screensizes and would like share my learning. As the guideline notes, games typically fit into the category of Fixed layouts as opposed to Adaptive layout which is useful for apps like readers/photoviewers etc,. (I recommend you to read the sections relevant to Fixed layout in the article I mentioned above). I am summarizing for the games that are written in Construct 2 specifically:

1. Start by designing your game for 1366x768px(16:9) layout in Construct 2.

2. Provide assests which are twice as large as you actually need. For example, if you want to have a 50×50 pixel asset in your game, generate 100×100 pixel asset and scale it in Construct 2 for your needs. Why? Windows 8 will scale your asset on bigger screens like 23″ monitors and your game assets will look crisp if you provide larger assets. (The other alternative is to provide vector images but unfortunately Construct2 does not support vectors(afaik). So we have to provide 2x assets.)

3. Export your game for Windows 8, set “Fullscreen in browser” property of the project to “Letterbox scale”.

Alright. So far so good. Since you have designed for 1366×768 layout your game would run fullscreen in the aspect ratios of 16:9 (1366×768, 1920×1080 irrespective of the physical screen size) and with letterbox effect in the other resolutions, which is still okay. There is one another aspect that you need to be aware of wrt Windows 8. The games/apps can be snapped by the user to left or right side of the available screen and your game will have to consider this. If not, your game will be resized to a small window within the snapped view if you had followed the steps 1-3 above:

Snapview after exporting with Fullscreen (Letterbox) option in Construct 2. Note that the game is letterbox-ed into the snapview.

In order to better handle this, CSS media queries can be used to detect when the game is snapped and act accordingly. If you use the Metro/Windows8 plugin, you will get this behavior automatically when you export for Windows 8 from Construct 2.  This is ideal for games that do not want to let the users play in the snapped mode. With the use of plugin, the snapped view looks something like the below picture and you can customize it by editing index.html with ease.

Snapview with metro/Windows8 plugin. Note that you can expose a different view.

Also note that your game can be in the filled mode (ie the other part of the snapped view), which you don’t have to do anything since you have set up your project for scaling using the above steps and Windows 8 will scale the app automatically in the filled mode.

Download the latest plugin and give it a try.

 

September 7, 2012 / iunkn

Supporting In App Purchase

Please refer this later blog post for In App Purchases.

The content in this blog post may not be applicable anymore.

———————————

Let’s say you want to ship a freemium game where you ship the game as free but you want to lock down on the higher levels or features behind a pay wall. With the r6 update, the metro plugin enables this scenario. Here is a step by step guide:

Working with In App Purchases before publishing to the Store:

When you want to expose in-app-purchases, you will want to test the purchase experience. For this, Windows 8 provides a way to test using a test mechanism, which I am exposing to Construct 2 via this plugin. Let’s see how you can add and test your in app offer before switching to production.

1. Set the Show Purchase property in Metro plugin to True. This will make sure that the user will be provided with a Purchase option in the Settings Charm.

2. Note that In App Purchase Feature Id is set as MyPaidFeature and In App Purchase Test Mode is set to True.  The feature id is used to identify your feature and for testing purposes the plugin supplies an xml file which is the representation of your feature in the Windows Store. Do not change this feature id. (If you want to change this, you will have to update the xml file as well.)

Property Sheet showing settings for turning on In App Purchase

3.Thats it! Now you are ready to use In App Purchase. You can use the following expression and trigger to base your options.

Triggered when InAppPurchase is completed by user.

Make sure to check if the user owns the feature during layout start.

[09/26/2012: Edited to add details on how to configure while submitting to store]

Switching to production

Once you are done testing, 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. Give something like “AdFreeExperience” or “Level2Unlock” etc, Note that this id is not visible to the user. You will get to define the user visible description and pricing details later in the process.

2. In Construct 2 project, set “In App Purchase Test Mode” to False and set the “In App Purchase Feature Id” to the string you set in Dashboard in step 1 above.

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 from Settings Charm, 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.

Important limitation: Currently the plugin supports only one in-app-purchase feature. Ie you cannot have two features (like Level 2 unlock for $1.49 and Level 3 unlock for $2.49. You can have only one feature for one price)

September 6, 2012 / iunkn

Support for resetting the game data in Settings Charm

In the past two releases, the Windows 8 plugin for Construct 2 added support for storing Local data and Roaming data. Sometimes user would want the ability to reset the data stored so as to begin fresh. This release provides a way to do that with much simplicity. All you have to do is to set the “Show Reset Button” property to True in the plugin property sheet.

Windows 8 plugin for Construct 2 - Property Sheet for R5

When you do this, you will get the “Reset” option in the Settings-Preferences pane as below. When the user goes ahead with Reset, a confirmation is shown as below.

Reset Option shown in Settings Preferences

Reset Option shown in Settings Preferences

Reset Confirmation

Reset Confirmation

When the user actually clicks “Yes” in the confirmation, a new trigger “On Game Reset” will be invoked. This means that all the stored local and roaming data is deleted and in the Construct 2 event sheet, you can use this trigger to reload the game freshly.

OnGameReset Trigger

OnGameReset Trigger

Download the latest plugin and sample!
Refer to the manual!

August 31, 2012 / iunkn

Storing App Roaming Data

Windows 8 automatically transitions certain application data between user devices. No special logic needs to be done by Metro apps except for storing them in the app roaming settings. The heavy lifting for syncing the data is managed by Windows 8. Metro plugin for Construct 2’s latest addition is the ability for the Construct 2 games to store the data in Roaming storage.

This means that if a user plays a game in on Windows 8 desktop machine, the game can save the data to the app roaming settings. When the user later logs into his Windows 8 tablet using the same Microsoft account, the saved data for the game is automatically synced to this machine. This implies that details like level unlock, high scores for levels etc,. can be roamed pretty easily. Strongly recommend reading Microsoft’s guidelines for roaming app data. There are limitations on the size of data that can be synced but for typical usage, it should be enough.

All the Construct 2 game has to do is use the roaming storage actions, conditions and expressions provided by Metro plugin. You will get the data automatically synced between user’s machines. If you know Construct 2′ WebStorage object, you already know how to use the Roaming data APIs. The following are the newly added roaming capabilities to the plugin:

Conditions: Roaming Key Exists

Actions: Set Roaming Value, Remove Roaming Value, Clear Roaming Storage

Expression: Roaming Value

Usage: Same as WebStorage  plugin provided by Construct 2 and local storage capability provided by Metro plugin for Construct 2.

Download the latest plugin!

Refer to the manual!

August 11, 2012 / iunkn

Storing App Local data

The Windows 8 apps can store application data using the methods exposed by Windows 8. Please refer Application Data (Metro style apps)  for background. With the R3 update to the Metro plugin the capability to add application data to local machine from within Construct 2 is implemented. This means that you can store information like level unlock state, score for level, high score detail etc,. in the local app data. Note that this information persists across different launch sessions of the app/game.

I have modeled the interfaces in this plugin to be exactly the same as the WebStorage plugin included by default in Construct 2. So if you know/have used WebStorage plugin, you already know how to use this new addition to Metro plugin. 🙂

The following are newly added:

Conditions: Local Key Exists

Actions: Set Local Value, Remove Local Value, Clear Local Storage

Expression: Local Value

<I have copied the following from WebStorage plugin manual and modified it for this plugin:>

The Metro object uses a very simple storage model: values are stored under named keys, similar to how the Dictionary object works.  For example, the value 100 could be stored for the key score with the action Set local value “score” to 100.  Similarly the value John can be stored for the key name.  Then the expression Metro.LocalValue(“score”) returns “100” (as a string) and Metro.LocalValue(“name”) returns “John”, and these values persist between launches.
Note Metro only stores strings.  If you set a key to a number like 100, when you retrieve it back it will be a string.  To convert it back, use the system expression int, e.g. int(Metro.LocalValue(“score”)).

July 27, 2012 / iunkn

Support for Live Tiles

Live Tiles

Windows 8 provides a way for the Metro applications to send notifications to the application’s Tile on the Start screen, which will animate when the user visits the Start screen.

The Metro plugin for Construct 2 now has the ability to send notifications to the Live Tile. Hence Construct 2 games can use this to send a notification to the Live tile in Start screen. Here is how it looks like:

Metro Ghost Shooter – Live Tile in the Start screen before user launches it for the first time.

Metro Ghost Shooter – Live Tile with a notification.

Here is how the event sheet looks like:

After exporting you will have to do the following changes to your Visual Studio project:

Provide a wide tile for your project in package.appxmanifest in your project. Make sure to name your file app-widelogo.png and have it at the root (along with app-logo.png and app.smalllogo.png).

Change the manifest to provide a wide tile of specified size. Make sure to name it app-widelogo.png.

Next Step:

As before, Download the plugin and the illustrative sample —  let me know what you think and what more features you would like!

July 16, 2012 / iunkn

Introducing the Metro Plugin for Construct 2

Metro Plugin – What is it?

Construct 2 is a HTML game maker. It provides the ability to export a game created using Construct 2 as a Windows 8 Metro app. In order for a game to have a professional finish, it is necessary to have good integration with the platform that it runs on.

The Metro plugin provides you a quick and easy way to integrate the games you wrote with Construct 2 into Windows 8. For example, to start you off, just adding this object in your Construct 2 project, you will get the Settings charm populated with the following!

Metro-fied version of Ghost Shooter game written with Construct 2 and Metro plugin

“Metro-fied” version of Ghost Shooter tutorial written with Construct 2 and Metro Plugin running on Windows 8 Release Preview.

Here is how the event sheet looks like when you use the Metro plugin in Construct 2.

Illustrating the On Game Lost Focus Condition.

Illustrating all other commands/actions/expressions

Next Step:

Download the plugin and the illustrative sample —  let me know what you think and what more features you would like!