UI resolution dependent scaling woes

So i've recently been looking into resolution independant ui and have been playing with the canvas scaler's scale with screen size mode. And while it works well for certain ui elements it comes up short for others.

I have a health meter in my game which is made of a number of images overlaid over one another to give the appearence of a gauge of some sort, with a circular fill and a needle that points to the filled portion.

(you can see the temp art below)

Now, because it is made up of multiple images overlapping each other it would be very hard to rescale the ui element through anchors and have them all stay in the exact same relative place. And due to the nature of the images they shouldn't be stretched out of proportion. I could give each image an aspect ratio fitter and set the anchors so it scales properly with resolution changes but it seems like a huge pain, with the component images sliding over each other if im not careful.

In comes the canvas scaler to save the day! The guage scales to fit the same portion of the screen height with no warping and everythings great forever right? Wrong

The problem is that although the canvas scaler is great for that one part of my UI it is terrible for other parts of the UI. Text in particular becomes blurry and unreadable if scaled rather than changing font size.

What i want to know is if theres a way to scale one group of UI components the same way as a canvas scaler, and other components in a different way, this would be the ideal.

Thanks to anyone who takes the time to respond

 

Hey,

I know this is not the answer you are looking for but one thing that might help is replacing the text component with a text Mesh Pro one - they scale much better.

Nathan

 

Well it aint a perfect fix but it sure looks like it might help my blurry text woes, thanks nathan

 

To solve it You need to Worry about a Few things,.......

This relies on Scaling with hieght in the canvas,...

now u just adjust the width settings.

Heres the code i used


float Ratio = 0;
float CompOut = 0;
float FractionOf = 0;
float PositonOffset = 0;
float x = Position.x;
float y = Position.y;
Vector3 PositionOut = new Vector3(0, 0, 0);

Ratio = (ScreenResolutionW / ScreenResolutionH);// =1.33 == 3/4
CompOut = (600 * Ratio) / 2;//600 is Ui canvas Height
FractionOf = (-800 / 2) - x;//800 is Ui canvas Width
PositonOffset = CompOut - FractionOf;
PositionOut = new Vector3(-PositonOffset, y, 0);

now apply position Out to the rect-transform usinf untiy.engineUi

SomeObject.gameObject.GetComponent<RectTransform>().localPosition = PositionOut;

What is happening is the ratio changes from the canvas ratio so to counter this
when screen resolution changes if you leave the canvas at 800*600 then this code will convert the width output depending on a new ratio....so is short this works if canvas is always the same if canvas width heigh changes so must the 600 and 800 inputs above.

basicly it works by how from from the left is the ui and how wide extra is the new width ratio...

to call from the right use 800 not -800,....

 

i think swaping the position offset as - or positive can swaps side of screen aswell,..just play around with the -800 and the positionout - one of the version will be the correct side,...i know this works for left im not sure if it works on the oppositive side, i remember doign the right side by removing both negatives,... im sure theres a extra step to make it multi if its isnot atm

 

Here made a video