Pipeline Workflow Overview

Creating a new asset and putting it into the game requires the following steps:

1. Develop of original art asset
2. Export assets into tilesheet compatible format (png image, or sequence of png images for animations)
3. Compile individual images into tilesheet(s)
4. Build tilesheet metadata file
5. Build animation metadata file (if doing animation)
6. Create an entity that uses the asset
7. Put the entity into a map (to test)
8. Load the map into a game to test

Pipeline step-by-step

1. Develop original art

 
How original art is developed is entirely up to the artists. The artist should just keep in mind that the art will have to be converted to PNG to work in the game engine.
 

2. Export to tilesheet compatible format

1. Images must be exported to a format supported by firmament engine. PNG and JPEG are supported, but only PNG has alpha channels, so PNG is the recommended format.
2. Images should be organized in directories, one directory for one tilesheet. This makes the next step easy.

3. Compile individual images into tilesheet(s)

This can be done manually, but it is recommended that you use a tool like TexturePacker (http://www.codeandweb.com/texturepacker) for this. Firmament comes with an exporter for texture packer.
 

Setting up TexturePacker

After TexturePacker is installed, you will need to tell it where to find the firmament plugin. These instructions assume you already have firmament engine somewhere.
 
 

1. Open TexturePacker
2. Open TexturePacker preferences
3. Find the ‘Exporter Directory’ box
4. Click the ‘...’ button and navigate to your firmament folder.
5. navigate to the following folder: Firmament/tools/ 3rdPartySupport/texturePacker and hit ‘select’ or ‘choose’ depending on your system.
6. Hit ‘ok’ to save your changes.
7. in the ‘Output’ pane on the left, you should now see ‘Firmament Engine’ as an option in the ‘Data Format’ dropdown. If you do, then all is well!

Building Tilesheets With TexturePacker

Building tilesheets and their metadata is very easy with TexturePacker.

1. Open TexturePacker
2. If you are creating a new tilesheet, follow steps 2-
3. In the output pane on the left, select ‘Firmament Game Engine’ in the data format dropdown.
   1.  
4. In the data file box, navigate to the tilesheets folder for your project (configs/tilesheets) and enter a name for the new tilesheet.
5. select PNG as the texture format.
6. in the texture file box, navigate to your project’s tilesheet folder (assets/tilesheets) and enter a name for the tilesheet.
7. Drag the folder contianing the images into TexturePacker. You should then see the images show up on the right, and in the tilesheet. 
   1.  
8. Hit the publish button . This will generate the tilesheet and metadata files in the specified locations.
9. Hit the save button  to save this tilesheet’s configuration (sourceAssets/texturePacker is usally where these are kept in the project)

4. Build Tilesheet Metadata File

If you are using TexturePacker, it does this for you so you have nothing to do for this step.
 

5. Build Animation Metadata File

If you are not doing animation, skip this.
Firmament uses tiles from tilesheets for its animations. In order for this to work, Firmament needs to know which tiles in a tilesheet make up the animation, what sequence they should appear, and the amount of time between each frame. Tilesheet metadata files do this.
 
To create a new tilesheet metadata file:

1. Find your project’s tilesheet metadata folder (config/tilesheets by default)
2. Create a new file called [NameOfTilesheet].json in that folder

3. Open that file up in a text editor, and put in something like this (this example is from the example project, and is a spinning globe):

   {
    tilesheetFile:"config/tilesheets/earthAnimation.json"
    ,frames:[
     "globe_1"
     ,"globe_2"
     ,"globe_3"
     ,"globe_4"
     ,"globe_5"
     ,"globe_6"
     ,"globe_7"
     ,"globe_8"
     ,"globe_9"
     ,"globe_10"
     ,"globe_11"
     ,"globe_12"
     ,"globe_13"
     ,"globe_14"
     ,"globe_15"
     ,"globe_16"
     ,"globe_17"
     ,"globe_18"
    ]
    ,timeBetweenFrames:0.1
   }

4. You’ll want to change the data here of course:

1. Set the tilesheetFile to the name of the tilesheet file the animation frames are in.
2. the ‘frames’ list should contain the tilesheet labels for each frame. The frames will be animated in the order they are listed here.
3. set ‘timeBetweenFrames’ to the number of seconds (or a fraction of a second) to wait between frames.