Tweet
Making sprites using GIMP
As noted in the Cradle 3+ thread, I wanted to create a new unit sprite and had a devil of a time using the old graphics programs that modders relied on 20 years ago. Long story short I worked through the process using a powerful freeware graphics program called GIMP, and wrote the whole thing up for future reference. Should others care to try their hand at this, read on!
Aside from GIMP, you'll also need the Activision-created MakeSprite program, as that's the only way to combine the different 2D art files into a sprite file. Without that, the rest of these instructions are pointless.
1) For the actual art itself, I recommend you find a 2D picture of a good 3D model of your unit somewhere on the internet. What you REALLY want is something that has a clear (preferably single-color) background surrounding it, as otherwise it can be very time-consuming to try and crop out all the non-unit-related colors. This task is hard enough as it is, don't make it worse. Also, this initial art can be any format (jpeg, bmp, png, etc), but please save it in tif format before performing any of the image-editing exercises described below.
2) I'm also assuming you are making units that don't have multiple facings or moving legs, arms, weapons etc. For that you probably need an actual 3D modeling program in order to spin it around and get 2D images of your unit in all its various actions. Assuming you are NOT doing that, try to find an isometric view of your model, facing toward you (perhaps looking down a bit), but at an angle (either left-ish or right-ish is fine). Pure profile views are OK, but they rarely provide a 3D "feel", and a level, face-looking-right-at-you view is probably the worst as it will look awful when moving in almost any direction.
2a) Here's an important point about unit facing direction. The sprites actually have 8 movement directions, as you can see when (for example) you move an original unit like the spearman. He faces up, down, three directions to the right and another three to the left. Of these, you only have to create art for 5 directions, as the game automatically flips three of them to derive those needed for the left-facing directions. For more details on this mechanism, open the MAKESPR.html file in the DOCS folder of the MakeSprite download
2b) Who cares, right? We're only using one facing anyway, yes? Quite true, but if that single piece of art uses a left-facing direction, the unit will always appear to move BACKWARDS when traveling left or right! Accordingly, make sure your 2D art features a RIGHT-FACING unit. If necessary just flip your left-facing art so it faces right - an easy thing to do with any graphics program.
3) The size of your starting art is also a consideration. It will have to shrink down to an extremely small size (roughly 45x52 pixels) so if the original art is huge, you'll lose so much detail that it'll be unrecognizable. Something in the 200x200 range or smaller is best, but you'll have to play around with this yourself. I also look for models that don't have an enormous amount of detail, as most of that will never translate down to the tiny sizes you need for CTP2.
4) Once you have the unit art, it will need to fit into a small 96x72 pixel template, so - as noted above - a square rectangle drawn around the unit itself should be *about* 45x52 pixels. That is not a firm number (it could be wider and taller), but a unit of that size should blend fairly well with the existing CTP2 units.
5) Another important point - the next few steps assume that you have a reasonable familiarity with graphics programs. I'm not going to hold your hand (until the very end), and will simply explain the general steps, and assume you know what a fill tool is or how to get RGB colors from a given pixel, etc.
6) After shrinking the unit down to size, you'll want to use your fill and pencil tools to make all the surrounding non-unit pixels the same color, preferably a color that is really obvious (like magenta or even pure white) and definitely NOT one of the colors that makes up the unit itself. The reason for doing this is that eventually you will do a "select-by-color" (picking the background color) and then choosing "inverse" so that every pixel in the unit itself is now selected.
7) As part of the process of setting a uniform background color, I highly recommend that you look for "edge pixels" on the unit which are extremely faint and overwrite those as well. The shrinking process invariably creates quite a few of these, and you have get rid of them if you want your unit to have a crisp appearance (and trust me, you do).
8) At this stage you will also want to make sure that absolutely NO PIXELS in the unit itself are pure black (in RGB terms, that means Red=0, Green=0, and Blue=0). If even ONE unit pixel is this color, the whole process will fail during sprite creation. So you MUST do a check which involves using the tool which selects all pixels of that color, and if any show up inside the unit itself, change them to something very dark, but not pure black.
HINT: As this should indicate, creating units from art that features black uniforms/fur/equipment is going to require a lot more editing, so just be aware.
9) Using GIMP (or your program of choice), open the GUblankMA1.0.tif template file which is included in the MakeSprite download. As noted in step #6, select only the unit portion itself, copy that, and now paste it into GUblankMA1.0.tif. You should be able to move it around so it's reasonably centered in the white diamond (in left-right terms) and little (if any) of the unit extends down into the lower black portion of the template. Portions of your unit can and probably SHOULD extend into the upper black section, however.
10) Once you are happy with the positioning, use the eye-dropper tool to select a black pixel from the template (you can be certain those RGB levels are "pure black") and then use "bucket fill" and possibly the pencil tool to overwrite all remaining visible portions of the white diamond. When you are done, your unit should be completely surrounded by all-black pixels. At this point save the file under a different name (the template is already 32-bit tif, so you shouldn't have to change the type)
11) Now to create the alpha layer in GIMP. And here I'm holding your hand and mine, since not only had I never done this before, but ALL the instructions on the internet are wrong and the mechanism is completely different from that used by Photoshop. Gah. Anyway, this works:
- Click on: Layer > Transparency > Add Alpha Channel.
- Click on: Select > By Color
- That changes the icon to a small hand with a pointing finger. Use that to click on any of the black pixels in the image.
- Click on: Edit > Cut
Voila, the alpha image now works correctly (if desired, you can see it along with the RGB layers by clicking the "Channels" icon on the top right of the screen, although this isn't necessary)
Now save the file and it's ready for the next step.
NOTE: The method outlined below in step #11a produces a washed out image of the unit. I only keep this record of failure because if you ever wanted to create a "ghost version" of a particular unit, this will definitely do it! To emphasize, do NOT follow the instructions in step # 11a unless you are deliberately trying to create a ghost unit! (in which case it supersedes those in step #11)
11a) Click on: Layer > Transparency > Color to Alpha. A box titled "Color to Alpha" appears, containing a "From:" data entry box. Click that and another box appears, titled "Color to Alpha Color Picker". On the right there are six color type selections. Ignore the top three, as we only care about R, G, and B. Change each of those three numbers from 255 to 0 (which will also automatically change the top three to 0 as well), and then click "OK". That brings you back to the "Color to Alpha" box, and now the preview pane shows your unit completely surrounded by a grey checkerboard which means the black pixels are all transparent. Click "OK" and the file appears (looking awful, hence the ghost) and now save it again (preferably with a different name)
12) At this point the file should be readable by the Sprite tool, so I'll just quote the pertinent sections from Harlan's "HOW TO MAKE CTP UNIT GRAPHICS" (included with the MakeSprite download). If the step numbering looks funny (going from 12 to 10?), that's because now we're using his number sequence. But first, here's an extremely important point:
- This comment will make more sense later as you process through the sprite creation steps, but be sure to use the GU00.txt file in the MakeSprite directory as your text template, and NOT the GU01.txt file in the Units directory. The latter is specifically configured for building the "Cow Unit" example, and your sprite creation process will fail if that is your template.
Now, on to Harlan's instructions:
********************************************
10. Save the file. The blank file you opened is called GUblankMA1.0.tif. For your save name, replace the word “blank” with a number between 0 and 99. For instance, let’s say you want to make sprite 96. So call the file GU96MA1.0.tif. Put this saved file in a folder you create called “96”.
11. Using the Save a Copy command, make four copies of this file. Call them: GU96MA2.0.tif, GU96MA3.0.tif, GU96MA4.0.tif, and GU96MA5.0.tif. You must do this because a unit sprite has a minimum of five facings (front, back, side, etc...). In fact, you can make five different pictures for each of these files, if you really want to have five different facings, but I am assuming you only want one for this example.
BONUS TECHNIQUE
Here is how to make five different facings, if you want a really excellent unit. Make the first file, GU96MA1.0.tif, to be what the unit looks like after it has just moved straight up on a map. It is the back view, ideally looking from up above it. GU96MA2.0.tif is the unit angling upward. GU96MA3.0.tif is the unit moving straight across- a sideview of the unit. GU96MA4.0.tif is the unit angling downward. GU96MA5.0.tif is the unit pointing straight downward. You will need to essentially follow most of these steps each time for each facing. For instance, each facing will need a different alpha channel, if they are artistically different.
12. At this point, we must start to deal with the Makespr.exe program that comes with the sprite editor patch provided by Activision. Download this program if you haven’t already. Kull's Note: I provided a working link for this download in the second paragraph of this post.
13. Put the Makespr.exe file in the Units folder of your CTP\CTPSpriteTools folder. Kull's Note: There isn't any such folder in CTP2, so I suggest you create a folder called "CTPSpriteTools" in the root directory (i.e. C:\CTPSpriteTools)
14. Enter MS-DOS so you can run the Makespr.exe program (you can’t just click on it for it to work- you have to open it from within DOS). One easy way to open MS-DOS is to click on the Start button on your Windows desktop, then click Programs and select MS-DOS Prompt from the list of programs. Kull's Note: Harlan wrote this over 20 years ago, so it's doubtful that any of you are using an O/S that includes MS-DOS. I will assume that you are using one of the more recent versions of Windows (7 or higher), in which case you need to bring up the Command Prompt window. To do so, start typing "command" in the Search window (next to the Start button) and you will soon see the "Command Prompt" app in the list of choices - click it.
15. Go to the Units folder within DOS. If you are like me, the MS-DOS program opens up in the Windows directory. I type “cd ..” (return), then “cd CTP” (return), then “cd CTPSpriteTool” (return) and finally “cd Units” (return). Kull's Note: With Command Prompt, the steps are a bit different: Type cd/ <enter>, then cd<space> ctpspritetool <enter>, and lastly cd<space>units <enter>. This assumes you placed that folder in the root directory, otherwise you'll be doing lots more typing to "cd" (change directory) for EVERY subdirectory between the root and wherever you placed it!
16. There is now one missing piece we need before we can run Makespr.exe. We need to have the text file ready. Every time you compile a sprite, you need not only the graphics but also one text file.
17. Luckily you won’t have to do anything to this file except name it and put it in the right folder. Use the text file that comes in this download, called GU00.txt. Put it in the Units folder of your CTP\CTPSpriteTools folder. In this example we’re making sprite 96, so the text file should be renamed GU96.txt. Later, when you make other sprites, you can just rename this file over and over again for each new sprite number. Kull's Note: To be clear, this is NOT a master file which works with all possible sprites - it works with most "five-image" sprites (like the one you are building in this tutorial), but things get a lot more complicated when you start adding images for movement or anything else.
18. We now should be ready to make the sprite. To double check, make sure the files GU96MA1.0.tif, GU96MA2.0.tif, GU96MA3.0.tif, GU96MA4.0.tif, and GU96MA5.0.tif are in a folder called 96 that is within your Units folder. Make sure both the file GU96.txt and the makespr.exe file are in the Units folder (but NOT in the 96 folder).
19. At the MS-DOS prompt in the MS-DOS program, type:
makespr -u 96
then hit return. If you have done everything correctly, you will get a message that says: “conversion completed successfully.” You will now find the sprite file sitting in the Units folder. It will be named GU96.spr.
Aside from GIMP, you'll also need the Activision-created MakeSprite program, as that's the only way to combine the different 2D art files into a sprite file. Without that, the rest of these instructions are pointless.
1) For the actual art itself, I recommend you find a 2D picture of a good 3D model of your unit somewhere on the internet. What you REALLY want is something that has a clear (preferably single-color) background surrounding it, as otherwise it can be very time-consuming to try and crop out all the non-unit-related colors. This task is hard enough as it is, don't make it worse. Also, this initial art can be any format (jpeg, bmp, png, etc), but please save it in tif format before performing any of the image-editing exercises described below.
2) I'm also assuming you are making units that don't have multiple facings or moving legs, arms, weapons etc. For that you probably need an actual 3D modeling program in order to spin it around and get 2D images of your unit in all its various actions. Assuming you are NOT doing that, try to find an isometric view of your model, facing toward you (perhaps looking down a bit), but at an angle (either left-ish or right-ish is fine). Pure profile views are OK, but they rarely provide a 3D "feel", and a level, face-looking-right-at-you view is probably the worst as it will look awful when moving in almost any direction.
2a) Here's an important point about unit facing direction. The sprites actually have 8 movement directions, as you can see when (for example) you move an original unit like the spearman. He faces up, down, three directions to the right and another three to the left. Of these, you only have to create art for 5 directions, as the game automatically flips three of them to derive those needed for the left-facing directions. For more details on this mechanism, open the MAKESPR.html file in the DOCS folder of the MakeSprite download
2b) Who cares, right? We're only using one facing anyway, yes? Quite true, but if that single piece of art uses a left-facing direction, the unit will always appear to move BACKWARDS when traveling left or right! Accordingly, make sure your 2D art features a RIGHT-FACING unit. If necessary just flip your left-facing art so it faces right - an easy thing to do with any graphics program.
3) The size of your starting art is also a consideration. It will have to shrink down to an extremely small size (roughly 45x52 pixels) so if the original art is huge, you'll lose so much detail that it'll be unrecognizable. Something in the 200x200 range or smaller is best, but you'll have to play around with this yourself. I also look for models that don't have an enormous amount of detail, as most of that will never translate down to the tiny sizes you need for CTP2.
4) Once you have the unit art, it will need to fit into a small 96x72 pixel template, so - as noted above - a square rectangle drawn around the unit itself should be *about* 45x52 pixels. That is not a firm number (it could be wider and taller), but a unit of that size should blend fairly well with the existing CTP2 units.
5) Another important point - the next few steps assume that you have a reasonable familiarity with graphics programs. I'm not going to hold your hand (until the very end), and will simply explain the general steps, and assume you know what a fill tool is or how to get RGB colors from a given pixel, etc.
6) After shrinking the unit down to size, you'll want to use your fill and pencil tools to make all the surrounding non-unit pixels the same color, preferably a color that is really obvious (like magenta or even pure white) and definitely NOT one of the colors that makes up the unit itself. The reason for doing this is that eventually you will do a "select-by-color" (picking the background color) and then choosing "inverse" so that every pixel in the unit itself is now selected.
7) As part of the process of setting a uniform background color, I highly recommend that you look for "edge pixels" on the unit which are extremely faint and overwrite those as well. The shrinking process invariably creates quite a few of these, and you have get rid of them if you want your unit to have a crisp appearance (and trust me, you do).
8) At this stage you will also want to make sure that absolutely NO PIXELS in the unit itself are pure black (in RGB terms, that means Red=0, Green=0, and Blue=0). If even ONE unit pixel is this color, the whole process will fail during sprite creation. So you MUST do a check which involves using the tool which selects all pixels of that color, and if any show up inside the unit itself, change them to something very dark, but not pure black.
HINT: As this should indicate, creating units from art that features black uniforms/fur/equipment is going to require a lot more editing, so just be aware.
9) Using GIMP (or your program of choice), open the GUblankMA1.0.tif template file which is included in the MakeSprite download. As noted in step #6, select only the unit portion itself, copy that, and now paste it into GUblankMA1.0.tif. You should be able to move it around so it's reasonably centered in the white diamond (in left-right terms) and little (if any) of the unit extends down into the lower black portion of the template. Portions of your unit can and probably SHOULD extend into the upper black section, however.
10) Once you are happy with the positioning, use the eye-dropper tool to select a black pixel from the template (you can be certain those RGB levels are "pure black") and then use "bucket fill" and possibly the pencil tool to overwrite all remaining visible portions of the white diamond. When you are done, your unit should be completely surrounded by all-black pixels. At this point save the file under a different name (the template is already 32-bit tif, so you shouldn't have to change the type)
11) Now to create the alpha layer in GIMP. And here I'm holding your hand and mine, since not only had I never done this before, but ALL the instructions on the internet are wrong and the mechanism is completely different from that used by Photoshop. Gah. Anyway, this works:
- Click on: Layer > Transparency > Add Alpha Channel.
- Click on: Select > By Color
- That changes the icon to a small hand with a pointing finger. Use that to click on any of the black pixels in the image.
- Click on: Edit > Cut
Voila, the alpha image now works correctly (if desired, you can see it along with the RGB layers by clicking the "Channels" icon on the top right of the screen, although this isn't necessary)
Now save the file and it's ready for the next step.
NOTE: The method outlined below in step #11a produces a washed out image of the unit. I only keep this record of failure because if you ever wanted to create a "ghost version" of a particular unit, this will definitely do it! To emphasize, do NOT follow the instructions in step # 11a unless you are deliberately trying to create a ghost unit! (in which case it supersedes those in step #11)
11a) Click on: Layer > Transparency > Color to Alpha. A box titled "Color to Alpha" appears, containing a "From:" data entry box. Click that and another box appears, titled "Color to Alpha Color Picker". On the right there are six color type selections. Ignore the top three, as we only care about R, G, and B. Change each of those three numbers from 255 to 0 (which will also automatically change the top three to 0 as well), and then click "OK". That brings you back to the "Color to Alpha" box, and now the preview pane shows your unit completely surrounded by a grey checkerboard which means the black pixels are all transparent. Click "OK" and the file appears (looking awful, hence the ghost) and now save it again (preferably with a different name)
12) At this point the file should be readable by the Sprite tool, so I'll just quote the pertinent sections from Harlan's "HOW TO MAKE CTP UNIT GRAPHICS" (included with the MakeSprite download). If the step numbering looks funny (going from 12 to 10?), that's because now we're using his number sequence. But first, here's an extremely important point:
- This comment will make more sense later as you process through the sprite creation steps, but be sure to use the GU00.txt file in the MakeSprite directory as your text template, and NOT the GU01.txt file in the Units directory. The latter is specifically configured for building the "Cow Unit" example, and your sprite creation process will fail if that is your template.
Now, on to Harlan's instructions:
********************************************
10. Save the file. The blank file you opened is called GUblankMA1.0.tif. For your save name, replace the word “blank” with a number between 0 and 99. For instance, let’s say you want to make sprite 96. So call the file GU96MA1.0.tif. Put this saved file in a folder you create called “96”.
11. Using the Save a Copy command, make four copies of this file. Call them: GU96MA2.0.tif, GU96MA3.0.tif, GU96MA4.0.tif, and GU96MA5.0.tif. You must do this because a unit sprite has a minimum of five facings (front, back, side, etc...). In fact, you can make five different pictures for each of these files, if you really want to have five different facings, but I am assuming you only want one for this example.
BONUS TECHNIQUE
Here is how to make five different facings, if you want a really excellent unit. Make the first file, GU96MA1.0.tif, to be what the unit looks like after it has just moved straight up on a map. It is the back view, ideally looking from up above it. GU96MA2.0.tif is the unit angling upward. GU96MA3.0.tif is the unit moving straight across- a sideview of the unit. GU96MA4.0.tif is the unit angling downward. GU96MA5.0.tif is the unit pointing straight downward. You will need to essentially follow most of these steps each time for each facing. For instance, each facing will need a different alpha channel, if they are artistically different.
12. At this point, we must start to deal with the Makespr.exe program that comes with the sprite editor patch provided by Activision. Download this program if you haven’t already. Kull's Note: I provided a working link for this download in the second paragraph of this post.
13. Put the Makespr.exe file in the Units folder of your CTP\CTPSpriteTools folder. Kull's Note: There isn't any such folder in CTP2, so I suggest you create a folder called "CTPSpriteTools" in the root directory (i.e. C:\CTPSpriteTools)
14. Enter MS-DOS so you can run the Makespr.exe program (you can’t just click on it for it to work- you have to open it from within DOS). One easy way to open MS-DOS is to click on the Start button on your Windows desktop, then click Programs and select MS-DOS Prompt from the list of programs. Kull's Note: Harlan wrote this over 20 years ago, so it's doubtful that any of you are using an O/S that includes MS-DOS. I will assume that you are using one of the more recent versions of Windows (7 or higher), in which case you need to bring up the Command Prompt window. To do so, start typing "command" in the Search window (next to the Start button) and you will soon see the "Command Prompt" app in the list of choices - click it.
15. Go to the Units folder within DOS. If you are like me, the MS-DOS program opens up in the Windows directory. I type “cd ..” (return), then “cd CTP” (return), then “cd CTPSpriteTool” (return) and finally “cd Units” (return). Kull's Note: With Command Prompt, the steps are a bit different: Type cd/ <enter>, then cd<space> ctpspritetool <enter>, and lastly cd<space>units <enter>. This assumes you placed that folder in the root directory, otherwise you'll be doing lots more typing to "cd" (change directory) for EVERY subdirectory between the root and wherever you placed it!
16. There is now one missing piece we need before we can run Makespr.exe. We need to have the text file ready. Every time you compile a sprite, you need not only the graphics but also one text file.
17. Luckily you won’t have to do anything to this file except name it and put it in the right folder. Use the text file that comes in this download, called GU00.txt. Put it in the Units folder of your CTP\CTPSpriteTools folder. In this example we’re making sprite 96, so the text file should be renamed GU96.txt. Later, when you make other sprites, you can just rename this file over and over again for each new sprite number. Kull's Note: To be clear, this is NOT a master file which works with all possible sprites - it works with most "five-image" sprites (like the one you are building in this tutorial), but things get a lot more complicated when you start adding images for movement or anything else.
18. We now should be ready to make the sprite. To double check, make sure the files GU96MA1.0.tif, GU96MA2.0.tif, GU96MA3.0.tif, GU96MA4.0.tif, and GU96MA5.0.tif are in a folder called 96 that is within your Units folder. Make sure both the file GU96.txt and the makespr.exe file are in the Units folder (but NOT in the 96 folder).
19. At the MS-DOS prompt in the MS-DOS program, type:
makespr -u 96
then hit return. If you have done everything correctly, you will get a message that says: “conversion completed successfully.” You will now find the sprite file sitting in the Units folder. It will be named GU96.spr.
Comment