UI 비법서 - 버튼의 모든 것 | 유니티

UI에서 가장 많이 사용되는 버튼 컴포넌트에 대해서 알아봅시다.
링크를 통해서 영상에서 사용되는 리소스를 다운로드 받을 수 있습니다.
drive.google.com/file/d/19Thx...
타임라인
0:00 인트로
0:47 - Button 게임 오브젝트 생성하기
1:37 - Interactable 프로퍼티
2:28 - Transition 프로퍼티와 버튼의 상호작용 상태들
3:01 - Transition - Color Tint
4:14 - Transition - Sprite Swap
4:58 - Transition - Animation
7:16 - 버튼을 클릭했을 때 호출할 이벤트 함수 만들고 등록하기
8:25 - 스크립트에서 동적으로 이벤트 함수 등록하기
9:32 - 모바일에서 사용하기 좋은 버튼 테크닉
본 영상의 오프닝은 비디오몬스터를 이용해서 만들어졌습니다.
videomonster.com/
[유니티 어필리에이트 프로그램]
아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.
- 유니티 에셋스토어 : prf.hn/l/vJl41D5
- 유니티 플러스 : prf.hn/l/wLNyJZG
- 유니티 프로 : prf.hn/l/qXOybmp
[투네이션]
toon.at/donate/63773521276146...
[Patreon]
/ wergamedevchan
[디스코드 채널]
/ discord
#Unity #유니티 #유니티엔진 #게임만들기 #게임엔진 #베르 #베르의프로그래밍노트 #UI #UGUI #버튼 #Button

[@user-zd5kz8bw9z]

타임라인 해놓아 주셔서 원하는거만 쏙쏙 빼먹기 너무 좋습니다 감사합니다.

[@user-nw3gi5wh1x]

유니티 관련 궁금한부분이 생길때마다 항상 베르님 영상 참고해서 도움받고 있습니다 감사합니다.

[@꿈꾸는모험가]

버튼의 자식이미지가 똑같이 감지한다는 것은 처음 알았네요 ! 꿀팁 감사합니다 ^^ 프로퍼티의 상세내용을 자세히 짚어주시니 정말 유용해요 !

[@wergia]

그래서 버튼의 모든 것이죠! ㅎㅎ

[@cy8854]

내용도 실용적이고 알찬데 한글 자막까지 ㄷㄷ; 정성이 대단하십니다

[@wergia]

앞으로도 계속 알찬 내용으로 찾아뵙겠습니다 ㅎㅎ

[@user-op7yg6qv7y]

감사합니다 ㅎㅎ 하나하나 설명해주시니 많은 도움이 됐습니다

[@sj8386]

감사합니다 덕분에 잘 배웠습니다.

[@user-cr3qm7hh7d]

오늘도 꿀팁 잘 받아 갑니다( _ _ ) 꾸벅

[@Tester13565]

버튼 꿀팁 얻어갑니다. 버튼의 자식이 연동되는 지 처음 알았습니다 ㅎㅎ;

[@wergia]

이것 저것 하다보면 지식이 늘죠 ㅎㅎ

[@user-mk2oj8ce3g]

감사합니다!!

[@user-cv3er1qj8y]

영상 정말 감사합니다~ 구독해서 열심히 공부하겠습니다~ 그런데 질문이 있습니다. 한국어로 word guess 게임을 만들고 싶은데 글자수에 맞게 버튼을 자동으로 만들어서 배치할 수 있을까요?

[@wergia]

버튼을 프리팹으로 만들어서 Instantiate로 생성해주면 될 것 같아요! 그리고 생성된 버튼의 위치 정렬은 Layout Group 기능을 사용하면 되겠네요 ㅎㅎ

[@jbj9365]

안녕하세요. 좋은 내용 잘 보았습니다. 질문하나만 드려도 될지요? 스프라이트 스왑으로 버튼을 만들었을 때 프레스드 이미지로 스왑으로 눌리는 느낌을 줄 때 시스템 텍스트도 함께 일정 위치(몇픽셀정도)를 이동할 수는 없을까요?

[@wergia]

그렇게 복합적인 연출을 할때 사용하는게 바로 Animation 방식입니다. Animation 방식을 이용해서 버튼 이미지를 교체하는 동시에 텍스트 위치를 이동시켜주면 됩니다.

[@jbj9365]

@@wergia 늦은시간 답변 감사드립니다! 한번 해볼께요!!!

