(NGUI) Grid기능으로 볼륨조절 버튼 만들기

2016. 8. 10. 23:11

https://blog.naver.com/nagne2011/220784719566

- 28 - Unity - (NGUI) Grid기능으로 볼륨조절 버튼 만들기

 

 

 

 

움짤로 만들어봤습니다...

 

 

좌우 화살표를 이용하여 게이지를 한칸씩 조절 하는 방법입니다

 

 

 

일단 배경으로 쓸 박스를 만들어주고 화살표도 만들어 줍니다

화살표는 간단하게 UIButton을 붙여줬습니다

 

Manager쯤으로 사용될 빈 오브젝트 하나 만들어주고

node로 사용할 한칸짜리 이미지도 만들어서 붙여줍니다

 

이렇게요

 

그리고 그 노드를 10개로 복사해줍니다

 

그다음엔 Manager로 사용할 빈 오브젝트에 NGUI의 Script인 UIGrid를 붙여준다음

 

 

Arrangement를 Horizontal(수평)으로 바꿔줍니다

 

쎌의 너비는 17칸으로 합니다

 

17로 설정한 이유는 여러번 해보니까 이게 제일 보기좋아서 그런게 아니라

화살표 사이의 거리가 170이고 각 node의 가로길이가 10이니까 170에서 10개의 node길이 100을 뺸뒤

남은 70을 node사이의 간격의 갯수인 11로 나누면 대략 7이 나오는데

이때 가로길이 + 간격길이 = 10 + 7 입니다

 

 

 

짜잔

 

10개의 node가 설정한 간격 17만큼을 두고 Horizontal방향으로 정령되었습니다

 

...위치가 이상하군요 Pivot을 Center로 바꿔줍시다

 

만약 빈 오브젝트의 위치가 다른곳에 있다면, 오브젝트 위치에 맞게 Pivot을 조절하면 됩니다

 

 

그럼 배열 끝!

 

 

 

이제 스크립트를 조작하여 버튼을 활성화 시킵시다

 

먼저 선언을 해줍시다

 

 

1 2

public int currentNum = 10;     public GameObject[] node;

cs

 

각각 현재 볼륨으로 사용할 int값과

 

node를 담아둘 GameObject 배열을 만들어줍시다

 

 

 

현재 볼륨 숫자는 10이고

 

node는 총 10개입니다

 

 

1 2 3 4 5 6 7 8 9

void Start ()      {         for (int i = 0; i < 10; i++)          {             string str = string.Format("node_{0}", i);             node [i] = this.transform.FindChild (str).gameObject;         }       } Colored by Color Scripter

cs

 

그리고 Start()함수에 ( Wake()함수를 사용하셔도 됩니다)

 

string,Format을 이용하여 각 노드의 이름에 맞는 string을 구해서

빈오브젝트의 자식들 중 string에 맞는 이름을 가진 게임오브젝트를

node[0]부터 [9]까지 차곡차곡 담아줍니다

 

 

물론 위와 같이 node의 이름을 미리 정렬시켜 둬야 합니다

 

 

Play 버튼을 눌러보면... 차곡차곡 배열에 담긴 node를 볼 수 있습니다.

 

이제 감소, 증가 버튼을 만들어 봅시다

 

1 2 3 4 5

if (currentNum < 10)      {     currentNum++;     node [currentNum].SetActive (true); } Colored by Color Scripter

cs

 

처음엔 이렇게 간단하게 만들어서 버튼을 누를때마다 현재 볼륨에 맞는 노드를 꺼버리거나, 켜버리는 방법으로 했었는데

 

이럴 경우 현재 볼륨에 맞게 갱신이 안되고 한박자 느리게 배열이 됩니다

 

그래서 아래처럼 더욱 세부적으로 짜줍시다

 

 

먼저 볼륨 Up 버튼입니다

 

 

1 2 3 4 5 6 7 8 9 10 11

public void BtnNumUp()     {         if (currentNum < 10)          {             currentNum++;         }         for (int i = 0; i < currentNum; i++)          {             node [i].SetActive (true);         }     } Colored by Color Scripter

cs

 

 

아까랑 비슷합니다만

이번엔 현재 번호에 맞춰 0번~현재번호에 해당하는 모든 node를 활성화 시켜줍니다

 

볼륨 down버튼도 마찬가지 입니다

 

 

1 2 3 4 5 6 7 8 9 10 11 12

public void BtnNumdown()     {         if (currentNum > 0)          {             currentNum--;         }           for (int i = currentNum; i < 10; i++)          {             node [i].SetActive (false);         }     } Colored by Color Scripter

cs

 

 ㅇ

다만 이번엔 현재 번호~10번에 해당하는 모든 노드를 비활성화 시킵니다

 

 

 

마지막으로 만든 함수를 UIButton에 연동시켜주면 됩니다

 

끝!