2D Sprite Tutorial.
It's very easy to make 2D sprites. No modelling is required. You just draw the sprite and drop it into the game. The following is a step-by-step tutorial on the process from start to finish.
I'm drawing a Sd.Kfz 234 panzerspawagon.
I'm using GIMP, so the first thing I need to do is create a file and give it a background. I'm using 96 x 96 pixels for my file. Choose Transparent.
I colour the background green, (transparent colour) as this will not show in the finished product. The green colour was taken from a 3D sprite palette file, found in the Darkest Hour/gfx/palette folder of the core game.
For this model, the first thing I do is draw a wheel.
I constantly look at the picture and compare the images.
1 wheel becomes 2, and 2 become 4 as needed.
I now start drawing the frame of the vehicle, pixel by pixel.
It takes patience and trial-and-error, but finally I have a frame.
Using the Fill Tool, I fill in the colours I want.
So the drawing is now complete. Save the image as a 24-bit RGB image.
Now starts the preparation for spriting that image.
Create a file of size 192 x 96, as I'm going to now double up on the image for my sprite.
I copy and paste in my original image, and then copy it again. 2-up is what I need.
This now totally completes the drawing process. Everything after this is with 3 files.
The 3 files I need are shown here.
1: 2-up image
2: .SPR file (which contains the image information)( can be opened with Notepad)
3: Palette file.
3: The palette file is simply taken from the palette already in the game. Most of the palette files are the same, just with different names. I now name this file to suit my purposes.
T-L_PANZER C-GER L-2.
Explanation: T-L_PANZER denotes a Light Panzer, which is built first in the game, and 2 means the 2nd sprite built.
C-GER denotes Germany and L-2 means Level 2 sprite.
2: Opening up the SPR file, shows the information within.
It is most important that all the file names are correct, as otherwise the sprite will not work.
Bitmap: is my 2-D image
Origin: is where the image will go on the map.
Frames: I've got 2 frames (2-up).
Speed: My 2nd frame will "animate" at this speed. 50 is slow.
Palette: is my palette file name.
I'm using only 2 frames, as that's all I need. In the game, my first frame will show the image, and my 2nd frame will show the image+ a blinking arrow to denote direction.
This is the STAND sprite. No blinking arrow is added here, as it just stands and doesn't move. This is a list of all the sprites I will subsequently make, with added arrows in these directions: N, S, E, W, NE, NW, SE, SW. So 8 directional (WALK) and 1 STAND makes 9 sprites.
Attack sprites now are added as (FIRE), again x 8, making a total of 17 sprites for every image in the game.
So, using my STAND sprite, I would then add an arrow to the image, and save it as for example: T-L_PANZER A-WALK C-GER L-2 D-NE... to denote North East direction, and save each one in turn.
To sum up:
There are 8 directional (WALK) sprites
There is one STAND sprite
There are 8 directional (FIRE) sprites.
17 sprites per image in the game. Don't worry, it only takes 10 minutes to do this whole process, once you have the original 2-up image (STAND).
I now have all the files I need to place in the game.
The Palette sprite goes into the Darkest Hour/gfx/palettefolder:
The STAND image (for testing purposes) or all the 17 images go into the Darkest Hour/gfx/map/units/bmp folder:
The SPR files go into the Darkest Hour/gfx/map/units folder:
Now fire up the game and see your sprite:
If you see black squares, or no image at all, then you need to check your files and see where you went wrong.
BEST to make the STAND image, SPR file and Palette file, and test this file first, before completing the whole process, and only then finding out that things were wrong...!!
This completes the tutorial. Seeing your own sprites in the game is very enjoyable, and I would encourage you to give this a go!
Unfortunately, you will find yourself renaming / editing lots of files. To do so manually is crazy! I'd highly recommend these tools:
http://www.beroux.com/english/softwares/renameit/ for renaming files.
and http://www.inforapid.de/html/srdownload.htm for changing file contents very quickly.
EDIT: Tutorial extended to explain how I'm doing "animation".
I'm using a simple Green Arrow to show movement, and Red Arrow to show Battle.
The tile is 96 x 96, so 2-up it is 192 x 96. You put the arrow on either side, but only on 1 side. A total of only 2 tiles is needed. In the game, the sprite will blink and show the arrow. I've slowed down the blinking, as it was way too fast, and may have caused vision issues to players?
I've since learned that you can generate your own camoflage colours in GIMP:
Reply With Quote
Originally Posted by Pasha
