[Unity] 유니티 버튼 UI 이펙트 만들기

안녕하세요.

오늘은 간단하게 유니티 버튼 UI의 이펙트를 간단하게 만드는 방법에 대해 알아보려고 합니다.

디자이너님 없이 혼자 간단하게 버튼 이펙트를 간단하게 만드는 방법입니다.

오늘 추가할 이펙트는 다음과 같습니다.

바로 시작하겠습니다.

버튼 UI를 하나 생성합니다.

원형 버튼을 만들어야 하므로, 

 Inspector에서 Image-Source Image항목을 변경합니다.

Knob를 선택합니다.

그리고 Rect Transform에서 Width, Height값을 같게 설정합니다.

Height값을 30에서 160으로 설정하겠습니다.

그리고 버튼에 하위에 이미지를 하나 넣습니다.

이펙트로 사용할 이미지가 하나 필요합니다.

알파 값이 들어있는 원을 하나 만들어야 합니다.

포토샵이나 기타 이미지 편집 프로그램에서 만듭니다.

만들시기 번거로우시다면 아래 파일을 다운로드하시면 됩니다.

12.png

0.00MB

새로 만든 이미지를 선택해서, Texture Type을 Sprite로 변경한 후 Apply버튼을 누릅니다.

그 후 이전에 추가했던 버튼 밑에 이미지 오브젝트에 추가합니다.

버튼 외곽에 이미지가 나와야하므로 Width, Height를 조정합니다.

150, 150정도로 조정하면 될 것 같습니다.

그리고 이미지 오브젝트가 버튼 외곽에 있도록 위치를 적당하게 맞춥니다.

 

이제 애니메이션을 추가해서 이펙트를 만듭니다.

메뉴에서 Window-Animation-Animation을 선택합니다.

이때 꼭 Image 오브젝트가 선택되어 있어야 합니다.

Image 오브젝트의 애니메이션을 추가하는 것이기 때문입니다.

 

애니메이션 창에서 "Create"버튼을 누릅니다.

적당한 이름으로 저장합니다.

3가지 애니메이션을 추가할 예정입니다.

1. 회전 이미지 추가

첫 번째로 이미지 회전 z 축으로 회전을 합니다.

Add Property 버튼을 누릅니다.

Rotation에서 +버튼을 누릅니다.

그 후 하얀 실선을 30 프레임 정도로 이동시킵니다.

그리고 빨간 녹화버튼을 누릅니다.

 

그리고 Rect Transform에서 Rotation값을 360으로 변경합니다.

 

 

60 프레임으로 이 동시 킨 후 

 

여기도 Z 축을 360으로 변경합니다.

 

2. 색 변경 애니메이션 추가

Image 오브젝트의 Color RGB 값을 255 / 255 / 0로 변경합니다.

0 프레임으로 이동합니다.

같은 방식으로 0 프레임에도 이미지 오브젝트의 Color RGB 값을 255 / 255 / 0으로 변경합니다.

30 프레임으로 이동합니다.

Image 오브젝트의 Color RGB 값을 255 / 0 / 0로 변경합니다.

3. Fill Account 수정

Animation의 녹화를 잠시 정지합니다.

Image 오브젝트의 Image Type을 Simple에서 Filled로 변경합니다.

Animation의 녹화를 다시 시작합니다.

그리고 Add Property를 해서, Fill Amount를 추가합니다.

 

0 프레임으로 이동합니다.

 

Fill Amount값을 1에서 0으로 변경합니다.

60 프레임으로 이동해서 마찬가지로 Fill Amount값을 1에서 0으로 변경합니다.

그리고 30 프레임으로 이동해서 Fill Amount값을 0에서 1로 변경합니다.

Animation의 녹화를 정지합니다.

실행을 시켜보면 처음에 보여드렸던 결과와 마찬가지로 UI 이펙트가 출력되는 것을 확인할 수 있습니다.