[@ironbear7854]

안녕하세요! 키보드의 입력을 받아서 sprite swap으로 이미지를 변경하고 있습니다. 컬러 틴트에서는 인풋이 없을 때 normal color로 변경해서 눌리지 않은 상태로 돌아갔는데 sprite는 노말 이미지가 없어서 이런 경우엔 어떤식으로 원래 기존 이미지로 돌아가는지 궁금합니다!

[@user-mf2xj2sw3r]

안녕하세요. 영상 정말 잘 봤습니다. 한가지 궁금한게 있어서 여쭤봅니다. 버튼의 텍스트를 스크립트에서 출력해주는 난수 조합으로 넣을 수 있는 방법이 있을까요?

[@wergia]

Start 함수에서 버튼 텍스트에 내용을 넣도록 만들어주면 됩니다.

[@user-mf2xj2sw3r]

@@wergia 감사합니다^^

[@AThousAndMyT]

영상에 군더더기가 전혀 없네요. 감사합니다.

[@user-nk9pw6dx3o]

5:25 버튼 신기하네요

[@wergia]

애니메이션도 많이 쓰죠 ㅎㅎ

[@얼불춤고양이]

심각도 코드 설명 프로젝트파일 줄 비표시 오류(Suppression) 상태 오류 CS1061 'Button'에는 'onClick'에 대한 정의가 포함되어 있지 않고, 'Button' 형식의 첫 번째 인수를 허용하는 액세스 가능한 확장 메서드 'onClick'이(가) 없습니다. using 지시문 또는 어셈블리 참조가 있는지 확인하세요 라고 오류가 뜨는데 고치는 법은 뭐죠?

[@user-nb5zl6rl8l]

베르님 질문있습니다. 제가 Game Start 글자를 포토샵으로 idle과 눌렀을때의 글자상태를 만들어서 sprite swap 으로 하고 있는데요. pressed sprite에 눌렀을때의 글자상태 이미지를 넣었는데 이미지가 작게 나오는데 원래 이미지 크기로 나오게 하려면 어떻게 하나요? 소스이미지는 idle이미지를 드래그해서 Set native size눌러놔서 괜찮은데 게임실행해서 확인하면 이미지가 클릭할때 작게 표시되서 나옵니다...ㅜ

[@wergia]

두 이미지의 크기가 같은가요?

[@user-nb5zl6rl8l]

@@wergia 아하 크기가 같아야하군요ㅠ 감사합니다ㅠ

[@onceup4947]

안녕하세요 저는 아트쪽인데 혹시 C# 안건드리고 애니메이터나 노드 이런것으로 버튼 On Click 기능 활성화 해서 버튼 클릭 시 출력되게 하는 방법은 없나요?

[@user-vl4xb4gs6p]

안녕하세요 애니메이터롯 유니티에 테스트 애니메이션씬만들고있는데 버튼을만들고 눌렀을시 애니메이션실행하게하는건 버튼의인스펙트에서 애니메이터만 붙여서 하면될까요~?

[@wergia]

네 버튼에 애니메이터 달아주시면 될겁니다.

[@do-zt8nh]

유니티를 이번에 프로젝트하면서 진행중인 학부생입니다! 혹시 버튼 만들고 그 text를 이용? 하려고 하는데 public으로 텍스트 선언하고 start 부분에 버튼=Getcomponent() 했더니 안됩니다 ㅠㅠ 방법이 있을까요?

[@wergia]

버튼 아래에 있는 텍스트를 가져오시려고 하는 거라면 GetComponentInChildren()로 해보시면 될 것 같습니다. GetComponent는 컴포넌트가 붙어있는 게임 오브젝트에서만 컴포넌트를 가져오는 함수이고 GetComponentInChildren은 컴포넌트가 붙어있는 게임 오브젝트의 자식 게임 오브젝트에서도 컴포넌트를 가져오는 함수입니다.

[@do-zt8nh]

베르의 게임 개발 유튜브 한번해보겠습니다! 감사합니다

[@베르텔랑]

질문 있습니다. 혹시 유니티3D에서 버튼 안에 다른 곳에서 가져온 png나 jpg형식 등의 이미지를 삽입하는 방법이 있나요??

[@wergia]

버튼 게임오브젝트 아래에 이미지 컴포넌트가 부착된 게임오브젝트를 자식 게임오브젝트로 추가해주고 크기를 맞춰주시면 됩니다!

