Sign in to follow this  
FlameTheLoner

Sprite Making Tutorials?

Recommended Posts

FlameTheLoner    108
Hello,
Me and my team are working on a 2D Action/Platformer type of game. For this game, we will be needing lots of character Sprites. Since we have no one in our Art Department, we're thinking of making some of the Sprites ourselves.

Now, we don't want the general pixel-art kind of Sprites. We want some high resolution Sprites with clean and smooth edges and color. The Sprites will be animated too, so there will be many frames of animation of each character sprite, which must be compiled to a perfect Spritesheet.

Is there any sort of tutorial out there for making these kind of Sprites? Along with how to actually make each frame of animation?

Basically, the current team isn't familiar with much graphics works, but we really need some Sprites done for the sake of starting development.

Any help?

Share this post


Link to post
Share on other sites
sunandshadow    7426
If you want smooth-looking sprites you might be better off using vector graphics - many modern 2D games use vector sprites instead of using high-res pixel ones.

Either way, your first step is to get the appropriate art program and use basic tutorials on the internet to learn to use the program. If you want a free program, Gimp can be used to make pixel sprites, while Inkscape can be used to make vector sprites.

You might also benefit from either going to a local library and looking for books on animation, or looking for basic animation tutorials online. In addition to that, it's very helpful to have an example sprite from an existing game that you can look at to get a basic idea of how to do yours.

Share this post


Link to post
Share on other sites
FlameTheLoner    108
Yea, we do need Vector graphics. And we want to use free software for making them. We plan on making the graphics close to the game 'Shank'.

I've looked around Google, and every tutorial is basically bitmap pixel-art tutorials. If you know of any Vector Sprite making tutorials, please post the link here.

Share this post


Link to post
Share on other sites
LionMX    100
Maybe expanding your search will help. For example, try searching for "How to" "Vector Images" "Vector Cartoons" whilst they might not be sprite specific, they should help you get the skills to create something.

Also, if development is currently on hold whilst you try to learn, why dont you use someone elses art as a placeholder until you can put your own art in?

Share this post


Link to post
Share on other sites
sunandshadow    7426
Um, the graphics of Shank show the hand of a skilled artist, it would be quite difficult for someone who doesn't have artistic experience to create images like that.

But, let me reiterate - download Inkscape and read some of the basic tutorials available about how to use Inkscape. There are hundreds of such tutorials available, both as web pages and as youtube videos.

Then, pick one of the simplest sprites in your game to do as practice. Or if there are non-animated 2D elements in your game, do those first. Get the basics done before you blow your mind trying to animate a humanoid or something ridiculously complicated like that.

Share this post


Link to post
Share on other sites
FlameTheLoner    108
Well, I know that we cant recreate something like Shank, I'm just saying that's the kind of clear smooth animation we aim for. :)

Also, I saw some videos where they made 2D Sprites out of a 3D Model. They played an animation on the Model, and then adjusted the camera to the sides, and then exported each animation frame onto .PNG files. And then they used GlueIT to compile it to a sprite sheet.

Now, doing Sprites via 3D Model Animation does sound easier, as one doesn't have to draw each frame. But that's just in my view. What do you guys think? Should we start looking for a 3D Modeller/Animator instead of a Sprite Artist?



Share this post


Link to post
Share on other sites
Wai    1007
Re: FlameTheLoner

Quote:
Original post by FlameTheLoner
Basically, the current team isn't familiar with much graphics works, but we really need some Sprites done for the sake of starting development.


Just a comment:

I think you could start the development using some dummy sprite. You could start that by taking pictures of yourself in various poses, and just get a rough silhouette. To represent different characters, just change the color of the silhouette or label them using text. (Of course, if it is too much trouble to take pictures you could just use some sort of shape or some freehand stick figure/silhouette.)

Quote:
Should we start looking for a 3D Modeller/Animator instead of a Sprite Artist?
Meanwhile, perhaps keep looking for an artist, both 3D and 2D. You use the one you get.

Quote:
sunandshadow:
Um, the graphics of Shank show the hand of a skilled artist, it would be quite difficult for someone who doesn't have artistic experience to create images like that.

I think there is an interest question behind this comment. The question is: What exactly does a skilled artist gain from practicing? Are we talking about some sort of knowledge about beauty? Is it some knowledge about the process of making the art? Or some sort of hand-eye coordination? Or is it the development of a coherent style?

I think there are shortcuts if you know exactly what "skill" you need, that the others have learned from experience. But you can only get them if the people who have learned them can articulate them.

I think one thing you can do for 2D sprites, is to just use Inkscape or other vector program to draw a bunch of body part sprites. After that you just arrange them to get the postures you want. Just keep them as solid color so that you don't need to worry about seems and layers. To get the original image of a body part, you could draw it freehand in Inkscape or trace it from a photograph.

