Scroll View
SmartUI Dialog Behavior operation and ACEs.
Scrollviews are composed of the following parts:
At all times, the coordinates of the content are calculated from the bounding quad. This means the origin point is not relevant for calculating the bounds where the content can be displaced. Rotating the content has no effect on the bounding quad; it just results in occupying a larger area for the calculations.
The content container can have any type of object in its hierarchy. Child objects don't have to use a Smart UI behavior. 🎉
The way a ScrollView works is by masking all the objects inside the content container. This process requires you to use ScrollViews in a single, separate layer for each ScrollView. Nevertheless, to semi-automate this process, ScrollViews can create a dynamic layer on top of the one holding the component to render the content.
All the content is then masked to render within the ScrollView container. To mask the child objects, the ScrollView changes each child's blend mode to source-atop
rendering, thereby enabling the content layer's transparency
and force-own-texture
properties. The layer configuration, creation, and disposal are automatically handled by the plugin. If the ScrollView object is destroyed, the dynamic layer is removed instantly.
Dynamic layers do not support 3D layers. If you want to render the ScrollView in a 3D layer, you have to manually set it up and arrange the objects' Z-Elevation to render correctly. Make sure the 3D layer's draw order is set to Z-Order.
ScrollViews generate a dynamic layer to render the content by default. You can turn this feature off to adjust it to your needs. This is useful when you want the view to render the content in a 3D layer. In that case, place the ScrollView in a separate 3D layer, and manually enable the transparency
and force-own-texture
properties.
By design, ScrollView does not arrange the scrollbars automatically; you will have to place them manually, keeping in mind the conditions below.
For the horizontal scrollbar, the minimum value is placed at the left-most edge of the bar, and subsequent increments will push the bar to the right-most edge, to be consistent with the ScrollView orientation. The preferred angle for this component should be 0º.
For the vertical scrollbar, the minimum value is placed at the top of the bar, and subsequent increments will push the bar downwards. The preferred angle for this component should be 90º.
⚠️ Rendering Limitations ⚠️
Construct doesn't have the capability to create additional viewports or cameras to render different sections of a scene. To work within this limitation using only built-in and official features, the Scrollview utilizes a dedicated layer for content. This means you will need to manually manage rendering if you want objects to appear above the Scrollview, such as additional dialog windows that overlap and cover parts of it.
Construct is also limited in rendering HTML and texture-like objects within the same layer, as they scale differently and may cause unwanted behavior. Unfortunately, this issue cannot be resolved by addons without hacking the engine. To avoid odd behaviors, it is recommended to use texture-only objects within the same layer. However, the Text plugin can still be used effectively.
Rendering in 3D
To use the ScrollView in a 3D layer, you must set it up manually and make some small adjustments to the content container.
You will use two 3D layers to compose your ScrollView. The bottom-most layer (Layer 0) will hold the scrollbars that control the ScrollView. This layer uses a normal rendering mode. Next, place the ScrollView component and the content component with its objects in the next layer (Layer 1). This layer must have the Force Own Texture
and Transparency
attributes enabled. Notice that the content container and all its children are not at the same Z-Elevation level; they must be one Z-Elevation level above the ScrollView container level to render correctly. Both layers must use Z-Order-based rendering to work correctly.
You can also embed a 3D ScrollView in a Dialog. For that, the Dialog object must be in the same layer as the scrollbars and must be the parent of the ScrollView container
📺 Video Demo
Basic Setup - Tutorial Video
Properties
Property | Description |
| Enables or Disables the ScrollView and all its children. |
| Index of the ScrollView within layout. Used for focusing the elements in the sequence order. |
| Allows interactions for the component even if the object is invisible. |
| Marks if the component can have the focus. |
| Enables the component to darken a bit when its state is Disabled or when it's focused. Auto-Color is meant to provide a quick identification of the component state. For more specialized customizations, use the component events and disable this check. |
| Handle the Scrollview components in a dynamic layer. |
| Unique name string for identifying the selected ScrollView. |
| A container object that uses the Smart UI Container behavior. |
| Component name of the vertical scrollbar. |
| Component name of the horizontal scrollbar. |
| Indicates which axes can be scrolled. When horizontal scrolling is set, the wheel moves along X-axis, otherwise it moves along Y-axis. |
| Indicates if the scrollview supports the swipe gesture. |
| Indicates if intertia is applied when swiping |
| Step size in pixels when scrolling using the mouse wheel. |
Smart UI ScrollView behavior groups UI components, provides focusing abilities and default interactions to navigate within the ScrollView and its children components that uses Smart UI behaviors, and handles cascading Enabling/Disabling events. It also responds to pointer interactions prioritizing by zIndex.
Actions
Set Enabled
Set Enabled
Disable/Enable the ScrollView
Parameter | Description |
| Enabled/Disabled |
Set Name
Set Name
Sets the name of the ScrollView.
Parameter | Description |
| Name of the component |
Set Sequence
Set Sequence
Sets the sequence index to influence the selection of components.
Parameter | Description |
| Sequence index value. E.g. Indexes values of 0 are processed before indexes values of 1 and 2. |
Set Focusable
Set Focusable
Sets the component to be able to receive the focus
Parameter | Description |
| Flag to allow the component to be focused. |
Set Focus
Set Focus
Request the focus for this ScrollView
Focus First Element
Focus First Element
Request the focus for the first interactable element of the ScrollView.
Focus Last Element
Focus Last Element
Request the focus for the last interactable element of the ScrollView.
Set Invisible Component
Set Invisible Component
Sets whether the component should be processed when it's invisible. Opacity is not taken in consideration.It doesn't affect the visibility attribute of the object, you are responsible of turning it visible or invisible when needed.
Parameter | Description |
| Set if the component processed even if it's invisible: True/False |
Scroll To Object
Scroll To Object
Scrolls the view to the object coordinates ignoring the movement-type restriction.
Parameter | Description |
| Instance of the object to scroll to |
Scroll To Position
Scroll To Position
Scrolls the view to the given coordinates ignoring the movement-type restriction. Relative coordinates start at the top-left corner of the content object bounding quad. Y-positive downwards, X-positive right.
Parameter | Description |
| Absolute X-Axis coordinate |
| Absolute Y-Axis coordinate |
| Coordinate system type |
Set Scroll Step
Set Scroll Step
Sets the size in pixels of the step when using the mouse wheel.
Parameter | Description |
| Step size in pixels. |
Set Inertia
Set Inertia
Sets the component inertia feature enabled or disabled
Parameter | Description |
| Flag to allow the component to use inertia. |
Set Swipe
Set Swipe
Sets the component swipe gesture support enabled or disabled
Parameter | Description |
| Flag to allow the component to use the swipe gesture. |
Set Movement
Set Movement
Indicates which axes can be scrolled. When horizontal scrolling is set, the wheel moves along X-axis, otherwise it moves along Y-axis.
Parameter | Description |
| Type of scrolling/movemement allowed for the content. Scroll-To-Position and Scroll-To-Object actions ignore movement type. |
Conditions
Is Enabled
Is Enabled
Returns true if the ScrollView is enabled
Is Invisible Component
Is Invisible Component
Returns true if the ScrollView is configured as an invisible component.
Compare Name
Compare Name
Returns true if the component's name equals the parameter
Parameter | Description |
| Name to compare with the component picked. |
Is Focused
Is Focused
Returns true if the ScrollView has the focus
Has Control
Has Control
True if the ScrollView has the control to navigate over components.
On Focus
On Focus
Triggered when the ScrollView gets the focus
On Focus Lost
On Focus Lost
Triggered when the ScrollView loses focus
Is Inertia Enabled
Is Inertia Enabled
Returns true if the ScrollView inertia feature is enabled
Is Swipe Enabled
Is Swipe Enabled
Returns true if the ScrollView swipe gesture support is enabled
Expressions
Name
Name
Component name
DynamicLayer
DynamicLayer
Dynamic layer name.
(c) Pixel Perfect Studio 2024
Last updated