유니티 UI 버튼 이미지 swap

UI 버튼 컴포넌트를 활용하여 버튼이 눌렸을 때 이미지를 변경하는 방법입니다.

 

결과 화면

Button 컴포넌트를 활용한 스프라이트 스왑 장면입니다.

한 번에 보기

0. 스왑 시킬 이미지 준비

1. 하이어 라키 창에서 우클릭 UI Button 생성

2. Image 컴포넌트에 1번째 스프라이트 삽입

3. Button 컴포넌트 Transition을 Swap으로 변경

4. Pressed Sprite에 2번째 스프라이트 삽입 

0. 스왑 시킬 이미지 준비

1개의 스프라이트를 준비하여 스프라이트 모드 multiple을 활용하여 잘라서 이용했습니다.

1. 하이어 라키 창에서 우클릭 UI Button 생성

위와 같이 생성하셔도 되고 빈 오브젝트에서 각각의 컴포넌트를 추가하셔도 무관합니다.

2. Image 컴포넌트에 1번째 스프라이트 삽입

Source Image안에 1번째 스프라이트 이미지를 삽입합니다.

 

오브젝트의 Transform에 입력된 비율에 맞춰서 이미지가 표시되므로 실제 비율과 다르게 표시됩니다.

 

Preserve Aspect를 체크하면 현재 오브젝트의 크기에 맞게 이미지 비율을 유지합니다.

위에 기능을 체크하시지 않는다면  RectTransform에서 Width와 Height를

 

이미지와 동일하게 수정하고 테스트하셔도 됩니다.

3. Button 컴포넌트 Transition을 Swap으로 변경

Transition은 상태가 변경될 때 targetGraphic에 적용되는 전이의 종류 방식을 지정합니다.

위와 같이 Sprite Swap으로 변경해줍니다.

4. Pressed Sprite에 2번째 스프라이트 삽입 

2번째 스프라이트 이미지를 Pressed Sprite안에 삽입합니다.