I should state that this is just one way of doing animations. It's
very similar to old school cut out animations. It's not as fluid as hand
drawn animations or 3D work but it's a straight forward and somewhat
easy to follow approach. It works quite well with small size sprites.
First steps (quite literally)
Note:
This setup will seem very familiar to those of you using Adobe Flash or similar timeline based tools. The groups of object created in inkscape are similar to symbols either as 'movieclips' or 'graphics' used in flash. All you have to do though is animate the bits inbetween which Flash handles for you with 'tweening'.
I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.
Creating the [soon to be animated] caveman
It's pretty much the same process used in the tutorial's 3rd part with some added complexity in the facial features.
Note:
I mirrored the limbs in the image above just
to show the 'exploded' body setup. There is no need for that when you
use the elements in a side on view [both feet should point in the same
direction].
Note:
Working with CorelDraw a lot I come to appreciate the multiple page setup of CorelDraw documents. Instead of layering animations you just place them on separate pages and flick through them to check your progress. The program even alows you export the pages in one layered bitmap file keeping layers and pages separated.
Working with CorelDraw a lot I come to appreciate the multiple page setup of CorelDraw documents. Instead of layering animations you just place them on separate pages and flick through them to check your progress. The program even alows you export the pages in one layered bitmap file keeping layers and pages separated.
Animating:
If you start out animating it's helpful to go with some more basic
animations first - there is nothing wrong with the
'mad-kung-fu-360-tiger-meets-dragon-in-mid-air-move' but it might be a
little frustrating to start with.
Think simple and create something you can use in your game. This way you keep motivated and focused.
Note:
It's always helpful to check out references,
poses, animations and other tutorials. A lot of the reference will show
you a simplyfied setup that makes it a little easier than working off
memory and your own experiences.
First steps (quite literally)
Note:
This setup will seem very familiar to those of you using Adobe Flash or similar timeline based tools. The groups of object created in inkscape are similar to symbols either as 'movieclips' or 'graphics' used in flash. All you have to do though is animate the bits inbetween which Flash handles for you with 'tweening'.
I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.
como baixa mano
ReplyDeleteVocê tem que pagar 3 Dollares, clicando no botão "buy now".
Deleteo preço agora é 5 obamas
Delete:D
DeleteThank you very much.
ReplyDeleteI've been following your work since it appeared on HN, and I'm loving it.
I'm not able to play with inkscape and do some stuff that I never thought I would be able to.
Thank you very much!
Tiago
Thanks so much for your tutorials. I'm finding them very helpful.
ReplyDeleteI'm an indie game developer, and hoping to upgrade my sprite skills.
The next Ludum Dare (48 hour game dev contest) is only 1 month away. I have programming skills covered, but need to learn music and graphics. Going to be a challenge for sure. I'm doing the free ml-class.org (machine learning) in my spare time too.
Good luck with the Ludum Dare - I was part of a team in one not too long ago... it was a fun and somewhat mad experience...
ReplyDeleteThanks a lot for your tutorials. I'm learning a lot from them! Astonishing how creative you are with simple shapes! Kudos to you!
ReplyDeleteI am looking forward to more underwater sprites (shark, octopus, diver) - there is this urge for years now to try a remake of Scuba Dive from Durrell (good old Speccy times) :-)
Cheers and please proceed with your tutorials,
Thomas
I believe you are making a great work giving us programmers good techniques to use when making our graphical assets.
ReplyDeleteInspired in your blog posts I wrote my own how to make buttons using inkscape basic tutorials.
I hope I could keep learning from your stuff and share my improvements.
Thanks for your all your work.
Recently I was doing some research on animation because I found myself unable to create manually this "tweening", as you called it.
ReplyDeleteAnyway I found that free soft called Synfig that is able to do that for me. On their official website there is also plugin for Inkscape that allows to export previously created vector graphics. This tool was designed for Linux, but there is version for Win that I'm using. I can't say anything about Linux version, but this one for Win is... well lets just say it's not the highest standard. UI design is very poor, performance even worse, but it will do the job.
So if you lack some skill this soft will help you for free (that is one of the pros) and the results will be not that bad.
Hi, I really like your tutorials. I just wanna ask you how to make game characters with outline? Thanks in advance!
ReplyDeleteawesome blog! thank you so much! keep up the great work
ReplyDeleteI can't get enough. I always fancied creating some nice clean 2d art but wasn't able to to find the right tools let alone be taught on how to use them to there full potential, and for that - I thank you.
ReplyDeleteYou've brought out the artist out of me again after 22 years.
I'm really looking forward to your next tutorial.
Regards and I owe you one ;-)
I rarely cmt but this truly make me crazy, thanks and more tutorial, please!
ReplyDeleteHi Chris,
ReplyDeleteThank you for your wonderful tutorials. I am self learning for the past 1 yr to become an indie game designer and have been always lacking on the art side. Finding inkscape and your tutorial had guided me a new path and determination to carry on with my decision. Thanks!
I love you! Seriously, you guys saved my life!
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteSir, I really appreciate you going out of your way to make these awesome tutorials. I really appreciate it.
ReplyDeleteHey Chris, do you know where can I find more basic animations tutorials, like idle, jump, crouch, fall that would fit this kind of art?
ReplyDeleteUse the same techniques from the above tutorial, and just look at the animations from any games that you own
DeleteAwesome post!
ReplyDeleteThe whole matter has been presented so well and in such an awesome way.
Good job!
Love your tutorials. One question about this particular tutorial here about the caveman is, related to copying and pasting the image to another layer. When I do that, the pasted object is of a lower resolution and definitely not a vector graphic. Hoping to get some help around this...
ReplyDeleteWow, i can't believe i made a character by myself. I always suck at art but with the help of this uber awesome blog, I managed to create my very own character. Thank you so much. On another note, can you make a tutorial for suits or tuxedos? I really struggled a lot creating suits. Thanks again. : )
ReplyDeletewow me gusta tu trabajo
ReplyDeleteHow did you angle the eyebrows?
ReplyDeleteThey are a deformed rectangle - convert to path and the move the top nodes.
DeleteThanks a lot man !
ReplyDeleteI've learned a lot studing your tutorials. I'm very bad for draw/sketching... but in Inkscape the things come a little easy for me!
Thanks for taking the time to write this !
I recently made this simple Onionskin plugin for Inkscape to make animation a little less work.
ReplyDeletehttps://github.com/lingo/inkscape_onionskin
Thanks... I will check it out.
DeleteWhich software are you using to draw these? , thanks and keep up with the tutorials i like them.
ReplyDeleteI use Inkscape for my tutorials but also work in CorelDraw and Illustrator [depending on the task at hand].
Deletecan i use characters made by this program in RPG maker vx ace ?? are they compatible?
ReplyDeleteI don't know RPG maker vx ace... but I guess it uses either .png or .gif files for the assets. So YES... you can create the art in inkscape and then export to the art format your RPG maker needs.
DeleteYou might want to add a bitmap tool [like gimp or photoshop] into your pipeline to do the scaling in a more comfortable way with better controls and output.
Hey guys, one question not so related to this post, but anyway, does anyone know if any sprite sheets exists for this cute little penguin which I reallllyyy need for this game Im making
ReplyDeletehttp://1.bp.blogspot.com/-Ds_clFuuG4U/UezjiUtxH2I/AAAAAAAABhk/YK8p3lPXcmg/s1600/Blog_banner_2a.jpg
Thanks in advance
The penguin at this stage is just a quick illustration. What would you need him to do? Please shoot me an email. :)
DeleteI want to buy your cavemen and discuss about my game.
ReplyDeletePlease contact me.
mygoldvest@gmail.com
I need a cavemen that can walk, run, jump, ride I want to buy the character and I need you for my long term development. Please contact me.
ReplyDeleteHi, in Inkscape you can export layers as .png images contained in a zip file. After that you have prepared the layers, it's enough to go to:
ReplyDeleteFile►Save as.. and select the format "JessyInk zipped pdf or png output (*.zip)".
After that you can give the dpi size of the images and the game is done!
You obtained a zip file containing a number of .png images. They are the images of each layer you defined.
2D animation creates movement in a two-dimensional artistic space. Work in the field of 2D animation requires both creativity and technological skills.
ReplyDeleteExcellent tutorial! I used this to create and animate a grumpy old man and I think he turned out pretty good. :)
ReplyDeleteI have a question, though. I've been trying to make a cat character and I've found it's a pain to animate their four-legged walk. Can I use this separated limbs technique to animate a cat? ( And is there any chance of you making an animal tutorial? :D )
Sure...you use the same technique for 4 legged animations. Separate the legs into upper and lower limb and maybe even separate paws for the cat to make the walk even 'smoother'.
DeleteI hope to finish the tutorial I started a while back - so yes... there will be an animation tutorial with 4 legged walk coming soon.
Thank you for your reply!
DeleteLooking forward to seeing your next tutorials (and trying your suggestions).
Keep up the great work, teaching us to create amazing things! :)
каком программе работаете на этом уроке скажите пожалоста
ReplyDeleteHi Aidar, you could have made it a little easier and asked in English - hoping google translate did a proper job the answer is 'inkscape' a free vector design tool. Occasionaly I use gimp for bitmap tasks as well.
Delete[it's also mentioned in the title banner of the blog btw.]
Great Work ..
ReplyDeleteHi Chris,
ReplyDeleteGreat tutorial, Thanks a lot :)
Can you please tell how can we create sprite sheet which can be used in Unity5. I am making my first game and have been searching for this for couple of weeks now.
Thanks dude your the best
ReplyDeleteThank you chris for making these awesome tutorial.
ReplyDeleteHi , Admin Thanks You So much
ReplyDeletei have just one question Please what the name of the programe u using to draw this ?
https://s22.postimg.org/5wvp3rs5t/tutorial_sample11.jpg