koobas.hobune.stream
Way to create a border around a Panel frame
So I might be going about this in the wrong manner, but I can't see to create a border around a 2D Panel like below.
What you see below is an image with a left border that is supposed to take up the right hand side. When I change the resolution of the project from 16 x 9 to anything else (Free Aspect, etc.) it causes that deformation as you see. (I'm using Shapes2D to create the boxes and using panels.)
Is there anyway to create a border for one or more sides of a panel or other square box without turning the whole thing into a rectangle? Or is using Images and image sprites the only way that this is possible?
Panels are just images, nothing fancy or special. They just add a default to it.
So in your regard, the best thing to do is first of all make sure you scale by aspect ratio for UI elements. Here is how I would "create" a border. With a fancy custom slider!
[range(0,1)]
public float outlinePercentage;
void CreateOutline(){
Transform backgroundOutline = Instantiate(outlinePrefab, whateverPos, Quaternion.Euler.Identity) as Transform;
backgroundOutline.localScale = Vector3.one * (1 - outlinePercentage);
}
The last line just multiplies by the neat public float slider we made. So assumably if you crank that down, you'd create a border procedurally.
So the "outline" here is what is essentially masking your border. So lets say you set it at .85% and put white behind it, you would have that thick of a white background behind it, scaled to your UI. Bam!
Not really sure if I really understood what you tried to say, but:
You could try to add a canvas scaler component to your canvas and set the UI Scale mode to scale with screen size, set a reference resolution and the screen match mode to match width or height. For example I tend to set 1080x1920 fro my mobile projects.
You can also add one of the Layout components (grid, vertical, horizontal) to distribute your elements and set a padding.
Hope I've helped!
