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

How can I use Shadow on UIToolKit Component

Discussion in 'UI Toolkit' started by lofell, Feb 11, 2022.

  1. lofell

    lofell

    Joined:
    Nov 4, 2020
    Posts:
    7
    Hi there,

    I'm development System with UIToolkit and I need a UI Component compare with shadow.
    I Think using with margin value setting minus and Add it UI With Shadow Image to possible.
    But I Think It needs to add Shadow function in UI Toolkit.

    Also Unity UI Shadow System is not much function to use..
    I Think it needs spread shadow in middle and direction with how much large to need.(Border Size, like Adobe XD)
    OR Like This Asset
    True Shadow - UI Soft Shadow and Glow | GUI Tools | Unity Asset Store
    And It needs to not related with Padding I Think..

    Anyone do you have a solution about this?
     
    Last edited: Feb 11, 2022
    lofell, Feb 11, 2022
    #1

  2. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    970
    We have plans for adding a drop-shadow style to VisualElements in UI Toolkit, but that will come a bit later.

    An option would be to use a 9-slice texture for your shadow, and set that to the VisualElement background. The downside of this is that the shadow would be "baked" in the texture, so its harder to provide different shadow radius.

    If you feel adventurous, another option would be to implement your own shadow programmatically using the UI Toolkit Mesh API. You would have to generate a mesh, and you could do the shadow gradient/radius using interpolated colors on the vertices.
    https://docs.unity3d.com/ScriptReference/UIElements.VisualElement-generateVisualContent.html
     
    mcoted3d, Feb 14, 2022
    #2

  3. Myzer

    Myzer

    Joined:
    Oct 19, 2014
    Posts:
    3
    Hello! I've been following the updates to the new UI system pretty closely, and see that shadows, blur, gradients and so on are in the Planned section of the roadmap. Any idea when they may be available in any capacity at all (even preview)?
     
    Myzer, Oct 9, 2022
    #3

  4. TomTheMan59

    TomTheMan59

    Joined:
    Mar 8, 2021
    Posts:
    315
    The best thing to do is to send feedback on that card to let the devs know you need it.

    They stated from what I remember on the blitz day forum that 2023 is not adding new runtime features so it could be awhile.
     
    TomTheMan59, Oct 9, 2022
    #4
    Myzer likes this.

  5. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    970
    The best answer I can provide at this time is that it is planned for Unity 2024. It's too early for an exact date.
     
    mcoted3d, Oct 12, 2022
    #5
    Myzer likes this.

  6. Neiyra

    Neiyra

    Joined:
    Apr 19, 2016
    Posts:
    28
    Is there an example for this? Anywhere? Maybe in the RoyaleRuntime on Git? 2024 is too late. :(
     
    Neiyra, Oct 14, 2022
    #6

  7. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    970
    The 9-slice version is very straight-forward, but requires to add an extra VisualElement in your hierarchy to set the drop-shadow. In the attached project, I imported the texture as a sprite, and added borders to set the slices. This would also work with a plain texture and changing the VisualElement style to set the slices.
     

    Attached Files:

    mcoted3d, Oct 14, 2022
    #7
    Neiyra likes this.

  8. Neiyra

    Neiyra

    Joined:
    Apr 19, 2016
    Posts:
    28
    Thanks!
     
    Neiyra, Oct 14, 2022
    #8

  9. tattyd

    tattyd

    Joined:
    Feb 17, 2020
    Posts:
    14
    tattyd, Oct 15, 2022
    #9
    mcoted3d, Myzer and Neiyra like this.

  10. lofell

    lofell

    Joined:
    Nov 4, 2020
    Posts:
    7
    I think unity is too much not generous about shadow function.
    I know about there is no urp static shadow and dynamic shadow combine function
    why don't you refactoring about lighting functions and more focusing about it?
     
    lofell, Oct 18, 2022
    #10

  11. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    970
    Can you elaborate more on what functionality you want? Providing UI that is lit by the scene's light sources is a completely different subjet, and not how drop-shadows will be implemented in the short/medium-term. Let me know if I'm misunderstanding what you mean.
     
    mcoted3d, Oct 18, 2022
    #11

  12. lofell

    lofell

    Joined:
    Nov 4, 2020
    Posts:
    7
    that's right I just talking about other subjet problem. don't mind it
     
    lofell, Oct 18, 2022
    #12

  13. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    970
    Just as a side node, the recommended way to do this with UI Toolkit is to configure your panel to render to a RenderTexture. You can then apply this texture to world space objects to benefit from lighting, shadows, post-effects, etc.
     
    mcoted3d, Oct 19, 2022
    #13

  14. TebogoWesi

    TebogoWesi

    Joined:
    Aug 12, 2014
    Posts:
    159
    TebogoWesi, Oct 21, 2022
    #14

  15. lofell

    lofell

    Joined:
    Nov 4, 2020
    Posts:
    7
    This One Solved. My Project Camera Shadow Setting Problem.. My apologies.
     
    lofell, Oct 25, 2022
    #15