Difference between revisions of "Creating Unit Art"

From The Battle for Wesnoth Wiki
m (Clarified areas of the 'Basic unit image specifications', changed 'normal frame' to 'base frame' in 'Unit animation specifications')
(Fixed typos and inconsistent capitalization, further clarification on frame durations for Unit animation specifications, removed link to outdated horse baseframe and animation template)
Line 4: Line 4:
 
''' Basic unit image specifications '''
 
''' Basic unit image specifications '''
  
Wesnoth can only use two kinds of graphic files:  PNGs, or JPEGs.  JPEGs aren't suitable for unit images, because they're can't store transparency data (and are lossy).  Because of this, we always use PNGs.
+
Wesnoth can only use two kinds of graphic files:  PNGs, or JPEGs.  JPEGs aren't suitable for unit images, because they can't store transparency data (and are lossy).  Because of this, we always use PNGs for unit images.
 
*Final format: transparent PNG
 
*Final format: transparent PNG
** color depth should be 24-bit (8 bits per RGB channel).  This may be listed as "PNG-24" or "8-bit RGBA".
+
** Color depth should be 24-bit (8 bits per RGB channel).  This may be listed as "PNG-24" or "8-bit RGBA".
** be aware that "Indexed color", "color map", or "PNG-8" is a different format.  Although it might work in a buggy way, we strongly recommend you not use these.
+
** Be aware that "Indexed color", "color map", or "PNG-8" is a different format.  Although it might work in a buggy way, we strongly recommend you not use these.
*  size is 72 x 72 pixels (it can actually be slightly wider, and can fit in the area of a hex and it's immediately surrounding tiles, but try not to do this if at all possible, because it has performance and graphical glitch issues).
+
Canvas size is 72 x 72 pixels (it can actually be slightly wider, and can fit in the area of a hex and its immediately surrounding tiles, but try not to do this if at all possible, because it has performance and graphical glitch issues).
*All but exceptionally large units should be contained in the hex (the white in the attached template)
+
*All but exceptionally large units should be contained in the hex if possible (the white in the attached template)
 
*Compare the size of your unit to the size of similar existing core units
 
*Compare the size of your unit to the size of similar existing core units
*Light comes from the upper right (for shading and highlights)  
+
*Light comes from the artist's (''not'' the unit's!) upper right (for shading and highlights)  
*Unit must look in the lower right direction  
+
*Unit must look in the lower right direction
 
*Units are centered horizontally  
 
*Units are centered horizontally  
 
*Unit's feet are positioned around 55 pixel from the top, lower for taller units if necessary
 
*Unit's feet are positioned around 55 pixel from the top, lower for taller units if necessary
 
*Shadows at 60 opacity, dark blue color (see [[Creating_Shadows_Under_Units|Creating Shadows Under Units]]).  
 
