Character creation tutorial/Sprites

From SRB2 Wiki
Jump to: navigation, search
  Character creation tutorial [view]

Chapter 1: OverviewChapter 2: S_SKINChapter 3: SpritesChapter 4: Character select


Test.png This article or section is incomplete. It doesn't have all of the necessary core information on this topic. Please help the SRB2 Wiki by finishing this article.

A custom character consists of a series of sprites that make up the visual design of the character itself in-game. A set of 360 sprites in total can be dedicated to a character; however, a character can be considered complete with only around 177 sprites on average though, made possible due to the abridged system of handling sprites. This chapter overviews how a character's sprites are created and added to the character's WAD file.

Creating sprites

ToDoIcon.png To do
  • Rewrite this so it only mentions important stuff relevant to SRB2 editing specifically, apart from the graphics editing programs list. Seriously, we don't need to teach people how to draw on a computer, tutorials already exist elsewhere on the internet to do this for us. We also don't need to teach people how to organise their work, that's kind of up to the artists themselves.
  • Things like "don't make recolors" kind of don't really belong here either, they could just as easily go on the first page.
  • Teaching people how to create+add sprites to SRB2 is far more useful than just for making custom characters with; make a general sprite creation tutorial in the near future?

Spriting a character is the hardest and most tedious task that you will face when creating a custom character for SRB2. It is also a very time-consuming process – it is not uncommon for this part of creating your character to take months to complete.

Recommended programs

There are a selection of graphics editing programs available that you can use to create your character's sprites with:

  • MSPaint: this is a simple graphics editing program that is included with all versions of Windows (not included with Mac or Linux). This program is very popular among spriters, and is highly recommanded for basic sprite editing.
  • Paint.NET: An advanced tool containing features that MSPaint has as well as a few extras that aid in creating sprite animations. Recommended if you don't want to buy Photoshop. Not available for Mac or Linux.
  • Photoshop: A multi-purpose picture editing software. Very hard to use if you don't know what you're doing. Not recommended for beginners.
  • GIMP: A free graphics editing program that is supported on Windows, Mac and Linux.
  • GraphicsGale: An animation graphic editor, specially designed for creating sprites and pixel art. A free version of this is available, and provides all you will need for creating sprites for your character. Only Windows is supported, however.
  • Aseprite: Animated sprite editor and pixel art tool. A free trial version is available for download, but files cannot be saved with it; you will have to pay for the full version of this in order for you to be able to use it for sprite-editing.

Glossary of spriting terms

  • Shading
  • Anti-alias
  • Contrast

Workspace

It's important to keep yourself organized when creating sprites. You'll be dealing with a lot of sprites so it's good to know where they all so you can compile them into a wad. A great way to sprite is to create one large PNG file with your chosen graphics editor. Within this file you can freely work on your sprites and set up useful references such as a copy of SRB2's palette with ease without having to figure out what colors are available for you to use.

You may also want to have a folder where you store your sprites as individual files. This will make compiling them into your character's WAD file much easier.

Creating a sprite

A sample sprite.

Once you have your workspace, folder, and tool of choice, now it's time to actually make a sprite. The usual dimensions (image size) of a sprite for a character is 70×70 pixels in size with the actual character being roughly 40×63 (sonic's size).

