kirevdokimov / unity-ui-rounded-corners Goto Github PK
View Code? Open in Web Editor NEWThis components and shaders allows you to add rounded corners to UI elements!
License: MIT License
This components and shaders allows you to add rounded corners to UI elements!
License: MIT License
Currently, after adding ImageWithIndependentRoundedCorners or ImageWithRoundedCorners component, the Image will only be displayed in the left eye.
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.)
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?
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.
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?
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?
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.
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:
The changes to the script are as follows:
RequireComponent
to ensure we always have an Image component.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?
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
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!
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.
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?
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
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!
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
As problem states, the image corners become sharp / triangular when rounding objects that have a width or height less than 100, very weird issue
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 ? :)
I use a custom shader for background culling. Could this feature be added to this asset?
https://pastebin.com/YLiAieh8
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
If using in a ScrollRect that uses RectMask2D for clipping, the image with rounded corners is not getting clipped.
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?
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.
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
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.
I cannot get the rounded corners to show up in my android and ios game
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); }
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!
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.
Can you please add that the shader can be applied to a mask as well and not only to the masked image?
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.
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...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.