How To Create Simple UI Button Sprite Switching Animation Feature In Unity Game | UNITY TUTORIAL

Video Description

In this video I’ll show you how to create a couple of sprites for a button that will be switching between each other when you click that button. I play games here - https://www.twitch.tv/zzotoff You are very welcome :-) This video is about: unity 2d tutorial, unity button animation, How To Create Simple UI Button Sprite Switching Animation Feature In Unity Game, unity button sprite switch, unity button image, unity button sprite, unity button ui, unity button animation trigger, unity button change sprite, unity button, unity ui button, unity button script, unity button onclick, unity button design, unity button ui, unity click button, unity switch image button click, unity switch image button, unity ui animation, button animation unity, unity button animation, draw button inkscape, unity button in inkscape, draw simple button in inkscape, inkscape to unity. So I open Inkscape. Create new rectangle. Make its corners round. Change a color. Duplicate this rectangle pressing Ctrl+D keys. Bring this new rectangle a bit down here. Change its color to darker one. Press page down key to put it behind first rectangle. Duplicate second rectangle. Try to make it bigger holding ctrl+shift keys. Turn off snapping options. Make it bigger with more success. Set its color to darker one. Put it behind other rectangles pressing page down key. Bring it here. Looks like a button. Add some text. Make it bold. Make it bigger holding Ctrl key. Change color. Duplicate it. Change color to darker one. Put it behind pressing page down key. Bring it here to create a kind of shadow. Beautiful. Select all of this. Duplicate it. Move it to the right holding ctrl key. Select upper rectangle along with signes. Bring it down holding ctrl key. Great! Important thing is that our buttons should have same width and height. Width is ok. But height is not. Here we have a little difference. Lets fill this gap using a little trick. I create new rectangle. Now I enable snapping feature and scale this rectangle so its upper edge snaps to upper edge of my button. Now I move it to the right holding ctrl key and scale its lower edge so it snaps to upper edge of pressed button. Now I set opacity of this rectangle to zero so it becomes invisible and our buttons have same resolution now. Cool. Time to import these buttons to Unity. Select first one and import it as png file to wherever you want to. I want it here. Make sure selection will be imported and hit import button. Select second button along with that invisible rectangle and import it same way. Done. Here are our buttons saved as png files. Select them and D&D into Unity project folder. Create new UI button. Double click to focus on it. I like canvas to be scaled with screen size. Back to button. Anchor it at the center holding alt+shift keys. I don’t need text so I wipe it out. Button is blank now. D&D first button sprite into source image slot and now we have our button. Image is stretched. Checking in preserve aspect will fix this issue. Make button bigger holding shift key. To make button switch sprites when it’s clicked I change transition from color tint to sprite swap and D&D my second sprite into pressed sprite slot. That’s it. Now I can hit play and see how it works. Hope you find something useful in this video. Thank you for watching and see you next time.