UMG Enhanced Loop Scroll Box


Marketplace Link ↗   |   Get ZIP ↗

UMG Enhanced Loop Scroll Box

1 Overview

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

2 Introduction

UMG Enhanced 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 and implement the interface “LoopScrollBoxInterface”. The interface function “GetSize” should return the widget item size.

ExampleItem

An example is given in blueprint “BP_TestItemA” and “BP_TestItemB”, located in Example/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

Properties:

  • Orientation: Vertical or Hirozontal.

  • Scroll Sensitive: Sensitivity of scrollbox, ranged from 0 to 1.

  • DecelerationRate: Define speed of deceleration of scrolling, ranged from 0 to 1.

  • Inertia: If open inertial of 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.

  • OnShowBeginIndicator: call while scrolling over the start and total size of items exceeds outside viewport.

  • OnHideBeginIndicator: call while reaching the start.

  • OnShowEndIndicator: call while scrolling over the end and total size of items exceeds outside viewport.

  • OnHideEndIndicator: call while reaching the end.

  • 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 FAQ

(1) How to click button inside ScrollBox?

You can set the “Click Method” and “Touch Method” under Interaction tab of the Button, as follow.

level

5 Support

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

References

[1] Unreal Engine API

[2] UE4 Marketplace

[3] Quick Logo Designer

[4] My UE4 Marketplace Assets

Vistied:
Share: Twitter Facebook LinkedIn