True Shadow - UI Drop Shadow and Glow

20% OFF during the beta period
50% OFF during the beta period for Translucent Image owner!❤️

True Shadow helps you quickly and painlessly build beautiful and modern UIs with soft shadows and glows. No longer do you have to fake soft shadows with manually created texture, or put up with the horrible builtin shadow component.

> WebGL and Android Demo
> Manual & Documentation

Spoiler: Android Demo Video

Get it now on the Asset Store!

»»» FEATURE HIGHLIGHT «««

Visual
▪ Control shadow size, offset angle and distance, color tint.
▪ Normal, Addictive, and Multiply blend-mode.
▪ Shadow can inherit color from sprite to emulate glow.
▪ True shadow generation, creating much smoother than SDF based method.

Compatibility
▪ Any sprite is supported, not just simple shapes.
▪ All Image type: Simple, Sliced, Tiled, Filled.
▪ Raw Image, so you can have 2D shadow/glow of 3D objects.
▪ Mask.
▪ Layout Groups.
▪ Builtin support for animating shadows on interactive elements (hover, select, click).
▪ Only the builtin render pipeline was tested currently. All pipelines will probably work, but people on the internet are not to be trusted, please make your decision only on what currently available

Performance
▪ Fast shadows generation, thanks to the battle-tested algorithm behind Translucent Image, allowing shadows to be generated in real-time.
▪ Shadows are automatically reused when possible, so you can build complex UIs with plenty of shadow casting UIs at once.

What can I expect from the beta?
▪ All features shown are implemented.
▪ Implemented features work in the majority of situations.
▪ Less common setups might not work correctly. Please report them.
▪ API and how settings work can change in future updates. Settings and API might be added or removed. Thus changes might be required when you upgrade

Have any question or bug report? Contact me any time through the support portal or email

 

Hi is it compatible with sprite renderer?

 

Hi! True Shadow is designed to be used with the game object based UI system (uGUI) only. Other rendering system are not supported at the moment.

 

Any plans to support SpriteRenderer in future updates?

 

There is not at the moment

 

APPROVED - That is a great plugin!
Even in beta status, it works very well. I already used it in two production projects (iOS + Android + Windows) with URP. Works very well and very efficiently.

Question
@Le_Tai I need to union shadow from multiple gameObjects with single Image components on each. Is it any way to do that?
In my current project, few images can be magnetized to each other, after the magnet animation, I want them to cast a union shadow, instead of two separate. Because shadow from the first one overlaps another image, that is incorrect behavior for this project.

 

That is great to know, thanks you!

There is no easy way to do what you described. The approach I would take is to render the images into a RenderTexture, then use that RenderTexture on a Raw Image where True Shadow can be attached.

 

Hello!
Really useful asset here, good job. Do you have any plans to integrate glowing feature for TextMehsPro text?
It works really good with images and legacy text though!

 

Thank you. TMP support is not a high priority at the moment, as already have shadow and glow effect, I cannot give any ETA for it. There has been experimental work on TMP which is not very well tested. If you want to try it contact me through my support portal or email with your invoice number.

 

Hello.
Great work. Thank you!

I have two questions:
1. Can we unload generated textures from memory after hide true shadow components?
2. We need to use shadows with Rect Mask 2d. Is it possible to support this feature?

 

Thank you! Currently shadow textures are only released OnDestroy to avoid having to regenerate shadow when toggling UIs. Maybe I can make this configurable in the future, but for now the only way is to modify the code yourself.

RectMask is supported in the next version, I will see if I can back port it to get it out sooner.

 

Thanks!

 

Hello,
are there any plans on supporting UIBuilder?

 

The new UI Toolkit framework is very limited and cannot be supported at this point.

 

Hello.
Your assets are being used really well. Thanks to this, the amount of resources has been greatly reduced.
However, under certain conditions, the following error message is displayed endlessly.
I'm not sure what the error is caused by.

Use infinite scrolling and dynamic loading. Could this possibly be the problem?

-------- error ------
NullReferenceException: Object reference not set to an instance of an object.
Latai.TrueShadow.TrueShadow.LateUpdate () (at <000000000000000000000000000000000000>:0)

 

Hi,
I assume this is from a build? Can you make a build in debug mode so we get a complete stack trace? Or ideally try to reproduce in the editor?
Would you mind continuing this by email to support@letai.freshdesk.com, or by creating a ticket here. It is difficult for me to keep track of forum threads. It also safer if we need to share anything private.

 

thx. going to your site.

 

My Unity version is 2021.3.18f1c1, I used this version to create a new 3d project and import the True Shadow plugin, then I created a new UI image and added the True Shadow component to it, then I pressed ctrl+D twice to copy the image, Then press Ctrl+Z to undo. But unity just crashed. I repeated it a few times and found that it was a stable crash bug. Why is that? How can I solve this problem?

 

You're likely running into this bug: https://issuetracker.unity3d.com/is...-when-undoing-duplication-of-a-certain-object

There are no workaround that I know of at the moment, other than to try other Unity versions. Versions that Unity has tested to not have the bug is in the issue tracker link.

 

Look like the bug was fixed on the latest 2021.3 patch version. In 2022+, a warning is currently throw but that should be fixed in the next True Shadow release.

 

Is there a way to use true shadow on a sprite font asset?

 

No, True Shadow is for uGUI only.

 

Hi Le Tai, thank you so much for this amazing plugin!

