DIY Sprites - Instructions and Help for Producing Your Own Units

[Chicken Spadge]

I've decided to start a new thread for people who might be interested in making their own sprites (and maybe also to get people with their endless requests off my back :laugh

First, anyone who is interested in this noble cause can start by checking out the basic tutorial provided here on the Darkest Hour forum by novapaddy. Don't worry that it's for Darkest Hour, as there isn't really much difference between DH and FtG in this area.

Those of you who can read German may also like to consult the original tutorial that novapaddy based his instructions on. This was posted on a different site by Inner Circle.

Don't worry if the sprites don't turn out properly first time. It's easy to miss something out, but once you get used to it you'll be able to make sprites quite quickly.

I'll be posting some additional instructions and hints on this thread.

 

[Chicken Spadge]

(Basileios II has already followed the above-mentioned tutorial and is now ready to move on to the next stage)

OK, Basileios, you've reached the stage where your sprite probably looks something like this:



It's surrounded by a magenta halo, and it's in the wrong place, south and east of where it should be.

The reason why it's in the wrong place is because you've used my spr file with its co-ordinates and the bmp file hasn't been adjusted to fit in the re-organisation window yet, but I'll deal with that later.

First, let's get rid of the magenta halo.



The reason for the halo is that, for some reason known only to the Civ3 modders, the shading is often done in magenta. (It can and is sometimes done in grey, but hey! that would make life too easy for us!)

In fact, the shade of magenta that you chose to use as your shading colour has actually turned grey (look closely at the shadow at the soldier's feet on the map and you'll see a thin ring of it), but all the other magenta shades haven't. So, what you need to do is make them either the same shade as the shade you've chosen (so that they will also go grey) or to make them invisible.

I've found that the quickest way to do this is to go through all the remaining magenta shades on the palette editor and change them to the shade you've chosen. I always choose the shade 149,0,149 (as shown above) because this appears to create the best balance - not too much or too little shading. It doesn't have to be that particular shade though.



Certain shades often appear on the palettes. The darkest magenta shade is often 48,0,48, as in this case, but you have to look closely because the very darkest shades are difficult to spot.



As I selected 149,0,149 first, by pressing the colour in the top left of the group of 12 colours (with the dots surrounding it) in the 'edit palette color' box I can change 48,0,48 into 149,0,149 as well.



Repeat this process until every magenta square in the palette editor is 149,0,149. Then press the save button.



Now re-apply the palette to the strip



and you'll get something like this:



What happens is that the colours on the strip can't find their counterpart on the palette, so they skip to the nearest shade. The darker magenta shades skip to 149,0,149, while the lighter ones skip to 255,0,255 - the same colour as the background, thereby turning invisible on the map.

Of course, you would normally do all this as part of the process that you followed on novapaddy's tutorial.

OK, this should get you a bit further down the path. I'll post up some further instructions tomorrow, but please bear in mind that it takes quite a while to organise all the screenshots, etc.

By the way, Basileios, can you guess what the 'CS' part of the palette names stands for? Perhaps for your sprites you should change it to 'BAS' or 'BII'

 

[Basileios II]

By the way, Basileios, can you guess what the 'CS' part of the palette names stands for?

I guessed as much but as I was rather eager to put "my" first sprite to work I went the lazy way and just copied your data. Will change that in the future.

And great tutorial, works like a charm now. Repositioning can wait until tomorrow (after work).

 

[Nein]

Awesome, thanks! Won't use it for now, but I certainly will eventually.

 

[Chicken Spadge]

Now we're going to move on to deal with a problem that certainly isn't mentioned on the Darkest Hour tutorial - the positioning of the sprites in the combat and re-organisation screens.

When I started converting sprites for FtG, I soon ran into this:



As you can see, in the combat screen the sprites are hiding in the bushes at the bottom right, while the sprite that should be in the re-organisation screen is half hidden in the top left of the screenshot. Those of you who used the first version of my sprites will be very familiar with this.

There's a very simple reason for it: Have a look at this old EUII thread, which should give you a better idea of what is going on here.

In order to adjust the sprites to fit the windows, you first need to download Irfanview, which is free software.

Let's start with the FIRE NE sprite. Open it up in Irfanview.



Here you can see the first three panels in a strip of 15, which is the usual number for FIRE. (I've chosen a sprite similar to your Finnish one Basileios) Notice in the bottom left corner that the strip is 3,000 pixels long and 200 high. We're going to cut that down considerably.

First select Edit-Create custom crop section



This box will appear:



All that we are interested in is 2) selection size/position on the right.

Normally for FIRE NE I would choose co-ordinates something like these:



so that the soldier is in the bottom left of a 64-by-65 box. In fact, these are the exact co-ordinates that I used for nearly all of Imperator1961's gun-wielding sprites, which I used for the Level 2 and 3 European nations. (Fortunately, the creators usually keep to a template).

