Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice
New Forum User Notice Update to the Unity Editor Software Terms

Question RectTransform to VisualElement. Can I convert this?

Discussion in 'UI Toolkit' started by i0plus_developer, Jul 5, 2020.

  1. i0plus_developer

    i0plus_developer

    Joined:
    Oct 20, 2018
    Posts:
    25
    ChildImage in the middle-center position of the parent and fixed the size.
    upload_2020-7-5_16-30-5.png

    by UI Toolkit, I tried to do the equivalent.
    I couldn't.

    Is this possible?
     
    i0plus_developer, Jul 5, 2020
    #1

  2. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    666
    You'll want your main VisualElement to have, on style:

    flex-grow: 1;
    
align-items: center;
    
justify-content: center;


    Then you add a child VisualElement to that one with the specific width and height you want, for example if it's 50 pixels:

    width: 50px;
    
height: 50px;


    If you use the UI Builder it will probably be much easier!
     
    JuliaP_Unity, Jul 6, 2020
    #2

  3. i0plus_developer

    i0plus_developer

    Joined:
    Oct 20, 2018
    Posts:
    25
    Thanks JuliaP,

    Do I have to get help from parent's container layout settings?
    Is this not possible with ChildImage Position:absolute...?
    I gave a simple example in my post.
    I'm sorry for misleading you.
    I want to convert RectTransform mechanically.
     
    Last edited: Jul 6, 2020
    i0plus_developer, Jul 6, 2020
    #3

  4. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    666
    Not sure what you mean, what is "help" referring to?

    If you use absolute positioning, you have to know the size of the screen exactly and if that changes, the position in the middle will change so you would potentially need to update the position values.

    Can you clarify this? I don't think I'm following what you're trying to do exactly.
     
    JuliaP_Unity, Jul 7, 2020
    #4

  5. i0plus_developer

    i0plus_developer

    Joined:
    Oct 20, 2018
    Posts:
    25
    Background:
    I'm developing a converter from AdobeXD to Unity GUI
    https://github.com/itouh2-i0plus/XdUnityUI
    https://forum.unity.com/threads/xdunityui- adobexd-to-unity-ui-coming-soon-can-try. 843730/
    It was able to convert from AdobeXD to RectTransform.
    Converted UI prefab works similarly to AdobeXD.

    AdobeXD
    adobexd.gif

    Unity-RectTransform
    recttransform.gif

    Recently, we started to support UXML

    What I need help with:
    I could not convert some of these to VisualElements.
    The problem is converting the layout and responsive information in AdobeXD.
    That's the case in the image above.
    - Child position is desided by a percentage of the parent's size.
    - The size of the child is fixed.
    I want to do this same by VisualElement.
    I couldn't. I used UIBuilder.
    (Once that's done, we'll start developing a converter.)

    Why I need this:
    - It can set up in AdobeXD and RectTransform.
    - I don't want to limit to design with AdobeXD.

    We believe, Unity Technologies is also interested in AdobeXD.
    https://forum.unity.com/threads/uielements- roadmap-update.784388/page-2#post-5625691

    Thanks for responding.
     
    Last edited: Jul 8, 2020
    i0plus_developer, Jul 8, 2020
    #5

  6. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    666
    Thank you for the explanation!

    As far as I can tell, this example should be feasible in UI Toolkit indeed, but you'll need to figure out exactly what parameters to use.
    If you haven't read about flexbox I highly suggest you do: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    I find this simple game helps a lot with understanding all the modes flexbox provides (and it's fun!): https://flexboxfroggy.com/

    These are things that are possible to do, and the size of the child will probably still be fixed but it looks to me like the positioning of the children would work better with flex positioning.

    Hope it helps!
     
    JuliaP_Unity, Jul 8, 2020
    #6
    i0plus_developer likes this.

  7. i0plus_developer

    i0plus_developer

    Joined:
    Oct 20, 2018
    Posts:
    25
    i0plus_developer, Jul 8, 2020
    #7

  8. etienne_unity

    etienne_unity

    Unity Technologies

    Joined:
    Aug 31, 2017
    Posts:
    102
    Hi @i0plus_developer

    Here's how to achieve this in UI Toolkit (see attached .uxml file).

    The tricky part was to set 
    margin-left: auto; margin-right: auto;
    on items alone in a row (and not set these properties on items in rows with multiple items, like row2 here.

    This part of the flexbox spec might help to shed some light: https://www.w3.org/TR/css-flexbox-1/#auto-margins

    We don't support the 
    :only-child
    pseudo class yet, which could be used to make this a bit more elegant.

    forum-925703.gif
     

    Attached Files:

    etienne_unity, Jul 8, 2020
    #8
    i0plus_developer likes this.

  9. i0plus_developer

    i0plus_developer

    Joined:
    Oct 20, 2018
    Posts:
    25
    Hi,
    I opened the sample UMXL file.
    It was cleanly placed.
    I see: The negative margin value felt like a hack.

    I plan to develop a converter that will convert the AdobeXD layout hierarchy as similarly as possible.
    But I have to learn more about CSS for smart conversion.
    I see a better way.

    Thank you!
     
    i0plus_developer, Jul 8, 2020
    #9