Saturday, August 1, 2015

Bouncy fire-starter

As I've chosen a Rhino and as we all know they live to put out fires, I've now come up with a goal of the game.
The Shuffa ball instead of being the main player becomes the fire-starter, bouncy fire-starter. The Rhino then has the task of putting these fires out.

For the animation of the fire I use a package I bought called Spriter by BrashMonkey, when I bought it all of the artpacks were included. It is free to try and I do recommend it.
The one I am going to use comes from the Game effects pack and is called flame.scml.
Once opened; Click File->Export Animation to PNG.

Export animation

Then I set the size to 200% and the number of frames to export, in my case 9. You obviously will play about with these figures depending on the project. 

Exporting flame frames

These need to be exported into a directory inside the Assets directory of the unity project. Then to create the animation you drag all of the images onto the Hierarchy, this creates the animation. One thing I like to do is un-check the "Generate mip-maps", I'm not sure what this is for but it just seems to create a lesser quality animation.

Drag images to Hierarchy

Now to make the flame follow the ball:
If you drag the flame onto the ball it becomes a child of that object and therefore as the ball rotates the so will the flame animation. Not the effect I'm after, so we need to create a script that as the ball moves the flame animation is also moved.
To do that we create in the ball script we a public GameObject that in the update we change the transform position to match that of the ball.

Ball script with GameObject

Back in the unity editor drag the flame_007 object into the fire, make sure the flame object is no longer a child of the ball.

Now we have a flame object that follows the ball, because the flame animation is much taller the middles do not line up.
Misaligned images

In the Update of the ball we could add an offset to the transform position but later on I want to change the rotation of the flame depending on whether it is airborne or rolling on the ground. So the easiest way is to change the pivot point of each frame in the animation.
Navigate in the Project to the directory where the individual PNG files are store then click on each on and in the sprite editor change the pivot point.

Changing pivot point of each sprite

Aligned ball and flame.