How can I turn this drawing into a usable character?

arkonllf · March 2012

so i drew this character-

and i want to turn it into a character for my game but i have no clue how i can make that work.
meanwhile i only managed making this-

SlickZero · March 2012

By "make that work" do you mean animate him, or get the character into GameSalad?

arkonllf · March 2012

I mean making him look good like mario graphic character and the animate him.

SlickZero · March 2012

You can make it look good like a mario character if you have the talent to do so in a graphic editing program like Illustrator, or Photoshop, or Pixen, or Inkscape. Software won't matter, though. It will depend on your experience as an artist. I would scan it, and bring it in to Photoshop or Illustrator, or whatever software you use, and trace it to get a digital version of the character.

And you will have to either break up the character in different parts so you can make instances for whatever pose/motion you are trying to animate, or you could get another software program like Toon Boom Studio, or Anime Studio Pro, and use the bone tool to make different poses. You will have to do it old school animation style, a series of individual images in sequence to animate the character, and bring those images into GameSalad, and use the animate behavior to play them in sequence, and make the animation happen.

Clouds · March 2012

I mean making him look good like mario graphic character and the animate him.

That will take practice and learning how to animate.

SpriteAttack · March 2012

My suggestion would be to try Inkscape... Take your scan and redraw the lines... That way you get separate shapes that you can easily move around, rotate and turn into animations.

The tutorial on character animation might help:

titos · March 2012

Cool

arkonllf · March 2012

@slickzero
Thank you a lot man what you said will help me a lot!
@spriteattack
Thank you mate! I will try scaning it into parts like you and slickzero told me,
And i will use your animation tutorial(for some reason i didnt see that in your post).
That character you made looks amazing!! It was just what i was wanting to make for my game.
Would you mind if i tried kind of copying that?, Because you propably dont want me to use the one you Made..
How long did it take you to make that?
P.s sorry for spelling mistakes i am not a native speaker.

SpriteAttack · March 2012

@arkonllf - you can have my svg file... it just took me 15min...

calvin9403 · March 2012

@spriteattack I think it would take me 15 hours to draw something like that

SpriteAttack · March 2012

@calvin - not once you have done this for 25+ years

The_Gamesalad_Guru · March 2012

@spriteattack you got some serious talent man!

arkonllf · March 2012

Spriteattack you are much to kind(=
i cant beilive it only took you 15min because it looks amazing!
I sent you a private message and i would be more than happy if you will send me the file!
P.s if you got some free time you should maybe make a toturial on turning a drawen character into something like this,
I am sure it would help the forum a lot.
And i have to say you have an amazing talent.

Clouds · March 2012

@spriteattack you got some serious talent man!

A few of us are planning to have him whacked, we will then steal his brain and chop it up until we find the bit that knows how to use Inkscape, which we will then divide up an eat, do you want in on this ?

old_kipper · March 2012

I'd add that most characters take time to 'bed in' with a consistent style and 'find themselves'. Draw, and draw, and draw, until you can draw him almost without thinking, and you can start to put him in any pose you like. This will allow you to do almost anything you like with him. A day of solid drawing now will open up a world of possibilities. And if you hold the idea that he needs to be animated in your mind as you develop and draw him, it will ease the animation when you get there. Most animated characters have an underlying structure of shapes that are connected and therefore allow quick development of pose/animation. Once you have structure, getting convincing movement first and then overlaying the drawing of the full character is less difficult. There is one book I would recommend that if you really want to add life and understand animation , and that is-

My failing is that I am more of an illustrator than an animator. This is down to the fact that most illustrators think in situational framing and just animate to get the character for pose A to B (its a different way of thinking for sure and possibly lazy). Truly great animators think in terms of performance and are closer choreographers and mimics. When you see them work, they take on the physicality of the character and think movement. And thank heavens... they very often put in pauses for reaction (lots of them) which reduces the amount of work... A few good facial emotions can really add to things and are cheap in terms of work. A lot of animation is shot on '2s' (reducing the amount of work by half) with 2 shots of each frame of drawing when shooting at 24 fps giving a virtual frame rate of 12 fps. In anime they quite often shot on 4s and 6s... But a low frame rate with good animation is far better and convincing than bad animation at a higher frame rate.

I suggest that you have a good search for walk cycles and running cycles, and try to emulate them. Perhaps download 'Pencil' for mac (free) or DoInk for Ipad (cheap) and take some lines for a walk. Just playing with animated lines is a great way to start to understand animation, and the movement of simple and limited lines can work, and be something to build on.

good luck. Kipper

p.s my workflow for drawn animation into GS is this-

1). layout the screen design and do rough drawings of characters.
2). scan the drawings of the characters and chop them up into pngs that I import to GS.
3) size the actor character in GS to fit the environment (with an eye on the old power of 2 rules so to keep memory sizes down)
4). export a scene image from the preview player in the editor
5). import it to photoshop and blow up the character area to 400%
6) export the character at 400% and import it to Pencil (you could use flash of any other animation program)
7) use it as a reference background image to animate the final line drawings
8) export the line drawings as a png seq.
9) colour them in photoshop
10) reduce and frame the final drawings in after effects and export as a png sequence to import to GS.

