Physical buttons - Icons, On/Off state, sound & click delay

I only started learning Udon yesterday so nothing too fancy is here, but I spent far too long making a ‘fully functional button’ and wanted to share this for whoever it may benefit.

Buttons

These buttons are easy to setup after the first is done and actually have quite a few features, including on/off states, easy to change icons using the Fontawesome webfont, a one-second delay on press to prevent spamming, and a click sound effect when activated. Simply setup a parent object with a collider (in my case the hexigons), put a canvas with two text layers for the on/off states, configure both states with the color and Fontawesome icon you want (copy/paste unicode from their icon list), and add a click sound if desired. These buttons currently toggle a separate gameobject in the scene (like a mirror), but you could pretty easily swap that out or add onto it. You could also use a separate icon for the on/off states, fontawesome has lots of cool ‘toggle’ variants like that, I just opted to go for a color change here.

Don’t forget to set your variables, and shoutout to Mimi & Vowgan for their educational content that got me this far so fast!

Paste this into your graph window

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

Fontawesome icon list - Make sure you filter by free. Find what you want, then you click the icon above the picture to copy it to your clipboard. Assuming you downloaded and imported the fontawesome webfont (free for web version). I specifically recommend using the fa-solid-900.ttf. If it’s not working, make sure your font “Material” is set to the Font Material included in the .ttf after importing to unity.

Feel free to criticize the logic or suggest ways I could improve these buttons, I only hope my post can help contribute to the community’s need for simple yet configurable buttons. I never want to click on a basic cube again…

Edit: Looks like the images are kind of hard to see… I recommend right clicking and opening in a new tab so you can zoom in and see what is going on.

4 Likes