[ NGUI ] ScrollView 만들기


유니티로 게임 만들다 보면 스크롤 뷰 쓸때가 정말 많습니다.


인벤토리, 상점, 채팅, 우편 등등등 많이 많이 쓰입니다.


근데 어려워요. 기본 기능은 어렵지 않은데 최적화 할때 어렵습니다...


(NGUI 상위 버전 받으시면 WrapContent가 생겨서 그나마 좀 다행)


여튼 기본적인 스크롤뷰를 하나 만들어 보아요.


그리고 만드는 방법은 여러 종류가 있습니다. 여기에 작성된 방법은


뭐 그중 하나라고 생각하시면 될듯. 


순서는 이렇습니다.


1. 스크롤 뷰를 만든다.(스크롤 뷰 스크립트 추가)


2. 자식들을 정렬하기 위해 그리드(Grid)를 만든다.


3. 그리드 자식으로 스프라이트(Sprite)들을 여러개 만든다.


4. 움직여본다.


자 그럼 하나하나 해보아요.



1. 우선 게임 오브젝트를 만들고 스크롤 뷰 컴포넌트를 추가해 보아요.


(UI Root 만드는거 이전 게시글에 있으니 혹 까먹으신 분들.. 이전꺼 보아요 ㅠㅠ)



2. 그리고 그 하위에 게임 오브젝트 만들고, Grid 추가할께요.



3. 그리고 그 하위에 Sprite도 추가해 봅시다.


Sprite 이미지는 "[ 유니티 NGUI 강좌 ] 최초 만들기. 그리고 Sprite" 에 있습니다.



그리고 우리는 요 이미지를 터치(또는 Press)하여 움직일 것이니 Box Collider도 넣읍시다.


그리고 어떤 ScrollView를 기준으로 움직일 것인지를 결정할 "Drag SCroll View" 스크립트도 추가합니다.


Drag Scroll View에 스크롤 뷰 게임 오브젝트 넣는 곳이 NONE으로 되어있는데, 그냥 두세요.


Play 하면 자동으로 채워집니다.



이제 스크롤뷰 테스트를 위해 방금 만든 스프라이트 오브젝트를 여러개 복사 합니다. 


단축키는 Ctrl + D. 이것도 엄청 자주 쓰임. 꼭 외워두시길!



그럼 요래 어려개 만들었네요. 더 만들어도 되세요.



4. 지금까지 한걸 보시죠.


응? 왜 한개야.? 한개가 아니라 정렬이 안되서 겹쳐 있네요.


정렬을 시켜 줍시다. (그래서 아까 Grid 넣은거임)



5. 정렬위해 그리드 게임 오브젝트를 선택하세요.


지금 이미지에 안보이는데, Cell Width 를 120 정도? 로 하시게요. 


우리 스프라이트가 100 이니까 120 간격으로 정렬 해보아요.


그리고 UI Grid 우측에 톱니 바퀴 눌러서 Execute를 뿅 눌러주세요. 화면 보시면 나란히 나와있을 꺼에요.



6. 이제 스크롤 뷰를 눌러서 Reset Clipping Position을 한번 눌러줍시다.


그러면 Clipping 영역 기준으로 딱 붙어서 보여요.



요렇게 나오지요. 근데 왜 3개만 보입니까.


그래서 이제 더 보이게 할려구요.




7. Clipping 영역을 설정해 보아요.


스크롤 뷰 게임 오브젝트를 선택하시고, 


UI Panel의 Depth는 1로 바꿉시다. (UI Root에 Panel이 같은 0이라.. 같으면 안되는건 아니지만.. 안되요!!)


Clipping은 Soft Clip으로 하십시다. Clipping 방식입니다. 


* Alpha Clip 도 있습니다. 해보시면 무엇인지 아실 꺼에요.


그런데 NGUI 다음 버전에서 Alpha Clip이 사라졌습니다. 그래서 Soft Clip으로 설명 드려요~


그리고 Size를 한.. 500 주세요. 사실 마음대로 하세요. ㅎㅎ


그리고 Reset Clipping Position 을 다시 해줍시다.



8. 그럼 이렇게 나오네요. 


마우스로 드래그 해보세요. 움직일껄요?? 네 움직입니다.



여기에서 정렬을 위해 Grid를 사용했습니다. Grid 대신에 사용할 수 있는게 Table입니다.


