Hello everyone, my name is Erika
and in this tutorial we will animate a small isometric scene with Spine.
You can use both Spine Essential and Spine Pro
as the features I'm going to use are available in both versions.
We will see how to make an object turn in isometric view,
how to add a little movement to plants and flowers
how to create a smoke from the chimney vfx
Please look in the description of the video for links to the assets and to useful resources.
Let's start.
As you can see I have already imported the assets in Spine through the Photoshop script.
If you don't know how to do it a link in the description will point to the right sources.
If we look at the hierarchy in the tree here on the right,
all the images are listed as attachments inside their slots,
and they are all children of the only bone we have for now, the root bone.
I have disabled Images selection to avoid accidentally clicking on the images
and I'm going to select the create tool,
you can also do this by pressing 'N' ,
and start creating the bones.
Just click and drag to create new bones.
Holding 'shift' mantains the same parent instead of nesting the bones.
As you can see I'm following the branches to create the bones.
And I'm going to do the same with the bushes,
treating the ground point as the pivot.
Now I'm going to rename them,
so first I select them all,
then I go to find and replace
and the scope is going to be "tree selection"
I'm going to find "bone"
and replace it with "leaves"
I will manually rename the two bushes
since they are just two
then I select all the leaves again
and change the color of their bones
Let's pick this, and a darker colour for the bushes
Now I will re-enable images selection
And then filter the tree to slots so that only slots are visible
Then by pressing "P" I can reparent the images to the correct bones
So I keep selecting an image, pressing "P",
and then clicking on the correct bone.
And now we can start animating them.
I deselect "images selection" again,
and I select the pose tool,
and by holding "ctrl" I can select more bones at once.
Let's switch to the rotate tool,
if I click on the rotate tool,
and then start dragging to the left,
I can rotate them all at once.
Then I will move to frame 150
and create another key by clicking on the little key next to "Rotate".
We need another key here in the middle.
Then we can position the cursor on a frame in between
and rotate everything in the opposite direction.
If we click on the play button
we can already see our first animation
We can deselect by pressing Space
then we select just some of the bones
and we shift their frames to make the animation more natural
Like this
Now let's animate the bushes
we're going to do it very simply
using the shear tool to make them look
like their base is stick to the ground
and the up is shaken by the wind
As you can see I've placed the keyframes at the start and the end of the animation
and I'm moving the bushes just in between these keyframes
this animation is extremely simple
and with just this, we can move to the next thing
let's make the rooster now
we're going to use the shear tool again,
but this time we're going to turn the other handle
first we'll create a bone that will be the pivot around which the rooster will turn
giving an isometrical illusion
I've changed the name and now the color of this bone too
and then of course we need to put the rooster slot under the right bone
or nothing will move
So, in animate mode, let's create the usual keyframes
at the start and the end of the animation with the shear tool selected
then we can click and drag the green handle
and watch our cute rooster turn correctly as the cardinal points beneath it
I'm just going to place one more keyframe here
and we've finished this too!
we've made the effect of a rooster shaken by the wind
on to the next one!
So, we can start doing the windmill blades now
As you can see, I've prepared a frontal version of them
let's zoom in a little
First we create a bone in the middle
and I want to be sure I placed it enough in the middle
so I reactivated images selection
and I selected the blades to see their pivot
since it's close enough, I can rename the bone and change its color
Let's have blue on this one
ok, so now I'm going to place all the blade images under the new bone
Oh, I added the background as well, let's put it back
great, now we can switch back to Animate mode
let's select the blades bone
and key its rotation at the beginning and at the end
now comes a bit of math.
we know a spin takes 360°
and in order to tell Spine in which direction the blades should spin
we have to place two keyframes equally spaced
therefore one at 1/3 with a value of 120°
and the other one will be at 2/3 with a rotation of 240°
and our windmill blades are rotating!
and if we want to make them rotate clockwise
we just need to invert these two keyframes
and the animation is reversed.
but I'm sure you've noticed something is wrong
these blades aren't much in perspective, are they?
Now pay attention, because we're going to make a nice trick
First we'll duplicate the bone AND its animations
then we'll do it again, but without the animations
we can get rid of the attachments inside the copies
and we'll call this bone "windmill pivot"
and I want to make the other two bones its children
and rename them to "windmill blades front"
and "windmill blades back"
I'll delete these copies of the slots
and put the right ones instead
you may wonder why I did this.
We'll get back to this in a minute.
First, let's fix the pivot perspective.
As you may know, isometric images can be obtained by scaling an object by 0.86
and then applying a shear of 30°
but this windmill is not a square, so 20° will do just fine
back to animate mode
and our windmill is now rotating right!
let's get back to setup mode
go to the top right of your window and select preview from your view list.
we can activate the animation, which is called "animation" in our case.
and I want to change the color of the bones to help you understand the next trick
so, we just applied scale and shear on the blue parent bone
and left both the rotation animations on the children
that are now purple
but these blades are still a bit flat, right?
we can achieve a little more tridimensionality
with a simple but very effective trick
let's select the translate tool
and with the front blades selected
we start translating them a little down and to the left
and we can already see how the effect turns out in the preview window
ok, let's close it
and jump to the next thing
I'll show you how to do another easy trick
we'll make the smoke float out of the chimney
and of course, as you can guess, we'll start in setup mode
by creating a new bone, right in the middle of this cloud
then we'll parent the "heat" slot to the new bone
rename the bone to "smoke", and change its color
I'm not sure the bone is centered enough
so I should activate images compensation
to be able to move the bone without affecting the child image
remember to dectivate it after the adjustments, if you use it.
otherwise you might wonder why your animations got very weird later on.
but let's make this animation now!
we need to move the smoke to where it's supposed to come out on frame 1
that is to say, the chimney
then we want the smoke to float out
and disappear at roughly this height on the last frame
next we will make the smoke tiny at first
and we will scale it up at the end of the animation
then we can make the smoke rotate
just as we did for the windmill blades
so I'll type in 240 at 1/3 of the animation
and 120 at 2/3 because I want it to rotate counter-clockwise
I also want the smoke to fade in and out
so in this case we need to select the slot and not the bone
and I'm keying the visible state of the smoke first
so that then I just have to click on the white square once, to lower the alpha to zero.
I just needed to copy-paste the pink keyframe on the last frame
and in this way the fact that the smoke goes back to the beginning is hidden
which is nice, but the animation feels a little empty
and we'll solve this quickly by duplicating the smoke bone
with all of its animations
then I want to use the offset tool
which is not working because the first and last frame must have the same keyframes
so we should copy the first frame and paste it after the last frame
If I select all the keyframes now and drag them to the right
I should see them appear on the left
like this
the smoke effect seems already more consistent
although the spacing can be fixed
I can also offset while the animation is playing
and I think having a third smoke bone
will make the trail more continuous
so I'll copy the bone with all of its keyframes
and offset it again
now they look fine
let's deactivate the bones visibility
and this is how you can make a very quick smoke effect
let's move on to the final thing we'll see in this tutorial
we'll animate this little flower first
then we'll make a ton of these flowers
and we'll also make it look as if they were all different.
while, in fact, they will just be copies of the structure I'm creating now
and they will all have the same animation.
as you can see, I've created two bones for the leaves
one for the stem and another one for the flower
plus one for the shadow
I'll filter the tree to see just the attachments again
and I'll parent the remaining images to the correct bones
since everything is in place
we can switch to Animate mode
and create an animation for the flower that we will use as base for the other flowers
I'll do something very quick by moving the leaves down
and I'll tilt the stem and the flower to the left
now I'm selecting all the bones that belong to the flower
and I keyed their rotation both at the start and at the end of the animation
just as we did for the other animations so far.
this flower is small and close to the windmill blades
I'll use the position of the blades as reference
to do 4 cycles of motion
this way it will look as the windmill blades have made the flower gently tilt because of the wind
we just need to place the tilt in the opposite direction in between the keyframes
and the leaves will go up in this second position
just like this.
now I'll select all the bones again
to copy-paste the new keyframes on the in-betweens.
this way the smaller cycle is done.
but we could improve it a little
by changing the easing, that for now is the standard linear ease.
First I select all the flower keyframes
then in the Graph view, I press on the curve preset.
you can adjust the curve,
but for the sake of this tutorial we'll just apply the curves to the other leaves
and avoid tweaking them.
except for this keyframe where there would be a weird movement if I don't change it back to linear.
now that we have a reasonably good animation
we can start massively clone the flower and its keyframes
I'll make about 15 clones of this.
you just need to copy the "flower-base" bone
and, as you can see, all of its children bones and images will be cloned as well
I collapsed all the children bones
because I just need to translate the parent bone
and the whole flower will follow.
I'll make two lines of flowers
if I follow the order in which I cloned them
the last flowers will automatically be in front of the previous ones.
these flowers are all white and identical
but we can differentiate them reusing the same assets
an easy way to do so is scaling some parts of the flowers with the "scale" tool
and change their proportions
to add some variety
some flowers will be taller than others
if we scale the stem
we can even change the leaves of a group of them
and make those leaves larger or thinner
but let's focus on the flower itself after this
I don't need to filter the tree on bones anymore
instead, I want to select the flower slot
as you can see I'm switching the attachment inside
because I had previously put 3 different images in the flower slot
which I can easily change by selecting one of the different attachments
because they all got cloned when I first copied the parent flower bone
the next easy thing I can do is change the color
this is why I left the original flower white
when I change the slot color, the new one gets multiplied on top of my original attachment.
and filtering the tree on slots helps to see which ones I already recolored
because they get alphabetically sorted, so I have all the flower slots on top
and also because I can see the color I set on the slot icon
so I can choose if I want to click in the viewport
or in the tree
there's not enough violet in here after all
I'm changing a couple flowers
this too seems too bright
I also want this flower to be open instead of the other one
and we're done!
one very last thing we can do
to add just a little more variety
is to select some of the flowers
possibly not close to each other
and you may have noticed Spine comes in help
and pauses while I select the bones with "Ctrl"
so I can then select all ot their keyframes
by selecting the first row in the dopesheet
and use the offset tool again
to give the illusion that the movement of the flowers is a little more natural
and this is the end of this tutorial
thanks for staying with me until now
and see you in next video!
No comments:
Post a Comment