I thought writing this down already a month ago when I was playing around with Unity and I wanted to create an animated collectible bonus which is instantiated at the certain coordinates at the screen and it starts then to fall “down” (usually Y axis). Now I will create a blog post about the whole thing so I will remember how to do it and maybe help someone else too.
Bonus itself will be a simple small block, a sort of a tile with a letter so that the player can decide if he/she wants to collect the bonus or just let it drop out of the screen. So the bonus tile looks something like this:
This is a simple PNG sized 77 x 38 created with GIMP. The trickier part is the letter and the animation. I want the bonus to be without the letter at the first frame and then frame by frame the letter should be revealed from top of the block so that it will look that it’s kind of rolling down. This means that the letter rendered on the tile should be transformed just a little bit “roundy” so that it would have an illusion of 3rd dimension.
To create the letters (by using GIMP):
- Create a new layer of the same size as the original layer (77 x 38 in my case). Have the background as white. This is needed because when mapping the layer we don’t want it to be transparent.
- By using the text tool create a letter of size 24 px (size 24 looks balanced in the tile) . I will be using letter M in this example.
- Rotate the layer 90 degrees clockwise (layer -> transform -> rotate). We need to do this because the GIMP map object filter cannot (at least I don’t know how) map layer to horizontally aligned cylinder aka pipe.
- Center the rotated layer by using the alignment tool.
- Merge letter layer to the white background layer of the same size as original.
- Take the filters -> map -> map object filter up.
- Options: map to cylinder, create new layer check box on, transparent background off, no light. In the orientation tab: set the Z rotation to -90 degrees. This now rotates the cylinder horizontally. Leave X and Y to 0 degrees. On the Cylinder tab: images can be what ever, we don’t use them. IMPORTANT: the radius of the cylinder should be a little bigger what your layer is, mine is 0,42 pixels I presume. Check the length so that the letter looks good. (for me 0,65)
- Try creating the new layer and check the result. It should look somewhat normal letter M with a little bit of “rounding”, that meaning it do not look completely flat. You can delete the layer and adjust the parameters and create new if it do not look good.
- When the letter looks good, you need to start creating the frames. This is done by adjusting the X rotation on the Orientation tab. Start from somewhere -100. It should rotate the letter almost hidden in the top only the bottom of the letter should be visible in the top. Most of the letter is hidden behind the camera and this is why we didn’t want the transparency.
- Hide the original layer of the rotated letter (this is done to prevent the export render it as part of the final image)
- Select the created frame with the letter just barely showing on the top and select colors -> color to alpha. And select white. If done correctly now the tile and letter should be aligned correctly and look something like this:
- Export the image in PNG format and name the image something you are comfortable with. I named all my images xxx001.png, xxx002.png and so on so that the numbering is the frame order. For me the first frame was the clear one.
- Now increment the X rotation by 10 degrees (this depends how many frames you want to have and how big steps the letter should be rolling). Hide the layers not needed and go to step 11.
In the end of the process you have something like 22 images / frames. The result should be something like this if exported as an animated GIF:
When this is animated so that it moves along the Y axis it looks like it’s falling and rolling at the same time. In the next post I will explain how to use this in Unity. Until next time!