Generate states for game character in FXG format using Adobe Illustrator

In the previous article we have mentioned using of "artboard" as a concept of AdobeIllustrator. Today we would like to demonstrate you how to use "artboard" for creating character animation by states.

At first please open your .ai file with character. In our case it is a Caterpillar from our new game "Hive Defence"(Google Play). Click on "Artboard" icon within Tool panel (see Fig. 1.1) , and rename it (see Fig. 1.2).


Here at in4ray we used to name animated character following such pattern: "CharacterName" + "State" + "##" (e.g. "CaterpillarState01"). But obviously you are free to name it at your own.

Fig. 1: 1/ Artboard Tool, 2/ Rename Artboard, 3/ Copy/Move Artwork with Artboard

Lets duplicate initial artboard. Click Artboard Tool (Fig. 1.1) then select "Copy/Move Artwork with Artboard" option (Fig.1.3), press "Alt" (both MacOS and Windows) button on your keyboard hold it and move your artwork for example at right side.

Fig. 2: Duplicate artboard together with artwork

Then change artwork at your purpose and don't forget to rename it at end. In our case we named second artboard "CaterpillarState02".

Duplicate artwork as many as you need for smoothly animation and save you work. Usually for small characters 4-6 states are enough (see below at Fig. 3).

Fig. 3: All character's states as artboards.

After you are finish it's needed to save all your artboards as a separate .fxg files. You can to do it manually for each artboard separately using common AdobeIllustrator workflow (File -> Save As -> Format: Adobe FXG (fxg)). Or to do it automatically using AdobeIllustrator script "SaveArtboardsAsFXG.jsx" which we are using at in4ray.

To install script, please download it here and place at "/Applications/Adobe Illustrator CS5/Presets.localized/en_GB/Scripts" (for MacOS) or at "c:\Program Files (x86)\Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts\" (for Windows). After placing restart Adobe Illustrator.

Open your .ai file with all the character states placed at separate artboards. Then select installed "SaveArtboardsAsFXG" script (see Fig. 4 below).

Select folder for export and click "Open" button. That's all now you have all the states for character generated by script at ones.

Feel free to use script at your own purpose and feedback us with your notes if any.