Share this post


Link to post
Share on other sites
sunandshadow    7426
Quote:
Original post by Wai
You could start that by taking pictures of yourself in various poses, and just get a rough silhouette. To represent different characters, just change the color of the silhouette or label them using text.

Meanwhile, perhaps keep looking for an artist, both 3D and 2D. You use the one you get.

I agree with this advice. Taking photos of yourself doing the actions the sprite should do is good not only for a placeholder, but to show your artist so they know what animation you need made. 2D and 3D each have their own difficulties - in your case the 2d character creation would be easier but the animation more laborious, while for 3D the character creation would be more laborious and the animation easier. You could feasibly use either type of art for this type of game.

Quote:
sunandshadow:
Um, the graphics of Shank show the hand of a skilled artist, it would be quite difficult for someone who doesn't have artistic experience to create images like that.

Quote:
Original post by WaiI think there is an interest question behind this comment. The question is: What exactly does a skilled artist gain from practicing? Are we talking about some sort of knowledge about beauty? Is it some knowledge about the process of making the art? Or some sort of hand-eye coordination? Or is it the development of a coherent style?

I think there are shortcuts if you know exactly what "skill" you need, that the others have learned from experience. But you can only get them if the people who have learned them can articulate them.

I was thinking the artist had knowledge of the what and why of shapes used to represent people as cartoons. The what part is about style, the why part is about beauty (or more accurately, audience reaction). That is knowledge gained slowly from not only practicing, but also being aware of others' art.

The how, of physically being able to create the animated cartoon, is also important, but that is the easiest part to handle with shortcuts (tutorials and emulating an example).

Share this post


Link to post
Share on other sites
Kalten    189
Also dont forget that you can quickly and easily translate 3d graphics into 2d graphics by recording any arbitary view into a sprite series, then using your sprite handler to play back that series.

Share this post


Link to post
Share on other sites
FlameTheLoner    108
Thanks for the help guys!

You see, our coder is a full on coder. And I, even though am doing Design, come from a code background (Web Development). I have some art skills, but it's only useful as pre-concept art. So its pretty hopeless for either of us to learn graphics. :/

So we'll keep looking for 2D and 3D Artists, and hopefully we'll finally get someone to join the team!

Thanks again. =D

Share this post


