CTP2 Bureau : How To Make CTP Unit Graphics Without Animations
CTP2 Bureau
The Modding
Apolyton CTP2 forums
Apolyton CTP2 archives
Source Code Project SVN

How To Make CTP Unit Graphics Without Animations

Activision’s lack of decent documentation makes the creation of new graphics seem very daunting. If you have Photoshop and you don’t care about including animations, it really isn’t that tough. It looks complicated, but once you get used to it, the process will only take a few extra minutes over what one needed to do in making a unit for Civ2. It very quickly becomes routine, only taking a few extra minutes of your time.

by Harlan Thompson

The below text is a bit long because it not only explains the bare bones of how to do it, I’ve also tried to explain how to do it WELL.  I mention Photoshop tips and such that can help you unit look great or help you save time.  This download also contains some files that can help you make your graphics faster.

Before I start, note that I’m assuming you are already familiar with the Photoshop programs and all of its commands.  If you are not, use the Help feature, or read the manual, or buy a “how to” book.  If you don’t have Photoshop at all, there is a section below on how you can make graphics with PaintShopPro, written by Tick Tock.  PaintShopPro can be downloaded and used free for one month, so you should at least be able to use that.  Be forewarned though that the PaintShopPro instructions are much less complete- this file is first and foremost for Photoshop users.  I used Photoshop 5.0, but I’m guessing Photoshop 4.0 will work for all the instructions as well.  Perhaps earlier versions as well.

Finally, please don’t ask me questions if it isn’t mentioned here.  There is much I don’t know (like anything to do with animations) and I don’t want to be swamped by questions anyhow.  Instead, take your questions to the Apolyton forums (http://civilization.gamestats.com/forums/), where there are many who can provide help.  The Creation or Help and Game Engine boards are good spots to post your problems.  Once you know how to make Unit files, the other types of files you can edit, like City or Resource files, should be easy enough to understand.

Making a unit graphic step by step, in PhotoShop

1. Find or make a graphic picture you like.  If you aren’t an artist, scanning in a picture or grabbing one off of the internet will do just fine.  If you are taking another image, keep in mind the closer the image is to the final size you want, the better.  This is because there will be less distortion when you resize it.  So try to find small pictures, since CTP graphics are pretty small compared to most graphics out there.  Photoshop can open most graphic file types.

Bonus technique

It would help now to make sure you don’t have any pure black in the part of the image that will become your unit.  If you replace all pure black pixels now, it will be much easier for you later.  This color is strictly for the background, in the same way that pink and purple were the background colors for Civ2.  You can check to see if some black is pure black by looking at the Color window.  If the R, G and B are all at 0, its pure black.  If its just a smidgen off, for instance Red and Green at 0 but Blue is at 1, then the black is not pure and can be used for non-background purposes.  To get rid of all pure black, make pure black your active color (select a sample of it with the eyedropper tool if it isn’t already) then use the Select -> Color Range command.  After you hit OK, all pure black will be selected.  Now use your eyedropper selecter to select a color that is almost, but not quite pure black.  Use the Edit -> Fill command to replace the pure black with the regular black.

2. Open the blank file- GUblankMA1.0.psd (which you downloaded with this file) and the graphic you want to turn into a unit.  The goal is to fit the graphic into the blank file.  The blank has a big white diamond in the middle of it.  This is to help you know exactly how big a terrain tile is.  You generally don’t want to go outside this box too much, because the more you do, the more things in other adjacent tiles will overlap and be blocked.  But compared to Civ2, you have more room to go outside the box if you want, and there is no problem with going below the box.

3.  Resize the graphic.  The blank file is only 96 pixels wide and 72 pixels high, so chances are you are going to need to shink the graphic to make it fit.  Use the command Image -> Image Size.  Type in a new number of pixels and hit return then OK.  Then cut and paste into the blank file.  Use the undo command if you aren’t happy with the results, until you get it right.

Bonus technique

It helps to have your graphic just right before you reduce its size.  If you don’t separate it from its background, the edges of the graphic will turn colors you don’t want them to.  Best to select the background and then turn it black before resizing.  This will help you see the fuzzy edge created.  You can keep some of it and have a well defined graphic, or delete it.  But if you don’t do this first, chances are you won’t even realize some very light and very transparent squares are even there until its too late and you see patchy white around your unit.  To do this, first make a new layer of your graphic (Layer -> Duplicate Layer).  On the duplicated layer, select the background.  There is a whole art to selecting to make sure you have just what you want and none of what you don’t.  Use the help menu if you need work here.  One good way to do it is use the Select -> Color Range tool.  Use the eyedroppers and the plus eyedroppers to click on all the colors you want selected.  Hit OK.  Then use the Marquee or Lasso tools to add or subtract from this selection (hold down the Shift key to add, the Alt key to subtract).  Click on some black color with your eyedropper tool, then use the Paint Bucket tool on the background of your new layer.  Now you can select what remains (use the Magic Wand command, set to its maximum tolerance of 255) and Paste that into the blank file.

4.  Once you Paste it, your graphic will now appear in the blank file as a new layer.  Move it around over the white diamond until you have it exactly where you want it.

5.  Delete the white diamond in the background layer, cos you will no longer need it.  Do this by selecting Layer 2.  Now the white diamond should disappear visually.  Make it disappear permanently by merging Layer 2 into the Background layer.

6.  Adjust your unit until it looks like you want it to appear in the game.  Make sure there is no pure black in the part of the graphic that will become the unit or you’ll have hassles later.  If there is any pure black where you don’t want it, select it, and replace it with a black that is almost identical.  Only the game engine will know the difference between a color that is pure black and one that’s 99.9% black.

7.  Now comes the tricky part of getting the alpha channel to work.  Find the Layers window in Photoshop.  Along the top of this window you should see three tabs, Layers, Channels and Paths.  Click the Channels tab.  You should see four channels for your graphic already: RGB, Red, Green and Blue.  If you have any other channels, delete them.

8.  Select the pure black background behind your unit.  To make sure you select every last pure black pixel, use the Select -> Color Range command.  With the eyedropper, click on the black background, then click OK.  Now use the Select -> Inverse command.  You should now see every last pixel that is NOT pure black selected.  If you see pixels that should be pure black but aren’t, fix that now, then repeat step 8 until you have it right.

9.  Now make the Alpha channel.  With all the non-pure black pixels selected and the Channels tab open on the Layers window, click the “save selection as channel” button at the bottom of the Channels tab window.  The icon on this button is a black box with a dashed circle inside it.  When you click on this, a channel called Alpha 1 should appear in your Channels window.

10.  Save the file.  Make sure you save it as a .tif file.  As you save it, when you get to the TIF Options screen, select “IBM PC” and do not select “LZW compression.”  If you can’t save it as a .tif file, it may be that you haven’t merged all your layers together.  Do so, if you haven’t already.  If you still can’t save as a .tif file, use the Save a Copy command.  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 patch if you haven’t already.

13.  Put the Makespr.exe file in the Units folder of your CTP\CTPSpriteTools folder.

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.

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).

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.

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.

