I am trying to do something that appears quite simple, but I cannot for the life of me figure out the best way of doing it.
I’m want to have a horizontal layout group with two elements in it. I want the two elements to be centered within the layout group. One of the elements is an image, whose size should never change. The other is a text element.
However, I do not want the image & the text to overflow the boundaries of the containing horizontal layout group. This means I want to set a maximum width of the text element. Once the maximum width has been reached I want the font size to shrink.
I’ve tried several solutions, but none of them seem to give the desired behavior.
My assumed solution was to simply have a horizontal layout group with the image and text element. The image would have a “Layout Child” component with “Min Width” to prevent shrinkage. I would need to enable “Auto Width” in the text element. (If I don’t the text element width is static and the image & text will not be centered if the text is short.) However, if I use “Auto Width” the font size will not automatically scale down. I would have assumed using the “Layout Child” component on the text and setting the “Max Width” value would prevent the text from growing too wide, but that does not seem to be the case. From a layout perspective it does (see Google logo position below), but not for the sizing of the text.
I appreciate the answer a lot. Thanks for taking your time!
However I’m interested in knowing how to achieve the desired layout using the tools and components available in PlayCanvas. So it’s more a technical question than a design question.
There are many ways I can avoid the problem by changing the design. And ultimately that’s what I might end up doing. This is more a question for me to understand the proper way to combine the functionality of the different components.
There will be cases where I can’t really avoid the problem with monospace fonts. For example in the case of localization.
@Codeknight999 thank you as well. I appreciate the crafty responses. I did also consider a solution where I override the element component and add a “Max Width” attribute on the text element and simply prevent the “Auto Width” to exceed a specific width.
So there are ways, but I was somewhat hoping it would be possible with the tools available.
It’s not exactly what I wanted to achieve, but left adjusting the icon and using text alignment to center the text in the remaining area allows me to move on.
I am however very curious if anyone knows if there is a proper way to combine text with “Auto Width” and Layout Groups/Layout Children with “Max Width”.
I couldn’t make it work via the default settings/features either so ended up creating a small script that scaled the text element when it overflowed instead:
I’ll probably end up going with a solution like the one you presented. However I will most likely be changing it to not use the update function. I’ll see if I can hook into any callbacks for the text changing, or providing my own SetText() function that would immediately run the resize. My layouts aren’t dynamic and I’m trying to avoid using update functions if I don’t have to.
Often avoiding the problem is solving it. Changing how something works because you found your initial idea too complicated to implement should never be seen as a failure. I honestly do not think anyone would really notice or care about the difference between the two styles you have created, and you must ask yourself if finding a solution is worth the effort when changing the design is obvious and resource free.
Yaustar seems to have created a solution, and a single script on some text is not really going to be noticeable in terms of performance, but I will say that using your resources (both development time and actual processing power) to brute force an original concept when the design can be slightly changed to avoid the problem entirely might not be advisable.
Thanks for taking the time to give me your point of view!
Again, I want to stress that my original post was more about me learning the engine and understanding what its capabilities are. So that I know when I should adapt my UI designer’s designs and when I don’t need to.
I totally agree with you that working with the engine instead of against it is a recipe for success. I am just still learning, and subconsciously comparing PlayCanvas to all the other engines I’ve used in the past. Trying to understand its strengths and weaknesses.
EDIT:
And speaking of taking the easy way out. I’ve actually grown to like the “Workaround Design” better than the original.