Search Unity

Question EditorWindow: how to display a texture scaled up or filling the panel's width?

Discussion in 'UI Toolkit' started by MarcGFJ, Dec 1, 2022.

  1. MarcGFJ

    MarcGFJ

    Joined:
    May 16, 2019
    Posts:
    24
    I am trying to display a texture for debugging at runtime in a custom `EditorWindow`. I'm using the following code:
    Code (CSharp):
    1.         private void CreateGUI()
    2.         {
    3.             _image = new Image();
    4.             _image.scaleMode = ScaleMode.ScaleToFit;
    5.             rootVisualElement.Add(_image);
    6.         }
    (I set the texture later)

    The problem is, the texture seems to be shown at its native resolution and centered, even if the panel is much larger. It also looks kinda smeared, like if I plot a single pixel on the texture, it will appear as a two-pixel line in the UI.

    - Is there a way to display it pixel-perfect?
    - Is there a way to display the the texture at scale x2?
    - How can I scale the texture keeping ratio, but filling the entire width of the panel?
    - Is it possible to disable filtering when the texture is scaled?
     
    Last edited: Dec 1, 2022
    MarcGFJ, Dec 1, 2022
    #1

  2. SimonDufour

    SimonDufour

    Unity Technologies

    Joined:
    Jun 30, 2020
    Posts:
    575
    The image component is used to drive the size of the image based on the actual resolution of the image if you don't constrain it. It may still be affected by screen scaling factor.



    I don't think there is nothing built-in. You could probably do this programmatically (in the ui creation or in a geometry change event) by reading the EditorGUIUtility.pixelsPerPoint and the texture size.

    Code (CSharp):
    1.         // Stretches the texture to fill the complete rectangle passed in to GUI.DrawTexture
    2.         StretchToFill = 0,
    3.         // Scales the texture, maintaining aspect ratio, so it completely covers the /position/ rectangle passed to GUI.DrawTexture. If the texture is being draw to a rectangle with a different aspect ratio than the original, the image is cropped.
    4.         ScaleAndCrop = 1,
    5.         // Scales the texture, maintaining aspect ratio, so it completely fits withing the /position/ rectangle passed to GUI.DrawTexture.
    6.         ScaleToFit = 2
    You would have to use the ScaleAndCrop or ScaleToFit, in conjunction with making sure the element cover the total width of his parent (width=100%)


    If you are using a renderTexture, the rendering option of the rendertexture will be used. For other types of texture, thay may be atlassed, but I do think we only atlas if the filtering is set to point filtering (I would have to check in the code.

    Let me know if you have any other questions
     
    SimonDufour, Dec 1, 2022
    #2

  3. MarcGFJ

    MarcGFJ

    Joined:
    May 16, 2019
    Posts:
    24
    > The image component is used to drive the size of the image based on the actual resolution of the image if you don't constrain it. It may still be affected by screen scaling factor.

    I saw that's how it behaves. It shrinks if I put other UI elements in the panel that would reduce the vertical space available, but currently I have only the image and plenty of space, and instead that image component seems to stop itself from expanding once it reaches the native size of the texture. I thought `ScaleToFit` was already supposed to make it expand beyond that native size, but it doesn't for some reason.
    My screen is also not scaling, I have no DPI scale setup in my desktop.

    > making sure the element cover the total width of his parent (width=100%)

    How do I specify this? The code I posted is everything my UI is defined with.

    > If you are using a renderTexture, the rendering option of the rendertexture will be used. For other types of texture, thay may be atlassed, but I do think we only atlas if the filtering is set to point filtering (I would have to check in the code.

    I use a regular 2D texture, not a rendertexture. Basically I'd like "pixelated" filtering if that makes sense, or nearest neighbor. Currently I have to squint very hard to see things, that's why I want it to expand to cover the panel without filtering.
     
    MarcGFJ, Dec 2, 2022
    #3

  4. dlorre

    dlorre

    Joined:
    Apr 12, 2020
    Posts:
    699
    In Dragon Crashers they don't use the Image element but visual elements with backgroundImage. You can use that and in GeometryChangeEvent you can change the width and height of the visual element to your likings.

    I have tried using Image in a ScrollView there was a huge blank margin above the image, so I gave up and used backgroundImage and it works perfectly.
     
    dlorre, Dec 2, 2022
    #4