Link to post
Share on other sites
sunandshadow    7426
If you want to see an example of a vector sprite, I finished the first draft of the trotting horse I've been working on this week. It's still rather a mess - looks like it's giving itself whiplash because the neck movement is too extreme, no mane or tail, no color, etc. It's 8 frames, made in Inkscape, using photos of horses as references. Took me about 10 hours so far (I'm kinda slow).

Share this post


Link to post
Share on other sites
FlameTheLoner    108
Quote:
Original post by sunandshadow
If you want to see an example of a vector sprite, I finished the first draft of the trotting horse I've been working on this week. It's still rather a mess - looks like it's giving itself whiplash because the neck movement is too extreme, no mane or tail, no color, etc. It's 8 frames, made in Inkscape, using photos of horses as references. Took me about 10 hours so far (I'm kinda slow).



Wow! Thats really nice. Thats actually the kind of graphics we want (smooth edges).

Did you draw all the parts separately and then rearranged/frame? Or did you redraw each time?

Share this post


Link to post
Share on other sites
sunandshadow    7426
Quote:
Original post by abstractionline
The centre of the horse is looking stiff.

http://www.youtube.com/watch?v=INQx-Lzs8mU

^ Here's a good horse animation cycle tut.


Yep, I agree that it looks stiff. This horse is intended as a mount for a 2D avatar, so I wasn't sure if making the part where the avatar would sit be in motion would make it too difficult to keep the avatar's butt aligned with the horse's back. I will research that after the next draft - look at some existing mounts and riders in games and see how much the rider moves around with the animal's gait. Thanks for the link - that's an awesome video! [smile]

[Edited by - sunandshadow on November 18, 2010 1:46:46 PM]

Share this post


Link to post
Share on other sites
sunandshadow    7426
Quote:
Original post by FlameTheLoner
Wow! Thats really nice. Thats actually the kind of graphics we want (smooth edges).

Did you draw all the parts separately and then rearranged/frame? Or did you redraw each time?

Thank you. Yes smooth edges is what vector graphics excels at. I did a combination of redrawing and rearranging:

1st I imported all my reference images into inkscape. I also had decided during the research process that a trot was the gait I wanted to animate (horses have like 6 different gaits)

2nd I picked the three overall best-looking images. I roughly traced the body pats of one. Then I lined up the second reference to be the same size as the first, with the body in the same place, and traced the body parts of that one. Then I did the same with the third. Now I carefully examined - which of the tree heads did I like best? Delete the other two. Which of the three bodies did I like best? Delete the other two. What about the legs, one of my examples had much thicker, draft-horse legs, did I want to go with those or the skinny ones? I decided to go with the skinny ones, but set the thick legs aside because I might want to do a variant horse with draft legs later.

3rd I hacked on the lines anywhere I thought I could improve the style, because just tracing a real animal is not going to result in a cute cartoon, you have to stylize a bit.

4th I brought over the next set of reference images, one of Muybridge's photosheets of a horse trotting. I could instead have used video footage or someone else's existing sprite of a trotting horse. I resized this to match what I had drawn so far, and traced the leg positions, trying to make them match what I already had in proportion and style. I could have instead copied and pasted the ones I had already drawn in in the new positions. With the hooves it might have been better to do that, and I might still do it later. For the head I did do that - all of the heads are the same, I just changed the position and angle. I might later want to add some movement there, of the nostril breathing, or an eyeblink, or if it was some other kind of monster I might want the mouth chomping or opening to breathe fire or something. But the legs I redrew each time because there is a lot of stretching and bending going on in a running leg, and I wouldn't have captured that if I'd just reused the same leg parts. After all this my horse looked like sleipnir, with one body but lots of legs. I tweaked some of the legs to get them to match the others better in position and shape.

5th I drew a box around the horse, leaving room for the tail and mane I would add later. This is the total size of the sprite, and a useful landmark for aligning sprite frames, although the box gets trimmed off in the final version.

6th I copied and pasted the box and multi-legged horse to make 4 frames, half the trot cycle. Many times it's only necessary to make half the animation cycle because the second half is the same except for which side of the body which leg is on. In each of the 4 frames I deleted the unnecessary legs and other body parts. I again did some tweaking because I could see the legs better now when they weren't all on top of each other, and some of the hips didn't really line up with the butt, and some of the necks didn't quite meet the back properly, etc.

7th This step is for testing purposes only. I exported the 4 frames as pngs, and used gimp's open as layers function to get the frames as layers in one gimp document. Then I used the animation preview function of gimp to play my half-animation cycle, both at full speed and in slow motion. I stared at it and tried to identify what was making it look awkward (they ALWAYS look awkward at first). I decided I had the head motion off-synch from the leg motion, so I shifted all the heads and necks back a frame (and the last one to the first frame. I also decided the hind foot wasn't going high enough at the part where it swings forward before making the downward step, so I edited the lower leg in that frame. Then I repeated the exporting and testing. This editing process continues as long as I can see something wrong with the animation. And it's also handy to be able to export the animation as a gif so I can post it on the internet (or to team members if I was in a team) asking for critique.

8th Once I get the animation smooth and pretty, the next step will be to get rid of the coloring-book outlines and instead add highlights and shadows to the individual body parts. Any part that's copied from one frame to another I'll only have to do once. Those that are redrawn, I'll copy the highlights and shadows but then I'll have to rotate and stretch them until they fit.

Share this post


Link to post
Share on other sites
tonyg    284
How about looking at an Animation program with bones?
e.g. Anime Studio.
The workflow would be
a) Create your sprite in your favourite art package
b) Import the image and use Anime Studio vector drawing tools to 'trace'
(the tools have been considered 'tricky' by some but, once learnt, it can be very quick
c) Create bones for your new vector graphic
d) Animate by changing the bones
e) Save the animation with the option 'Frame by frame'

It's been done before :
Can A.S. aid w/ char. design?
The Pro versions are quite pricey but, I think, you can get away with the Debut version. Latest version is 7 with debut at £30 but you can find older version available for £15 ($20) or so.

[Edited by - tonyg on December 13, 2010 4:37:25 PM]

Share this post


Link to post
Share on other sites
FlameTheLoner    108
Quote:
Original post by tonyg
How about looking at an Animation program with bones?
e.g. Anime Studio.
The workflow would be
a) Create your sprite in your favourite are package
b) Import the image and use Anime Studio vector drawing tools to 'trace'
(the tools have been considered 'tricky' by some but, once learnt, it can be very quick
c) Create bones for your new vector graphic
d) Animate by changing the bones
e) Save the animation with the option 'Frame by frame'

It's been done before :
Can A.S. aid w/ char. design?
The Pro versions are quite pricey but, I think, you can get away with the Debut version. Latest version is 7 with debut at £30 but you can find older version available for £15 ($20) or so.


Actually that sounds neat.
I was actually messing with Flash, and animating there is quite easy. But I couldn't export the animation frame by frame.

If Anime Studio has bones too, it may be worth looking into! But is it too hard to animate there?

Share this post


Link to post
Share on other sites
tonyg    284
It probably need some dedication to get an animated feature/cartoon from it (depending on the style of course) but, for game sprites, it's just a case of have the bone in position a, move it to position B and AS does the in-betweens.
I found it easy but...
Might be worth trying the demo.

Share this post


