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: 11901
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: imacsspark.zip
File Size: 75.1 KB
Zip FileFilename: imacssprite1.gif
File Size: 4.2 KB
Zip FileFilename: imacssprite6.gif
File Size: 1.1 KB
Zip FileFilename: imacssprite3.gif
File Size: 6.5 KB
Zip FileFilename: imacssprite4.gif
File Size: 3.3 KB
Zip FileFilename: spritewizard.gif
File Size: 10.9 KB
Zip FileFilename: imacssprite5.gif
File Size: 1.3 KB
Zip FileFilename: imacssprite2.gif
File Size: 5.5 KB

User Comments Showing comments 1-4

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

Posted By: Bulk on Sep 28 2003 at 03:06:25
;)

Posted By: imaculata2000 on Sep 28 2003 at 21: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 13: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 05 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
knock knock
General | News
By: MIFUNE | Dec 31 2017
 
knock knock
General | News
By: omega | Dec 22 2016
 
knock knock
General | News
By: MIFUNE | Oct 10 2015
 
New HL HUD Message System
Half-Life | Coding | Shared Tutorials
By: chbrules | Dec 31 2011
 
knock knock
General | News
By: Whistler | Nov 05 2011
 
Particle Engine tutorial part 4
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 18 2010
 
Particle Engine tutorial part 2
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 11 2010
 
Particle Engine tutorial part 3
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 11 2010
 
Game Movement Series #2: Analog Jumping and Floating
Half-Life 2 | Coding | Shared Tutorials
By: mars3554 | Oct 26 2009
 
Particle Engine tutorial part 5
Half-Life | Coding | Client Side Tutorials
By: Deadpool | Aug 02 2009
 

Site Info
297 Approved Articless
8 Pending Articles
3940 Registered Members
0 People Online (4 guests)
About - Credits - Contact Us

Wavelength version: 3.0.0.9
Valid XHTML 1.0! Valid CSS!