안녕하세요~ ITSkeleton 입니다.
요즘 글이 뜸했는데 일과 블로그 글을 동시에 하려고하니 하기가 힘드네요.
오늘은 NGUI를 사용하여 Scroll View를 사용하는 방법에 대하여 설명해 드리겠습니다.
NGUI Scroll View 안에서도 많은 기능들이 있기 때문에 간단하게
좌,우로만 스크롤 되는 뷰를 만들어 보겠습니다.
일단, NGUI를 설치해 주셔야합니다.
설치 방법에 대해서는 블로그가 많기 때문에 따로 글을 쓰지는 않겟습니다.
설치를 모두 끝내셧다면,
메뉴 중에서 NGUI가 보이실거에요! 그걸 클릭해 줍니다.
NGUI -> Create -> 2D UI 를 눌러서 UI Root 라는 객체를 생성해줍니다.
자, 다음은 위 사진처럼 NGUI -> Create -> Panel 을 선택해서 Panel을 생성해 줍니다.
여기서 패널에 코드를 붙여 주어야 합니다.
위 그림처럼 Add Component를 클릭하여 Scroll View를 검색한후 컴포넌트를 추가해줍니다. 그럼 위의 그림처럼 스크롤 뷰가 추가됩니다. 저희가 할부분에서는 딱히 건드려주어야 할부분은 없습니다.
자 다음은 Empty GameObject를 하나를 만들어 줍니다.
그 이름을 Sort로 하겟습니다. 이 오브젝트는 안에 들어갈 버튼들을 정렬 시켜주는 역할을 하게 될겁니다.
자 새로만든 오브젝트에 Add Component를 이용하여
Grid 검색후 추가, Center On Child 를 검색후 추가를 해줍니다.
여기서 중요한점은 Grid 에
Arrangement 와 Cell Width, Cell higt 로 주로 정렬을 해줍니다.
정렬하는것은 좀더 뒤에서 적겟습니다.
다음으로 할것은 버튼을 생성해 주어야겟죠?
만든 Plane을 클릭한후
NGUI -> Create -> Sprite 를 생성해 줍니다.
물론 굳이 Sprite를 생성할 필요는 없지만 편리함을 위해 Sprite를 생성했습니다.
/////이미지
자 Sprite를 생성한후 추가해주어야 할 소스코드가 존재합니다.
Button 역할을 해야하기때문에 Button 의 소스가코드가 필요하겟지요?
생성된 Sprite에 Button 코드와 Drag Scroll View 코드를 추가해 줍니다.
위 사진처럼 Component를 추가하셧다면, Ctrl + D로 Sprite를 여러개 복제해줍시다!
4~5개정도 복제하셧나요?
이제 Sort 를 선택해서 Cell Width 값을 설정해주면 옆으로 쭉~ 나열됩니다! Horizontal로 되어 있으니까요!
자, 아직 해주어야 할것이 남아 있습니다.
버튼이 작동하기위해선 선택이 됫는지 안됫는지 알아야 하기때문에
Collider가 반드시 붙어있어야 합니다.
생성한 Sprite(복제한것 포함) 해서 모두 선택해주신뒤 위에 있는 사진처럼 NGUI -> Attach -> Collider 를 추가해 줍니다.
그럼 모두 Collider가 Component에 추가가 됩니다.
자, 여기까지 하셧다면 실행버튼을 눌러서 작동이 잘되는지 확인해 보세요!
--다음장에서는 지금한 작업에서 버튼 크기조정, 색조정, 및 여러 작업에 대한 내용을 강의 하도록 하겠습니다.
만약 실행이 안된다면 Comment 달아주신다면 최대한 답장해 드리겠습니다 .
이상~ ITSkeleton 이였습니다. 감사합니다.
유튜브 영상
https://www.youtube.com/channel/UCuhamVaQCtATPaEdYX-kM5Q