Welcome, Guest! Login | Register

Animated sprites & fixing palette issues in Photoshop [Print this Article]
Posted by: imaculata2000
Date posted: Sep 27 2003
User Rating: 5 out of 5.0
Number of views: 7411
Number of comments: 4
Description: How to make animated sprites in Photoshop, and how to fix the frames of your sprites so they share the same palette.
This tutorial will teach you how to make animated sprites for Half-Life, and will also help you fix your frames in case they do not share the same palette. Note that this tutorial only describes how to do this in Adobe Photoshop. For this tutorial I used version 5.5 of Photoshop. But you should be able to find everything I describe in newer versions as well.

First of all I'll assume you have the necessary frames for an animated sprite ready. The frames for Half-Life sprites must have dimensions that are a multiple of eight. They can be no larger than 256 pixels wide and 256 pixels high. So make sure your frames have the right dimensions, AND make sure that all the frames have the same dimensions.



user posted imageuser posted imageuser posted imageuser posted imageuser posted imageuser posted image
(Example sequence)



*Technically the frames of an animated sprite do not need to have the same dimensions, but if you don’t give them the same dimensions, then the frames might start to shift when the sprite is actually animated by Half-Life.

There are four ways to render a sprite. And you have to take into consideration what rendering method you'll be using, before actually making the frames for your sprite. Here's a list of the available render methods:


  • Additive - 256 colours with additive transparency.
  • Alphatest - 255 colours and only the last colour in the palette is transparent.
  • Indexalpha - Greyscale, the last colour is the actual colour that will be given to the sprite.
  • Normal - 256 colours, no blending or transparency at all.




user posted image


Most of these rendering methods require at least a basic understanding of the Colortable option in Photoshop. You'll also need a program called Sprite Wizard (By Spider), or some other program to compile your frames into a sprite.



Making an animated sprite using the Additive method



To make an animated sprite using the Additive rendering method, you'll first have to make sure that each frame is set to RGB colours (Image>Mode>RGB Color). Save all your frames in the BMP-format. Open up the frame that has the largest diversity in colours. Now set it to Indexed colours (Image>Mode>Indexed Color...) You'll be prompted with a window. Just click OK. What you need to do now is save the palette of this frame. Go to (Image>Mode>Color Table). You'll see a window which contains all the colors used in this frame. Click on Save. You will be prompted with the option to save your palette in the colortable (*.ACT) -format, but instead change the format to Microsoft Palette (*.PAL). Give it a name and Save.

Now open up another frame from your sequence and change the colours to Indexed colours (Image>Mode>Indexed Color...). You will be prompted with a window again, instead of clicking Ok, like you'd normally do, go to the Palette pull down menu. Select Custom from the pull down menu, and you'll be prompted with another colortable window. Click on Load, and load the palette you saved earlier. The palette of your frame will now be changed without messing your colours up.

Repeat this for all your frames, and then fire up Sprite Wizard, or what ever program you use to compile your frames into a sprite. The rest shouldn't need any explaining...






Here's an example of the finished sprite, using the frame sequence at the top of this article:
Zip FileFilename: imacsspark.zip
File Size: 75.1 KB

If you want to make animated sprites using the other render methods, then that works basically the same. Just make sure that before you save your palette, you double check that you used the last colour in your colortable (Bottom-right colour) for either Alphatest or Indexalpha. Otherwise it simply won't work.

Rate This Article
This article is currently rated: 5 out of 5.0 (1 Votes)

You have to register to rate this article.
Related Files
Zip FileFilename: spritewizard.gif
File Size: 10.9 KB
Zip FileFilename: imacsspark.zip
File Size: 75.1 KB
Zip FileFilename: imacssprite6.gif
File Size: 1.1 KB
Zip FileFilename: imacssprite5.gif
File Size: 1.3 KB
Zip FileFilename: imacssprite3.gif
File Size: 6.5 KB
Zip FileFilename: imacssprite2.gif
File Size: 5.5 KB
Zip FileFilename: imacssprite4.gif
File Size: 3.3 KB
Zip FileFilename: imacssprite1.gif
File Size: 4.2 KB

User Comments Showing comments 1-4

Posted By: rkzad on Sep 27 2003 at 21:01:23
Good use of the file tag ;)

Posted By: Bulk on Sep 27 2003 at 21:06:25
;)

Posted By: imaculata2000 on Sep 28 2003 at 15:03:32
lol

Thanks.
This tutorial ought to solve a lot of people's problems.
The palette thing can drive people mad. :-D

Posted By: NoBody on Jul 28 2004 at 07:27:17
to get a better palet merge all the images in to one big (where you can see all the frames) then make you .PAL from that one.


You must register to post a comment. If you have already registered, you must login.

Latest Articles
3rd person View in Multiplayer
Half-Life 2 | Coding | Client Side Tutorials
How to enable it in HL2DM

By: cct | Nov 13 2006

Making a Camera
Half-Life 2 | Level Design
This camera is good for when you join a map, it gives you a view of the map before you join a team

By: slackiller | Mar 04 2006

Making a camera , Part 2
Half-Life 2 | Level Design
these cameras are working monitors that turn on when a button is pushed.

By: slackiller | Mar 04 2006

Storing weapons on ladder
Half-Life 2 | Coding | Snippets
like Raven Sheild or BF2

By: British_Bomber | Dec 24 2005

Implementation of a string lookup table
Half-Life 2 | Coding | Snippets
A string lookup table is a set of functions that is used to convert strings to pre-defined values

By: deathz0rz | Nov 13 2005


Latest Comments
Spinning Corpses Simple Fix
Half-Life | Coding | Snippets
By: darkPhoenix | Sep 05 2008
 
Where do we go from here
General | News
By: MIFUNE | Jun 09 2008
 
The Input/Output system
Half-Life 2 | Level Design
By: nazitaco | Dec 23 2007
 
Where do we go from here
General | News
By: Rob_F | Nov 22 2007
 
Rescaling Half-Life
Half-Life | Coding | Shared Tutorials
By: christoph | Nov 12 2007
 
GameUI
Half-Life 2 | Coding | Client Side Tutorials
By: Evil_j | Oct 29 2007
 
3 State Zoom For Any Weapon
Half-Life 2 | Coding | Server Side Tutorials
By: Ennuified | Oct 18 2007
 
Storing weapons on ladder
Half-Life 2 | Coding | Snippets
By: cct | Sep 07 2007
 
CTF Gameplay Part 1
Half-Life | Coding | Shared Tutorials
By: DarkNight | Aug 28 2007
 
CTF Gameplay Part 1
Half-Life | Coding | Shared Tutorials
By: deedok | Aug 20 2007
 

Site Info
296 Approved Articless
5 Pending Articles
3940 Registered Members
2 People Online (23 guests)
About - Credits - Contact Us

Wavelength version: 3.0.0.9
Valid XHTML 1.0! Valid CSS!