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?

|improve this question|||||
\$\endgroup\$
  • \$\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\$ – Kromster Aug 30 '16 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\$ – Gnemlock Aug 30 '16 at 6:15
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".

|improve this answer|||||
\$\endgroup\$
  • \$\begingroup\$ I try this but not working for me. My hierarchy is Canvas --> Panel --> Text. Text Gone out from background. \$\endgroup\$ – mahesh Aug 31 '16 at 13:23
  • \$\begingroup\$ Do you have demo or tutorial.? Then please share link here. \$\endgroup\$ – mahesh Aug 31 '16 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\$ – Philipp Aug 31 '16 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\$ – mahesh Sep 1 '16 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\$ – Philipp Sep 1 '16 at 11:25

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.