Unity Button Prototypes

After working in a custom engine for so long at Big Ant, I decided that it was time to go back to my roots and make some cool stuff in Unity (while utilising other tools for design, obviously - I don't think I'll ever turn my back on Figma, and creating my own assets on the couch with my beloved iPad and Procreate has been really relaxing!)

I'm remembering how much I miss art and design, but I'm also really enjoying the process of bringing things into Unity. Custom Engines are complicated, and it feels like sunshine and rainbows to use an engine that has a whole ton of educational resources and documentation for once.

Sneak Peek:

Pink Buttons

I'm not terribly good at drawing, but weird abstract noisy spacey backgrounds are some of my favourite things to draw. This button concept started from me drawing this one day while watching Brooklyn Nine-Nine:

I made some brushes for this, which I hadn't done before! It was pretty fun, and easier than I thought it would be!

Here are my Figma mockups with animation. You'll see that I changed the font - this is because the one in my original Procreate design was just a little too cool, and by cool, I mean illegible. My bad.

While I was drawing the original design, I envisioned the swirls on the side switching out with no interpolation like this, and it was really nice seeing it come to life. It reminds me of static, which fits because of the noisy nature of the whole design.

This brings me to my Unity implementation, where I realise that I made a really big mistake in my original animation mockup. This was the left aligned text.

I realised pretty quickly that this wasn't easily achievable with a dynamic button and using the standard Unity tools, due to the change in alignment. If the text was a standard width, it'd be easy - just a regular transform over to the left. However, if the length of the text varies, then the end point of the animation would need to change too.

I worked on this problem for a couple of hours, but I think I will come back to it with a fresh mind. For now I've center aligned the text, and I'm still happy with the visual!

I think using a scale animation on the text in place of the slide is a really nice compromise. I experimented with the scaling in Figma with the slide animation, and it looked like it was just scaling from a right side anchor point, which was not what I was going for at all. But I like it with the center aligned text!

It's been ages since I've used the animator in Unity, and it was nice to go back! It's just like Visual States in XAML, but with a menu that doesn't crash when you click on something (Microsoft should really fix that).

Stained Glass Buttons

I stepped out of my comfort zone artistically for this one - after seeing some images of stained glass I really wanted to try my hand at making a button with that sort of look to it. Here's my first draft - she's looking a little crusty:

I did love this, but I thought it was a little too bright and also nowhere near as high def as I wanted it, so I did a second draft with a different colour palette. This one to me looks more intentional and less like I was throwing colours at a wall, but has still got that nice handdrawn effect with crisper lines, rather than crusty ones.

I brought this into Unity, but quickly realised it was missing something, so I decided to try my hand at shader graph. This, astoundingly, was my first time using shader graph since uni -- I've been writing pure HLSL while working in industry. But hey, I was doing it the hard way, so figuring out how to do a simple saturation change on hover was easy. I exposed a simple float on the button that I passed into the shader, and animated that value using the Animator to affect the saturation. Here's how it turned out:

Then I added a title and a nice little scale on the text. I didn't want the animation to be anywhere near as flashy as the pink buttons - I think the stained glass does all the work on the flashiness.

After that, I decided that there needed to be a more subtle button as well. This one's all well and good for a "start game" button, but putting that much emphasis on "settings" just feels silly. So I got back to my iPad and drew an end cap.

When I brought it into Unity, I realised that this was the perfect way to test out the image slicing. I've wanted nine-slicing for AGES, but our version of Noesis didn't support it, so we really struggled with using actual textures. This way is so much easier than everything I would have to do in the custom engine.

I did the same animation as the larger button on this one, but the art brings it down a notch and I'm pretty happy with how it turned out. I think there would need to be yet another step down into subtlety for yet another button, perhaps ditching the stained glass all together, but for now I'm happy.

And here's all of them together:

done here? wanna take a look at some of my other work?

take me back!

Page updated

Google Sites

Report abuse