Using the Game Asset Manager in the Intel® XDK

The Intel® XDK provides a development environment for creating 2D HTML5 games using various game engines. Special Intel XDK features for game developers include a game asset manager (described in this page), game-related plug-in APIs, game samples and templates for supported game engines, autocompletion hints when using the built-in code editor, as well as many standard features available to app developers using the Intel XDK.

To get started using the Intel XDK for HTML5 game development, see Getting Started with HTML5 Game Development using the Intel XDK.

Overview

The Intel XDK Game Asset Manager provides a central place to view game assets. The Game Asset Manager also generates a code snippet for each selected asset that you can use to help you develop your HTML5/JavaScript*/CSS game sources. Code snippets are specific to each game engine and version, so you must choose the game engine and its version when you create your Intel XDK project.

The Game Asset Manager scans all supported asset types in the asset directory in your project sources - such as www/asset - and then renders them for better inspection. If you add or delete asset files or subdirectories in your asset file tree, the Game Asset Manager will refresh itself to show the changes to the disk file system.

View the following short video for a demo of using the Game Asset Manager.

The Game Asset Manager

After you create or open an Intel XDK game engine project, the Game Asset Manager panel presents a file tree showing the asset files associated with this project in left-most part of the Develop tab:

Click the button to show (toggle) a visual gallery view of this project's game assets or the built-in editor's code view. Click the or button to hide or show the Game Asset Manager panel. Click Name or Type to sort the list of assets by file name or file type, in ascending or descending order. You can also search for specific asset file names. Click Import Assets view this project's asset directory in your file system as well as show instructions about adding asset files.

Suggestions for Projects with a Large Number of Assets

Some projects use a large number of asset files. To help you locate specific files in the Game Asset Manager file tree:

• Scroll with the vertical scroll bar.
• Sort the asset files by name or type (see above)
• Search for a specific file name (see above)

Viewing an Animation Render Block in the Game Asset Manager File Tree

In the Game Asset Manager file tree, click an asset file to display a render block.

Certain asset files (such as animation or sprite sheets) will be rendered to show motion within the render block, while others are static images or define animation for other assets, but do not display animation themselves. For example, a plist file defines animation of another asset. So you need to choose the correct asset to render, such as one that uses armature or spritesheet animation. To inspect an asset, use the gallery view where you can expand an asset to inspect it and view animation of certain assets.

The bottom of the render block for the selected asset provides buttons to:

• View this asset's code snippet in the render block. Click it again to show the graphical view of this asset.
• Copy this asset's code snippet to the clipboard.

Using the Game Asset Manager Gallery View

Click the button to show the visual gallery of the game assets (shown below). Use this view to explore and render your assets, view and copy code snippets, view details, and perform related functions:

To scroll the view of assets for this project, use the horizontal scroll bar (near the bottom) or use your mouse wheel. As you scroll, notice with this thumbnail view that some render blocks show static images while others show image(s) and a right (Play) arrow:

Some assets contain a static image, while others display or define animation, so you need to choose the asset that will render the animation. For example, a plist file usually defines animation of another asset, but do not display animation themselves. In summary, some assets may be displayed or defined by other assets, so you need to choose the correct asset to render, such as one that uses armature animation or a spritesheet.

Expanding and Inspecting an Asset in the Gallery View

You can inspect and test certain render blocks that provide or define animation, or view static and similar assets that do not provide animation. To expand a render block, click the top toolbar of an render block such as its file name. This toolbar consists of a left-most icon (such as ) for non-static assets that identifies the asset type to the button.

Once expanded, the asset shown above looks like this:

The three buttons at the bottom of the expanded render block let you:

• Show or hide the background grid. For animation-related assets, this is replaced by a reload button.
• View the code snippet for this asset in the render block. Click it again to show the graphical view of this asset.
• Copy the code snippet for this asset to the clipboard.

To hide an asset in the gallery view, click the right-most button. In expanded view, you can instead shrink the asset to a thumbnail by simply clicking the top toolbar. To redisplay a hidden asset in the gallery, click its dimmed eyeball button in the file tree. For example, if you previously hid the asset d.png, click the eyeball button to the left of d.png in the file tree to redisplay it:

Viewing an Animated Preview

In either thumbnail or expanded view, hover over a right (Play) arrow of an animated or spritesheet asset to view its animation. The right arrow's background turns blue just before animation begins. For example:

When using the expanded view, you can also reload an animated asset.

Showing the Details of an Asset's Items

To view the detailed properties of a item in a spritesheet item or definition asset, hover over or click that item to view its data tip/hint. For example:

The expanded view of an asset's detailed items depends on what type of asset it is. For animations, each frame of the animation appears along with the real animation. For a spritesheet (shown), hovering over a item (sub texture) will show details (such as file name, rectangle coordinates, and rotation). For bitmap font, a playground appears allowing you to type, and the text rendered with that font appears.

About Using Code Snippets

When you created your Intel XDK project, you either used a template or demo to start a project or you imported an existing game project. Only certain game engines and version(s) allow generation of code snippets, which are specific to each game engine and version.

The code snippets provide general guidelines and include helpful comments. After you copy a code snippet, paste it into a proper place in your source JavaScript files. Follow the instructions in the comments to edit the snippet so its works with your existing source code. Some comment lines include a TODO string to remind you that you need to modify that part of the code. Preview the asset in the device emulator (Emulate tab) to ensure it is working correctly.

To switch between the Develop tab Code view and the Game Asset Manager gallery view, click the button to the right of Game Asset Manager.

To view the video of using the Game Asset Manager, see the video in the Overview above.

For general getting started information, see Getting Started with HTML5 Game Development Using the Intel XDK. For a list of supported versions, see the Intel XDK Intel XDK release notes.

Resources

• To get started using the Intel XDK for HTML5 game development, see Getting Started with HTML5 Game Development using the Intel XDK.
• For more information about the Intel XDK and its related software, access the Intel® Developer Zone 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.