CTP2 Bureau : Flics to Sprites
CTP2 Bureau
The Modding
Knowledgebase
Apolyton CTP2 forums
Apolyton CTP2 archives
Source Code Project SVN

Flics to Sprites

In more easy stages than I care to count. Due to an increased interest in converting Civ3 Unit graphics into a CtP1/2 format, I wrote this short explainataory guide to how I went about it. It is probably not complete by any means, but hopefully it should make it easier to find an approach that works.

The Immortal Wombat

Part one - the FLIC

Start with a Civ3 Unit FLIC, or rather, collection of FLICs. Since all the animation has been done for you, there's no excuses for not using movement, attack and defeat flics. If you like, idle and victory ones, but these are seldom used or observed in CtP2, and aren't worth the effort IMO.

The FLICs you have will almost certainly not be the correct size (which technically is anything with the ratio 4:3, but in reality is almost always 96*72 pixels) - so you have to crop them. For these purposes, the flics are animations just the same as animated GIFs are - FLICster becomes useless, you need an art program. I used Animation Shop (AS), simply because you can get a "free trial" version from the JASC website.

Load Animation Shop, and open a FLIC file. These instructions assume it is a movement FLIC.

Using Animation Shop (and no doubt similar programs work similar ways), the cropping tool is dragged across a single frame, and forms a box. Press the "crop" button, and everything outside the box is deleted, and similarly for all the other frames in the animation, the same area is taken automatically.

NOTE: When doing this, if it is at all possible, count the number of pixels from a horizontal border, and a vertical border your cropping is. This is very useful later on.

The downside of AS is that you cannot find out what size each frame is, without resorting to a little workaround. If you have Paint Shop Pro (which AS is often packaged with) then you can export a frame (right-click on the frame, and select "export frame to Paint Shop Pro"), and go to Image -> Canvas Size.

Otherwise,assuming you have the file saved, go to View -> HTML code - and that will give you the height and width of the image.

Either way, keep cropping and undoing until you have a set of frames 96 by 72 pixels in size, with the unit somewhere towards the middle horizontally, and towards the bottom, vertically. Hopefully you have kept a count of the pixels, because then you can attempt to replicate the exact same x and y position of the unit in the other FLIC files (attack & death, and maybe others).

Now separate out the facings. You only need five. Facing due north, north-east, east, south-east, and south. The sprite maker mirrors the rest for you, and to save space.
To collect all the frames of one facing together, select the first one, hold down shift, and select the last one, then cut then (ctrl-x) and paste them as a new animation (ctrl-v).

Once you have a set of facing frames, select all the frames in the FLIC (click the first, hold down SHIFT, select the last) and go to File -> Save Frames As.

From here on, I will assume you are using the northery facing (facing 1) frames of the movement animation.

Choose your options so you save them as *.tiff files, with long file names and with the Save frame number in file name box ticked. Then set up your standard name to be (assuming you are using the movement animation) - "GUxxMA1.".tif The extra . is important, because now when you save it, the frame number will be saved after it, and create the file name as the sprite creator reads it - GUxxMA1. y.tif

As explained in the sprite creator readme, the naming is important.

  • G is a prefix, it is always there.
  • U stands for units.
  • xx is the sprite number you choose to use in the creation. You can change it later, but must stay consistant for now.
  • M denoted that you are using the movement animation. "I" would be for the Idle animation, "A" for attack, "V" for victory (where victory can also equal "death" - it marks the end of a battle)
  • A - its the animation itself. An S here would be for the associated shadow tiff.
  • 1 - the facing number. 1 is north, 2 north-east etc etc, 5 is south.
  • .y - the point is always there, y is the frame number, starting from either 0 (geeks) or 1 (non-geeks). This method uses 1 as the first frame, because of the quick save thingy in Animation Shop.

Choose a place to save to. If you already have the sprite creator installed (which is advised) - then something like CTPSpriteTool/Units/xx is the place for them. If not, any temporary folder will do, so long as you move them out afterwards.

Open the folder where you saved all the tiffs to, and delete the blank spaces between all the "."s and all the frame numbers. This takes little time once you've practise, and believe me, 500 frames is a lot of practise.

Part Two - the Images

Open all of the tiffs into a Paint Program (I use PSP, again, because you can get the free trial to download, and because Harlan already wrote instructions for using it. Which aren't too accurate, but got me started)

The tiffs as they are are not much good. The shadow is in the same file, and the background is the wrong colour. The first thing to do is to set your foreground colour (left button) to white, and the background colour (right-button) to black. If you are lucky, you may never need to change these colours throughout the rest of the process.

For each frame you do, you must follow this procedure. It is very time consuming, and boring, but once you get the hang of it, you can switch your mind off and day-dream while you go.

Using the magic wand tool, set to a tolerance of about 20-30 (as set under the tool options floating menu), select all the shadow around the base of the unit, and all the pink background along with it. Hold shift while you click to add bits to the selection, hold ctrl to subtract bits.

Copy it (ctrl-c) and paste it as a new image. This should also be 96*72 pixels, unless you have a decidedly odd unit, so this will become the base for the shadow file. Select all the pink, and then using a large brush, paint it all white. Don't worry about going over the shadow - it's outside the selection, so unaffected.

Next, invert the selection (Selection -> Invert, or Ctrl-Shift-I), and paint over all the shadow in pure black.

Once you have done so, keeping just the black selected, go to Selection -> Save to Alpha Channel and click OK. When prompted, click OK again, a name is not necessary.

Then deselect the shadow (Selection -> Select none, or ctrl-D) and save the file. It should be saved using the same format as above, but with an "s" in place of the "a" - "GUxxMS1.0.tif". As you are saving it manually this time, you will need to increase the frame number by one each time, and of course, change the facing number when you move on to different facings.

Back to the main image, with the unit on it, you should have all the background selected still. Using the background colour (right mouse button) colour over all the pink and all the shadow to make it pure black.

Then invert the selection, and check to make sure there are no black pixels in the unit image. If there are, the easiest way to get rid of them without changing your paintbrush colour is to use the Clone Tool to take areas of colour from nearby, and copy them into the black. Right-click in the colour you want, and left click in the black. Do each pixel individually if you are unsure of this technique.

When you are sure there are no black pixels in the unit image, or non-black pixels in the background, again go to Selection -> Save to alpha channel and save the non-black selection into the alpha channel. Resave this file, it should still have the same name as before "GUxxMA1.0.tif"

When you have done a frame, ensure you have saved it, and its shadow, with the correct file names, then close both images within PSP. Load up the next one, and repeat the process. It might be better to keep the finished frames separate from the unfinished ones, lest you get confused, or break half-way through. You can copy them all back into the correct folder afterwards.

Once you have finished a facing, go back to Animation Shop, cut out the next facing, and repeat.

Once you have done all 5 facings, close that FLIC, and move on to the next one.

Its a long process, with each frame made up of 3 animations, made up of five facings, made up of usually a dozen or so frames, each becoming two pictures... but the finished sprite looks top quality.

NB: If you are a real perfectionist, you may wish to resize each FLIC by about 120-150% before beginning the process, to ensure CtP unit-sizes, but then you may have to sharpen the image, and cutting the black and non-black out may be harder later on. Your choice.

  Administration
This site is currently maintained by: BureauBert (Webmaster)  Maquiladora (Manager)  Legal Notice: Legal Notice Statistics: 123656 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