This may seem long winded but I find it quite quick now that I am used to it. The colouring can be down within the animation program but I choose to do it in photoshop. If you use a vector art program for the drawings you may use quite a different process but I hope the above is useful.

arkonllf · March 2012

Old_kipper thank you so much for this comment!
Must be the longest comment i have ever seen

The stuff you wrote here are really helpful!
So i tried making a monster using one of my drawings, this is what i made using all of your guys tips-

(quality is low because of the uploading...)
I will soon try animaiting it with doink like old_kipper offerd and ill post the result.

mynameisace · March 2012

That's infinitely better than the first one... Looks cool!

Ace

LeonardDeveloper · March 2012

@arkonlif
That's excellent! You're coming along way already! Animations is quite hard untill you get the gist of it, and Chris (sprite attack) is a god of art & animation

Although if you want to start off for yourself I would really recommend @oldkipper 's recommendation of the book, I Personally have the book myself and its great! Also check back at SA's tutorials every once in a while because they are absolutely excellent
Cheers,
Jack

arkonllf · March 2012

Thank you guys!
Leonard i will look into buying that book, cause i really want to make this game look good(:

old_kipper · March 2012

@arkonllf I do hope you find my posting useful. One additional suggestion with DoInk!. It exports animation as movies. This can be converted to pngs files if you have QT pro or After Effects. The frame rate DoInk! makes movies at, is sometimes a little odd, but simple export to png will give you all the frames. And as I suggested before 'play with taking a line for a walk'. Once you get a stickman walking you will have learnt a lot. Then play with jumps, runs, emotions, hands doing stuff, anything... its all great practice and will help you a lot. I've been doing animation on and off for 25 years and am still not great but on occasion really do amuse myself. It can be enormous fun and can add so much to a project.

tatiang · March 2012

I am finding the tutorials at to be SOOO helpful. I actually feel like I can create some game art whereas before I saw those I was clueless as to how to begin.

I have a related (and hopefully not too off-topic) question about exporting png files. When I draw a character in illustrator and then add something to the side of the character (for example, I made a triangle-shaped main character and then added wheels underneath it) and import both png files to GameSalad, if I replace one image with the other, the actor resizes my images so that they fit the actor's size. Because of this, the slightly larger image (e.g. with wheels) is shrunk down and no longer aligns with the original image (e.g. the two triangles don't line up) so that it looks jumpy as if the actor is shrinking and growing whenever the image switch is made.

Sorry for the long explanation, but is there a way to avoid this problem? I know I could make the wheels a separate actor, which I've done, but this is more of a general question because I keep running into the problem with other images I've made where I have a base image and then I change something that I want to have appear at a different time in my game as a replacement for the base image.

simo103 · March 2012

@tatiang .. you will have to make sure the images are exactly the same size otherwise you will get an unnatural flicker when the image changes even if you are off just a little. You mention the one with the wheels is slightly larger and that is the problem. I don't know your workflow .. but I use layers for everything so in the original triangle image, create another layer and draw your wheels on that layer and position as needed. Then when ready to save the individual images, hide the wheel layer .. save the triangle.png. Then show the wheel layer and save the triangle_wheel.png. That way they are both the same size and the triangle hasn't moved in both.

tatiang · March 2012

@simo103 I do use layers and hide+save to get exactly what I need exported as pngs. I think the issue I'm having is in trying to save the triangle by itself and then the triangle with the wheels. There are some times that I feel I need to swap the actor image with a different image that includes additional details rather than just spawning/constraining another actor (e.g. the wheels) but maybe that's not how I should be planning it.

How can I turn this drawing into a usable character?

Comments