Adding Support for Scrollable Containers

[Kulltero]

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

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 representation is made to expose as many options as possible, most are optional:

{
  "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
   "maskSoftness": "0 0", // applies a fadeout to the x & y of the RectMask2D's borders
   "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"
   },
   "horizonalScrollbar" : { // holds properties for a scrollbar, omit if you dont want a scrollback
      "invert" : false, // inverts the scrollbar to go bottom up instead ot top down
      "autoHide": false, // hides the scrollbar if the content doesn't need a scrollbar, shifts the viewport to the side
      "handleSprite": "assets/content/ui/ui.rounded.tga", // the built in sprite to use for the draggable part of the scrollbar
      "size": 20, // the thickness of the scrollbar
      "handleColor": "0.15 0.15 0.15 1", // the normal collor of the handle
      "highlightColor": "0.17 0.17 0.17 1", // the color when the scrollview is hovered
      "pressedColor": "0.2 0.2 0.2 1", // the color while the handle is clicked
      "trackSprite": "assets/content/ui/ui.background.tile.psd", // the sprite of the Scrollbar track
      "trackColor": "0.09 0.09 0.09 1" // the color of the track
   },
   "verticalScrollbar" : { ... } // same schema as horizontal, both can be used at once
}

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
NOTE: scrollbars will not show up even if present if the respective vertical or horizontal property is set to false

[ElChupos]

This looks great, thanks for the addition. I made a couple of minor changes and updated it with the latest RPC syntax from the core Rust game.

In terms of tests, I think it would be a good habit going forwards to put them into the new Tests folder - that way we can easily load up a new feature to see how it works and check for any regressions down the line.