Animating a game interface in Unity

Last week Sergio wrote a new step in his Haxe series, so guess what?  Yes! Today is time again for Unity. This time I’m giving a quick shot again to the new canvas objects adding animated textures using sprites and some new cool tools. If some of you are first timers into sprite animation in Unity, check our old post before going deep here, I’ll skip some common steps!

 

animated sprites inside an interface in Unity. Yay!

animated sprites inside an interface in Unity. Yay!

Some new tools I’m using here

Great tool to create sprite sheets, just drag and drop your images and set some setting and that’s it, your sheet is ready. Give it a try, is much more than a sprite sheet creator!

Shoebox main interface

Shoebox main interface

Since I saw some art done with this tool I fell in love with it. It’s like painting using geometric forms with glow, layers, textures, animations… It’s useful to create isometric sketches easily or some quick game resources. Go grab the public beta before it’s too late.

Hexels interface

Hexels interface

 

Using some new weapons to create some assets

 

First of all, here I’m using the same project I created for my last post. You can go to this post and follow the steps to create something similar, or download the complete project here for Unity 4.6+:

DOWNLOAD

Ok! Is everyone ready? Next step:  adding an animated sprite to a project actually needs an animated sprite. I wanted some cool looking abstract fonts, with a special effect like a glow, and Hexels is perfect for that kind of tasks.

 

asset made with hexels

asset made with hexels

I drew every symbol individually because it’s easier to create the sprite sheet with Shoebox this way. It’s possible to create a sprite sheet using only Hexels, but dealing with all those glow effects while slicing it into Unity sound like a pain to me. To create the sprite sheet, just drag and drop all images into Shoebox and let it do it’s magic.

sprite sheet made using hexels and shoebox

sprite sheet made using hexels and shoebox

 

Animated sprites in a canvas

As I said in the introduction, I’m going to skip some steps I wrote in the past in older posts. Here is where we add the sprite to Unity, have it sliced choosing between automatic or grid method and then use the resulting sliced sprite to create a good looking animation, or more than one like in this case. To make future steps easier, I’m naming my animations as “anim1”, “anim2”, etc… this is useful to iterate between animations from code.

If you find any trouble doing this, go back to “animated sprites in Unity” post or write your questions in the comment section below; we are always glad to receive some comments and help someone if possible.

 

slicing sprite

slicing sprite

sliced sprite

sliced sprite

 

building an animation

building an animation

IMPORTANT! Adding a sprite sheet to the main game layouts is almost the same than adding it to a canvas, but almost means there is a difference: for main game sprites you usually use 2D -> Sprite object, but for UI you really should use UI objects, in this case UI -> Image adding to it a sprite renderer to attach the sprite we imported before, and an animator component.

 

UI image components

UI image components

Cool effects from the same asset

A single sprite following all the time the same animation is not so cool. This interface need some love to start looking better, and that’s possible using only one asset.

As first step, I’m creating some copies of the same image object and moving them to create a “word”. To improve a bit the animation, we can create two more animations and linked them in a loop using the animator panel. Rememeber to call them something like “anim2” and “anim3” (same name ended with an index) to avoid problems in future steps.

animator state machine

animator state machine

But there is another problem… the effect was not as cool as I expected because all the symbols were following exactly the same animation! 🙁

well, that's bad

well, that’s bad

For the first time since I started this project, we really need to add some code. Create a new script called “random” and attach it to every symbol using a script component (select symbol object in Hierarchy panel -> inspector panel-> add component -> scripts -> select random script). Open the script with your favorite editor and add the following lines:

 

This code initializes the animation of the symbol to a random state (I’m using a random number between 1 and 3 because I have only 3 possible states), and then, it starts again a random state with a probability of 0,01% on each update. That’s a fast way to randomize each symbol animation, but not the best one.

Be creative

Just don’t stop here. You can duplicate and scale some symbols as much as you want, they will keep moving. Here is how it looks at the end, after playing a little bit more.

 

Here is the complete list of chapters of this Unity3d canvas series where you can find the entire process:

Next week more Haxeflixel with Sergio and his arcade shooter from scratch, and in a few days more this blog (and also our boss cat) turns 1 year old!  Stay tuned by following us in your favorite social network.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.