Link to post
Share on other sites
FlameTheLoner    108
I have done some animation in Flash. And they have Bones there too. I find it much easier to animate in Flash using bones, but Flash can't export each frame as a .png or .bmp.

So if Anime Studio does the same king of animating as Flash, and exports as .png, then it sure as hell is much better than drawing/redrawing Sprites!

I should check out the demo.

Share this post


Link to post
Share on other sites
isometrixk    176
I have over 15 years experience in graphic art and website design graphics. I've created sprite sheets for other game developers.

I suggest getting a hold of Paint Shop Pro X or Photoshop or some graphic editor software. Each program has vector tools to draw smooth lines.

Here is what I personally do, and the result is great everytime:

1. Sketch the character frame you would like to use in the game on paper.
2. Scan the sketched image, and open it in your preferred editor.
2.5 - Resize the sketched image to fit the desired dimensions of your sprite.
3. Using the sketched image as a Background layer, create layers on top for each body part:
>Layer 2: Character head
>Layer 1: Character arm
>Layer 0: Background(sketch)

4. Use the vector tool to draw smooth lines around the edges of each body part.
5. After outlining your character with all vector lines, create new layers behind each body part to Raster color them in:

>Layer 4: Character Head (vector layer)
>Layer 3: Character Head (raster layer) << colors!
>Layer 2: Character Arm (vector layer)
>Layer 1: Character Arm (raster layer) << colors!
>Layer 0: Background(sketch)

Once the sprite looks to your standards, merge each paired layer together by body part. NOTE: -OR- Don't. Merging layers together removes the calculations of the vector lines changing them to raster images but still smooth lines. Rotating raster images later can be sloppy. Rotating Vector images always retains its same style.

The pros using this method:
1. Your character will look exactly how you'd like with smooth edges.

2. The more 'Body Parts' layers you create, the more animations you can create with just one image. Ex: You have a character standing still. You save the sprite as character1.jpg. Then you move the arm, forearm, and hand slightly to start a hand-wave motion. Save the new image as character2.jpg. Repeat and sure enough you just created a full animation of your character.

3. And more...

Cheers!

Share this post


Link to post
Share on other sites
Well...
First of all *respect* for the will to take an artist's job while you are being a programmer.

Secondly, if you need hi quality animated sprites for a platformer (even if it was vector art) I suggest you look up an artist (here, or at gfxartist.com or deviantart.com, or indigames.com etc.).

Creating art can be learnt, but I doubt that you'd find a tutorial of "how to create a jumping character sprite sheet). You should learn ART first, and then should only learn the tools (art-package for example) to create them. You can learn any technique to create a lens-flare effected logo from many PS tutorials on the net, but that won't make you an artist. That needs many other knowledges, and a different point of view.

Without an artist you might create something like sunandshadow's trotting horse. Which, imo, would need *lots* of work to be useable (the movement are too wide, and unnatural for example, but we are not here to criticize an old member's sketch :D).

So I think you need an artist!

But it was only my humble opinion... :D

Share this post


Link to post
Share on other sites
Hsblaze    108
Quote:
Original post by isometrixk
I have over 15 years experience in graphic art and website design graphics. I've created sprite sheets for other game developers.

I suggest getting a hold of Paint Shop Pro X or Photoshop or some graphic editor software. Each program has vector tools to draw smooth lines.

Here is what I personally do, and the result is great everytime:

1. Sketch the character frame you would like to use in the game on paper.
2. Scan the sketched image, and open it in your preferred editor.
2.5 - Resize the sketched image to fit the desired dimensions of your sprite.
3. Using the sketched image as a Background layer, create layers on top for each body part:
>Layer 2: Character head
>Layer 1: Character arm
>Layer 0: Background(sketch)

4. Use the vector tool to draw smooth lines around the edges of each body part.
5. After outlining your character with all vector lines, create new layers behind each body part to Raster color them in:

>Layer 4: Character Head (vector layer)
>Layer 3: Character Head (raster layer) << colors!
>Layer 2: Character Arm (vector layer)
>Layer 1: Character Arm (raster layer) << colors!
>Layer 0: Background(sketch)

Once the sprite looks to your standards, merge each paired layer together by body part. NOTE: -OR- Don't. Merging layers together removes the calculations of the vector lines changing them to raster images but still smooth lines. Rotating raster images later can be sloppy. Rotating Vector images always retains its same style.

The pros using this method:
1. Your character will look exactly how you'd like with smooth edges.

2. The more 'Body Parts' layers you create, the more animations you can create with just one image. Ex: You have a character standing still. You save the sprite as character1.jpg. Then you move the arm, forearm, and hand slightly to start a hand-wave motion. Save the new image as character2.jpg. Repeat and sure enough you just created a full animation of your character.

3. And more...

Cheers!

thank for the advice!!!!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this