"Life is too short to make bad art."

Monday, November 14, 2011

Character Animation...

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.

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.

Chris Hildenbrand

701 have me in circles View all

Add to circles

Google+ Followers

Ads

2DGameArt for FREE

BlockBuddies

DeepBlueApps

17Deila Meira Næsta blogg» Búa til blogg Innskráning

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

Subscribe To

Posts

Comments

Chris Hildenbrand

701Follow

View my complete profile

About Me

Share this on Facebook

Tweet this

View stats

(NEW) Appointment gadget >>

Share it

► 2013 (9)

► 2012 (27)

▼ 2011 (22)

► December (5)

▼ November (8)

Making materials: wood

Tank Tutorial

Lightning strikes

Character Animation...

Creating more characters...

Cracking up

Creating a basic face

More fun with circles

► October (9)

Blog Archive

Join this sitew ith Google Friend Connect

Members (296) More »

Already a member? Sign in

Followers

http://2.bp.blogspot.com/-IyW6Db5OC_4/Tsv-PzCwGJI/AAAAAAAAAFc/rOVyZslDrDw/s1600/tutorial_sample11c.jpg

Note:

Work ing 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 work ing off memory

and your own experiences.

First steps (quite literally)

http://4.bp.blogspot.com/-sfAD40LcNtc/Tsv-SvIF2aI/AAAAAAAAAFs/_3E5hgqVG5Y/s1600/tutorial_sample11e.jpg

Posted by Chris Hildenbrand at 8:21 PM

This is a scaled down version of what the walk cycle looks like:

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.

Get the source art (svg file) of this tutorial for

USD 5.00

+17 Recommend this on Google

Replies

Reply

20 comments:

mateus&goku November 14, 2011 at 11:08 PM

como baixa mano

Reply

Anonymous September 5, 2012 at 1:09 PM

Você tem que pagar 3 Dollares, clicando no botão "buy now".

Anonymous June 4, 2013 at 11:34 AM

o preço agora é 5 obamas

Anonymous November 15, 2011 at 2:29 AM

Thank you very much.

I'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

Reply

Anonymous November 15, 2011 at 11:34 AM

Thanks so much for your tutorials. I'm finding them very helpful.

I'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.

Reply

SpriteAttack November 15, 2011 at 6:23 PM

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

Reply

Thomas November 15, 2011 at 6:54 PM

Thanks a lot for your tutorials. I'm learning a lot from them! Astonishing how creative you are with

simple shapes! Kudos to you!

I 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

Reply

ninja November 15, 2011 at 10:12 PM

I believe you are making a great work giving us programmers good techniques to use when

making our graphical assets.

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

Reply

Anonymous November 17, 2011 at 2:02 AM

Recently I was doing some research on animation because I found myself unable to create

manually this "tweening", as you called it.

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

Reply

Michael January 12, 2012 at 11:43 PM

Hi, I really like your tutorials. I just wanna ask you how to make game characters with outline?

Thanks in advance!

Reply

Anonymous February 11, 2012 at 3:43 AM

awesome blog! thank you so much! keep up the great work

Reply

Deano February 20, 2012 at 9:34 AM

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

You'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 ;-)

Reply

Unknown August 4, 2012 at 4:52 PM

I rarely cmt but this truly make me crazy, thanks and more tutorial, please!

Reply

Anonymous December 11, 2012 at 2:44 PM

Hi Chris,

Thank 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!

Reply

Anonymous January 24, 2013 at 1:14 AM

I love you! Seriously, you guys saved my life!

Reply

gosha honey February 21, 2013 at 9:03 PM

Reply

This comment has been removed by a b log administrator.

Anonymous May 18, 2013 at 12:18 PM

Sir, I really appreciate you going out of your way to make these awesome tutorials. I really

appreciate it.

Reply

Oron Ben Zvi August 28, 2013 at 12:54 AM

Hey Chris, do you know where can I find more basic animations tutorials, like idle, jump, crouch,

fall that would fit this kind of art?

Reply

scuba gear package September 20, 2013 at 9:54 PM

Awesome post!

The whole matter has been presented so well and in such an awesome way.

Good job!

Reply

RickMiranda September 22, 2013 at 10:51 AM

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

Reply

Newer Post Older PostHome

Subscribe to: Post Comments (Atom)

Enter your comment...

Comment as: Google Account

Publish

Preview

Follow by Email

Email address... Submit Apache Helicopter

Here's something close to my heart. Ever since doing theart for HeliAttack 2 and 3 back in 2003 and 2005 I fell in lovewith helicopt...

Creating a game character

Let's get started on a simple 2D character. There are a lotof resources and tutorial out there on character creation andan...

Character Animation...

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

Let's get started - with circles

Introduction: Creating your own art work is a necessity formost independent developers. Due to the budget restraintsor in a lot of c...

Building isometric art in vectors - step 1

I have had a few request to do something isometric -usually the requests cover characters and animation ormore complex elements like bui...

Game Assets - BlockBuddies

Instead of working on the next tutorial I spent the weekendworking on some easy to use game assets and amwondering if there is interest ...

Top down view - Soldier

I am jumping wildly from iso to shading and now to a topdown view. I apologize for the lack of order in the tutorialposts at the moment b...

Continue the fun with squares

The second tutorial works the same way - this time usingsquares: The outline version still looks somewhat messybut it shows ...

Apache Helicopter - modifications

In the last post I mentioned that it's fairly easy to modify thebasics and create variations once you have the core shapedown. So ...

Basic shading - the ball

This has to be one of the most requested tutorials has to beon shading. How do you do it? Why do it? Where do I addshadows and what colou...

Popular Posts

(c) 2013 all rights reserved - SpriteAttack.com / Imbri.com. Simple template. Powered by Blogger.