[Unity] make a rotating image (or Spinner roulette) (유니티 이미지 회전하게 만들기, 룰렛 만들기)

안녕하세요 골드입니다.

오늘은 버튼을 눌렀을때 이미지가 돌아가게 만들어 보도록 하겠습니다.

 

 

1. Script 작성하기

RouletteManager라는 스크립트를 하나 생성합니다.

 

버튼이 눌렸는지 확인하는 bool 변수를 선언합니다.

이미지를 돌리기 위해서는 Rotate를 사용해야 합니다.

Rotate를 사용하기 위해 Transform 변수를 선언합니다.

회전속도를 위한 float 변수를 선언합니다.

이미지를 참조하기 위해서 게임 오브젝트 변수를 하나 선언합니다.

사진을 짤라서 포스팅하니 불편해서 합치다보니 삐뚤삐뚤입니다.

버튼이 눌렸는지 아닌지 확인하는 메서드를 하나 생성합니다.

메서드가 실행되면 _isClick이 true라면 false가  되고

false라면 true가 됩니다.

true가 되면 이미지가 회전할 것입니다.

 

저는 룰렛을 정말정말 간단하게 만들 생각입니다.

먼저 Start 메서드에서 이미지의 RectTransform을 참조하고 _imgPos 변수에 할당합니다.

_imgPos는 해당 이미지의 위치와 회전 등을 담당합니다.

_isClick == true 와 _isClick은 같은 표현입니다.

Update 메서드에서 _isClick이 true인지 확인하고

만약 true라면 이미지를 z축으로 회전시킵니다.

Transform.Rotate()는 물체의 회전을 담당하는 함수입니다.

x, y축으로 움직일 필요가 없기 때문에 0을 입력하였습니다.

z축 회전을 위해 회전속도에 deltaTime을 곱합니다.

 

deltaTime은

지난 프레임이 완료되는 데 까지 걸린 시간을 나타내며, 단위는 초를 사용합니다. (읽기전용)

사용자의 프레임 률(frame rate)을 독립적으로 적용하기 위해서 사용합니다.

 

곱하는 이유는
매 프레임마다 어떤 값을 더하거나 빼는 계산을 하는 경우에, Time.deltaTime과 곱해서 사용할 수 있습니다. Time.deltaTime과 곱하는 경우에, 다음의 경우를 나타냅니다: 오브젝트를 프레임당 10미터가 아닌 초당 10미터 움직이고 싶은경우를 나타냅니다.

 

참고 : https://docs.unity3d.com/kr/530/ScriptReference/Time-deltaTime.html

Unity - 스크립팅 API: Time.deltaTime

프레임이 완료되는 데 걸린 시간을 곱해서

프레임당 몇 미터가 아닌 초당 몇 미터로 계산하는 식입니다.

 

손가락으로 화면을 가리키면 그게 z축이고 손가락을 돌리면 손바닥이 회전합니다.

 

전체 코드입니다.

 

2. Script Component 완성하기

먼저 빠르게 버튼과 이미지를 하나씩 생성합니다.

생성 방법은 Hierachy 창에 마우스를 대고 오른쪽 클릭한 후 UI -> Image(or Button) 입니다.

사이즈를 적당히 조절해주세요. 

​저는 이미지와 버튼을 저런식으로 만들었습니다.

 

빈 게임오브젝트(Empty GameObject)를 하나 생성하고 거기에 스크립트를 넣었습니다.

스크립트를 작성하였다면 public으로 선언한 변수들이 보이게 될 것입니다.

 

Roulette Image 부분에 UI Image를 드래그 앤 드랍 합니다.

마지막으로

생성한 UI Button에 있는 Button Component에 On Click 속성에 + 버튼을 누르고

RotateManager라고 이름 지은 오브젝트를 드래그 앤 드랍 합니다.

(혹은 코드로 onClick Listener를 참조할 수도 있습니다.)

 

​오른쪽에 있는 list에서 RouletteManager(직접 작성한 Script 이름) 안에 RotatingImage(메서드 이름)을 참조합니다.

 

이제 버튼을 클릭할 때마다 onClick 속성에 참조되어 있는 메서드가 실행됩니다.

​

​

이제 유니티를 플레이하고 버튼을 클릭하면 이미지가 돌아갑니다!

​

 

여기까지 골드였습니다.

감사합니다.