Sprite Making Tutorials?

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.

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.

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?

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.

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?

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.

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).

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.

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

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).

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?

The centre of the horse is looking stiff.



^ Here's a good horse animation cycle tut.

Quote:

Original post by abstractionline The centre of the horse is looking stiff. ^ 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]

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.

Wow, that is a lot of work.
Still it is the end result that counts. :)

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]

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?

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.

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.