I made a little change to IntercativeShadow.cs, so that we can slect the type of insert we have on different button state:

Code (CSharp):

1.  
2.        [Header("Insert")]
3.        public bool selectInset = true;
4.        public bool hoverInset = true;
5.        public bool clickedInset = true;
6.       bool targhetInset;
7.  
8.        void OnStateChange()
9.        {
10.            if(isClicked)
11.            {
12.                targhetInsert = clickedInset;
13.                targetSize = clickedSize;
14.                targetDistance = clickedDistance;
15.                targetColor = clickedColor;
16.            }
17.            else if(isSelected)
18.            {
19.                targhetInsert = selectInset;
20.                targetSize = selectedSize;
21.                targetDistance = selectedDistance;
22.                targetColor = selectedColor;
23.            }
24.            else if(isHovered)
25.            {
26.                targhetInsert = hoverInset;
27.                targetSize = hoverSize;
28.                targetDistance = hoverDistance;
29.                targetColor = hoverColor;
30.            }
31.            else
32.            {
33.                targhetInsert = normalInset;
34.                targetSize = normalSize;
35.                targetDistance = normalDistance;
36.                targetColor = normalColor;
37.            }
38.        }
39.  
40.  
41.        void Update()
42.        {
43.            ...
44.  
45.            shadow.Inset = targhetInset;
46.        }
47.  
48.     void Reset()
49.        {
50.            shadow = FindTrueShadow();
51.            if(shadow)
52.            {
53.                normalInset = shadow.Inset;
54.          
55.               ....
56.            }
57.        }

Maybe this can be usefull

Best

Yves

 

Hi there, First of all, thank you for creating such a valuable plugin.


Now, coming back to the actual query: I have a unique case where I could have 100 backgrounds drawn on the screen, which I pool and reuse. Sometimes, none of them will have a shadow, sometimes only one of them, and sometimes all of them.


So, how can I make TrueShadow performant in all cases?


I've come up with two solutions:


Short-Term Solution: Since the TrueShadow component is added to the background GameObject, setting .enabled = false should make it performant when I'm no longer using the shadow, am I right? Or is there a better solution?


Long-Term Solution: If you could add a new property called SourceGraphicOrGameObject, I could have a separate GameObject with TrueShadow on it. Then, I could set the sourceGraphicOrGameObject property and pass it my background. This way, you could show the shadow based on that background element.


This approach would help me avoid having 100 backgrounds with 100 TrueShadow components when none of them are showing shadows. I could simply get the shadow GameObject from the pool, assign its source (or target, whichever is better), add it as a child to my background element, and voilà! When I no longer need it, I could detach it from the parent and send the shadow GameObject back to the pool, including setting its graphicOrGameObject to null.


I'd greatly appreciate it if you could consider adding this type of support.


Thanks.

 

I've answered your support ticket. Please continue the discussion there.

 

Hi there, we are experimenting with a copy of True Shadow to see if we can use it in our games. But I must be doing something wrong, as the edges are very rough on any image I use it on- it does not seem to matter whether the image has compression or not. It looks like the shadow goes on top of the image- the dark goes over the fully white image seen here- which eats into the image. Please let me if there is a way to fix this. Thank you!

 

I did more experimenting after I wrote this- and maybe found the reason/workaround.. It seems that this issue shows on images that are not used at full native size.. meaning the rect transform is not matching the actual png size. If I do set to native size, the edges become much smoother- and looks good overall.. and it seems that it is OK to use the scale instead to change the image size- that seems to still keep smooth edges. So it means some fussing with how things are set up to not rely on rect transform for sizing things. Since scale can affect the calculations of the layout groups and anchoring it means needing to nest more in those cases I guess.

But I would love it if the creator could reply to see if this is the best answer for this.

 

I did even more experimenting and now see that while I can make the shadow work well on large images by keeping to native size, it still has issues for smaller images- which we use a lot of in UI. It colors into the edges to create an outline effect- and so images need to be a higher resolution to look okay (and then scaled)- which means rework. And there are bad issues with the pixels per unit multiplier for sliced images- so you can't adjust for resolution with that.

 

True Shadow generate shadow at game view resolution. If you zoomed-in to it in the scene view, it will naturally look low-res.

In general, images look best at native size, if you have to scale them, make sure to enable mipmap, scaling without mipmap will results in aliasing.

The shadow not updating with ppu is a bug. It will be fixed in the next version. For now you can change any of True Shadow settings to force it to update.

 

Thank you very much for the reply. These are good things to know and very helpful.

I did not realize the ppu issue was just an update thing- so that's great I can keep using it now by forcing the update.

The only thing that seems will not change is that the shadow does overlap the very edge of the image a little bit. This does not seem to be an issue for items with a lot of color variation- but for a very flat 1 color panel it makes an obvious sort of half-pixel outline effect. Seems it probably has to do that to not have gaps unless the shadow effect could layer under the image instead of on top? But I have no idea how the tech on this works or if that would even be possible.

 

That is a limitation that due to a variety of reason not fixable, unfortunately. Generally, you can make it less visible by making the shadow more transparent, or otherwise choose a color that have a lower contrast with the foreground. There's also the "Disable Fit Compensation" toggle under Advanced Settings that should remove this, but I'd advise only using it where necessary to avoid gap which is much more noticeable. In general, the overlap is very small at game view resolution, especially on modern high dpi screens so I wouldn't worry about it too much.

 

Thank you!