2D UI workflow

🧑‍💻 Technical Support
1

What’s the best workflow to create extensive 2D elements where you can control alignments, pinning and such? And are you able to do this in a visual editor as of yet? Or is it a lot of building and checking, building and checking etc.

2

Hey Mitch, we’re actively working to improve the UI system. Since there’s no preview of 2D elements yet it’s still a lot of building and checking how the changes look.

3

No worries - is there documentation or examples for 2D UI that I can look into? Things like scrolling dynamic content etc.

4

Great question! While we’re building out the UI system the easiest way to do something like that would be to inject CSS into your project. This isn’t the recommended workflow as the UI system is our ultimate goal, however it’s a workaround for projects at the moment.

5

QQ – I was wondering if there is a way to create the UI outside the platform and send/ receive events to the experience. For example, having a button in an external UI that toggles the visibility of 3D elements in the experience.

Is there a recommended approach for achieving this?

Thanks in advance!

6

Hi, welcome to the forums!

When you say “outside of the platform” do you mean using HTML elements that have been inserted onto the page at runtime? Or something else?

7

Hi, George! Thanks for your reply ^-^

By outside of the platform, I mean interacting with the experience using JavaScript directly within the internal scripts of Studio. For example:

  • Using querySelector to modify the font-weight, or any property, of a text element.
  • Triggering animations via the browser’s Animate API when clicking a button.
  • Creating more complex GUIs using css grid, positioning elements with position relative and position absolute within their parent containers, etc.

Is there a recommended way to achieve this through the registered components? Or would I need to handle it differently?

Thanks!

8

Take a look at my reply to this thread here: Is HTML, CSS and Studio Recommended? - #2 by GeorgeButler

If you combine this with dispatching events you certainly can drive actions in your experience using HTML elements.