Grid는 고정 사이즈들의 아이들이 모일 때에 사용해요.

  ㄴ 여기 예 에서도 Grid 자식의 사이즈가 다 같죠? 이럴때 사용합니다.


Table은 자식들의 사이즈가 각각 다를 때 사용합니다.

  ㄴ 예를 들어 Table 자식으로 100 사이즈, 500 사이즈 등등 이렇게 다를 때 자동으로 정렬 해줍니다.


이 게시글에서 좌/우로 이동하게 했는데 ScrollView 보시면 Horizontal이 있습니다. 


이거 Vertical로 바꾸면 위/아래도 되세요. ㅎㅎ(Grid도 Vertical로 바꿔야겠죠)


이게 대강 기본적인거 했으니 다음에는 실전으로 하나 간단한거 만들어 보아요.

저작자 표시 비영리 변경 금지
신고
Posted by 플룬

댓글을 달아 주세요

  1. 정아무개 2015.09.17 22:16 신고 Address Modify/Delete Reply

    최근에올라온 XML잘보았습니다. 보고 따라하면서 풀리지 않는것이 있어 질문드려요.
    스크롤뷰에 있는 아이콘을 하나 선택시 장착할지 판매할지의 확인창을 띄우고 버튼을 집어너어봤는데
    다른 위치에서는 버튼이 잘작동되는데 스크률뷰 위에서는 버튼이 작동하지 않더라구요 혹시 제가 뺴먹은 부분이 있나요?

    • 플룬 2015.09.20 12:30 신고 Address Modify/Delete

      뎁스 문제일꺼라 생각됩니다.
      아마도 스크롤뷰안에 있는 아이콘에 버튼이 있을 껀데
      아이콘과 버튼 둘 다 Box Collider가 있을꺼에요.
      아이콘 뎁스가 1이라면 버튼 뎁스를 2로 올려주세요.
      안되시면 댓글 달아주세요 ㅎㅎ

  2. 플룬 2015.09.17 22:18 신고 Address Modify/Delete Reply

    그런듯 싶어요. 제가 이번주에 인벤토리 및 판매기능 넣어서 올려드릴게여

  3. 알미 2015.09.21 15:53 신고 Address Modify/Delete Reply

    플룬님 글읽구 인벤토리 구현하는데 도움을 많이 받고있는 학생입니다.
    좋은 정보 감사드려요 판매기능의 정보도 알려주시면 감사합니다

    • 플룬 2015.09.22 10:08 신고 Address Modify/Delete

      자료 갱신이 너무 늦어서 ㅠㅠㅠㅠ
      판매도 못지키고 ㅎㅎ;; 추석 전 후로 꼭 올릴께요 ㅎ

  4. 알미 2015.09.22 10:39 신고 Address Modify/Delete Reply

    아니예요 여기서 좋은 공부 하구 도움 많이 받아서
    부탁드리는게 죄송하죠 감사합니다 ^-^

  5. 알미 2015.09.22 10:40 신고 Address Modify/Delete Reply

    지금 RPG 만들고있는데.. 인벤토리가 진짜 생각보다 엄청나게 방대하네요...
    연결고리도 많고... ㅠ_ㅠ 초보라 그런가.. 꽉꽉이상태..로.. 인벤에서 완전 멍..때리네요...

    • 플룬 2015.09.22 10:48 신고 Address Modify/Delete

      원래 인벤토리랑 스킬 그리고 전투. 요렇게가 좀 복잡해요 ㅎㅎ
      지금 기본 인벤토리 중이니 기본 다 되면 좀 깊이 가보아요 ㅎㅎ

  6. 알미 2015.09.22 15:24 신고 Address Modify/Delete Reply

    취업목적으로 포폴을 작성하고있는데..
    뭐랄까.. 현업을 뛰는 친구들한테 보여주니까
    게임같지 않다는 평가를 받았네요.. 리소스를 좀 긁어와서 쓰긴했지만.. 전투시스템이나
    특히 인벤쪽은 진짜 헷갈리네요.

    • 플룬 2015.09.23 09:57 신고 Address Modify/Delete

      게임같지 않다는 평가 <= 기죽지 마세요~!
      친구들은 눈에 보이는걸 보고 말한거에요.
      리소스만 바껴도 우와~ 할껄요? ㅎㅎㅎ

  7. 사력 2016.12.16 16:54 신고 Address Modify/Delete Reply

    플룬님 안녕하세요
    혹시, 아직도 블로그 하시는지 모르겠지만, 질문 하나 드려도 될까요?