My first Animation!

wolfpawz

Hello! totally new to spine and with a little help figuring out the editor, i managed my first animation! Happy, it's very basic. Any tips to make it better would be great. Took a few tries to get it looking sort of like a rubber ball haha.

Nate

Cool! 🙂

Check out these videos about animation theory:
https://www.youtube.com/playlist?list=PLwGl7Ikd_6GQ9EpVw2qdvvqgbhjSw7dIj

And these for Spine tutorials and tips:
https://www.youtube.com/playlist?list=PLwGl7Ikd_6GRRGw8qHdemtMm7BvjUJts5

wolfpawz

Nate wrote
Cool! 🙂

Thanks Nate :-)

I watched a couple of them (the 12 principles of animations is what made me fall in love with animation). But there are quite a few of the videos I haven't seen yet. I am going to watch them and try again!

Appreciate the help man!

Nate

Cool, best of luck! Feel free to post examples of your progress, as you have done above.

It can be super helpful to do the exercises in the Animating with Spine videos. The exercises can take quite a bit of effort, but you'll learn a lot more than watching the video alone.

For a bouncing ball, you can squash and stretch based on the speed of the ball and when it impacts. It's moving fastest just before impact (it's been falling for a while) and just after impact (most of the speed is preserved). For example:

Loading Image

Besides squash and stretch, note how impact is shown there. You want the ball at the contact point, but not squashed for impact, then you want to hold the impact pose briefly before the ball begins moving away. This is how you get the impact to register with the viewer.

wolfpawz

Nate wrote

Hi Nate, Cant thank you enough for the help! What you have posted there is of great benefit. I have watched most of the videos. I have a query. Would it be best to use bones for objects like balls and cubes? or would it be just as good to use scale for squash and stretch and the graph editor - without bones? The one I did above has no bones, the offset video uses 4 bones in the ball. I agree, I'm going to really spend time practising this until I'm very comfortable then move on to a cube, animal then humanoid!

Nate

It's normal to use one or more bones for each thing you need to translate, scale, rotate, or shear. You always have at least a root bone. How are you moving the ball if not with a bone? If you are using translation, scale, rotation, or shear then you are using a bone to do so. You could make the ball a mesh and animate it using deform keys, but it is not recommended. Stick to region attachments until you master them before tackling meshes, IMHO. That said, you can do neat perspective tricks using meshes, for example to make a faux 3D cube. See the tips page for that (look for the cyan and magenta cube):
Spine Tips

The video that uses 4 bones for a ball is some quite fancy rigging. You might want that setup for lots of control if your main character is ball-like. How complex you make your setup depends on what you will be doing with it. Generally keeping it simple until you need more or easier control is best.

wolfpawz

wolfpawz wrote
Nate wrote

Hi Nate, O yeah. I forgot the root was a bone! I have made a second one which I think definitely looks better!

Misaki

The animation looks much better! 😃
Let me share a concern, the first time the ball starts to stretch just before it hits the ground seems to be quite sudden. The following is a slowdown of that part of the animation:

When the stretch begins, I feel a sudden acceleration as if the ball is moving instantaneously. Of course, there is the gravity acceleration, but I think it would be more natural if the stretch started a little earlier.

Nate

You can also probably use a stepped curve between the stretched ball and the squashed ball. It shouldn't take long for the ball to change from stretched to squashed from impact. The viewer's eye fills in the fast movement. Maybe Sinisa can come along and give better advice! 😃

wolfpawz

Hi Nate and Misaki.

Thanks again for all your help. Its honestly been so valuable. I was a little overwhelmed at first, but slowly picking things up. Im using Ghosting, playback, and the graph editor a lot more now, I'm starting to navigate around better and using hotkeys. Loads to learn but loving this so much! Ive tweaked the animation.

Nate

I think you can improve the impact a lot, like I mentioned in my last post above. As it is currently when it hits the ground it stops moving, squashes, unsquashes, then moves up again. You don't want a transition between these two frames:

Loading Image

Try using a stepped curve there, and/or move the keys closer together. Same for when it unsquashes.

Don't forget to do the Animating with Spine video exercises! 🙂

wolfpawz

Its really tricky to get right. I feel like the squash doesn't last very long but the transition is quicker.

