Rhino animations and transitions

To the Rhino sprite I want to add 3 things.

• A sprite to represent the dust as the wheel turns on the ground.
• A Dust explosion when the ball takes off and lands.
• The third is more difficult I want the whole Rhino sprite to be angle differently when it takes off and lands.

Rhino Revving, taking off and landing

Revving Sprite

This blog will be about adding the revving sprite to the Rhino ball.

Again I’m going to use Spriter by BrashMonkey, and the Dust.scml from the Game effects artpack.

It has 2 animations the Rev sprite and the landing sprite, I’ll export them to separate PNG files like I did previously. Then drag them onto the hierarchy to create the animation.

If we were to attach to the wheel as a child the rev sprite would rotate with the ball. We could attach the sprite to the Rhino head as that is doesn’t move much but as with the flame sprite I’m going to use the Update function to position relative to the centre of the ball.
Unlike the flame sprite we need to apply an offset as the rev needs to appear on the left of the Rhino ball. To find the offset make the Rev temporarily a child of the Rhino ball then move to the ideal position, store the transform position as this is what we’ll add in the Update function. Remembering to move the Dust_000 from the RhinoBall hierarchy.

adjusting the transform of the Rev sprite

adding the sprite to the Rhino script

So the Rev sprite now works and is well positioned but the problem is when the Rhino jumps and is airborne there shouldn’t be dust revving. So as with the flame in the previous blog we will RayCast down from the centre of the ball to see when we lose contact with the ground.
If we lose contact we set active of the Rev GameObject to false, in the future we will transition from the Rev sprite to the take-off sprite but this will do just now.

Rotation of the flame sprite

In my previous blog, I hinted that we wanted to rotate the flame, the idea is that when falling we want the flames above the Shuffa ball, with an upwards motion the flames below and when on the ground the flames to the left of the ball.

Shuffa ball with rotated flame

To do this we need to know when the ball is in contact with the ground, and if airborne whether the trajectory is upwards or downwards.

To see if the ball is in contact with the ground we will use RayCasting, we will cast an invisible line down a certain distance from the centre of the ball; if it collides with a piece of floor then we return true saying it is grounded.

With RayCasting we need to use layers, these layers separate the different object types. If we didn’t then the RayCast will always return true as it casts from the centre of the ball down to outside the circle collider, thus hitting the collider and returning true.
We will assign all of the floor sprites to the Floor layer, then when RayCasting we tell it to only search the Floor layer.

To set up the Floor layer click Layers->Edit Layers, then add the Floor layer to one of the User Layers.

adding the Floor layer

Next assign the floor tile to the Floor Layer.

assign the floor sprite to the Floor layer

To work out whether the ball is falling or on an upward trajectory we compare the current transform position with the previous frame. Then adjust the angle accordingly. When adjusting the angle we don't want it to change immediately but have a smooth transition, that is where the Slerp function comes in.

Video of the ball flame rotation in action