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

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.

Interesting mouse.
Anker 2.4G Wireless Vertical Ergonomic Optical Mouse

TO BLAST! - My New Fun Relaxing Puzzle Game Available On Google Play Store

Consider purchasing my ULTIMATE UDEMY COURSE with great discount and get access to all of downloadable resources from all of tutorials once and forever

If you like what I'm doing then you can support me through
or here
Thank you)

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.

[charlieo.]

“Make it bigger with more success” I don’t know why I laughed so hard at that

[mortl]

I absolutely LOVE how no fuss but informative this video is. Concise while detailed.

[anirudhganesh]

Super short and Clear!!! Usually people take a lot of time while explaining ink scape tutorials and it is hard to hind an inkscape tutorial below 5mins... they usually end up being speed runs but this is too good! thanks a lot.

[yaserbahzad]

really nice Alex, loved it and loved the trick within inkscape, thanks a lot

[QuipQuestQuorum]

New game creator very love this tutorial, thanks Alexander, these are very useful~

[sefika]

Super helpful. I'm so happy that I learned how to create such good looking buttons! Thank you for the concise and clear explanation.

[ivanstepanovic]

wow! straight to the point, without bullshit lines! well done my friend!

[srinathkulkarni]

Hi Alexander, very useful tutorial. thanks!

[parmeetsingh]

you are amazing..keep up the good work....
love your videos

[TheCrazyTV]

So short and learnt so much thank you for going straight to the point

[gavinpicard]

Thank you so much! Surprisingly entertaining and very useful video

[meosart]

Круто, спасибо! Но стоило упомянуть об изменении кнопок в самом Unity с default на sprite. Я, признаться, немного потупил. Но, в целом, очень классный урок👍

[DenisArsentyev]

Александр, спасибо большое за короткие и очень информативные гайды. Как-то магическим способом у вас получается лучше других доносить сложные вещи простыми словами! Если вам не сложно, могли бы вы научить как создать линию между разными состояниями нажатия мышки и позициями курсора (зажал клавишу мышки, тянешь её и видишь расстояние между нажатием и новым положением мышки).

[lucyc]

can we change the position of the second sprite?
i also have a problem that the sprites are different positions in the game, any idea how to fix?

[artemcheck]

Hi! How I can sprite swap with inside objects (with text). I mean it impossible to move text with sprite?