Adding Scrollable Containers with Unity's ScrollRect
tldr: finally lets us add scrollable containers, hopefully killing the Pages meta. here's a demo of it working in my unity recreation of the rust CUI system https://streamable.com/x476wy
Adding Scrollable Containers Allows us to Create Cleaner UIs & Remove Strain from the Server. its a versatile component that can be used on anything from lists, to sidescrollers or to create dragable components
The Breakdown
in order to create a scrollable component 3 things are needed: the ScrollRect, the Mask & the Content. this component creates all of them while exposing most values to the json object,
this component creates a child game object for the content and redirects any children to be parented under this content object, this is required for the ScrollRect to work
For Added Performance it also adds a new Canvas to the Object containing the ScrollRect, as this will reduce redraws of the entire UI when the content gets scrolled or moves
this is especially important when using the inertia or Elastic Setting, as it will continue to create redraws every frame long after the content has visually stopped moving.
the JSON representation
the json is allmost entirely derived from the options the ScrollRect provides. an example component looks like this:
{
"type":"UnityEngine.UI.ScrollView",
"vertical": true, // Enables or Disables vertical scrolling & dragging
"horizontal": true, // Enables or Disables horizontal scrolling & dragging, can be used together
"movementType": "Elastic", // MovementType, can be set to "Elastic", "Clamped" or "Unrestricted"
"elasticity": 0.25, // how much the container bounces back when reaching the end, only applies to Elastic
"inertia": true, // defines if the content continues to move after scrolling/dragging has stopped
"decelerationRate": 0.3, // only used with inertia, higher decelRate = stops faster (visually)
"scrollSensitivity": 3.0, // multiplier when using the scroll wheel, a higher will be better for most usecases
"contentTransform": { // this controlls the content's size, the content does not dynamically scale as you add objects to the scrollview so make sure to plan ahead
"anchormin": "0 0",
"anchormax": "1 1",
"offsetmin": "0 -200",
"offsetmax": "0 0"
}
}
the inertia option and the movementType "Elastic" continue to cause canvas updates long after the content visually stops moving, i recommend avoiding them for scroll views with lots of child elements
Adding Scrollable Containers with Unity's ScrollRect
Adding Scrollable Containers Allows us to Create Cleaner UIs & Remove Strain from the Server. its a versatile component that can be used on anything from lists, to sidescrollers or to create dragable components
The Breakdown
in order to create a scrollable component 3 things are needed: the ScrollRect, the Mask & the Content. this component creates all of them while exposing most values to the json object,
this component creates a child game object for the content and redirects any children to be parented under this content object, this is required for the ScrollRect to work
For Added Performance it also adds a new Canvas to the Object containing the ScrollRect, as this will reduce redraws of the entire UI when the content gets scrolled or moves
the JSON representation
the json is allmost entirely derived from the options the ScrollRect provides. an example component looks like this: