[Unity] Button 이미지 변경 스크립트

 이번 글에서는 버튼을 클릭하면 버튼의 이미지를 변경하는 기능을 구현하려고 한다.

 

 

1.  두 장의 이미지를 버튼의 배경으로 사용하기

 

[버튼 및 스크립트 생성]

 

일단 버튼 하나를 만든다.

 

누르면 이미지를 바꾸도록 하기 위해 ImageChange라는 버튼을 만들고,

버튼을 관리할 빈 오브젝트도 하나 만든다.

그리고 스크립트를 버튼의 이미지를 변경하게 하는 빈 스크립트도 하나 만들어 준다.

 

 

 

[버튼 함수 작성]

 

게임 오브젝트를 드래그앤드롭 없이 바로 적용하기 위해

GameObject.Fine를 이용해 코드를 작성했다.

 

 

 

[이미지 적용]

 

스크립트를 버튼을 관리할 빈 오브젝트에 넣어주고, 준비한 이미지를 프로젝트에 넣으면 된다!

 

sprite를 사용할 거라서 Texture Type을 Sprite로 바꿔주었다.

 

 

그리고 sprites에 드래그앤드롭 하고, 이제 유니티를 실행해서 잘 작동하는지 확인해본다.

 

 

안 됨..ㅎㅎ

 

 

[버튼의 On Clikck() 설정]

 

On Click에 아무것도 설정 안 해줘서 그런 것이다 ㅋㅋㅋㅋㅎㅎ;;

 

다들 이런 실수 안 하시길 바라면서 On Click에 아까 만든 버튼 관리하는

오브젝트를 드래그앤드롭으로 넣어준다.

 

 

 

그리고 이제 실행해 보면!!

 

 

[실행 결과]

 

잘 작동하는 것을 볼 수 있다.

 

 

처음 시작할 때 이미지가 기본 배경이 아니었으면 한다면,

Start() 함수에 이렇게 한 줄만 추가해주면 된다.

 

 

 

 

 

2.  세 장 이상의 이미지를 버튼의 배경으로 사용하기

불린 값으로 두 장의 이미지만이 아닌 세 장 이상의 이미지를 사용하는 버튼을 만들어 보려고 한다.

 

 

[코드 작성]

아까처럼 Sprite[]를 만들고

드래그앤드롭을 이용해 sprite를 추가할 것이기 때문에 public으로 작성한다.

 

클릭횟수에 따라 이미지가 변하기 때문에 클릭 횟수를 세는 clickCnt 변수

배열의 길이를 벗어나면 안되기 때문에 최대 클릭 횟수를 제한하는 maxCnt 변수를 생성합니다.

 

배열은 0부터 시작하기 때문에 maxCnt는 배열의 수보다 - 1로 지정해준다. 

 

 

버튼을 클릭하면 clickCnt를 1씩 더한다.

 

 

clickCnt가 maxCnt보다 커진다면 다시 0으로 돌아가게 하고,

clickCnt에 따라 이미지가 바뀌도록 함수를 작성한다.

 

[이미지 드래그 앤 드롭]

아까처럼 드래그앤드롭으로 이미지를 넣고

또 실수하지 않기 위해 버튼에 On Click()을 확인한다. ㅎㅎ

 

 

[버튼의 On Click() 설정]

 

아까 작성한 함수를 주석처리 해서 이렇게 Missing이 나오기 때문에 다시 설정한다.

 

 

 

이제 실행이 잘 되나 한 번 확인~.~

 

 

 

[실행 결과]

 

3장이 다 나오니까 다시 처음으로 돌아가게 잘 작동하는 것을 볼 수 있다 ~.~