Level 1 is a bit more difficult, however. The sprites have a variety of weapons, and swing them around in various ways. This sprite is holding a long pike, and he's going to draw it back before thrusting it forward. Adjustments might be necessary.

Now, there are 15 panels in a 3,000-pixel strip. That means that we would have to move the box 200 pixels to the right to move on to the next figure. In this strip the sprite pulls the pike back to the maximum in panel 4, so we need to change the X-offset to 680:



It's close, but just inside! Panel 9 has the maximum forward movement, so we need the X-offset to be 1680:



As Ace Ventura would say: ''Like a glove!!!'

Obviously, if the pike had gone outside the box, we would have had to increase the width. You must make sure that the width is an even number though, or the sprite will shake slightly from side to side.

You need to have some empty space above the sprite so that it doesn't appear too high up in the combat window

OK, set the co-ordinates back for panel one, and open a new GIMP file. We're going to cut out each of the 15 figures and paste them in the new file. So, we need 15 times 64 for the width = 960, and 65 for the height.



Enlarge the GIMP image, then select Tools-Transform Tools-Move



Move the empty GIMP image to the far left. Then copy the first figure from Irfanview, and paste it in GIMP. Move the figure to the far left and press to anchor it in place.

Then add 200 to the X-Offset in Irfanview and copy and paste the second figure before moving it next to the first one:



Repeat this until all 15 figures are on the new GIMP strip. Then attach the palette (don't forget this) to your new strip.

(Unfortunately, this is all I have time for at the moment. I'll try to finish this off later today.)

 

[Chicken Spadge]

So, it's time to continue with the tutorial.

Now you should have a FIRE NE sprite that is properly positioned in the combat window. This doesn't necessarily mean that it will be in exactly the right place on the map in your case, Basileios, but it should be much closer.

Let's have a look at the .spr files in Gfx/Map/Units. Here is the opened up Bohemian FIRE NE Level 1 file that you used as the basis for your file, Basileios. Beneath is the opened up file of its Swedish counterpart, which I used in the previous post:




The part that determines where the sprite appears on the map is 'Origin'. Note that the values are slightly different. This is probably due to the fact that the Bohemian sprite has a sword and the Swedish one has a pike. I would imagine that your sprite is still slightly out of position, Basileios (at least when it comes to where I usually place the sprites on the map).

Here's a diagram to illustrate how to move the sprite on the map by altering the X and Y values.



Normally you would expect that in order to move the sprite west on the map, you would have to lower the number for X, but this is Paradox, and for some reason it's the opposite way round. You have to increase X to move west, and lower X to move east.

The Y co-ordinate works exactly as you would expect, however. In order to move the sprite north, you should increase the value of Y. To move the sprite south, lower Y.

One thing you should note is that you are dealing in pixels, so you only have to change the values by small amounts to move the sprite considerably. It's all about trial and error until you get it right.

Just a couple more comments about the .spr files:

Of course, the number by 'Frames' should be the same as the number of panels (or frames) in the strip, so in this case 15.

Another 'paradox' - the lower the number by 'Speed', the faster the animation!

OK, that completes this section. Unfortunately I can't do any more today. I've been busier with other things than I expected. But I'll move on to positioning the FIRE SW and STAND sprites tomorrow. Sorry for the slow progress, but we'll get there in the end!

 

[Basileios II]

Please don't apologize for a most excellent tutorial, CS. After 11 hours working and another 2 waiting in traffic jam I couldn't muster the will to continue the sprite today, anyhow.

And do I get this right that only the FIRE and STAND strips have to be edited in the afromentioned way? Because doing it to all of them will surely drive me insane.:rofl: And I thought adding new religions to the game was tedious work...

 

[Chicken Spadge]

Don't despair! The good news is that you don't have to do anything more to the WALK files. In fact, the sprites should already be in the right place on the map when they walk, and they never appear anywhere else.

Now we're going to move on to the FIRE SW file. You follow the same instructions as for the FIRE NE file, as you might expect. The only difference is the way that you position the soldier in the box in Irfanview.

So, open your FIRE SW file in Irfanview.

As before, select Edit-Create custom crop section:



This time we're looking to have the soldier in the top right of a rectangular box because we don't want him to be too close to his opponent. Again you can see the exact co-ordinates that I used for nearly all the Imperator Level 2 and 3 sprites.



But this time the soldier doesn't quite fit inside the box when he draws the pike back. In fact, because this is Level 1, it's probably better to have the soldiers slightly closer to each other, anyway. Not too close, in this case, because he's got a pike.



So, I've moved the box six pixels to the right - a bit further than necessary to get the soldier fully inside.
As the box is wider, there was no problem with the forward movement.

All you need to do now is bring the box back to the first panel and repeat what you did for FIRE NE. Of course, this time the GIMP file will need to be 1,200 by 60 pixels.

Just to check that the co-ordinates were right (I can't remember which ones exactly I used originally for Sweden L1), I've done the FIRE NE and SW sprites and tested them:




Just about right.

This is a good opportunity to point out that the co-ordinates for the swordsmen are rather different. Note how far the Novgorod swordsman's shield swings out, and how far the shadow is cast. This isn't such a bad thing, however, because it forces the swordsmen a bit closer in. Usually it's just a case of fitting them into the box.

The most difficult of all were the halberdiers that I used for the Western minor states. I now understand why these weapons are used like spears in the original game. In terms of fitting the sprites in the window I shouldn't really have used the swinging motion, but it looks more dramatic, so that decided it!

Finally, I've managed to engineer an all-Swedish contest:



Is this what it's like at Paradox headquarters?

Next up will be instructions for the STAND file.

 

[Chicken Spadge]

Hey! Wait a minute Basileios! I've just noticed that your 'Finnish' sprite isn't only like my Swedish one - it is my Swedish one!

:huh:........:laugh:

Here's a picture to better demonstrate the self-inflicted problems I'm facing:

Why didn't you choose something else?!

Never mind, at least you've had some practice!

 

[Basileios II]

Oh my, now I feel really silly! Because for some reason I remembered the Swedish first sprite being a blue guy wielding a spear. Must have confused him with some other sprite or the ood model. But such is life...

 

[Chicken Spadge]

The problem is that your A4K mod doesn't have Sweden in the starting line up. Anyway, I don't mind if you want to re-lable any sprites and use them for a different country.

All right, let's go on now to the STAND file. We might as well continue to use the......er......northern pikeman!

A rather different principle applies here.



(BTW, the reason why I didn't recognise the sprite at first is probably because I usually prefer the STAND sprites to face forward, or south, while you chose south-west).

What you need to remember here is that the location of the sprite in the window depends on its relation to the bottom right corner of the box (and not the top left as with the FIRE files). For this reason we need it to be standing right on the bottom line, and the correct distance from the right side.

The STAND sprite hardly moves at all, so you don't really need to check the other frames in most cases.

I suppose what I should have done is find out exactly how wide the re-organisation windows are, and made the box the same width, but I've got into the habit of making the box 64 pixels wide, which is more than necessary, and then just guessing where the unit should be. In fact, you usually need to have about eight-ten pixels between the right side of the box and the sprite's arm, although a lot depends on whether the unit has a shield and how big the shield is, etc. In this case the edge of the shield is nine pixels from the right side.

Unfortunately, some sprites hold long weapons across their chest, which makes it impossible to get the sprite in the middle. You just have to get it as near as possible.

Again, it's the same procedure for making the new GIMP file, which in this particular case should be 960 by 70 pixels.

And here's the result:



We've lost the top of the pike, but it isn't the end of the world.

BTW, I should point out that not all the original bmp files for FIRE and STAND are 3,000 by 200 pixels wide, although most of the units produced by Imperator use these dimensions. The other main creator of sprites suitable for FtG, Sandris (who made the Level 4 European units and many of the Level 1 sprites), tends to use 2,250 by 150, which means that you have to use different co-ordinates and move the boxes in Irfanview by 150 each time.

Well, that's all the basic instructions for producing properly-windowed sprites. There are still some other things that I would like to cover, though. I'll probably add something else tomorrow.

 

[Chicken Spadge]

Now you've got the basics, I'm going to focus on some other things involved in converting the sprites.

First, I've got a confession to make. when I posted the first part of the instructions I cheated a bit with the final image after the palette was applied. The image really looked like this:



Notice that some of the magenta squares have turned blue, such as two next to the foot and two on the rifle butt. This sometimes happens when there are shades of blue on the palette.

It isn't such a big problem, and you could just leave them as they are, but in some cases quite a lot of squares turn blue and you really need to get rid of them.

There are two ways of doing this. Here's the first one:



Choose the 'select by color tool' on the Toolbox.



Further down on the Toolbox, reduce 'Threshold' from the default value of 15 down to zero. This will allow you to choose a single colour on the image instead of several similar ones.



Select the blue colour. Notice that we can't simply turn all the squares into the shading colour because some of them should actually be blue.



Now select the eye-dropper, and use it to select the shading colour on the image.



Next select the pencil tool.



A circle will appear when you move the cursor over the image. 'Brush' will also appear lower down on the Toolbox. This allows you to change the size of the circle, but size 11 will be OK here.



Then move the circle over the squares that you need to change and press. Repeat this for all the panels.

 

[Chicken Spadge]

Here's another, and rather quicker way, to deal with the blue-square problem.

So, you've just added the palette, and blue squares have appeared where they shouldn't be.



Just Undo the last operation.



Now select the squares that turned blue. (Having set 'Threshold' to zero, as shown in the previous post). Of course, it pays to make a mental note of where they were.



Select the shading colour from the palette editor.



Now turn the squares into that colour.

Then apply the palette again. Of course, the squares that you changed into the shading colour will stay that colour.

 

[Basileios II]

Grandmaster Spadge,

thanks to your excellent tutorial I just finished my first sprite - a swordbearer for the Kalifate. Screenies might follow soon but first I need a glas of scotch.:laugh:

 

[Chicken Spadge]

Grandmaster Spadge,

thanks to your excellent tutorial I just finished my first sprite - a swordbearer for the Kalifate. Screenies might follow soon but first I need a glas of scotch.:laugh:

Well done! Let's see him then!

 

[Chicken Spadge]

Now that we've had a look at changing the colour of squares, we can focus on something that causes quite a few headaches for sprite converters - Civ Color.

EDIT: Before reading the rest of this post, you should take a look at the posts immediately below it, especially if you have a copy of Civilization 3.

Let's look at the British Level 3 sprite again:



We've sorted the shading out, but what about the colour of the sprite's blanket role?

I've never played Civilization, so I don't know exactly what Civ Color is for. I assume that it identifies which player the unit belongs to.

Whatever the purpose, it's a pain in the neck for us because it's often added to the sprites, usually in green or blue. The Swedish pikeman didn't have it, but this British fusilier does.

We could just leave it as it is, but the rather bright green colour just doesn't look right.

There are two basic options, we could darken the green so that it doesn't stand out as much, or we could change the colour completely. What I usually do in this case is to make the blanket role the same colour as the rest of the backpack, which in this case is basically a lightish brown.

I've seen sprites on which the converter has simply changed all the Civ Color into a single shade, but that doesn't look right. Really we need to preserve the various shades.



The backpack generally uses shades of brown between the two shown above, so we'll use the same ones for the blanket role.



Again start by choosing the 'Select by color' tool on the toolbox and bringing 'Threshold' down to zero.



Now select the darkest of the green shades.



Then select the darkest of the brown shades from our range...



...and apply it to the chosen square.



Now do the same with the second-darkest green and the second-darkest brown.



Continue changing the green squares brown from dark to light, using various shades of brown from the range. In this case with the STAND file I didn't really want to use the lightest shades, so I've had to use a couple of shades more than once. You should avoid having too many squares of the same shade next to each other, however. You could always use some shades just outside of the range if you need to.

Then check the other frames to make sure that there aren't any green squares left there. In most cases there will be a least a couple of these.

 

[zweihander]

Every civilization has its own colour in Civ3, it means that even the same unit would appear in different colour in different civlization. If you have installed Civilization3 in your computer, you can change the colour of the unit directly and perfectly in the tool of FLICster, but if you have not installed civ3, you can't change the colour in FLICster.

 

[Chicken Spadge]

Every civilization has its own colour in Civ3, it means that even the same unit would appear in different colour in different civlization. If you have installed Civilization3 in your computer, you can change the colour of the unit directly in perfectly in the tool of FLICster, but if you have not installed civ3, you can't change the colour in FLICster.

I wish you hadn't told me that! Civilization 3 costs about two euros these days. When I think about how much time and effort I could have saved....!

How many colours are available?

 

[zweihander]

I wish you hadn't told me that! Civilization 3 costs about two euros these days. When I think about how much time and effort I could have saved....!

How many colours are available?

I'm sorry that I didn't think of the problem that you have not civ3, otherwise I would tell you at once.
I don't know how many colour exactly, I think it is about 20-30 .

P.S. the current Japanese lv1 sprite in the pack is absolutly a Chinese warrior ,not a Japanese samurai, perhaps you can find some Japanese units in Kinboat's unit library http://forums.civfanatics.com/showthread.php?t=94981
http://forums.civfanatics.com/showthread.php?s=&threadid=63269

 

[Chicken Spadge]

I'm sorry that I didn't think of the problem that you have not civ3, otherwise I would tell you at once.
I don't know how many colour exactly, I think it is about 20-30 .

Well, if anybody is thinking about converting a sprite with Civ Color and they have Civilization 3, they should certainly try this option first. I think that the tab you need in FLICster is 'View Animation'.

P.S. the current Japanese lv1 sprite in the pack is absolutly a Chinese warrior ,not a Japanese samurai, perhaps you can find some Japanese units in Kinboat's unit library http://forums.civfanatics.com/showthread.php?t=94981
http://forums.civfanatics.com/showthread.php?s=&threadid=63269

I'm afraid I'm not an expert on uniforms, especially when it comes to non-European ones. I do remember trying to find specifically Japanese sprites but always finding a problem because they were either too small or faulty. I will test out the ones you suggest, though.

EDIT: I've posted up one of the units on my main sprite thread.