코드노잉이 영역을 누르면 첫 페이지로 이동 Show 코드노잉 블로그의 첫 페이지로 이동 코드노잉 페이지 맨 위로 올라가기 코드노잉 blog of a developer who is studying hard-working
유니티 무한 스크롤 UI 구현 프로젝트(infinite scroll unity)
반응형 유니티에서 UI를 사용할때 무한히 내려가는 스크롤 리스트가 필요했습니다. 참조 프로젝트를 찾다가 tsubaki 라는 분이 만들어놓은 무한스크롤 소스를 찾을 수 있었습니다. 구글에 무한스크롤 소스를 검색했을때 노출이 별로 없는것같아서, 소개해드립니다. 아래 보시면 무한스크롤이 되는 모습을 확인할수있습니다. 소개페이지이긴 한데 일어라 알아먹긴 힘드네요. 그림만 보시고 원하는 기능이시면 참고하시면 되겠습니다. UnityのuGUIで無限にスクロール出来るスクロールビューを作る - テラシュールブログ 使い方 アイテムの内容調整 制限付きスクロールビューのやり方 以前UnityのuGUIでスクロールビューを作る方法を紹介しました。 UnityのuGUIでスクロールビューを作る - テラシュールブログ UnityのuGUIでスクロールビューを作る - テラシュールブログ 今度は無限にスクロールできるビューを作成します。 こんな感じです。 仕組みは、スクロールした際に アイテムが反対側に補充される仕組みです。 使い方 作り方に関してですが、ちゃんと整理できていないので癖のある作り方をします。 tsubaki/ tsubakit1.hateblo.jp  깃허브 링크입니다. 별하나 찍어주시고 사용하시면 되겠습니다. 정리가 잘 되어있어서 한 번 따라 만들어보셔도 좋을것같습니다. 이상입니다 tsubaki/Unity_UI_Samples Contribute to tsubaki/Unity_UI_Samples development by creating an account on GitHub. github.com 사용 예저는 랭킹을 구현하려고 사용했습니다. 제공된 소스에서 조금 수정해서 원하는 등수를 찾을수있도록 했습니다. 트윈은 애니메이션 커브로 구현하였습니다. 제공되는 소스는 기본적으로 오브젝트풀을 사용하고 있었습니다. 반응형 저작자표시
이름 암호 운영자에게만 공개
다른 글 더 둘러보기
코드노잉 블로그의 첫 페이지로 이동 코드노잉 티스토리툴바안녕하세요 골드입니다. 오늘은 Unity UGUI ScrollView를 사용하여 List를 구현해보려고 합니다. 어디서든 ScrollView는 그 쓰임 빈도가 상당히 높은 편입니다. Unity로도 다양한 어플리케이션 제작이 가능합니다만 아마도 랭킹 리스트나 아이템 리스트 등을 보여주려면 ScrollView가 필요하기 마련입니다. 다만 ScrollView를 처음 사용한다면 익숙치 않기 때문에 그 사용법이 조금은 어려울 수도 있습니다. 1. ScrollView Components 세팅 먼저 ScrollView를 생성하겠습니다. Hierachy View에서 마우스 우클릭 UI -> Scroll View로 생성할 수 있습니다. 생성된 Scroll View 오브젝트에 Rect Transform을 수정합니다. 저는 전체 화면으로 만들었지만, 필요에 따라 사이즈를 조정하면 되겠습니다. 왼쪽에 stretch라고 써 있는 사각형을 클릭하고 Alt + Shift를 누른 상태로 오른쪽 아래 사각형을 클릭합니다. 그럼 Scroll View가 화면 전체를 덮을 것입니다. (전체 화면으로 사용하지 않는다면 적절히 조정하기 바랍니다.) (stretch로 늘리지 않고 단순히 값을 지정할 수도 있고) (늘린 후 margin을 줘서 사용할 수도 있습니다.) 저는 수직 방향만 필요하기 때문에 수평 Scroll Bar는 삭제하겠습니다. Scroll View에 있는 Scroll Rect 컴포넌트에서도 Horizontal은 체크를 해제했습니다. Content 속성은 스크롤될 UI요소의 Rect Transform에 대한 참조입니다. - 리스트 아이템들은 모두 참조하고 있는 Content의 자식이어야 합니다. Movement Type 속성은 스크롤 옵션입니다. - Elastic은 가장자리에서 스크롤될 때 약간의 탄성이 추가되어 움직였다가 다시 제자리로 돌아옵니다. - 밑에 Elasticity는 탄성 정도를 나타냅니다. - Clamped는 가장자리에 딱 맞게 스크롤됩니다. Scroll Sensitivity 속성은 말 그대로 스크롤 민감도입니다. Viewport 속성은 리스트가 보여지는 사각 트랜스폼입니다. 리스트들은 Viewport의 Rect transform영역 안에서만 보이게 됩니다. Vertical Scrollbar 속성은 Scroll bar를 지정하는 속성입니다. Visibility 속성을 설정해서 리스트 수에 따라서 자동으로 생성(혹은 제거)를 할 수도 있고, 리스트 수에 상관없이 보이게 할 수도 있습니다. 더 자세한 설명은 https://docs.unity3d.com/kr/current/Manual/script-ScrollRect.html 이 곳을 참고하세요. 스크롤 사각 영역 - Unity 매뉴얼 공간을 많이 차지하는 콘텐츠를 작은 영역에 표시해야 할 때 스크롤 사각 영역을 활용할 수 있습니다. 스크롤 사각 영역(Scroll Rect)은 콘텐츠를 스크롤하는 기능을 제공합니다. docs.unity3d.com 다음으로 Scroll View -> Viewport의 자식 오브젝트인 Content로 가서 컴포넌트를 추가하겠습니다. Add Component를 누르고 Vertical Layout Group을 추가합니다. 그리고 Content Size Fitter를 추가하겠습니다. Vertical Layout Group Content의 자식인 item들의 위치를 자동으로 조정해주기 위해서 Vertical Layout Group 컴포넌트를 추가했습니다. Padding 속성은 item 내에 적용되는 간격입니다. 아이템 안에 있는 텍스트나 다른 오브젝트들이 경계선에 딱 달라붙지 않도록 간격을 줄 수 있습니다. Spacing 속성은 item들의 간격입니다. Control Child Size 속성은 레이아웃 그룹이 자식들의 너비와 높이를 제어할지 결정합니다. - 저는 Scroll View 너비와 item들의 너비를 맞추기 위해 체크했습니다. 마찬가지로 자세한 설명은 이 곳을 참고하세요. https://docs.unity3d.com/kr/2019.3/Manual/script-VerticalLayoutGroup.html 수직 레이아웃 그룹 - Unity 매뉴얼 수직 레이아웃 그룹 컴포넌트는 자식 레이아웃 요소를 쌓습니다. 요소의 높이는 다음 모델에 따라 각각 최소, 선호, 가변 높이를 기준으로 결정됩니다. docs.unity3d.com Content Size Fitter 생성되는 item들에 의한 Content Object의 크기를 맞춰주기 위해 Vertical Fit을 Preferred Size로 설정합니다. item이 생성될 때마다 크기가 자동으로 맞춰집니다. https://docs.unity3d.com/kr/2018.4/Manual/script-ContentSizeFitter.html 콘텐츠 크기 피터 - Unity 매뉴얼 콘텐츠 크기 피터는 자체 레이아웃 요소의 크기를 제어하는 레이아웃 컨트롤러의 기능을 수행합니다. 크기는 게임 오브젝트의 레이아웃 요소 컴포넌트에서 제공하는 최소 또는 기본 크기에 따� docs.unity3d.com 2. items를 Instantiate하기 위한 스크립트 작성Init()으로 정의했습니다. 초기화 부분도 중요하지만, 여러분의 코드와는 맞지 않을 가능성이 높기때문에 신경쓰지 않으셔도 됩니다. 중요한 건 Instantiate를 Content 밑에 자식으로 해야 한다는 것입니다. 또한 높이 값을 정의한 yValue 변수를 선언해서 여러분 item의 높이 값 만큼 빼주시면 List안에 모든 item들이 잘 보일 것입니다. 플레이 해보겠습니다. List가 잘 만들어졌습니다. 10만큼 잘 떨어져 있는 것도 볼 수 있습니다. -------------------------------------------------------------------------------- + 추가로화면 전체가 아니라 상단 부분에 공간을 남기고 싶다면, Scroll View의 Rect Transform 컴포넌트에서 Top값을 0이 아닌 적당한 양수 값을 넣어줍니다. 상하좌우 모두 마찬가지입니다. 화면에 딱 맞게 채울수도 있지만, 각각에 해당하는 곳에 양수값을 설정하면 화면의 경계에서 떨어진 ScrollView를 만들 수 있습니다. 상단 부분이 비어있는 것을 볼 수 있습니다. 저 부분에 다른 기능이 있는 버튼이나 로고 등을 추가하면 좋을 것 같습니다. 여기까지 골드였습니다. 감사합니다. 참고자료 : http://gyanendushekhar.com/2019/08/11/scroll-view-dynamic-content-size-unity-tutorial/ |
유니티 재사용 스크롤뷰 - yuniti jaesayong seukeulolbyu
관련 게시물
저작권 © 2024 ko.paraquee Inc.
