Exporting Game Assets to Easel JS

The Export to Easel JS dialog allows you to export your game character as a sprite sheet, in which each animation frame in your scene is rendered as an individual sprite.

Since the Export to Easel JS dialog renders each frame in your scene, there will not be any visible difference between the way your character is rendered by Harmony and how it is rendered in your game engine.

However, the Export to Easel JS dialog has the following important limitations:

• Contrary to the Export to Sprite Sheet dialog, the Export to Easel JS only outputs a sprite sheet and an XML document delimiting each sprite in the sheet. Hence, they cannot be imported into Unity using the Harmony Game SDK package. You must program the logic to import those sprite sheets into your game engine yourself.
• The Export to Easel JS dialog does not export anchors and props.
• Fully rendered sprite sheets are much heavier in size than rigged sprite sheets, which is what the Export to Sprite Sheet dialog exports.

How to export a game character to Easel JS

1. Do the following to add the Game toolbar to your workspace:
   • In the top menu, select Windows > Toolbars > Game.
   • Right-click on any existing toolbar and select Game.

   The Game toolbar is added to your workspace.

   

2. Open the base scene version for your character, that is: the scene version in which you built your character rig.

3. In the Game toolbar, click on the Export to Easel JS button.

   The Export to Easel JS dialog appears.

   

4. Right of the Asset Path field, click on the ... button.

   A folder select dialog opens.

5. Browse to and select the directory in which you want to create your asset directory.

   NOTEYou do not need to create a directory specifically for your exported assets. One will be created with the name in the Asset Name field.

6. In the Asset Name field, type in the name of the directory in which to export your assets. This will also be the name of the GameObject in Unity.

7. In the Sprite Resolutions section, there is a list of all the resolutions in which your sprite sheets will be exported. Do the following to export in the resolutions you want your game support:
   • To add a resolution, click on the Add Resolution button. A row will be added to the list. Double-click on each field in the new row to type in its name, its width and its height, in that order from left to right.
   • To remove a resolution, select it in the list, then click on the Remove Resolution button.

8. For most usages, the other default parameters in the dialog should be fine. To learn more about the parameters in the Export to Sprite Sheet dialog, refer to Export to Easel JS Dialog Box.

9. Click on Export.

   Harmony will export the sprite sheet for your base rig.

10. Open the scene version for the first animation clip for your character.
11. Repeat steps 3 to 10 to export the animation for this scene version. Make sure to export in the exact same directory in which you exported the sprite sheet for your base rig.
12. Repeat for each scene version containing an animation clip for your character.