If you did something wrong, you will get some other message.  You may well see the message: “error in bitmap data.  Pixel with no associated alpha”.  This happens if you didn’t make the alpha channel correctly.  If there is even ONE PIXEL that is not pure black that has been selected in your alpha channel, you will get this message.  Repeat steps 8, 9 and 10 to get that right.  If you get some other message, it could be your files are misnamed, or not in the right places.

20.  The final step is to move the newly created sprite file into the correct folder.  It belongs in the CTP\ctp_data\default\graphics\sprites folder.  At this point you may want to rename it.  For instance, if your sprite is an improvement of the Settler sprite, you would move sprite GU01.spr somewhere else, and call your new sprite GU01.spr.  Once you do this, it should now work when you start the game.

How do you know which sprite numbers are already associated with which unit?  Open up the file called SpriteID.txt in the CTP\ctp_data\default\gamedata folder.  If you use a number between 0 and 99 that isn’t already being used, you will make a new unit.  Of course you will have to also change some other text files before the computer can use your new unit.  Good luck with your modmaking.

How To Do It With PaintShop Pro

by Tick Tock

There are only a few differences when using PaintShopPro. Here is the process for getting and saving a unit (this assumes you are fairly familiar with PSP):

1. Open the blank unit as above and open a second window with your graphic (note when acquiring a graphic try to make the background all one color).

2. Resize the graphic to 96 by 72. Then ensure that the background is all one color. This has to be precise. If, for instance you did a screen scrape of a unit in snow, there would be several shades of white in the background. Just click on the dropper, then sample one of the shades of white with the left mouse button. I usually us an obscure color (like the
old purple-pink in Civ2) for the other mouse button. Click on the replace button and set the tolerance around 10. Then replace the background. You may have to repeat this a few times to get it all one color.

3. Make sure your right (background) mouse color is the same as your background and copy the image to the clip board. Then, select the blank tif and then click, from the top menu, "Edit", "Paste", then "As Transparent Selection" to paste it on the blank image. Just center it over the diamond.

4. Then to make the Alpha channel, from the top menu, click on "Masks", "New", "From Image". It may tell you that there is alreday an alpha image and ask if you want to replace it. Click on yes. That will bring up another window. On this one select "Any non-zero value" and click "OK".

The next 2 sections are for those wantig to make really good unit graphics.

