SPRITE MAKING TUTORIAL
By Sekinoss
1. Preparation
1.1 Introduction
1.2 The HoI Sprite system
1.3 Tools Required
2. Modelling and Recording the 3D mesh
2.1 Modelling a Panzer
2.2 Animating the Panzer for A-STAND (Standing guard)
3. Putting the Sprite together
3.1 Frame editing with Animation Shop
3.2 Combining the frames with Paint Shop Pro
4. Implementing your sprite in HoI
4.1 Make your SPR files!
4.2 The Game
4.3 The Rest of animation
5. Additional Infos and Tips
5.1 Troubleshooting
5.3 Closing Words
This tutorial will teach you how to make new unit sprites using 3D models for HoI. This tutorial deals with making a panzer sprite (this case it's a simple Panzer).
It is divided into two sections: The modelling and the implemention. Modelling deals with making a 3D mesh of the Panzer. While Implementation deals with making the final bitmap containing the animation and putting it in the game.
First a word of warning: Sprite making is a considerable effort and requires time and patience. At first the learning can be tough, but once you get the hang of it it's actually simple (but not easy). And the results are worth it, too. Read on.
There are three directories of great importance in making new sprites for HoI:
GFX\map\units This houses the *.spr files, which are essential in assigning and setting which unit your sprite is meant for.
GFX\map\units\bmp This contains the actual image of the unit to be used/animated in the game.
GFX\palette This houses the palette file to be read by HoI as a reference color to the sprite in the game
SPR files
GFX\map\units contains files of extension SPR, which can be opened by notepad. A typical *.spr file would be
"T-PANZER A-FIRE C-USA L-1 D-SW.spr"
T-PANZER shows the class of the sprite, which in this case is for a panzer. (others include T-MOTORIZED, and so on)
A-FIRE shows what action the sprite is for, in this case is firing south west (others A-STAND and A-WALK)
C-USA shows you what country the sprite is for (others C-JAP, C-GER and so on)
L-1 shows the level of tech advancement this sprite is for, in which here is one (others 2 to 4)
D-SW shows the direction this sprite is firing, which this case is SW (others W, NW,N, NE, E, SE, S)
Inside a typical file of *.spr is
Sprite = {
Bitmap = "T-PANZER A-FIRE C-USA L-1 D-SW.bmp"
Origin = { x = 24 y = 35 }
Frames = 14
Speed = 5
Palette = "DEF1.bmp"
}Bitmap shows which BMP file from the GFX\map\units\bmp is to be read from.
Origin shows the general location of the sprite in the game world. X is left positive, so decrease it and the sprite will move right and vice versa. Also, Y is upwards positive, so to up your sprite's location in the game increase Y.
Frames are the number of frames meant to be read in the BMP. In this case it's 14 frames, the BMP is horizontally divided into 14 and if the BMP has 896x56, it would have 64x56 as an individual frame in the game.
Speed just shows you the delay of each frame animated. The higher it is the slower the animation plays in the game.
Palette is the reference colors the game uses to color the sprite in the game. This is important but more on that later.
There are 11 essential *.spr files to be present for a unit (to follow the example above):
T-PANZER A-FIRE C-USA L-1 D-NE.spr
T-PANZER A-FIRE C-USA L-1 D-SW.spr
T-PANZER A-STAND C-USA L-1.spr
T-PANZER A-WALK C-USA L-1 D-SW.spr
T-PANZER A-WALK C-USA L-1 D-W.spr
T-PANZER A-WALK C-USA L-1 D-NW.spr
T-PANZER A-WALK C-USA L-1 D-N.spr
T-PANZER A-WALK C-USA L-1 D-NE.spr
T-PANZER A-WALK C-USA L-1 D-E.spr
T-PANZER A-WALK C-USA L-1 D-SE.spr
T-PANZER A-WALK C-USA L-1 D-S.spr
Bitmap Files
Bitmap images of format 256 color BMP are located in GFX\map\units\bmp. As per it's *.spr files, A unit requires 11 of them (refer to the above), each showing it's respective animation..
A Sprite is an image which consists of a collection of images arranged horizontally as frames. Each image is treated as a frame of animation in the game. Four frames of 64x56 (64 by 56) will have a final sprite of 256x56, and so on.
Sprite images are contained in GFX\map\units\bmp, and of format 256 color Windows BMP. Here's an example of a 4 frame sprite showing a Pershing doing A-WALK direction SW I made:
It is a general convention HoI that each frame of animation for panzer should be 64x56, thought different classes such as ships use larger sizes and so on.
Palette Files
These are just 4x4 256 color BMPs that HoI reads as a color reference. This is located on GFX/palette.
Here are some tools which you require to make a sprite with this tutorial (those I use), most of which are DOWNLOADABLE SHAREWARE:
- a low polygon 3D modelling software (Milkshape 3D - http://www.swissquake.ch/chumbalum-soft/)
- an image editor (Paint Shop Pro - http://www.jasc.com)
- an animation editor (Animation Shop - bundled with Paint Shop Pro)
- a text editing software (Notepad should suffice)
- any reference images for guidance in modelling the tank
- great patience...
2. Modelling and Recording the 3D mesh
First off, let me tell you that this tutorial is not meant to teach the basics of Milkshape modelling. I'll explain a little here and there, but to learn off how to do it solidly I refer you to (and don't laugh on the end result of our home made "tank"):
- http://xu1productions.com/3dstudio/tutorials.html (The Audi tutorial especially helpful)
- http://www.swissquake.ch/chumbalum-soft/ms3d/tutorials.html
IF you already have an exceptionally good model, skip to the second part of this chapter: animating. This tutorial uses a simple (and ugly) model as an example.
Once you get the basics we're ready to go. Open up Milkshape. The figure we'll make here is just some very blocky Panzer (if you can say so), so it'll be simple and won't win any medals, but it'll work fine as an example. By now I hope you've learn about Vertex, extrude, faces and stuff.
As been suggested, it is better to model just half of the tank, and mirror it to get a full tank. Have a look at the toolbar and Click on the model tab, the click box. Use the top view, default in bottom left, and drag some box as it's main body.
get the scale option, and use the left view to scale it down. You'll have something like
Now drag two more boxes on each side of the body as it's tracks. Position it a bit longer and lower than the main body. Use scale and move tools whenever necessary.
Next we'll make the turret, which is made from a cylinder. As usual, rescale and move as necessary until you get something like.
The turret is almost done :) Now just add one more cylinder (a thin, long one) then rotate (use the rotate tool) it until it's horizontal. Move it onto the turret so it forms the panzer's cannon. You should have something like
Now our panzer is done! Sure it looks like a hybrid of the Ausf and Tiger, but it'll serve well as an example. Lets save the model under the name "Tigor.ms3d".
2.2 Animating the Panzer for A-STAND (Standing guard)
We see Paradox's panzers rotate their turret when standing still (this is the A-STAND) animation, so we want them too!
Now in the model tab select joint. create a joint in the center of the tank turret like this
This joints are essential to do the animation. Now use the select tool and select the turret portion (using the group option during selection) of the tank.
then change the select option to include joint and select the joint we've made
Now that we have all joints and the turret selected, we'd want to assign them together so they move duing animation. Select the Joints tab (beside Materials) and press Assign.
Oops, we nearly to give our Tigor hybrid color. So press the material tab now. Press New on the material tab. Click on Diffuse and select an orange-ish color.
Now go to the models tab and click Select (with groups option enabled) the Main body and turret portion of the tank (not the tracks) and select the material tab again and click Assign to apply the colors.
Repeat the above to create another material, this time with a darker brown and apply them to the tracks to get
Now on to the animating! Click on the Joints tab again and choose the first Now Look down for an Anim button and press it. We are now in animation mode.
Change the total frames (here is 8) to 20. (Make sure we're in animation mode) Goto to the models tab and Select with joint option on our joint.
We'd want to make this a keyframe. A keyframe is a state in the animation we want to reach. This means that we want to start with our turret facing forward. Pay close attention to the huge slider below. Now we're working on frame one.
Press Ctrl+K (this makes the current state a key frame). Now move on to about the middle (tenth frame):
So on the tenth frame, we'd want our model's turret to be facing abit to the right (from the tank's perspective), so we rotate the joint using the Rotate tool in the model tab to make so:
Don't worry if you consider this a big jump from our previous position. Milkshape will make the appropriate transition. Press Ctrl+K again to make this a key frame (in the tenth frame of animation).
Move towards the end (20th frame) and rotate it back to it's original position, then press Ctrl+K again.
Now to see our simple (if crude) animation press the 3D perspective window Once (to activate that window) and then the Play forward button (look for it near the Anim button).
IF NOT THEN REVISE THE TUTORIAL WHERE MIGHT YOU HAVE DONE WRONG. DONT WORRY. If you've done everything correctly you can now see your turret rotating a'la Paradox's tanks. Now we're almost done animating.
Now right click on the 3D perspective window and turn off Show Grid and Axis. Also, select the joints tab and deactivate show skeleton.
Then, Angle your model in the perspective window so it would appear right in the game. YOu should have something like
Excellent. Now the final step would be to right click on the perspective window (DONT CHANGE THE ANGLE) and select record AVI. Name it "TigorStand.avi". Select Full Frames (uncompressed) in the option presented and click OK.
Congratulations! You've finished the animation.
3. Putting the Sprite together
3.1 Frame editing with Animation Shop
Open up Animation Shop. Open (File then Open) our TigorStand.avi and on the following window select 1 sample every two frame (this will cut the original 20 frames into just 10, thus causing a bit of choppiness).
However, this will only serve as a sample, and to get a smoother animation you should have more frames! Now you'll have a 10 frame animation like (this is zoomed out). You should get something like :
Right now the animation frame is too big, leaving much space. Select the Crop tool from the toolbar and select a smaller portion of the animation:
Then Crop it with the crop button to get:
Excellent! Now choose Select All from the Edit menu above, then Save Frames As from the files menu. Give it a name TigorStand, and it will write a series of images to be used as frames. You're done with Animation Shop!
3.2 Combining the frames with Paint Shop Pro
Now open up Paint Shop Pro. From File menu choose Browse. Select the directory where you store the TigorStand Frames, and you should get
Open the first file by double clicking. This is still too large, so we should resize. Press Shift+S to Resize and set the pixel size to 64 by 56 (64x56) with Smart resize option below, to conform with the standard size of Paradox's panzers.
Now it's in the right size, but not the right palette. It should be in 256 colors, so we decrease color depth by selecting the Color menu then decrease color depth to 256 colors. Just press OK on the following window. Now save the TigorStand 1.bmp via the File then Save option. We have to adjust the palette to match HoI's required format. Now select from the Colors menu the Edit Palette option. You should have:
Select the leftmost and upper box (the corner) and double click. You should have a new window. Set the Red Green Blue entry as 255, 0, 255 respectively. Now you should have:
Great! Now press Ok and select the color immediately to the right of the now Pinkish color. Repeat the above with R G B 0,255,255. You should have the end result:
Click OK.You might see some glitch in the coloring of your model. This is normal so ignore it. Then choose Colors again then Save Palette. Save it under Tigor.pal. But do not save the image itself!
This Palette is important as this will be used for the remainder of the tutorial as a reference palette for the game. This already has transparency (pink) and shadow (neon) applied into it. Now close the image without saving!
Next, load up the second frame and resize the image to the same size (64x56 this case) and save the image. Do the same for the rest 8 (yes this can be daunting without batch conversion, which is a bit complicated) until all of them are of the same size and are saved.
Now create a new Image by selecting File then New. Give 640 by 56 as it's dimension (as we're squeezing 10 frames of 64x56 sideways here) and 16 million colors:
You should then have something like :
Great. Now open up the first frame and press Ctrl+C to Copy. Click on the newly created 640x56 image and press Ctrl+E to paste. Position it Exactly on the left of the image. PRECISION IS IMPORTANT HERE as a miss of a single pixel can throw the animation OFF BALANCE! You should position like this:
Now open up the second image and repeat, positioning it exactly beside the first. Again, PRECISION is PARAMOUNT. Repeat for the rest of the image (in order) and you'll fill exactly all the space that's empty and get something like this:
Splendid. We're nearly done with the A-STAND animation. Select the Fill tool from the toolbar on the left (the space fill feature).
Now from the color bar on the right select a color 255,0,255. Do this by clicking on the color selected (under the "Styles") on the right. Next, Press the activate toggle window to activate a Tool Options window.
In the Tool options window make sure the Tolerance level is set to 100
Next, just fill the space in between the tanks with pink. So you'll get something like
Now select Colors then Load Palette and choose Tigor.pal we created before. Next Save the image as a BMP file TigorStanding.bmp. Make sure that the format selection below is SET TO Windows BMP.
We're almost done. The final bitmap to be created is the palette itself. Now like before create a new image with dimensions 4 by 4. Color it pink (255,0,255) like we did it before. Now you should have
Next, load up the palette Tigor.pal like before. Then Save the Image as TigorPal.bmp, AGAIN MAKE SURE THAT IT IS SAVED IN Windows BMP!
We're now done with Paint Shop Pro!
4. Implementing your sprite in HoI
Now open up your Notepad. Copy down the format below (which has already been explained above). This is to replace the German Level 1 Panzer graphic with ours!
Sprite = {
Bitmap = "TigorStanding.bmp"
Origin = { x = 24 y = 35 }
Frames = 10
Speed = 5
Palette = "TigorPal.bmp"
}Now save the file as "T-PANZER A-STAND C-GER L-1.spr". Make sure to INCLUDE THE .spr extension when saving!
Now we should have all the ingredients ready for copying to the HoI directory. Note: This might screw up your original graphics for HoI, but you can reinstall to recover. The materials to copy:
TigerPal.bmp to GFX\Palette\
TigerStanding.bmp to GFX\map\units\bmp
T-PANZER A-STAND C-GER L-1.spr to GFX\map\units
NOW WE'RE SET TO GO and TEST.
After copying the three files (remember here we're just replacing the A-STAND standing animation). For a complete sprite you need 10 more graphics and 10 other SPR files, but the concept is EXACTLY the SAME!
Load up HoI, and choose the 1939 and select Germany. Hold your breath.... Now look for an armor division in your army. It's somewhere near the Polish border. Select a create new unit if it's not on top and....
You've got yourself the Tigor you made on the game! And it's animated as well! But the animation is crude ,the model simply blocky, but it served it's purpose. Sure it might not bring victory to the Wermacht, but it can teach you a great lot about sprite making in HoI. Congratulations!
If you try to move your units you might find it revert into the German LVL 1 panzer. That's because we have not made an animation for that ... yet. There are still 10 other animations to do, along with 10 SPR files to make to complete the sprite. But fear not: the frames won't be as many as the standing animation. My advice:
- use 4 frames for A-WALK
- use 20 frames for A-STAND
- use 15 frames for A-FIRE
To understand more about naming and creating the other SPR files, refer to my earlier section on file structures. Well Done!
Sprite making is no doubt a simple task at first. It's a "Stony Road" :) from start to finish and there are bound to be problems for starters. Here are some common errors:
Q: What if the animation jiggles/shakes/distorts a little on SOME FRAME?
A: This suggests that you might make an error during the delicate Frame positioning on the final bitmap. If necessary redo the whole image positioning VERY CAREFULLY and the problem should be fixed.
Q: What if I get a cross instead of any graphics at all?
A: Then your SPR contents are wrong. They might point to a wrong, nonexistent sprite, thus no source for the graphics!
Q: What if there is severe SHIFTING of FRAMES in the animation?
A: Most likely you mispecifiyed the number of frames in SPR with the actual on the BMP. Check it out.
Q: What if the colors look inverted/messy?
A: Most likely you've made a mistake on the paletting. Revise the palette making section. Or you could be using the wrong palette in the SPR file.
Q: What if the graphics is unchanged (ie. remains the old panzer or whatever)?
A: Make sure you name your SPR files correctly and place them in proper directory. It might not trigger to use your sprite instead of the normal ones.
Well, you've reached the end of my tutorial. I hope you now have a better understanding on Sprite making in HoI, which could also be applied for other games with sprite graphics.
Start out simple. Dont overmodel your 3D meshes as it is going to be resized with some details swept away. Also, take a look at some of my work or others or the default Paradox BMPs to get more understanding. To contact me send me an email at sekinoss@yahoo.com, or just visit the Graphical Editing forum! Good luck on modding the graphics of Hearts of Iron!
- Sekinoss
