Bellow is a section of my games UI made in Unity3D. I was adding the icon on the left side when I realized that it was much larger than the icon in the middle so I went to give them a similar size. According to the Rect Transform of these objects the icon in the center of the screen is larger than the one on the left which again according to the Rect Transform is the smallest icon on the screen.
Does anyone know of why this might be? I don't quite understand Unity's units of measure. These icons are nested in many game objects with Layout Groups, Content Size Fitters, and Layout Elements. So I am not exactly sure what is retentive to these icons but I will show their parents and grand parents here.
If There is anything else I can you would need to know I can post more info.
You don't show the scale of the rect transforms so I assume they are the same.
Layout groups and content size fitters will (if you allow them to) change the size of the GameObject to make it fit a certain space, that is what they are for! This will then override the size that you have manually given to the GameObjects.
Related
I'm new to Unity and to game development in general.
I would like to make a text-based game.
I'm looking to reproduce the behavior of an instant messenger like messenger or whatapp.
I made the choice to use the Unity UI system for the pre-made components like the rect scroll.
But this choice led me to the following problem:
I have "bubbles" of dialogs, which must be able to grow in width as well as in height with the size of the text. Fig.1
I immediately tried to use VectorGraphics to import .svg with the idea to move runtime the points of my curves of Beziers.
But I did not find how to access these points and edit them runtime.
I then found the "Sprite shapes" but they are not part of the "UI",
so if I went with such a solution, I would have to reimplement
scroll, buttons etc...
I thought of cutting my speech bubble in 7 parts Fig.2 and scaling it according to the text size. But I have the feeling that this is very heavy for not much.
Finally I wonder if a hybrid solution would not be the best, use the
UI for scrolling, get transforms and inject them into Shape sprites
(outside the Canvas).
If it is possible to do 1. and then I would be very grateful for an example.
If not 2. 3. 4. seem feasible, I would like to have your opinion on the most relevant of the 3.
Thanks in advance.
There is a simpler and quite elegant solution to your problem that uses nothing but the sprite itself (or rather the design of the sprite).
Take a look at 9-slicing Sprites from the official unity documentation.
With the Sprite Editor you can create borders around the "core" of your speech bubble. Since these speech bubbles are usually colored in a single color and contain nothing else, the ImageType: Sliced would be the perfect solution for what you have in mind. I've created a small Example Sprite to explain in more detail how to approach this:
The sprite itself is 512 pixels wide and 512 pixels high. Each of the cubes missing from the edges is 8x8 pixels, so the top, bottom, and left borders are 3x8=24 pixels deep. The right side has an extra 16 pixels of space to represent a small "tail" on the bubble (bottom right corner). So, we have 4 borders: top=24, bottom=24, left=24 and right=40 pixels. After importing such a sprite, we just have to set its MeshType to FullRect, click Apply and set the 4 borders using the Sprite Editor (don't forget to Apply them too). The last thing to do is to use the sprite in an Image Component on the Canvas and set the ImageType of this Component to Sliced. Now you can scale/warp the Image as much as you like - the border will always keep its original size without deforming. And since your bubble has a solid "core", the Sliced option will stretch this core unnoticed.
Edit: When scaling the Image you must use its Width and Height instead of the (1,1,1)-based Scale, because the Scale might still distort your Image. Also, here is another screenshot showing the results in different sizes.
I'm attempting to create a scrollable UI object that has 2 sections with one on top of the other: a text section and a button list section. My main problem is that the text and list of buttons change in size depending on what content the player is viewing.
It seems that just throwing the text and buttons into an empty UI object doesn't work, because the empty game object does not take on the size of its children, and since the empty object does not have its own size, scrolling through its contents is not possible.
Is there maybe an element that I am not aware of that could help me out?
Here's the setup I use for Scroll. It seems you are missing the third object, the content object. It is what decides the physical size of your content size using a Content Size Fitter and a Layout Group. I decided to include the entire setup just in case you are missing something else.
Parent Object (Mask OR Rect Mask 2D) - Object that is the visual bounds of your UI
-> Scroll Object (ScrollRect) - Actual scroll component that drives the UI scroll
-> Content Object (Horizontal OR Vertical Layout Group AND Content Size Fitter) - Is the parent of your actual data in your scroll
To explain this a bit better, the Mask is used when you have a nonrectangular asset that you still want to be your max viewing bounds. Anything outside of this Mask will not be rendered. A Mask is more expensive than a Rect Mask 2D, so if your viewport is a square or rectangle, then use the 2D component.
The Scroll Rect is the driver of the scrolling of UI elements in Unity. Make sure to check the box if it is horizontal or vertical. I assume in your use case you are using vertical. Make sure to set the Content field to be the child of this object and the Viewport to be the parent (the mask).
The Content Object has two components on it. The first being the Content Size Fitter which will force this object to be the size of its content. If your scroll is a vertical scroll, set the Vertical Fit to Preferred Size and leave the Horizontal Fit to be Unconstrained size. If it is the opposite, then set the opposite of what I just said. The other component on this object is a Horizontal Layout Group OR a Vertical Layout Group. The difference being which direction your scroll is. The checkboxes in the settings of this object matter quite a bit. Check out the docs on what each one does.
If you attach the components as I specified and set the proper settings on the layout group, you should be able to have as many dynamic objects with variable size swapping between text and buttons.
If you have any other questions let me know. UI can be a bit daunting at first but once you figure it out, it gets much easier.
Edit:
To achieve an object that can change size with a text object and a button, you will need to use a combination of content size fitters and layout groups.
Here is an example hierarchy
Here is the result
Using a combination of the layout groups and content fitters forces the container the text is in to be the size it needs to be. If you are making these assets static meaning none of it is data-driven at runtime, then this should work right away. If you are changing this data at runtime, you will need to use LayoutRebuilder on the parent objects to assure that the layouts rebuild properly. Let me know if you have questions.
I am working on the credits for my mobile game and I have a license attribution thing at the end that is relatively long. On normal phone screen sizes it fits properly, but on notched phones, a big chunk of the end gets cut off and on tablets, there is a lot of empty space at the top and bottom. I had both the label and the content panel of the ScrollView for the credits set to the anchor preset which is anchored to the top of the parent but stretches horizontally and I tried changing it so that they stretch vertically too and that did nothing. I also tried moving the label's anchors to its own corners (but didn't do that with the content panel's anchors because that's not possible), but that also did nothing. I asked this on Unity Answers earlier this week and they haven't been very helpful. How do I make the text not get cut off or have a lot of extra space?
I eventually just clicked "Best Fit" on the text and now it fits properly. I was worried that it would look bad if it was a different size on different screens, but it doesn't seem to be a huge problem.
My problem is very difficult to describe, so hopefully (with the pictures I provide) someone can help me figure this out. If you are confident you can fix it, I'm willing to pay if I have to. I need this fixed.
I cannot for the life of me figure out how to work with the Unity canvas/layout groups. I have a series of canvases that only show one at a time (think of them as screens). Inside each canvas are components (the first one is a graph and timer, and then a data panel and some buttons.
Here is an image of what I'd like each of the panels to look like (only one of these will be open at a time):
Essentially, I just want each sub-canvas (the dark gray boxes) to inhabit ~50% x 50% of the screen, and when the orientation is horizontal/vertical, tile them accordingly.
Each Child panel (the dark gray) only needs to change. The children inside of the panel can stay and scale relative to the parent canvas.
I have tried EVERYTHING, dug through the documentation, and have run out of options.
Have you tried adding a Layout Element to all of those gray panels with a Flexible Width or Height setting? The screenshot below shows how to have two panels that are side by side, both occupying half the width of their container. (Both have a Flexible Width setting of 1.)
The two Panels are children of the Canvas that has a Horizontal Layout group like this:
I need to move an image down through canvas so that its central point would be where is now its top edge. It makes some 50 points, but if I decrease y by 50, it moves to different part of the screen on devices with different screen size. I guess, it's because my main canvas is set to scale with the screen size. So I suppose I need to manually divide the number 50 by my screen height and then code to multiply by Screen.height? Isn't there a more convenient way to move UI objects?
Allow me a second question: Do you think it is even wise to make a game purely on canvas? My game is simple 2D, only slightly animated and contains many layout elements, so I decided to go for it, but I have hard time to grasp the UI position rules.
you may have the problem of the anchoring.
Unity UI totally depends on the Anchoring, if you have got right anchoring there is no issue.
For example. if you anchored something at the Center than changing left and right value moves them according to the center anchor.
for clear visualization, you can paste a screenshot of the behavior.