Nate

Probably your squash is a bit too much for the relatively slow speed of the ball. Also your squash doesn't align with the floor. Note where the floor is in the image above.

Sinisa

Hey, wolfpawz great effort!
Just a few pointers when starting any animation. A good thing before jumping into Spine and even trying to animate anything is to plan your animation. Think about object properties, how big is the ball, and what material is it made of. Is it a big beach ball full of air or is it a small tennis ball? Check this video for more explanation: https://www.youtube.com/watch?v=TEXq8TCfQ9I&list=PLwGl7Ikd_6GQ9EpVw2qdvvqgbhjSw7dIj&index=1
Then after deciding on the properties of the object, you will animate, you have to plan your timing and spacing. This is the most important animation principle you will learn: https://www.youtube.com/watch?v=oStJwDyybns&list=PLwGl7Ikd_6GQ9EpVw2qdvvqgbhjSw7dIj&index=3
Check around the third minute of the video. There is a similar ball animation demo I am doing. What happens with the spacing, or speed of the ball is that it slows down in the air and it speeds up as it will hit the ground. (pause the video and try to copy what I'm doing, it can help a lot)
Be careful with squash and stretch. It's often a "stylistic" choice that mimics the motion blur. In your case, it's too strong. You would need a considerate force to squash and stretch your ball like in your animation, so for your example, just a little will look way better.
More about squash and stretch here: https://www.youtube.com/watch?v=-X_zE3Anc3g&list=PLwGl7Ikd_6GQ9EpVw2qdvvqgbhjSw7dIj&index=5
And lastly, animation is a difficult skill to acquire. It takes a lot of practice, but you will get better with time. So keep on animating! I'm here for any questions.

wolfpawz

Hi Guys,

Thanks for the feedback. Cheers for the detailed feedback Sinisa. I have watched most of the videos and also a few other really good ones as well + a ted talk. I still have more videos to go though!. I was trying to simulate a rubber ball. Its actually really difficult (at my level anyway haha).

Timing and spacing is very tricky to get to grips with. Does it need to be mathematical? or is it more of an intuition thing based on purely how it looks - or a combination of them both? I am changing the curves to ease out in the graph editor for the translation but not sure if I should do it for the scale as well.

I really appreciate all the help, i don't want to burden anyone by asking too many questions, but i do feel like i learn better that way. I really want to master the ball and then try and do it like the way you have done it or close to it at least!

This is where i am at right now, i think its better but I'm going to keep starting over and I'm sure things will start to click.

Sinisa

No problem! I love talking about animation 🙂
You definitely got better, but still a bit too much stretch IMO.
About timing and spacing. You don't really need to get too mathematical, though math definitely helps. But other skills help as well, like playing music, dancing, or even martial arts. (Everything that helps with a general feeling of tempo will be useful, in the end, you are expressing your own experiences into your work. If you don't know how something moves, you can always look up the video of it, or shoot a reference yourself and analyze it frame by frame)
To simplify timing and spacing, timing is how many frames do you need for some action to happen e.g. ball in the air is on frame 0, on the ground on frame 10, and back up in the air on frame 20. Thats it, that's timing, how much time something needs to happen, in our language frames.
Spacing is the term old animators came up with and it's literally referring to the spatial distance between their drawings. So if you have two keys on frames 0 and 10 and a ball moving in translate Y, if you put the curve to linear it would move in equal spacing. If you put the curve to bezier it would have more dense spacing at the beginning, less in the middle of the action, and again more dense at the end, causing the ball to start moving slowly, speed up, and then slow down.
It took me a lot of time for all that to click, I animated for 6 years only on paper, so I know the struggle. Spine is awesome because you can animate fast and see the results immediately. You did great progress in one day! Keep it up!

SilverStraw

I would replay and watch my animation that I am working with over and over again. Once I get bored of the repetition, I start to notice things I could change to the animation.

Sinisa

A good way to check your animation is to play it in reverse. It's similar to an old drawing technique where you would watch your drawing in the mirror, or in the modern digital era flip your image horizontally. It's easy to get numb watching the same thing playing over and over again. So if you can't afford to take a day off, just flip or play your animation in reverse. Anything that will give you a fresh perspective on your work will help.