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. Dismiss Notice

How to displays RawImage in the UIToolkit?

Discussion in 'UI Toolkit' started by whiteclouds2016, Oct 16, 2020.

  1. whiteclouds2016

    whiteclouds2016

    Joined:
    Sep 22, 2017
    Posts:
    18
    I want to display the camera's photo for realtime, like the RawImage when I used UGUI.
    Is any some way to get it?
     
  2. SimonDufour

    SimonDufour

    Unity Technologies

    Joined:
    Jun 30, 2020
    Posts:
    515
  3. whiteclouds2016

    whiteclouds2016

    Joined:
    Sep 22, 2017
    Posts:
    18
    SimonDufour likes this.
  4. DevViktoria

    DevViktoria

    Joined:
    Apr 6, 2021
    Posts:
    94
    Hi,
    I would like to achieve the same thing. My 1st problem is that the UI Builder does not seem to support the Image class.
    I tried to add this manually to the UXML file like so:
    <ui:Image image="/Assets/UI/DoorImage.renderTexture" style="width: 256px; height: 100px;" />
    But this does not seem to display the rendered camera image.
    I tried to use
    <ui:Image image="url(&apos;/Assets/UI/DoorImage.renderTexture&apos;)" style="width: 256px; height: 100px;" />
    but this does not seem to work either.
    Does this means that I have to assign the render texture from code in order to work?
     
    DragonCoder likes this.
  5. antoine-unity

    antoine-unity

    Unity Technologies

    Joined:
    Sep 10, 2015
    Posts:
    733
    The Image accepts its source from a custom style, which currently do not play nice with the UI Builder.

    I would recommend staying away from the Image class. Nowadays you can assign a RenderTexture directly to the background of a visual element, inside the UI Builder.

    background_rt.png
     
  6. DevViktoria

    DevViktoria

    Joined:
    Apr 6, 2021
    Posts:
    94
    Hi,
    thank you for the quick answer, but for some strange reason for me the Render Texture is not in the list: backgroundimagesource.png
    Maybe I am missing a package for this?
     
  7. antoine-unity

    antoine-unity

    Unity Technologies

    Joined:
    Sep 10, 2015
    Posts:
    733
    Sorry, I should have mentioned, this is only available in 2021.

    If you are using the UI Toolkit package, you can use a visual element and use the normal "background" property with a URL pointing to the RT.

    <VisualElement style="background-image: url(&quot/Assets/example.renderTexture&quot)"/>


    If not, use the Image class and assign the "--unity-image" style property with a URL pointing to the RT (you'll need to use an external USS file).

    .myImage {
    --unity-image: url("/Assets/example.renderTexture");
    }
     
  8. DevViktoria

    DevViktoria

    Joined:
    Apr 6, 2021
    Posts:
    94
    Thank you for the tips. I checked the Render Texture in different unity versions it is only appeared in 2021.2.0a17 version, but it did not appeared 2021.1.4f1 and 2021.1.7f1 versions.
    I checked the other tips you have given me and manually adding the render texture to a VisualElement's background works :):
    <ui:VisualElement style="width: 256px; height: 100px; background-image: url(&apos;/Assets/UI/DoorImage.renderTexture&apos;);" />

    (Since this works, I have not tried the 2nd tip.)
     
    tankorsmash and antoine-unity like this.
  9. tankorsmash

    tankorsmash

    Joined:
    Jul 20, 2019
    Posts:
    7
    Thank you for this solution. I'm on 2021.1.10f1 and I don't have the GUI option for Render Texture, but the manual uxml editing worked too. There's an error about 'the value is not present in list of possible values' but it still lets me use it in my game, so I'm happy.

    To anyone else reading, it doesn't appear like you can escape doublequotes in uxml, so you have to use
    &apos
    like the above poster did (it's not a forum render bug, as I had thought!).
     
  10. Ferb

    Ferb

    Joined:
    Jan 4, 2014
    Posts:
    21
    But if we use the background of a visual element, how do we adjust the UVs? The Image class had properties to do this, but we can't find any such way of displaying desired areas of a texture using a VisualElement background.
     
    Midiphony-panda likes this.
  11. guayeah

    guayeah

    Joined:
    Jun 9, 2017
    Posts:
    6
    Hi,
    I'm trying to assign a texture from a website using
    textureGetRequest = UnityWebRequestTexture.GetTexture(imageUrl, false);
    textureGetRequest.downloadHandler = new DownloadHandlerTexture(true);

    and I'm being able to get the texture but I can't assign it to a VisualElement's background as follows:
    texture = DownloadHandlerTexture.GetContent(textureGetRequest);
    background.style.backgroundImage = new StyleBackground(texture);


    Am I in the right direction or is there any way to assign the texture from an external URL directly to the backgroundImage of the VisualElement from C# code?

    Update:

    I fixed this problem by the following code but is very inefficient as the link comes from an scalable database that grows overtime and this solution gets to be so slow:


    private IEnumerator MyRoutine()
    {
    foreach (Icon item in someIconArray[])
    {
    yield return new WaitUntil(() => item.texture != null);
    }
    }
     
    Last edited: Aug 3, 2022
  12. Midiphony-panda

    Midiphony-panda

    Joined:
    Feb 10, 2020
    Posts:
    234
    What is the error you're having with your following snippet ?
    Code (CSharp):
    1. texture = DownloadHandlerTexture.GetContent(textureGetRequest);
    2. background.style.backgroundImage = new StyleBackground(texture);
    Could you try maybe to just use Background.FromTexture method ?
    What is the actual error/issue you're getting ?
     
    Hellfim likes this.