[@베르텔랑]

@@wergia 다른 영상을 검색해보니 2D 이미지를 사용하기 위해 RawImage를 쓰던데, RawImage도 적용이 되는가요?

[@user-bq9qi6ek7t]

질문 하나만 해도될까용.... 모바일 입력은 Input.GetTouch()잖아요?(버튼) 그렇다면 모바일같은경우는 스크립트로 작성할수밖에 없나요?

[@wergia]

버튼 입력 자체는 그대로 버튼의 On Click 이벤트에 작동할 함수를 등록해주면 유니티 자체적으로 버튼 입력을 터치로 처리해줍니다. 버튼이 아닌 화면 입력같은 경우에는 따로 GetTouch를 사용해서 구현해야겠죠.

[@user-bq9qi6ek7t]

@@wergia 오 그러면 onclick이벤트에서는 모바일에서 가능하군요...! 감사합니다 ㅎ

[@wergia]

@@user-bq9qi6ek7t 네 모바일에서 버튼은 그냥 사용하셔도 됩니다!

[@mosami-cu3xo]

안녕하세요 제가 디자이너인데 이번에 유니티를 처음 켜보고 공부해보고 있는데요.. 이미지를 유니티로 올리는정도까지는 구사하고싶어서요 이 영상 리스트가 유니티 입문에 아주 좋다고 추천을 받았습니다. 1번영상부터 지금까지.... 용어들이 너무 낯설어서... 이해를 하는데 굉장히 오래 걸리는데요ㅠㅠ 뷰, 컴포넌트, 프로퍼티 등등... 제가 이해하고 있는게 맞는지 ..봐주실 수 있으실까요? 뷰 : 유니티 인터페이스 상의 어떠한 정보 값이 있는 영역들 컴포넌트 : 하이어라키 영역에서 생성하고 선택할수있는 각 개체들 프로퍼티 : 인스펙터 영역에서 조작,설정할수있는 각 항목들 스프라이트 : 이미지를 불러온 것 혹시.. 용어들을 한번.. 텍스트로라도 영상설명에 붙혀주시기는 어려울까요? 너무 기초적인 부분을 질문하게된것같아서 죄송합니다~

[@UniCoti]

베르님 돌아가신것 같습니다 최근영상 댓글 확인해주세요

[@gardenjeon7047]

항상 잘보고있습니다 궁금한게 있는데, 버튼을 한번 누른뒤엔 스페이스를 눌러도 클릭판정이 됩니다 스페이스버튼으로 점프하는 기능을 만들어서 쓰고 있었는데 이것때문에 스페이스를 누를때마다 버튼이 눌려요 키보드로 버튼이 작동하지않게 하는 방법 혹시 알수 있을까요

[@wergia]

버튼 콜백 함수에서 기능을 모두 끝낸 뒤에 EventSystem.current.SetSelectedGameObject(null); 코드를 추가해보세요!

[@gardenjeon7047]

@@wergia 고마워요! 덕분에 해결방법 찾았어요

[@solless7474]

화면상에 버튼이 두개일때 키보드 좌우키나 상하키를 누르면 하이라이트가 넘겨지는데 이걸 막을 순 없을까요??

[@wergia]

버튼 컴포넌트에서 Navigation 프로퍼티를 None으로 변경해주면 됩니다. 더 많은 질문이나 베르의 게임 개발 유튜브와 관련된 활동을 위한 디스코드 채널도 있습니다. 아래의 링크를 통해 방문하실 수 있습니다. discord.gg/tqmRTy4pgk

[@jinhryu4441]

혹 모바일에서 캐릭터 이동 과 점프를 버튼으로 구현할라 하는데 어덯게해야 할까요?

[@wergia]

kzbin.info/www/bejne/g4urdoaYgLadptE 가상조이스틱을 만들어서 입력 받으면 됩니다!

[@RyanKim1102]

아아ㅏㅏㅏ각 아무리 찾아도 유튜브 그 어떤 영상에도 마인크래프트의 십자선 같이 오브잭트와 상호작용할 수 있는 UI가 안나오네요... UI와 상호작용하려고 panel 만들고 boxcollider 넣고 스크립트로 OnCollisionStay하고 안에 Debug.Log() 해서 상호작용 테스트 해봤는데 안되네요 도대체 어떻게 하는건지 알려주실 수 있을까여....ㅠㅠㅠㅠㅠㅠㅠ 시간도 더럽게 날리고 눈물만 나네요......

