kirevdokimov/unity-ui-rounded-corners

This components and shaders allows you to add rounded corners to UI elements!

unity-ui-rounded-corners's Issues

Support for VR

Currently, after adding ImageWithIndependentRoundedCorners or ImageWithRoundedCorners component, the Image will only be displayed in the left eye.

Corner doesn't work on images taken from a Sprite sheet (one image containing multiple images)

How do I make the mask apply to the newly rounded corners?

The mask works as if it wasn't rounded. Is it possible to make the mask apply to the round corners?

Rounded buttons end up with the wrong color

I am using Unity2022.3.3. After adding the rounded corner component, the final displayed color is inconsistent with the set color

Rounded corners stretched when preserve aspect ratio is turned on

Rounded corners stretched when preserve aspect ratio is turned on. Here is the comparision:

Both rounded corner scripts stop working in the built application (Windows, Unity 2021.3.0f1)

When I used corner scripts in prefabs and Instantiate prefab in built runtime occurs an error and won't work. (It always works in the editor without any errors.)

Compilation error - missing namespace UI

Hi,

I'm using Unity 2019.2.0b4 and this error comes up

Assets\UiRoundedCorners\ImageWithRoundedCorners.cs(4,19): error CS0234: The type or namespace name 'UI' does not exist in the namespace 'UnityEngine' (are you missing an assembly reference?)

Any advice?

Rounded corners not working on build

I use and set the rounded corners through script whenever I try to use the rounded corners after the build it breaks my project, it works as perfectly in runtime, works perfectly whenever I attach them using prefabs but whenever I build the projects after attaching the rounded corners with the script it does not seem to work, I'll attach to the screenshots bellow:
runtime:

build:

the prefabs use the script to the left and the whenever I attach it through script it uses the right one [external]:

an example of the UI instantiation:

After adding the plugin, the initial compilation during runtime becomes particularly slow.

After adding the plugin, the initial compilation during runtime becomes particularly slow.

The link doesn't work.

Hi!
Maybe you accidentally changed the link? It's useless at the moment.

In Unity2017.8. No showing properly

The result showing below:

What's wrong with my unity, or Unity2017 does not support fwidth instruction?

Problems with RenderTexture

I am projecting multiple cameras to select Characters, each Camera projects each Player and their asset has allowed me to round the edge. But it happens that some objects have transparency in their textures. This makes the background visible, so half of the character can be seen half dark.

The problem comes from here:
Blend SrcAlpha OneMinusSrcAlpha, One OneMinusSrcAlpha
This enables the rounding function, but turning it off disables renderTexture.

Is there a way to use the RoundedCorners functionality removing that blend code to avoid the transparency of the objects?

Unable to add transparency

After assigning the Image With Rounded Corners script to the panel , when I try to reduce the alpha of the Image componentto implement transparency , it seems to have no effect on the sprite. Is there a way to implement a panel with rounded corners and a transparent Image with this library?

Current approach requires multiple materials for different sized images

For the project I am working on, there are many UI elements which will have different dimensions and different radius values. There are buttons of various sizes, there are UI panels with various sizes which are sometimes nested within each other.

I didn't initially realise that each of these UI elements would need different materials, so all of my rounded corner elements were all using the same material.

Of course I'd be setting a large panel with a width/height of 1280 x 768 to have a radius value of 50 then I'd be setting a very small button to have a radius of 10 and those values would be affecting the large panel.

Because there will be many different elements with many different dimensions, I don't really want to be making a material each time.

I also found the setup somewhat strenuous.

1. Create material
2. Add Image game object
3. Add Rounded corners component
4. Assign material to both image and rounded corners component

Is there a an alternative approach that is worth exploring?

I'm really quite new to this but I made some adjustments which seem to work for me, but I can't quite find a consensus as to whether it may have wider issues.

using UnityEngine;
using UnityEngine.UI;

[ExecuteInEditMode, RequireComponent(typeof(Image))]
public class RoundedImage : MonoBehaviour
{
	private static readonly int Props = Shader.PropertyToID("_WidthHeightRadius");

	public float radius;

	private Image _image;
	private bool _isSetup;

	void OnRectTransformDimensionsChange()
	{
		Refresh();
	}
	
	private void OnValidate()
	{
		Refresh();
	}
		
	private void SetupMaterial()
	{
		if (_isSetup)
		{
			return;
		}

		_image = GetComponent<Image>();
		if (_image.material != null)
		{
			_image.material = Instantiate(_image.material);
		}

		_isSetup = true;	
	}

