User blog:Wolfram the Lone Warlock/Sprite Making: The Master Warlock's Way

LW: Muhahahahaha! Welcome again to my realm! Now that you gathered all your courage to face me, The Master Warlock, it is now high time to use that courage, no?

Introduction
LW: But alas! Every lesson must start with a sufficient introduction, or lest the studious ones, or not, might lost their path from their goal!

LW: What is a sprite? What is its use? How is it used? Very simple, really. A Sprite is an image that contains a set of more images that is integrated in a larger scene. Basically it is a single layered image that has the frames for animation placed in an array. It is a very efficient way of reducing the load for its applications since only a single large image must be loaded once instead of loading a set of multiple images and frames.

Its uses ranges from Web pages such as buttons, headers etc.; textures for 3d models, and animations and GUI for video game.

Sprites are used by having the compiler (for computer programs) or the parser (for web pages) load only a portion of the whole image depending on how it is programmed.

All in all, it is a very interesting graphic system.

How to make a sprite out of a drawing or picture
LW: Now that you've managed to reach this point, It's now time to get down to the business. But before everything else, I would like you to know that even I, don't know how others do it, but this is the only method I use and I DO NOT force you to follow this in verbatim, do it your own way, I don't care. But then, what's the point of you being here? Also this guide is created, assuming that you know a thing or two about basic image editing

LW: Yosh! For starters this will be the things you would want to have first: LW: First, These are the images I'm going to use for this guide. These are for a basic attack animation plus the idle pose. The method of image creation is left to you. Idle PosePre-attack PosePost-attack PoseLW: Now that you have your pictures to edit, let's get started.
 * 1) Set of images you'll be editing (Duh!)
 * 2) Image Editing Software (Photoshop, GIMP but I'll be using PAINT.NET for this guide)

Transitioning
With this three frames, you can already take this as a valid animation for the game itself, but it is still lacking in its movement. You might want to give it some impression that it really moved. You can make transitions in between these frames using motion blur in it.

Compare the two frames you would want to give transition to. Take note on what direction a certain limb or a body part will move. Use this image as an example. Take note of the red arrowsNote that the larger the movement, the more obvious the motion blur should be. While those with little movement or moves in the same direction do not require too much or any effect at all.

Now that the movements to be made have been determined, start cutting of the moving parts from both the image and place it on another layer. The parts should be separated by different layers. Body parts separated by layersIn this example, I only separated the Left and Right Arm, and the Left Leg from the rest since these are the only movements are the largest, while the rest moves on the same direction.

The next thing to do is apply the motion blur by layers. I assume that this can also be done in Photoshop or GIMP but I can't exactly tell how is it done since I used PAINT.NET for this. It's up to you.

<p data-parsoid="{"dsr":[3639,4050,0,0]}">First, duplicate the layer you're about to apply this effect on two times. Otherwise, the body part would look like it got cut off. Take note of the direction of the motion blur should follow. Tick "Centered" for the first layer. Leave the "Centered" unticked for second layer. Then just leave the third copy unedited. Merge the three layers and repeat for the rest. Then save it as a different file, of course. The first layerThe second layerDon't forget to add a third unedited layer, or it'll look like thisFinished.<p data-parsoid="{"dsr":[4329,4528,0,0]}">Then do the same with the next frame with its direction on the opposite this time. Of course, the major movements should be stressed with this one as well. And do the same for the rest of the frames. <p data-parsoid="{"dsr":[4643,4752,0,0]}">Now that we have enough frames to add to the animation, You might want to give it the pixelized feel as well.

<p data-parsoid="{"dsr":[4754,4884,0,0]}">First, adjust the levels of the image. Brighten the what needs to be brighten and darken what needs to be darken. Balance it well. PAINT.NET : Adjustments>Levels... I don't know how with other apps though...<p data-parsoid="{"dsr":[5003,5184,0,0]}">Shrink all the image with Resampling in "Bicubic" then return it to its original size with Resampling in "Nearest Neighbor". Returning it to its original size is unnecessary though. Shrink then EnlargePixelized only if you zoom thisWith Motion Blur EffectWithout Motion Blur Effect==Outro== <p data-parsoid="{"dsr":[5462,5591,0,0]}">LW: I guess that is all for now. Any questions about this topic? Any clarification to make? Ask away in the comments! Ciao!