Migration to UIToolkit

[achimmihca]

Most of the UI is currently implemented using a Component-based "Unity UI" (aka. uUI).

UIToolkit, which should be released in a stable version in 2021, will provide better separation of concerns and better maintanability. Therefor, UIToolkit builds on XML and Stylesheets, very similar to HTML and CSS.

I think the new flex-layout engine and stylesheets will make UI stuff much easier and consistent to implement. Furthermore, having the UI structure in XML makes tracing and understanding changes easier in version control.

Missing features

UIToolkit is still under development and some features that we use with uUI are missing.

• [ ] UI Toolkit does not yet provide a way to load a style from a string (forum).

  • This is required to load user defined themes. Once this is supported by Unity, theming will be trivial to implement: add the loaded StyleSheet to the UIDocument's StyleSheet list.

• [ ] UI Toolkit does not yet provide a way to use custom shaders on images

  • This is required to implement the HSV shader that is used to change color of some images (e.g. player avatar image) (forum).
  • Maybe an alternative would be to change the pixels of the Texture2D?

• [x] Rich Text Support (change colors, bold and italic embedded in the text)

  • Seems to be available in 2021.2 (currently available only as pre-release) (forum)

Migration Status

• [x] MainScene is using UIToolkit already as a first test (see #220).
• [x] Options
  • The controls have to be implemented using UIToolkit (number selection (e.g. mic delay), enum selection, etc.)
  • The RecordingOptions are visualizing the mic input by drawing on a texture.
    • DynamicTexture.cs has been prepared to do the same using UIToolkit.
• [x] SongSelect
  • Uses drag-handlers. Should be similar in UIToolkit (documentation).
  • Visualizes mic input (like the RecordingOptions).
• [x] SingScene
  • Uses a video texture. Might work the same with UIToolkit, because the video image is in the background and UIToolkit is drawn in front of uUI.
  • Calculates position of letters in the lyrics for the position-indicator.
    • Not sure if/how this will work when using UIToolkit
  • Draws player images in different colors
• [x] SingingResultsScene
  • Draws player images in different colors
  • Draws lines for the statistics graph.
    • I think this uses the same draw-on-texture-approach as the mic visualization
• [x] HighScoreScene
• [x] SongEditor
  • Uses all missing features. This is the most complex scene and will probably be migrated last.

[timgoeller]

One thing that UI Toolkit is also missing are shadows for UI elements. They weren't included in any previous Unity UI solution either, but I'm not sure how a workaround would look like to achieve them with UI Toolkit.

[basisbit]

usually, the workaround is to place partially transparent (for example 75%) black images where you want the shadow to appear.

[achimmihca]

Unity decided to delay the release of UIToolkit further (forum):

We’ve decided to move the release to 2021.2 to ensure that UI Toolkit meets expectations, and addresses a few more requirements such as interoperability with other systems, basic support for UI animation, and onboarding material.

[achimmihca]

Looks like UIToolkit will support animations via StyleSheets soon: https://forum.unity.com/threads/announcing-uss-transition.1203832/#post-7689943

[achimmihca]

Draws player images in different colors

Will use the normal color property of UIToolkit (which makes images darker) until shaders are supported.

Maybe an alternative would be to change the pixels of the Texture2D?

I tried this. Did not work because (a) horribly slow, (b) the pixels of the texture are not readable. I think this is because Unity automatically packs the images to a sprite atlas. Thus, will wait for shader support in UIToolkit.

Draws lines for the statistics graph.

This has been skipped for now. Can be implemented once UIToolkit supports more features.