The Intel® XDK provides a development environment for creating hybrid mobile apps, including 2D HTML5 games. Special Intel XDK features for game developers include a game asset manager, game-related plug-in APIs, game samples and templates for supported game engines, autocompletion hints in the built-in code editor, and standard features available to app developers using the Intel XDK, such as packaging apps for different platforms.
Game Engines and Using the Intel XDK for Game Development
Many game developers create game apps using a certain game engine that simplifies development of their game app using HTML5/JavaScript*/CSS source code. As a game developer, you may prefer to use your existing set of tools instead of the Intel XDK to develop HTML5 games. In some cases, game engines provide a GUI interface and do not require any programming, such as Construct 2*. For a summary of the steps to import an Construct 2 project and build it with the Intel XDK to create apps you can publish to app stores, see this article or read the step descriptions below.
For those game developers who do not have a development environment or prefer to use the Intel XDK to develop their game apps, the Intel XDK Game Asset Manager provides a central place to view game assets during game development. The Game Asset Manager supports certain game engines and versions that must be specified when you create the Intel XDK project. When you use a supported game engine (and its version), the Intel XDK can also generate code snippets for a selected asset that you can use to help develop your HTML5 game sources. The supported game engines are:
When you import an existing game engine project using the Intel XDK, specify that the project is a game project and type the game engine name and its version (n.n.n format). For a list of supported developer game engines and their versions, please see the Intel XDK Intel XDK release notes.
The following sections provide instructions for importing game projects where you either:
- Will not use the Intel XDK for development, including game engines that do not require programming.
- Will use the Intel XDK for development, including apps that use HTML5/JavaScript/CSS programming.
Export and Package a Game App, But Do Not Use the Intel XDK to Develop It
If you developed your HTML5 game app using your current set of tools outside the Intel XDK or used a tool like Construct 2 that does not require programming, use only certain parts of the Intel XDK:
- Export your project from your current tool. When using Construct 2, export by selecting the PhoneGap platform. When developing your HTML5 game outside the Intel XDK, copy the current set of project files to a new directory tree on your development system.
- Download, install, and launch the Intel XDK.
- Import the HTML5 project files into the Intel XDK and create an Intel XDK project.
- In the Emulate tab, you can run your game app to verify that the app files have been migrated successfully on one or more virtual devices.
- In the Projects tab, select the appropriate Apache Cordova* plugins and specify app and build settings.
- In the Build tab, package your app for submission to an app store. For example, to build a Construct 2 game:
- Choose Crosswalk* for Android under Cordova 3.x Hybrid Mobile App Platforms if you exported your Construct 2 game for the Android platform.
- Choose either Crosswalk for Android or iOS under Cordova 3.x Hybrid Mobile App Platforms if you exported your Construct 2 game for the PhoneGap* platform.
To update files modified using the Construct 2 GUI or your own development tools outside the Intel XDK, use your file system to copy updated files from your other project directory tree to the corresponding location in your Intel XDK project directory tree.
For more instructions about Construct 2 projects:
- To export a Construct 2 project, import it into the Intel XDK, and build it, see http://shatter-box.com/documentation/construct-2-crosswalk-for-android/.
- To import a Construct 2 project into the Intel XDK, use the Projects tab to specify app settings, the device emulator to test it, and the Build tab to package it.
Develop and Package a Game Developer Project from a Template, Demo, or Imported Project
Special Intel XDK features for game developers include:- A Game Asset Manager for when you use the Intel XDK as a development environment.
- Access to game-related API plug-ins.
- Game samples and templates for supported game engines that use one of the supported game engines.
- Autocompletion hints for game-related JavaScript* APIs when using the built-in code editor.
- A comprehensive set of standard features available to any mobile- and web-app developers using the Intel XDK.
Standard development features of the Intel XDK include:
- Explore available samples and templates and create an Intel XDK game project using the Projects tab.
- Develop your app using your favorite code editor or the built-in code editor. You can preview your app as you make source code changes.
- Debug your app using the Chrome Developer Tools* (CDT) debugger, by running your app on an actual mobile device or as a simulated virtual device in the emulator.
- Test your app on a mobile device using the Intel XDK App Preview app, interacting with a local device (Develop tab) or server-based app (Test tab).
- Package your app for submission to app stores as a bundle using the Build tab.
Create a Game Engine Project
You create a project as a container for your app to which you can apply app settings. When you create your Intel XDK project, you need to choose which game engine and version. To create your Intel XDK game project, choose one of the following methods:- Start with a template: An Intel XDK project you can use to create your game app with one of the supported game engines.
- Work with a demo: An Intel XDK project that provides a working game app that you can modify as needed that use one of the supported game engines.
- Import an Existing HTML5 Project: If you have an existing HTML5 game app, the Intel XDK examines your source files before it converts it to an Intel XDK project.
- If the imported project is a Game Project and you want to develop your game app using the Intel XDK, check Yes. Choosing Yes lets you view your imported project's game assets using the Game Asset Manager in the Develop tab.
- Verify that the game engine detected by the Intel XDK is correct. The Intel XDK uses the specified version you specify while generating code snippets in the Game Asset Manager, so if you omit or enter an incorrect version, game engine snippets may not be available or may be invalid.
- When importing a game engine project into the Intel XDK Projects tab, see Import an Existing HTML5 Project. For a list of supported game engine versions for this release, see the Intel XDK release notes.
To learn more about Intel XDK Projects, project root and source directories, and exploring the available demo samples and templates, see Using the Projects Tab.
Introducing the Game Asset Manager
The Intel XDK provides a Game Asset Manager in the Develop tab to help you add and manage your game asset files from a central location within your Intel XDK game project.
The Game Asset Manager shows a file tree of assets associated with the active project. For example, after you create a project using the game demo app Cocos2d, the Develop tab contains the Game Asset Manager in the left pane: 
 | The Game Asset Manager file tree shows this project's assets within the asset source directory. Click the  button to show either the built-in editor code view (shown) or a gallery view of the game assets. |
 | If you click one of the listed asset files, a preview appears in a pop-up render block window  . The list of assets (file tree) is updated as you add or remove files/directories in the file system below the asset directory. |
 | This pane shows all files associated with the project in a file tree for use by the built-in code editor. The list of project files are updated as you add or remove files/directories in the file system below the project source root. |
| | The popup preview pane shows a rendition of the selected file. Buttons at the bottom of this pane let you view or copy code snippets associated with this asset. Code snippets are specific to the game engine and its version specified when you created the Intel XDK project. |
 | The built-in editor Code view (shown) appears for most files. The code editor supports split views for side-by-side viewing of files. |
asset directory in your file system.For information about viewing your game assets, see Using the Game Asset Manager in the Intel XDK.
Using Standard Development Features in the Intel XDK
As a game app developer, you can use many standard features using the Intel XDK available to all app developers. The following sections summarize these features and their Intel XDK tabs. For a short tutorial about using the Intel XDK development environment, see the Tutorial: Get Started with the Intel XDK.
Selecting Plugins and App Settings in the Projects Tab
Use game-related APIs by selecting their Apache Cordova* plug-ins by using the Projects tab. Select plugins under Cordova 3.x Hybrid Mobile App settings. Some game-related plugins appear under: Featured & Custom Cordova Plugins, such as Google Play* Games Services and PhoneGap* Admob*. You can also use Third-party Plugins to import a custom local plugin or add custom third-party plugins from the web, such as Admob* by Google*.Using the Code Editor, Previewing Changes, and Running Your App
Develop apps using your current code editor or the built-in code editor in the Develop tab.You can preview live changes as you develop your app running on an actual mobile device or browser in the Develop tab. You can also run your current project's app on a mobile device connected to your development computer using WiFi or a USB cable, or access previous versions of your app on a server. To run or test your app on a mobile device, you may need to install an Intel XDK tool called Intel App Preview on your testing devices.
Exploring and Integrating Web Services in the Develop Tab
The Intel XDK provides the ability to explore and integrate web services into the Intel XDK using the Develop tab.
Using the Device Emulator
Test and debug the app inside the device emulator using a one of several simulated virtual devices. To use the device emulator, either click the Emulate Tab, or from the Develop tab use the Live Development Tasks pane to click Run My App > Run in Emulator.
Debug and Test Your App
Test and debug the app inside the device emulator using a one of several simulated virtual devices. You can also debug your app by running it on an actual mobile device. Whether you run your app within the device emulator or on a device (such as the Debug tab), the debugger is the standard Chrome Development Tools* (CDT) debugger.Test your app on a mobile device using the Intel XDK App Preview app, interacting with a local WiFi or USB-connected device (Develop tab) or server-based app (Test tab).
Package Your App for App Store Submission
Package your app for submission to app stores using the Build tab. Before you package your app by choosing a platform available under Cordova 3.x Hybrid Mobile Apps, check the plug-ins, app settings, and permissions in the Projects tab for each OS platform.
Resources
- For details about using the Game Asset manager, see Using the Game Asset Manager in the Intel XDK.
- For more information about the Intel XDK and its related software, access the product overview at: http://xdk-software.intel.com
- For a quick summary of the Intel XDK product and links to related documentation, see the Intel XDK Overview
- For information about using the built-in code editor, see the Using the Code Editor in the Intel XDK Develop Tab
- For a short tutorial about using the Intel XDK development environment, see the Tutorial: Get Started with the Intel XDK