You can also learn much of this by watching the video tutorial "Modding with an Iron Fist: Episode 3: Adding New Creatures," http://www.youtube.com/watch?v=jLEjN6YkvEQ
Heroes II stores graphics in its own format called ICN. Each ICN file contains many related spirtes. For example, PIKEMAN.ICN contains all of the pikeman's combat graphics and animations, while ARTIFACT.ICN contains full-size portraits of every artifact in the game. This tutorial explains how to turn your art into an ICN file so that it can be added to the game. You will need to download the Ironfist tools, IronfistTools.zip .
Perhaps the easiest way to understand how to prepare art is to see an example. You can unpack any existing ICN file by dragging and dropping it onto "H2IcnUnpack.exe" . See Packaging Resources to learn how to access the ICN and other data files used by Heroes II. Here's an example of what the pikeman graphics look like when unpacked: pikeman.zip .
Using the ICN Importer
The overall setup is that you will create a folder named something like "MY_ART.ICN.cadres", place all frames inside the folder along with a special file called "setup.ini," and then run the program "ICNPack" on it. The ICNPacker is included in the "tools" directory of the Project Ironfist git repository. You can also download it separately here: (IronfistTools.zip )
Image Format
-
Each file in the folder should be named "0000.bmp", "0001.bmp", etc.
-
ICNs which contain a single animation, such as spells and explosions, must have frames in the order of the animations
-
Creature ICNs may have frames in any order. However, we will follow the following convention: First will be the standing frame, then frames associated with the fidget animations, then walking, shooting (if applicable), melee attack, wincing, and finally dying.
-
ICNs which contain graphics for many different things will have special requirements on frame numbering. For example, ARTIFACT.ICN has one frame for each artifact, indexed by artifact ID. The Lightning Rod has artifact ID 51, and would be placed into ARTIFACT.ICN.cadres as 0051.bmp . It is typically easy to figure out what the pattern is from looking at the existing frames in the ICN.
-
Each BMP file must have the same dimensions
-
The BMP files must be 256-color BMPs saved without compression
-
The BMP files must use the HoMM II color map! It is not enough to restrict usage to colors which are in the HoMM II palette. You must use the exact given color map, with all colors in the same order. We discuss the HoMM II palette in another section below.
Notes on the HoMM II Palette
This is the HoMM 2 palette:
Note that some of the first colors are actually special "control" colors. We use special colors not in the image above to specify them to the ICN importer tool.
- Bright purple (#ff00ff) and faded purple (#ff32ff) represent dark and light shadow. This will display in the game as a dark, semi-transparent color.
- Cyan (#00ffff) represents completely transparent pixels.
- Yellow (#ffff00) denotes "highlight" pixels. When a creature is selected, its highlight pixels will blink on and off, transitioning between transparent and yellow. This makes the creature look like it's "highlighted." When a creature is not selected, its highlight pixels will be transparent.
- Use purple (#b400ff) for the overlap between highlight and light shadow
- Use green (#00ff00) for the overlap between highlight and dark shadow
Color cycling
Furthermore, some additional colors on the palette are treated specially by the game, and are involved in "Color Cycling." The game will automatically rotate between the colors every frame to produce some "animations." For example, the game cycles between several blues to animate its sea tiles, and between several reds and oranges to animate its lava tiles. If you unintentionally use a cycled color, your art may appear to "blink."
This GIMP palette file contains all colors of the HoMM 2 palette in the correct order, along with the special control colors: HoMM2.gpl
In the image below you can see colors that cycle surrounded by rectangles
In the white, violet and brown colors cycle from left to right in a group of 4 colors
In the yellow rectangle colors cycle from right to left instead and the group consists of 5 colors. Also the 4th color in a dotted black rectangle is copied into a color represented by a black rectangle (right after this group)
Notes on transparency
You should be careful using colors 0 - 9 and 246-253 since they are rendered at various transparency and different color instead of what they look in the palette image
Colors in question as in palette below
Converting other Images to the Palette
These instructions are for the GIMP. We would also like to have documentation on how to do this in Photoshop.
Use this GIMP palette file: HoMM2.gpl
Install it in your GIMP palettes directory.
To convert an image, open it in the GIMP, then go to Windows > Dockable Dialogs > Palettes > R-click > Import Palette .
Creating the setup.ini file
The setup.ini file will control the order the images will appear. It looks like this:
[Position]
X=0
Y=0
[Bits]
first_image.bmp=0
second_image.bmp=0
...
last_image.bmp=0
You can set the "X" and "Y" fields in setup.ini to shift all frames by those amounts. If you write "-X" and "-Y" as the offsets, then you are essentially making pixel (X,Y) the reference pixel, meaning the game will use that pixel to position the graphic.
Running ICNPack
Place all the images in a folder. Name the folder what you want the ICN to be called followed by ".cadres". For example, if you want to produce a file called "PIKEMAN.ICN", then you will need to name the folder "PIKEMAN.ICN.cadres".
Now, add create the setup.ini file as explained above.
To transform the folder of images into an ICN sprite archive, you'll again need the Ironfist tools ( IronfistTools.zip ) . Drag-and-drop the folder onto "H2IcnPack.exe", and it will create your ICN file.
Instructions for Ironfist Artists Exporting Art
As an Ironfist artist, you are responsible for delivering the frames of a creature in the correct format.Deliver one zip file containing a folder name <ICN_NAME>.ICN.cadres . The ICN name to use is given in the asset list, https://docs.google.com/spreadsheets/d/1y-gvrztkAMGj11rl_c7oRfU-BhxDh67baKPgyqE7o2Y/edit#gid=0 . So, for example, the graphics for the Shadow Assassin will be in a folder called "SASSASSN.ICN.cadres" .
If you are creating all the frames for an ICN (as opposed to adding to an existing one), then you are also responsible for numbering the frames correctly. See the section above for what the requirements on the format and numbering are. You are not responsible for creating the "setup.ini" file, nor for running the ICNPack tool.
You are also responsible for providing a couple numbers:
- Every image is positioned relative to some reference pixel. For example, the reference pixel for creatures is the bottom-center pixel of their feet. For most other images, the reference pixel is the top-left corner. You must provide the coordinates of this reference pixel.
- For creature graphics in particular, you must provide the X/Y coordinates of the creature's eyes in the standing frame. This is where the animation for the "Blind" spell will be rendered. To get an idea of how this will look on your creature, consider the frame from the "Blind" animation below. Its reference pixel is (35, 31) (i.e.: pixel (35,31) of that frame will be placed directly over the coordinate you provide us for the creature's eyes).
Some constraints on creature graphics:
- The standing frame and fidget frames of a creature should be outlined using the special "highlight" control color, explained in the section on the palette. When the creature has initiative, these pixels will flicker between yellow and transparent, "highlighting" the creature.
- The run/walk animations should have the creature moving forward in the frame. The starting and ending sprite offsets should differ by 40pixels
Formatting Graphics in Photoshop
All exported frames must be BMP files. It turns out there are many different kinds of BMP files, and the Ironfist tools are very picky about which kind you use. Follow these instructions to ensure your exports are in the right format:
When you begin a new asset, do the following at the start of the project:
- Set the color mode to "Indexed Color":
- Under the "Forced" menu, select Custom Palette, and then set it to the following palette: ironfist_palette_photoshop.act
The menu should now look like this:
-
When you export a graphic, do the following:
- Merge layers
- Save the graphic as a BMP.
Comments (3)
KalleKilk said
at 5:58 am on Aug 23, 2012
If i am not mistaken, there needs to be a forth extra color for pixels where shadow and highlight overlap.
James Koppel said
at 9:03 pm on Aug 23, 2012
Correct. From looking at the output of GrayFace's tool and running tests, both purple (#b400ff) and green (#00ff00) do this. The purple appears to give a darker shadow, but this may be an optical illusion, as I had not previously been aware of there being more than one type of shadow. I'll ask him before adding this to the article.
Also, I had been getting some errors from the tool. I realized just now that this was because I was saving my bitmaps with index-coloring, rather than raw RGB.
James Koppel said
at 9:09 pm on Aug 23, 2012
Also, darn, I was tired when I wrote this article. Added a fairly important step.
You don't have permission to comment on this page.