Cyan (palette color #247) is commonly used as a background color for sprites – this is because lump editors such as XWE automatically convert all instances of cyan to transparent pixels when sprites are loaded. However, SLADE does not do this unless it is specified to do so.

To allow your character to switch skin colors, the parts of your character that you want to change color in each sprite should all use a specific range of colors in the palette. This should be a range of colors that isn't shared by body parts or clothes that you don't want to change color with the color-changing parts, and one that allows your character to look correct in the skin color you want your character to use in Single Player (as well as in other skin colors, if possible).

For instance, the main color of all of Sonic, Tails' and Knuckles' sprites is green (or palette colors #160 through #175) rather than Blue, Orange and Red, respectively. This green range is also the one most commonly used by custom characters, as it is considered the easiest color range to work with. If you don't want your character to use this range of colors, use the startcolor parameter in the character's S_SKIN to choose a different range of colors to work with; note that this will always be a range of 16 colors, startcolor determining the first one of these.

The prefcolor parameter is then used to determine the default skin color used by your character in Single Player; ideally, you should test out how your character's sprites appear in this skin color for best results. Refer to the previous chapter of the tutorial for more details on setting up your character's skin color in the S_SKIN.

Keep in mind that the actual size of the sprite file does not matter, as the sprite offsets can be modified in your chosen lump editor. What actually matters is the size of the character minus the transparent (or cyan) pixels.

Spriting process

Steps

  1. Outline: You first want to draw an outline or lineart of your character. This is crucial as it gives your character the basic shape it needs.
  2. Flat Colors: Once you get your outline done, fill in the colors. Simple enough right?
  3. Shading: This is where things get a bit tricky. Using the colors that you filled in, select a lighter version and a darker version of that color and use those colors to shade the different areas of your sprite in accordance to the light source. See here for more information about shading.
  4. Anti-aliasing

Recommendations

  • Consistency
  • Keep in style
  • Color choice – Putting clashing colors or a large range of colors together comes off as unappealing to the eyes. On the other hand, too little colors can make your sprite look dull. Try balancing your choices of color.
  • No small details – As a sprite, everything is, in a sense, condensed. Therefore it's very hard to sprite small details like a wrinkle on a shirt or a small pendant. It's best to avoid spriting small details as much as possible.

What not to do

  • Recoloring – Using another person's work as a base is acceptable. However, merely color swapping another person's work is generally not – these are commonly known as recolors, which take no effort to produce and are not allowed to be released on the SRB2 Message Board. Minor modifications to an existing character (e.g. a Sonic clone with some clothes or sunglasses) may also be considered a recolor and/or will be equally rejected, depending on the context and the level of effort put in. Attempts to claim such work as your own may be considered to be plagiarism (i.e. stealing credit for work by another author).
  • Pillow Shading – This is a common mistake made by inexperienced spriters. Pillow shading is where the shading is done in such a manner that the darkest shades are done against the outlines and increase with brightness away from the outlines.
  • Banding – A mistake that many spriters new to the anti-alias technique do. Banding is "When segments of AA line up with the lines they're buffering."

Importing sprites into the WAD file

Once you have created your character's sprites (or at least a portion of them), you now need to add them to the WAD file containing your character's lumps. This section explains how to import your sprites into the WAD file, and explains how to name them within the WAD file.

SLADE

To import the images for your character in a blank WAD, click Archive → Import Files in the menu bar, browse to the folder where your images are located, select them and hit enter. If you are importing sprites into a WAD file already containing placeholder sprites, you can alternatively replace them directly one-by-one by clicking Entry → Import; this will directly replace the lump for the old sprite with your imported sprite.

The next task is to convert all sprites to the correct format; typically your imported sprites will be in a format such as "Graphic (PNG)" or "(BMP)" in the WAD file – if these lumps are not converted, they will crash the game if SRB2 attempts to access them. Select all imported lumps at once, right-click on them, and select Gfx → Convert to... The conversion window will pop up. Select "Doom Gfx (Paletted)" as the format to convert to and make sure SRB2's palette (which should be "Existing/Global" if you have set up srb2.srb as your Base Resource, otherwise use "Sonic (SRB2)") is selected. If the sprites contain a cyan background rather than actual transparent pixels, enable "Enable Transparency" in the window to automatically convert them for you. Press Convert All to convert all the images at once.

If it is necessary to rename the lumps to follow the sprite naming format, right-click on them and click Rename Entry. If multiple sprite lumps are being renamed at once, the text characters that differ between them will be given as asterisks (*) in the "Rename" window that pops up. For instance, PLAYA1 and PLAYA5 will appear as PLAYA*; note that lump selections such as PLAYA1 and PLAYA2A8 will appear as PLAYA*** in the "Rename" window. Note: From SLADE v3.1.1 onwards, sprites for the ^ frame cannot be mass-renamed, as SLADE uses carets (^) as part of its extra formatting features for renaming multiple sprite lumps at once. These sprites must be renamed individually instead.

If your S_SKIN lump is not already present in the WAD file, but is ready to add in the WAD file at this stage, you can import it here too – click Entry → Move Up (shortcut: Ctrl+U) to push up the position of the S_SKIN lump until it is immediately above the first sprite.

XWE

In order to import your character's sprites into the WAD, you need to set up XWE to use SRB2's palette if you haven't already. If you don't do this, the images will be converted into the standard Doom palette, which is different from SRB2's palette, and their colors will be messed up as a result. This article explains how to set up the palette in XWE.

To import the images for your character in a blank WAD, Click Entry → Load in the menu bar, browse to the folder where your images are located, select them and hit enter. If you are importing sprites into a WAD file already containing placeholder sprites, you can alternatively replace them directly one-by-one by clicking Entry → Replace; this will directly replace the lump for the old sprite with your imported sprite.

Unlike SLADE, XWE will automatically convert the images into the Doom Graphics Format, and will automatically convert all cyan pixels in them into transparent pixels as soon as the images are loaded into the WAD file.

If it is necessary to rename the lumps to follow the sprite naming format, right-click on them and click Rename Entry. If multiple sprite lumps are being renamed at once, the text characters that differ between them will be given as asterisks (*) in the "Rename" window that pops up. For instance, PLAYA1 and PLAYA5 will appear as PLAYA*; note that lump selections such as PLAYA1 and PLAYA2A8 will appear as PLAYA*** in the "Rename" window.

If your S_SKIN lump is not already present in the WAD file, but is ready to add in the WAD file at this stage, you can import it here too – click Entry → Move Up (shortcut: Ctrl+U) to push up the position of the S_SKIN lump until it is immediately above the first sprite.

Naming format

See also: Sprite > Format

As with all sprites, character sprites must have a lump name of the format NAMEXx. How this format is used slightly differs for character sprites, however:

  • NAME is a four-letter prefix of your choice that should be unique to your character – unlike other custom sprites you do not need to create a sprite freeslot for this prefix.
  • X designates the frame that a sprite belongs to; see the Frame list below for determining which frames to place your sprites in for each animation for the character.
  • x designates a sprite's rotation. It is a number between 1 and 8, where 1 is the front view, 5 is the back view and 8 is the diagonal front-right view.

As with normal sprites, the condensed naming system can be used to condense 8 rotations into five sprites instead of eight. For example, the standing frame of the player would consist of the following five sprites:

PLAYA1
PLAYA2A8
PLAYA3A7
PLAYA4A6
PLAYA5

However, if the frame has non-symmetrical features, using the condensed naming system will cause these features to be flipped as well. For example, if the character carried a weapon on their right hand, it would also appear on their left hand by error when the game flips the sprite, as if they were "switching hands". This problem is solved by falling back into the uncondensed naming structure for any frames where this problem occurs, i.e. PLAYA1 through PLAYA8 as eight separate sprites.

If your character appears the same from all angles for a particular frame, a single sprite can be used with a rotation of 0 (e.g. PLAYA0) – this means the game will use the sprite for all 8 rotations in the frame. This trick is generally used only for frames used by super transformation, death, and the Exit Sign/Extra Life icons.

Frame list

This is the full list of sprite frames that exist for all characters in SRB2:

A Standing
TAILA2A8.PNG
B Boredom 1
TAILB2B8.PNG
C Boredom 2
TAILC2C8.PNG
D Walking 1
TAILD2D8.PNG
E Walking 2
TAILE2E8.PNG
F Walking 3
TAILF2F8.PNG
G Walking 4
TAILG2G8.PNG
H Walking 5
TAILH2H8.PNG
I Walking 6
TAILI2I8.PNG
J Walking 7
TAILJ2J8.PNG
K Walking 8
TAILK2K8.PNG
L Spinning 1
TAILL2L8.png
M Spinning 2
TAILM2M8.png
N Spinning 3
TAILN2N8.png
O Spinning 4
TAILO2O8.png
P Spring falling up
TAILP2P8.png
Q Running 1
TAILQ2Q8.png
R Running 2
TAILR2R8.png
S Running 3
TAILS2S8.png
T Running 4
TAILT2T8.png
U Special ability 11
TAILU2U8.png
V Special ability 21
TAILV2V8.png
W Special ability 31
TAILW2W8.png
X Special ability 41
TAILX2X8.png
Y Special ability 51
TAILY2Y8.png
Z Special ability 61
TAILZ2Z8.png
[ Grab a bubble
TAIL-2-8 leftsquarebracket.png
\ Hurt
TAIL-2-8 backslash.png
] Dead
TAIL-2-8 rightsquarebracket.png
^ On the edge 1
TAIL^2^8.png
_ On the edge 2
TAIL 2 8.png
` Falling 1
TAIL`2`8.png
a Falling 2
TAILa2a8 lowercase.png
b Item hang/Tails pickup
TAILb2b8 lowercase.png
c End sign face2
TAILc0 Lowercase.png
d Extra life monitor face2
TAILd0.png
e Super transformation 1
PLAYg0 lowercase.png
f Super transformation 2
PLAYh0 lowercase.png
g Super transformation 3
PLAYi0 lowercase.png
h Super transformation 4
PLAYj0 lowercase.png
i Super transformation 5
PLAYk0 lowercase.png
j Super transformation 6
PLAYl0 lowercase.png
k Super transformation 7
PLAYm0 lowercase.png
l Super transformation 8
PLAYn0 lowercase.png
m Super transformation 9
PLAYo0 lowercase.png

1 The purpose of these frames depend on what is set for the character's ability; even if not used however, these frames should still be present for the character to function properly. See S_SKIN > ability for more information.

2 It is recommended to refer to the sprite offsets of the Level End Sign/Extra Life Monitor sprites, as well any existing character's own sprite offsets for these frames, to assist with correctly dealing with the offsets for these frames for your own character.

Lowercase lump names

The last thirteen frames in the above list all have lowercase letters in them. That means that the sprites for these frames will look like this:

PLAYa1
PLAYa2a8
PLAYa3a7
PLAYa4a6
PLAYa5

Most WAD editors now support lowercase lump letters, though the feature may be turned off by default. Both XWE and SLumpEd, two very popular WAD editors, support this in newer versions. If you would like to know how to turn this feature on, check the XWE tutorial or SLumpEd tutorial to adjust the settings. Also, it is worth noting that this applies to the last 13 frames, the "Falling 2", "Tails pickup" frames, "Life monitor" frames, "End sign" frames, and "Super transformation" frames. The first thirteen frames, "Standing", "Boredom 1", "Boredom 2", "Walking", and "Jumping" are all supposed to use capital letters.

  Character creation tutorial [view]

Chapter 1: OverviewChapter 2: S_SKINChapter 3: SpritesChapter 4: Character select