*Shadows at 60 opacity, dark blue color (see [[Creating_Shadows_Under_Units|Creating Shadows Under Units]]).  
*Outlines should be used, made with a darker, but similar colour to what they're surrounding, this makes the unit feel bigger then the amount of pixels you'd use for the same with a black outline. Pure black (RGB #000000) should never be used to outline a sprite.
+
*Outlines should be used, made with a darker, but similar colour to what they're surrounding, this makes the unit feel bigger then the amount of pixels you'd use for the same with a black outline. Note that pure black (RGB #000000) should ''never'' be used to outline a sprite.
 
*Use consistent names for your files, beginning with the unit name, so that they are kept together when browsing the files.  Try to imitate the naming scheme used for mainline units.
 
*Use consistent names for your files, beginning with the unit name, so that they are kept together when browsing the files.  Try to imitate the naming scheme used for mainline units.
  
Line 25: Line 25:
 
You can have as many frames for animations as you like, and in fact, for any given cue, you can have more than one animation, which will be randomly chosen by the game.  Images and animations must be done for:  
 
You can have as many frames for animations as you like, and in fact, for any given cue, you can have more than one animation, which will be randomly chosen by the game.  Images and animations must be done for:  
 
*base frame (1 frame)  
 
*base frame (1 frame)  
*attack for each type (at least one frame, about 6 frames is optimal)  
+
*attack for each type (at least 3 frames, about 6 frames is optimal depending on the type of attack and the weapon(s) involved)  
 
*directional attacks (generally are desired for any attack that's a straight motion, rather than a slash.  I.e. spears and thundersticks)  
 
*directional attacks (generally are desired for any attack that's a straight motion, rather than a slash.  I.e. spears and thundersticks)  
*defense (can be split into ranged and melee animations)
+
*defense (usually 2 frames long not including the base frame, can be split into ranged and melee defense animations)
 
*magical attacks should have 'special effects'  
 
*magical attacks should have 'special effects'  
  
  
It is important that the unit moves its feet when doing a melee attack. During the attack the unit will move from its own hex to the hex it is attacking. If you don't have foot movement in your animation, the unit will be "sliding" toward its target, which looks bad.
 
  
 
+
''' Additional Notes '''
 
 
''' Additional Notes and examples '''
 
  
 
*Test early with different backgrounds. Go to your game terrain files, pick, say, 3 terrains, preferably with different colours, and have a look what they look like against the background, because that way if you have used alpha channels, it may look better in game than as the average standard sprite.  
 
*Test early with different backgrounds. Go to your game terrain files, pick, say, 3 terrains, preferably with different colours, and have a look what they look like against the background, because that way if you have used alpha channels, it may look better in game than as the average standard sprite.  
Line 41: Line 38:
 
*Test your unit early in the game. Replacing an existing unit graphic with yours is the fastest way (be sure to make a copy of the originals so you don't lose them.)  
 
*Test your unit early in the game. Replacing an existing unit graphic with yours is the fastest way (be sure to make a copy of the originals so you don't lose them.)  
  
*If you are animating a horse, you should base it on this [http://www.wesnoth.org/forum/viewtopic.php?t=7592&sid=eb882602a04b48cf8fcce9ca77fbeae0 example of an horse animation]
+
*Test your unit next to mainline units in-game. This will help you ensure that your unit matches the style and proportions of the mainline units as closely as possible.
  
 
== See Also ==
 
== See Also ==

Revision as of 22:00, 13 December 2011

Here's the information needed to start doing units art for Wesnoth. Please update the wiki with links to examples and other tips and tricks realted to unit art. This page started from this forum thread.


Basic unit image specifications

Wesnoth can only use two kinds of graphic files: PNGs, or JPEGs. JPEGs aren't suitable for unit images, because they can't store transparency data (and are lossy). Because of this, we always use PNGs for unit images.

  • Final format: transparent PNG
    • Color depth should be 24-bit (8 bits per RGB channel). This may be listed as "PNG-24" or "8-bit RGBA".
    • Be aware that "Indexed color", "color map", or "PNG-8" is a different format. Although it might work in a buggy way, we strongly recommend you not use these.
  • Canvas size is 72 x 72 pixels (it can actually be slightly wider, and can fit in the area of a hex and its immediately surrounding tiles, but try not to do this if at all possible, because it has performance and graphical glitch issues).
  • All but exceptionally large units should be contained in the hex if possible (the white in the attached template)
  • Compare the size of your unit to the size of similar existing core units
  • Light comes from the artist's (not the unit's!) upper right (for shading and highlights)
  • Unit must look in the lower right direction
  • Units are centered horizontally
  • Unit's feet are positioned around 55 pixel from the top, lower for taller units if necessary
  • Shadows at 60 opacity, dark blue color (see Creating Shadows Under Units).
  • Outlines should be used, made with a darker, but similar colour to what they're surrounding, this makes the unit feel bigger then the amount of pixels you'd use for the same with a black outline. Note that pure black (RGB #000000) should never be used to outline a sprite.
  • Use consistent names for your files, beginning with the unit name, so that they are kept together when browsing the files. Try to imitate the naming scheme used for mainline units.


Unit animation specifications

You can have as many frames for animations as you like, and in fact, for any given cue, you can have more than one animation, which will be randomly chosen by the game. Images and animations must be done for:

  • base frame (1 frame)
  • attack for each type (at least 3 frames, about 6 frames is optimal depending on the type of attack and the weapon(s) involved)
  • directional attacks (generally are desired for any attack that's a straight motion, rather than a slash. I.e. spears and thundersticks)
  • defense (usually 2 frames long not including the base frame, can be split into ranged and melee defense animations)
  • magical attacks should have 'special effects'


Additional Notes

  • Test early with different backgrounds. Go to your game terrain files, pick, say, 3 terrains, preferably with different colours, and have a look what they look like against the background, because that way if you have used alpha channels, it may look better in game than as the average standard sprite.
  • Test your unit early in the game. Replacing an existing unit graphic with yours is the fastest way (be sure to make a copy of the originals so you don't lose them.)
  • Test your unit next to mainline units in-game. This will help you ensure that your unit matches the style and proportions of the mainline units as closely as possible.

See Also