Definition: new UI components for ECS 7

[menduz]

This issue may be outdated. Check the living spec at https://rfc.decentraland.org/adr/ADR-124

---

The new UI layouting system of the SDK for the Decentraland Protocol will be based out of FlexBox. That is a bold change that will break compatibility with previous versions of the UI for better portability and standardization.

Flexbox is the next-gen layouting system used in web applications, it is an open and mature standard that is not only used by web browsers but also by native applications and even operative systems. i.e. ReactNative and Unity's UI Toolkit use flexbox for its layouts.

A big win for this decision is that moving away from the legacy Unity-based layouts will enable easier portability of the renderer to other technologies thanks to yoga layout, an open-source library that implements everything needed.

Unlike the legacy UI components, the new UI will be implemented using entities with a special UiTransform component.

The renderer systems must ignore in the 3D camera every entity containing a UiTransform component. Also, all the descendant entities of those with a UiTransform must be filtered out from the 3D camera.

For simplicity and speed, there will be a special perpetual UiRootEntity used as parent for all the UiTransform entities, this entity is the analogous of the RootEntity for the 3D entities. * this may be subject to changes.

The UiRootEntity will act as "canvas" and will accept a UiTransform component to configure some properties. Since it is the root node, the following properties will be ignored: "basis", "grow", "shrink", "align_self", "margin", "position_type" and "position".

The new UI system will also be separated in two types of components:

• Layout components, to position things in the canvas:
  • UiTransform
• Rendering components
  • UiBackground to define a background color or image
  • UiLabel to render text
  • UiInput to create text inputs
  • UiButton to create buttons

Rendering components may encapsulate logic for the renderer like styles for different states like Active or Hover, delegating the position and size of the component to the UiTransform

Another big advantage of this new model is that eventually, a playground (like yoga's) can be created to rapidly prototype new UIs and it is nowadays a common technology among web developers, reducing drastically the entry barrier.

Another interesting use case is a visual debugger/inspector. In early stages of development, to test that all features work as expected, a web debugger should be created to render side-by-side code and the generated layout using the CRDT protocol.

The proposed UiTransform is added to the ECS in this PR decentraland/js-sdk-toolchain#150

[D4rWiNSS]

We should have also UiImage for images

[menduz]

We should have also UiImage for images

What would be the practical difference between UiBackground and UiImage?