	private void Refresh()
	{
		SetupMaterial();
			
		var rect = ((RectTransform) transform).rect;
		_image.material.SetVector(Props, new Vector4(rect.width, rect.height, radius, 0));
	}
}

After creating a single material which can be re-used across any image of any size, the steps to set it up are as follows:

1. Add Image game object
2. Add Rounded corners component
3. Assign material to image only

The changes to the script are as follows:

• We use RequireComponent to ensure we always have an Image component.
• There is no longer a public property to provide a reference to the material.
• Because we know the image already has a reference to the material we get that component and get a reference to the material from that.
• If we made changes to the material on the image directly we would still experience the same issue I've had with the different values on different objects fighting with each other.
• So we instead replace the reference to the material on the image with a clone that we instantiate.

I imagine there is some overhead to instantiating a new instance of the material but I think these would represent what would have to be multiple separate materials for my use case anyway so it seems ok to me.

This is how it looks. You can see the outer white panel has a much smaller radius than the inner red panel. This is using the same material on different objects.

If I flip back to the original approach you can see that both the outer and inner element have now ended up with the same radius:

I haven't yet looked at converting the independent rounded corners script but I suspect it would work in a similar way.

Does this seem beneficial or might there be considerable issues with this approach?

Radius resets to 0 on reload

Pretty simply, when I relaunch a project some objects with the Rounded Corners script have their Radius value as well as the material's Z value reset to 0. I can recreate this every time I relaunch.

GIF of what happens:

Each element was given its own material, and while in a session the radius works totally fine, it's just when relaunching the issue occurs. As seen the button object keeps its radius, making this even more confusing to me.

The only difference between the button and the other 2 elements that I can discern is that it isn't using a stretch anchor and the button a child of another element with rounded corners (not sure how either of those would have any effect though)

This is my first time messing around with Unity UI, and I was relieved to find such a simple solution to rounded corners, thank you so much for making this, hopefully I can get this figured out! I'm still learning Unity, so if there's additional information I should obviously be giving I apologize and I'm ready to provide more

Add Color option

Hey,

I love your plugin! Would it be possible to add the possibility of coloring the texture as a shader setting?

I am using it on a quad and would like to be able to change the color when having a basic white rectangle texture as texture input.

Thanks a lot!

Difference Radius Between IOS And Android

I use ImageWithRoundedCorners in my project and there are some differences or the corner if I switch to other platforms. For example, If I set the radius for the Android platform as 150, the image looks great. But if I switch to IOS, I have to increase to 300 to look good as Android. It is just like you have to double the value in the IOS platform. Thank you for the great package.

Scene file changes in version 3

Since version 3 implemented dynamic Material creation, we've fixed the problem of floating-point values in Material asset files changing and making for confusing source-control commits.

But, now I'm seeing lots of spurious changes in my Scene files. Material components being added and/or deleted from GameObjects. This makes it very hard to check any intended changes in scene files while committing to source control.

Is this an expected result of the new system, or is it because I switched from version 2 to 3 on an existing project, and Unity is only updating GameObjects to the new dynamic-Material system when I touch them during editing?

Is there a way to reduce the batch call?

Noticed the batch call increase when using this shader. I have different UI elements with different shapes and size, is there a way to reduce the batch call

Request for Ovoid Corners

Hello,

I was wondering if it would be possible to add the feature to add roundness to corners unevenly, so the corner is more of an oval shape. Would this be possible?

Thanks!

Image not visible on iOS devices

Hey @kirevdokimov, thanks for sharing this, it looks awesome!
It works perfectly in the Editor, but I'm having a hard time getting it to work on iPhones though, the Images are not visible. Have you seen something similar?

*Using 2019.3.15f1

Corner become sharp on unity image objects if object width is less than 15

As problem states, the image corners become sharp / triangular when rounding objects that have a width or height less than 100, very weird issue

Does not work with sprites with type = Multiple with sprite editor

This works with single Sprites but if i go and drag a sprite resulted from a sprite editor slicing operation it does not work :(

I may be doing something wrong, could you help me out ? :)

Backface culling

I use a custom shader for background culling. Could this feature be added to this asset?
https://pastebin.com/YLiAieh8

Version 3 won't build

Unity 2020.3.26f1
UI-rounded-corners 3.0.0

If I try and build the project, I get a slew of editor-namespace errors:
The type or namespace name 'CustomEditor' could not be found (are you missing a using directive or an assembly reference?)

From googling around, it seem like Unity is not consistent when handling Editor folders in packages during a build, so we need to wrap all editor scripts in:

