Search Unity

How to show a Renderer Texture

Discussion in 'UI Toolkit' started by b4gn0, Feb 20, 2020.

  1. b4gn0

    b4gn0

    Joined:
    Jul 26, 2019
    Posts:
    119
    Hi all,

    Do you know if it's possible to render a Renderer Texture inside UI Elements?

    I would use it to show the minimap of the game.

    Thank you
     
    b4gn0, Feb 20, 2020
    #1

  2. stan-osipov

    stan-osipov

    Unity Technologies

    Joined:
    Feb 24, 2020
    Posts:
    31
    Sure, you can use an Image component for that.

    Code (CSharp):
    1. var renderTexture = new RenderTexture(160, 160, 24, RenderTextureFormat.ARGB32);
    2.  
    3. var item = new Image();
    4. item.image = renderTexture;
    5. m_MainCamera.targetTexture = renderTexture;
     
    stan-osipov, Feb 25, 2020
    #2
    Haxel0rd, achimmihca, JohnnyGo-Time and 1 other person like this.

  3. b4gn0

    b4gn0

    Joined:
    Jul 26, 2019
    Posts:
    119
    Hi stan-osipov,

    If I am not mistaken the Image class can't be used with the new UI Elements, right?

    Or, can you please provide some more guidance on how to add it in the UI Builder?

    Thank you
     
    b4gn0, Feb 28, 2020
    #3

  4. stan-osipov

    stan-osipov

    Unity Technologies

    Joined:
    Feb 24, 2020
    Posts:
    31
    The Image component is not present in the builder Library at the moment. But you can use this workaround:
    • Add the VisualElement from the library
    • Save uxml file
    • Open uxml file and change manually VisualElement to Image
    • Switch back to the builder
     
    stan-osipov, Mar 3, 2020
    #4
    Haxel0rd, JohnnyGo-Time and DrummerB like this.

  5. b4gn0

    b4gn0

    Joined:
    Jul 26, 2019
    Posts:
    119
    Yes, it works!

    Another question: in order to do a round minimap we would have used a mask image with canvas.
    Is there any workaround / best practice to cut the texture using a mask image?

    Thank you
     
    b4gn0, Mar 3, 2020
    #5

  6. AlexandreT-unity

    AlexandreT-unity

    Unity Technologies

    Joined:
    Feb 1, 2018
    Posts:
    377
    To create a round mask, simply set overflow to hidden and set border radius. Alternately, an SVG can be assigned to the background. In any case, note that atm we only support one level of masking. In the future we will support more but there will be an additional performance cost when using nested masking.
     
    AlexandreT-unity, Mar 4, 2020
    #6
    Haxel0rd likes this.

  7. b4gn0

    b4gn0

    Joined:
    Jul 26, 2019
    Posts:
    119
    Hi!
    The hidden overflow + border radius kinda works, but for big images (300px +) the radius edges are visible, and the final result looks more like a polygon than a circle:
    upload_2020-3-5_11-33-28.png

    I tried the SVG way, using a sample SVG like this:
    Code (xml):
    1. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    2.     <circle cx="100" cy="100" r="100" />
    3. </svg>
    I installed the "Vector Graphics" package (latest preview) and selected the "UIElements Vector Image" format:
    upload_2020-3-5_11-23-34.png

    Then I assigned it using C#, as UIBuilder doesn't seem to support VectorImage drag&drop yet, like this:
    Code (CSharp):
    1. var mapTextureImage = this.FullMapPanel.visualTree.Q<Image>(name: "map-texture");
    2. mapTextureImage.image = this.FullMapTexture;  // Render texture
    3. mapTextureImage.style.backgroundImage = new StyleBackground(this.FullMapMask); // Mask vector image
    And it worked!
    upload_2020-3-5_11-36-20.png

    Thank you all for the kind support.

    PS: Make sure Overflow is set to Hidden even if using SVG, or else it won't work.
     
    b4gn0, Mar 5, 2020
    #7
    Haxel0rd, ltsc, Erothez and 1 other person like this.