1
\$\begingroup\$

I have an image and a text for displaying the player score. They are both displayed through a canvas.

Currently, my textbox remains the same size independent of the score, so when the player gets a big score, it prints outside of the image.

I want keep my score inside the background image, and I also want to change the size of the image along with the number of digits in the score, like "10, 100, 1000, 10000" etc.

How can I adapt the size of my background image on the amount of digits in the current score?

\$\endgroup\$
2
  • \$\begingroup\$ Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. \$\endgroup\$ Commented Aug 30, 2016 at 6:13
  • 2
    \$\begingroup\$ I found it incredibly easy to interpret what your asking, but you are unclear on exactly how you are displaying the background image. I have seen alternate methods for doing so, and how you do it in your project will make a difference to what you have to do to get it to increase its width to 'back' more digits. What object/component type do you use? A screenshot of your current setup (display + inspector) may be helpful, too. \$\endgroup\$ Commented Aug 30, 2016 at 6:15

1 Answer 1

Reset to default
2
\$\begingroup\$
  1. Make sure the image is imported as an UI sprite. You might want to slice the image in 3x3 divisions to control how it stretches.
  2. Set the image as a background of a panel.
  3. Make the score text a child of the panel
  4. Add a content size fitter to the panel with "preferred fit" on horizontal and/or vertical (depending on which you want to adjust automatically, set to "Unconstrained" to switch off resizing on one axis).
  5. Add horizontal (or vertical) layout group to the panel. It doesn't matter which one, unless you add more than one child.

It will then adapt to the size of its child.

This technique is also described in the Unity manual under "UI -> UI How Tos -> Making UI elements fit the size of their content".

\$\endgroup\$
8
  • \$\begingroup\$ I try this but not working for me. My hierarchy is Canvas --> Panel --> Text. Text Gone out from background. \$\endgroup\$ Commented Aug 31, 2016 at 13:23
  • \$\begingroup\$ Do you have demo or tutorial.? Then please share link here. \$\endgroup\$ Commented Aug 31, 2016 at 16:00
  • 1
    \$\begingroup\$ @mahesh I forgot a step: You also need to add a layout group to the panel for this to work. Updated answer. \$\endgroup\$ Commented Aug 31, 2016 at 16:50
  • \$\begingroup\$ This is working with just only 4 digit, when i get 5th digit it go out from the background(overflow from background). I have one more image of Coin. same like succes games temple run and subway surfers. \$\endgroup\$ Commented Sep 1, 2016 at 11:19
  • \$\begingroup\$ @mahesh Check the link in point 1 of my answer and make sure the image is imported as "Sprite( 2D / UI)" and that you set up the slicing as explained in the link. When this doesn't help you, please create a new question with all the required information. \$\endgroup\$ Commented Sep 1, 2016 at 11:25

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.