How To Make Shadows For Your Units

Lets say you now have your unit made, you have followed the steps above and everything works perfectly.  Now you must decide what to do about shadows.  There are three options you can take.  First, you can simply not have shadows of any kind.  Second, you could simply have grey zones behind the unit you’re making, and save that into your GU96MA1.0.tif file.  Thirdly, you could save the shadows as a separate file.  In this case it would be called GU96MS1.0.tif.   What is the advantage of saving the shadow into a separate file?  When you do this, part of the shadow will come through and part will not.  So you can see the shadow on top of the underlying terrain.  If you do it the second way, the shadow will be a solid grey blob, and stick out obtrusively.

Here is how I make shadows, using the separate file method.

1.  Open up your unit graphic.  In this case, GU96MA1.0.tif.  Duplicate the layer.  Select the pure black background in this new layer, and delete it.  Hide the background layer.

2. Select the remaining pixels in your new layer.  The best way to do this is use the Magic Wand tool, set to the maximum tolerance of 255.  Click anywhere and most likely the entire object will be selected.   Now use the Select -> Inverse command.

3.  The background is now selected, so you can draw anywhere within this selection, but not outside it.  Which means you will not be able to accidentally draw over your unit.  Create your shadows now.  Use only pure black.  Look at other graphics to make sure you have the angle and the direction correct.

4.  Use the Select -> Color Range command to select all the pure black pixels.  Then select Layer -> New -> Layer Via Cut.  Your new layer will now become your shadow file.

5.  On this new layer, use the Paint Bucket tool to fill in the background with pure white.  Make sure this is the absolute purest white.  This step will allow you to make sure the pixels are in exactly the right place when you put them into a new file.

6.  Open up the file Blankshadow.tif (which comes with this download).  Paste the layer you’ve just created into this file.  Merge layers down.

7.  Once again, you must make sure the alpha channels and other channels are correct.  The file Blankshadow.tif has all of this set up already, so if you are pasting into this file, you don’t need to worry about channels at all.  If you don’t though or are having some trouble, follow this procedure:

Select all the pixels in the file, and make a new channel, like you did before (click on the “save selection as channel” button in the Channels tab on the Layers window).

8.  Save this as GU96MS1.0.tif. Make sure this file is saved in the “96” folder along with GU96MA1.0.tif.

9.  Copy GU96MS1.0.tif into GU96MS2.0.tif all the way to GU96MS5.0.tif.  If each of your directional facings are different though, you will have to repeat the above steps for each file.  You’re now done with shadows.  Compile the sprite as you normally would.

How To Place The Shield

Normally you don’t have to ever deal with the text file that is needed to make the Makespr.exe program work.  But you do if you want to make sure the shield showing what civ the unit belongs to doesn’t overlap with the unit graphics you’ve made. Open up the text file (called GU00.txt when downloaded).  Look for the section near the end called:


This section determines the location of the unit shield. The only part of this section you need to worry about (unless you’re doing animations) is the part called:


What you see are the numbers 82 9 repeated five times.  The first time represents the first facing and so on, for all five facings of the unit.  The first number is the number of pixels to the right from the upper left corner of the graphics file (as you face the computer screen).  The second number is the number of pixels down from that upper left corner. 

82 9 will put the shield on the far right top corner of the unit.  Be careful though- if its too far from the rest of the unit graphic, a player may get confused about what shield goes with what unit.  Also, note that for the second, third and fourth facings, the facings get flipped around automatically when the unit walks to the left.  In this way you really have eight facings not five, which is great, but it can cause problems with the shield placement.  The unit graphic flips, but the shield stays in the same place.  So it may look as if there is no overlap between shield and your drawing, only to find out later there is when the unit gets flipped horizontally.

To help with this problem, I’ve included a small file called shield.psd or shield.tif to help.  Simply place this on your graphics file right where you’re planning on putting the shield.  That way you can check how much space it will take, and if flipping the unit will cause problems.  Shield.psd doesn’t have any white background and so is the better one to use.

The shield is 12 pixels wide and 16 pixels high.  Your unit graphic file is 96 pixels wide and 72 pixels high.  So as you can see, 82 + 12= 94, so the shield is about as far to the right as it can go.  Feel free to change the numbers in this file and put the pixel wherever you want, so long as you’re not putting it so close to the edge of the file that some of it will get cut off.

This site is currently maintained by: BureauBert (Webmaster)  Maquiladora (Manager)  Legal Notice: Legal Notice Statistics: 90330 unique users since 02.05.2004 (» Site Statistics) Hosted by: WebhostOne
Share this page:  VK Facebook Twitter LiveJournal OK MR Google+ LinkedIn tumblr Pinterest Blogger Digg Evernote