#if UNITY_EDITOR 

#endif

Shader doesn't work with RectMask2D

If using in a ScrollRect that uses RectMask2D for clipping, the image with rounded corners is not getting clipped.

Support SpriteAtals

Thanks for making a great plugin.

Unfortunately, this shader does not work with spriteAtlas.

In editor mode, spriteAtlas is treated as 1 texture, so it seems to work normally,

After building, the uv coordinates are changed to the uv coordinates in the packed texture, so it cannot be used.

Could you please fix it to support spriteatlas?

Need to refresh ImageWithCorners script after downloading image.

After resetting the image after downloading it from an URL, I have to call Refresh method form the RoundedCorners script otherwise the corners are buggy and not rounded.

To do this I set the Refresh method as public instead of private.

Not sure this is an issue but I posted this if someone else has this issue.

You should call SetDirty after any changes occur. It is both useful and necessary

Unity-UI-Rounded-Corners/UiRoundedCorners/ImageWithIndependentRoundedCorners.cs

Line 47 in 62751ed

public void Validate() {

        public void Validate()
        {
            var isDirty = false;
            if (material == null)
            {
                material = new Material(Shader.Find("UI/RoundedCorners/IndependentRoundedCorners"));
                isDirty = true;
            }

            if (image == null)
            {
                TryGetComponent(out image);
                isDirty = true;
            }

            if (image != null)
            {
                image.material = material;
                isDirty = true;
            }
#if UNITY_EDITOR
            if (isDirty)
                UnityEditor.EditorUtility.SetDirty(gameObject);
#endif
        }

As well as ImageWithRoundedCorners.cs

Support for Rectmask2D?

Well its in the title... it works with standard masks but not with those.

I wonder if there's a way to combine them, like having a RoundedRectMask2D or something similar.

Does not work on Android and IOS

I cannot get the rounded corners to show up in my android and ios game

RawImage support

I tried to upload an improvement but don't have permissions.
I would suggest you to change the Image dependency to MaskableGraphic. Then, we would be able to use RawImage also.

ImageWithIndependentRoundedCorners.cs and ImageRoundedCorners.cs
[HideInInspector, SerializeField] private MaskableGraphic image;

ImageWithIndependentRoundedCornersInspector.cs and ImageWithRoundedCornersInspector.cs
if (!script.TryGetComponent<MaskableGraphic>(out var _)) { EditorGUILayout.HelpBox("This script requires an MaskableGraphic (Image or RawImage) component on the same gameobject", MessageType.Warning); }

Redundant assets in unity package

Hello @kirevdokimov !

First of all - that's one really great asset, it makes working with UI much easier.

There is one minor issue with package.json - it includes gifs and examples, that aren't really required in final version downloaded via Unity Package manager.

Consider adding following lines into package.json:
"files": [ "/LICENSE", "/LICENSE.meta", "/README.md", "/README.md.meta", "/package.json", "/package.json.meta", "/UiRoundedCorners", "/UiRoundedCorners.meta" ]

It should filter out heavy gifs and examples, thanks!

Center not filled on some mobile Devices

On some mobile devices, the center is not filled (see screenshot)
Devices i encountered this issues are: HTC One_M8, Nexus 5
It works fine on other devices (Tested with Sony Xperia X Compact, Samsung S8, Oneplus 6)

I'm Using Unity 2019.2.9f1

Couln't open include file 'SDFUtils.cginc'

I used this package before and did not get this error. What do you think?

Best,

gif-05.gif has no meta file

I got this error message. Maybe you forget to add the meta file to git.

Read only asset Packages/com.nobi.roundedcorners/gif-05.gif has no meta file.

Rounded Corners Mask

Can you please add that the shader can be applied to a mask as well and not only to the masked image?

Buggy inside ScrollRect

Hello! If you put an image inside ScrollRect and try changing rounding radius, nothing happens. It only works outside of ScrollRect.
Seems it conflicts with Mask component.

Material Values Constantly Changing

Hey @kirevdokimov!

Firstly, thanks for the great plugin, it made designing our in-app catalog a lot easier! It's much appreciated.
I'm just reaching out to find out if you know why the values of a RoundedCorners material might be changing constantly?

It seems like every time we open the prefab that has objects using the material, the width, height and radius values change - it's a bit annoying because it constantly shows up in our source control!

Thanks again!

EDIT: I've done a bit more testing, it seems like on Play it will be one set of values, and then when opening the prefab (as stated above), it will change. Very weird behaviour! I'm not sure if it's completely specific to your plugin though...