[UE4] Scroll Box

언리얼로 스크롤을 구현하기 위해서는 스크롤을 사용할 블루프린트와 스크롤에 들어갈 블루프린트.

위 2가지가 필요하다.

스크롤을 하기 전에 UI를 만들어야 하는데, UI를 하는 방법은 이전 포스트를 확인하고 오길 바란다.

일단 스크롤에 들어갈 아이템을 먼저 생성해보도록 하자.

User Widget으로 블루프린트를 생성한 후, 창을 열어보자.

Widget에는 기본으로 Canvas Panel이 생성되어 있는데, 스크롤에 추가하기 위해서는 판넬을 지워야한다.

판넬을 지운 후, Scroll Box를 추가해주자.

추가한 후에 Hierarchy 창은 다음과 같을 것이다.

이제 생성한 Scroll Box 밑에 원하는 내용을 추가하면 된다.

예시를 위해 간단하게 Button과 Text Block를 추가해보겠다.

그리고 Text Block에서 Content 탭의 Text에서 바인딩을 눌러 함수를 만들어준다.

Graph로 넘어가지면 Text Type의 변수를 선언해주고, 변수를 Return Node에 연결해주면 다음 사진 처럼 될 것이다.

스크롤에 추가할 아이템을 만들어 주었으면, 이제 Main Widget을 열어 Scroll Box를 생성한다.

생성한 Scroll Box를 변수로 생성한 후, 원하는 위치에 스크롤 박스를 위치시키면 된다.

스크롤 박스가 너무 크면 추가된 아이템을 스크롤로 확인할 수 없게 되니 크기에 주의할 것.

변수로 생성하는 것은 Details 탭의 가장 상단의 Is Variable을 체크하면 된다.

스크롤 박스를 위치시켰으면 Graph로 넘어가서 아이템을 추가해보자.

이전에 만들었던 아이템의 Text Block의 내용을 채우기 위해, Text Type의 변수를 배열로 생성하자.

생성 후에 스크롤에 추가할 개수만큼 변수의 기본값을 생성한다.

변수를 생성한 후, Compile & Save를 해야만 기본값을 설정할 수 있다.

Scroll Box에 아이템을 추가하는 노드는 Add Child이다.

이전에 변수로 생성했던 Scroll Box와 추가될 Widget을 전달하면 스크롤 박스로 생성된다.

Create Widget을 통하여 아이템으로 사용할 Widget을 생성한 후, Scroll Box에 Add Child 해주면 된다.

Compile & Save 후 실행하면, 스크롤 막대와 함께 위치했던 곳에 버튼들이 스크롤로 생성될 것이다.

물론 휠로도 되고, 막대를 드래그해도 스크롤이 움직인다.