Construct 2

Construct 2 includes an Export Project wizard that allows you to export your project to BlackBerry 10. The export process creates an HTML5 version of your game's project files. You can use the BlackBerry 10 WebWorks SDK to package those files into a BlackBerry 10 WebWorks app.

Before you attempt to export your Construct 2 game into a BlackBerry 10 app, you need to complete the following steps:

Once you have the WebWorks SDK installed and your signing token in place, you can create a WebWorks project, then export your Construct 2 project assets into that project.

Create a WebWorks project

Before you port your Construct 2 game, you need to create the WebWorks project which will house the Construct 2 code. You can use either the SDK web tool or the command-line tools to create your new WebWorks project. For this sample, we'll use the web tool.
  1. Open BlackBerry WebWorks <version>. A new browser window opens, displaying the BlackBerry 10 WebWorks SDK web tool.
  2. Click [+] beside the Projects heading in the navigation panel.
  3. Enter C2Sample in the Project Name field.
  4. Enter C:\TestApps in the Project Path field. This folder is the root folder for your WebWorks project, represented by <project-root> later in this tutorial.
  5. Click Save. The tool creates a pre-populated WebWorks sample project.

    Leave the SDK web tool open for now. You'll return to it once you have added your Construct 2 project assets to the WebWorks project.

  6. On the command line or in a file manager, navigate to <project-root>\www folder and delete the entire contents of the folder, including all subfolders. You can now populate your WebWorks project with the Construct 2 content.

Export your Construct 2 project to HTML5

  1. Open your game file in Construct 2.
  2. Click File > Export project > HTML5 Website.
  3. In the Export files to field, leave all other fields as their default values and click Next.

    Do not enable the Minify Script check box. Minifying your script may interfere with certain plugins.

    Export HTML5 Project screen Construct 2
  4. On the HTML5 export options screen, select Embed Style to export the content with no margins and no scroll bar. This format is the most suitable for a BlackBerry WebWorks app.
  5. On the HTML5 export options screen, click Export.
    The following window appears:
    Construct 2 - Export HTML 5 project results window
  6. Copy the files from the export folder to the <project-root>\www folder in your WebWorks project.

Update your project configuration details

Before you can build your project, you need to make a few modifications to your project's configuration. Your project configuration details are stored in the config.xml file for your project and allow you to define general app information, such as the app name, description, start page, and home screen icon. You can also specify the platform features and functionality that the app can access.

You can modify your project configuration either by manually modifying the config.xml file, or by modifying the entries on the Config page in the SDK web tool, which then updates the appropriate config.xml file entries for you. For this sample, we'll use the web tool to modify a few basic configuration settings. For information on modifying the config.xml file directly, see Modifying your config.xml file.

To modify the project configuration details:

  1. Return to the BlackBerry 10 WebWorks SDK web tool.
  2. Navigate to your project and click Config.
  3. Specify your own values for at least the following configuration settings.
    Preference Description

    App ID

    The ID of your application. The ID should be unique. You should use a reverse DNS format for all platforms, for example, id="com.somedomain.C2Sample".

    App Name

    The name of your proeject. This name identifies your app on the device Home screen.

    App Description

    A description of your app. The description


    Your name, or the name of your organization.

    To learn more about the other configuration settings available, see Configuring your app preferences.

  4. Click Save. You can now test your Construct 2 app on a device or simulator.

Test and debug the app

With the Construct 2 project assets added to your WebWorks project file structure, you can launch the app on a device or simulator for testing.

  1. On your BlackBerry device or BlackBerry 10 Device Simulator, enable Development Mode.
    1. On the home screen, swipe down from the top of the screen or find the Settings app on your home screen.
    2. Navigate to Settings > Security and Privacy > Development Mode.
    3. Set the Development Mode toggle button to On.
    4. When you are prompted, enter the password for your device or simulator, and tap OK.
  2. Perform one of the following:
    • Connect your device to your computer via USB.
    • Start your BlackBerry 10 Device Simulator.
  3. Return to the BlackBerry 10 WebWorks SDK web tool.
  4. Click Build.
  5. Select Debug Mode as the build mode.
  6. Select either Device or Simulator as the target type.
  7. From the Install Target drop down list, select Autodetect.
  8. Enter your device or simulator password.
  9. If you are testing on a device, enter your keystore password, which you defined when you requested your BlackBerry ID token. If you are testing on a simulator, a keystore password is not necessary.

    If you have not yet requested your BlackBerry ID token, see set up your computer for testing and signing.

  10. Click Build & Install. After creating and installing a debug token, if necessary, the tool builds, installs, and launches the app.

Build the release version of your app

With your testing and debugging complete, you can build your completed app in release mode. When you build your app in release mode, the SDK packages your app resources and plugins together in a .bar file, then signs the app.

You can install the resulting signed .bar file on the BlackBerry 10 Device Simulator or on a BlackBerry 10 device, without restrictions. You can also submit it to BlackBerry World where it is reviewed, and if approved, made available to users.

To build your app in release mode:

  1. In the BlackBerry 10 WebWorks SDK web tool, navigate to your project and click Build.
  2. Select Release Mode.
  3. Enter your keystore password, which you defined when you requested your BlackBerry ID token.

    If you have not yet requested your BlackBerry ID token, see set up your computer for testing and signing.

  4. Click Build.

When the tool has finished building and signing your app, it places the signed copy of the .bar file in the following location: <project_root>\platforms\blackberry10\build\device.

Best practices

In Construct 2, you can modify the viewport fairly easily to create games for specific BlackBerry 10 devices. For more information on designing for different screen sizes, you can reference the screen size chart in the UI guidelines.

BlackBerry 10 supports both WebGL and 2D Context for rendering, so you can choose which one you prefer to use. You can also export your game for each API separately, so it can be deployed on a wider range of operating systems.

Last modified: 2014-12-04

Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus