UMG Loop Scroll Box

UMG Loop Scroll Box

1 Overview

This article was designed to provide users with a basic overview of the features and functionality of UMG LoopScrollBox.

2 Introduction

UMG Loop Scroll Box is a scroll box that support an infinite content list scrolling within limit widget items. The idea is to reuse widget items outside the scrollbox viewport. In this way, the performance of scrollbox will be improved significantly for the content list with large size.

3 Quick Start

Following blew steps, you will use this tool quickly.

(1) Create your own item widget

First, you should create your own widget item for scrollbox.

ExampleItem

An example is given in blueprint “BP_TestItemA” and “BP_TestItemB”, located in UMG folder.

Tip: For multiple column scrollbox, you can create multiple column content in one widget.

(2) Add LoopScrollBox to your main widget

Create your own widget and add “BP_LoopScrollBox”, as follow.

ExampleItem

Set the property “Orientation” to Vertical or Hirozontal, and set ShadowStyle for scrollbox.

An example class is given in UMG folder, named “BP_LoopScrollBoxHorizontalTest”.

(3) Initialize LoopScrollBox and bind events

After step (2), you have to call the function “InitializeScrollList” of LoopScrollBox to initialize the properties as follow, including template item class (step (1)), viewport size and item size. Also, you have you bind “RefreshItemContent” event for content refreshing.

InitScroll

For other events, you can bind according to your own requirement.

  • OnScrollToEnd : call while scrolling to the end.

  • OnScrollToStart: call while scrolling to the start.

  • OnItemExceedToViewport: call while number of content list items exceeds outside viewport.

  • OnItemNarrowToViewport: call while number of content list items narrows inside viewport.

(4) Commom operations of LoopScrollBox

There are several common operations of LoopScrollBox given below.

Operations

  • OnAddContentListItemAtLast: When you add an item to your content list, you have to call this function.

  • OnRemoveContentListItem: When you remove an item of your content list, you have to call this function.

  • OnModifyContentListItem: When you modify item content of your content list, you should call this function to refresh the shown content.

  • ScrollToEnd: Call this function to scroll list to the end.

  • ScrollToStart: Call this function to scroll list to the start.

  • ScrollToTarget: Call this function to scroll to target index of content list.

(5) Play your game

Add your main widget to viewport in level blueprint.

level

Click “Play” button in Editor, you will see what you want.

An example map is given in Maps folder, named “L_ScrollHorizontalDemo”.

4 Support

In the event you are unable to find the information you seek, feel free to contact stephen.coderx@gmail.com.

References

[1] Unreal Engine API

[2] UE4 Marketplace

[3] Quick Logo Designer

[4] My UE4 Marketplace Assets

Vistied:
Share: Twitter Facebook LinkedIn