[@wergia]

UI 공간과 게임 공간이 다르게 계산되기 때문에 일반적인 콜라이더로는 검출되지 않습니다. 에임 조준선을 구현하는 일반적인 방법은 보통 십자선 UI를 띄우고 카메라에서 레이캐스트를 쏴서 잡힌 오브젝트를 검출하는 방식을 사용합니다.

[@user-zn7fu4jt3b]

리소스 다운 받는 깃허브 링크가 안 뜨네요ㅠ.ㅠ 혹시 드라이브로 올려주실 수 있나요?

[@wergia]

링크 수정했습니다!

[@solless7474]

버튼 위에 마우스를 올려놓거나 클릭하면 소리가 나오도록 설정했습니다 버튼을 클릭하고 나서 모든 소리가 안나고 마우스를 올려놓으면 생기는 하이라이트도 멈추게 하고 싶습니다ㅜㅜ

[@wergia]

transition으로 애니메이션을 사용했다면 클릭한 상태 변수를 추가해서 하이라이트로 못 넘어가게 만들면 될 것 같습니다.

[@user-xn7jx9om1c]

혹시 버튼을 켜서 활성화 한후 다시 버튼을 누르면 비활성화 또 다시 누르면 활성화 되는 방법이 있나요??

[@wergia]

토글처럼 값에 따라서 활성화 비활성화 하는 방식으로 사용하려면 [UI > Toggle] 을 사용하거나, 버튼에서 Transition을 None으로 바꿔서 코드에서 이미지 상태를 바꾸는걸 추천드려요!

[@user-xn7jx9om1c]

오 감사합니다!!

[@고라니]

3:00 버튼 컴포넌트에 selected color가 없어요

[@wergia]

Transition 타입이 Color Tint인데도 안보이나요?

[@kmj8fl593]

버튼을 조이스틱으로 입력을 받아 컨트롤 할 수 있나요??

[@wergia]

네 조이스틱이나 키보드 만으로도 컨트롤이 가능합니다. 더 많은 질문이나 베르의 게임 개발 유튜브와 관련된 활동을 위한 디스코드 채널도 있습니다. 아래의 링크를 통해 방문하실 수 있습니다. discord.gg/tqmRTy4pgk

[@kmj8fl593]

@@wergia 감사합니다!

[@ghkvud713]

버튼 눌렀다가 뗄때 말고 눌렀을때 바로 실행하게 할수도 있나요?

[@wergia]

유니티에서 제공하는 버튼은 기본적으로 눌렀다가 뗄 때 작동하도록 되어있습니다. 눌렀을 때 바로 작동하게 하려면 커스텀 버튼을 만드셔야 할 듯 합니다.

[@ghkvud713]

감사합니다!

[@user-xg7qq1vu4f]

혹시 게임뷰에서는 ui(버튼)이 보이는데 빌드하면 버튼이 안보입니다 해결책없을까요 ㅠ

[@wergia]

게임뷰 해상도와 실제 모니터 해상도 차이 때문에 안보일 수 있습니다.

[@user-lt5yg5nu4d]

코드로 버튼 투명도를 수정하고 싶은데 어떻게 하면 좋을까요..?

[@wergia]

button.image.color = new Color(1f, 1f, 1f, 0f); 이렇게 버튼 이미지에 접근해서 Color의 마지막 0f 값을 조절하면 투명도를 조절할 수 있습니다.

[@_haniy_5068]

버튼에 마우스를 가져다댔을때 버튼이 밝아지게 했는데 텍스트는 밝아지게 못하나요?

[@wergia]

아래 오브젝트들까지 복합적으로 동작하게 만들려면 애니메이션 방식을 쓰셔야 할 겁니다.

[@_haniy_5068]

@@wergia 빠른 답변 감사합니다 :)

[@user-bq9qi6ek7t]

9:09 10:10

[@user-kv9gr9im6v]

버튼의 이미지를 제가 만든것으로 교체하려고 하는데, 끌어오기가 안되더라고요 ㅠㅠ 원인이 있을까요?

[@user-kv9gr9im6v]

3D 환경에서 사용중입니다.

[@wergia]

사용하려는 이미지 선택하셔서 이미지 타입을 스프라이트로 바꿔보세요!