1
\$\begingroup\$

I have a section in my scene where I have an image on a layer, as a child of this layer I have a load of text objects. I need the ability to zoom in and out of the image (it's a technical drawing, so necessary to zoom in and out), so I have set up a simple Scale of the image itself (via Playmaker) and applied the zoom in to a button and the zoom out to another button. When zoomed out, the image Scale is set to the default 1 and when zoomed in it goes to Scale 3. It works perfectly. I have also added a 'Scroll Rect' to the parent canvas, this enables me to click and scroll around the image when it is zoomed in - this also works perfectly.

However the main problem I have is that while the image looks fine zoomed in (the original image is a large size, so looks fine even when scaled up to Scale 3) - the text does not look good when scaled. It is essentially just 'zooming' in on the text and therefore the bigger it gets, the worse it looks.

Text is set to 'Best Fit' - it has to be this way due to the fact I have dynamic translations on the text, so the text needs to stay within its specified area and shrink if necessary.

Ideally I would like the text size to scale in line with the image scale - ie. if the text is size 10 when zoomed out, then it should be size 30 when zoomed x3 (as opposed to a scaled size 10) - is this possible? The text must stay in the exact same position relative to the image, as text is placed at specific points on the drawing. The text also needs to be able to be scrolled in exact line with the image (hence why I have it as a child of it, so it follows nicely).

Canvas is set to 'Screen Space - Overlay' with 'Scale with Screen Size' and 'height' at 1 (works perfectly across the game like this).

Screenshots attached...

Canvas

enter image description here

Text

enter image description here

Any help would be appreciated.

Thanks in advance

Unity 5.3.5 PC/Mac Standalone only

\$\endgroup\$
3
\$\begingroup\$

I've dealt with this before, and the simplest solution (which is also kind of a hack, so beware) was to scale the text transforms by the inverse of the maximum zoom, and multiply their font size by the maximum zoom. This will cause Unity to render a higher-resolution font texture that will look better when zoomed in.

Example: Your maximum zoom amount is 3x. Set the scale of all text transforms to 0.33333. Set their font size to (3 * original font size). So, for a text component that originally had the font size 10, the new font size is 30.

\$\endgroup\$
  • \$\begingroup\$ Hi, can you explain what you mean exactly by inverse of the maximum zoom? I've tried setting the parent of the text objects to -3 scale, but this just turns everything upside down. Putting minus figures into the Font Size and Best Fit max size on the text doesn't seem to work either. Cheers \$\endgroup\$ – NIMBLE JIM Apr 12 '17 at 21:37
  • \$\begingroup\$ The inverse of a number is 1 divided by that number. \$\endgroup\$ – Victor T. Apr 12 '17 at 21:50
  • \$\begingroup\$ Hi, I'm still having trouble with this. My text transform is set to Scale 1 by default. My text size is set to 10 and best fit Max 10. Zoom is x 3. Therefore inverse of the maximum zoom is 0.33. I have changed the text scale to 1.33 and the text size and best fit max size to 33 (can't do decimal points for text size). This hasn't achieved the result I am wanting - can you advise where I'm going wrong? Thanks \$\endgroup\$ – NIMBLE JIM Apr 14 '17 at 19:18
  • \$\begingroup\$ Oops, I did have a grammatical problem in there. I cleared it up a little, and gave an example using your numbers. \$\endgroup\$ – Victor T. Apr 14 '17 at 20:28
  • \$\begingroup\$ Thanks for the update, it has solved my problem. The blurry text was much worse when viewing Chinese and Korean characters, now they look nice and crisp. Thanks. \$\endgroup\$ – NIMBLE JIM Apr 14 '17 at 23:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.