I have some UI panels laid out with layout groups and I wish to have images inside the panels.
How do I go about doing this?
I am aware that sprite masks exist but unsure if I can get the size of the panels to drive the bounding area of the mask.
The panels are variable in size since I would like the UI to work on any aspect ratio so I can't just use a static object for the sprite mask.
My UI Layout
I would like these images to keep their original aspect ratio but be cropped to the size of the panels.
On the panel gameobject you can add a RectMask2D component.
Make sure the image is a child of the panel and add the AspectRatioFitter with a AspectMode "Envelope Parent" and the aspect ratio of the image.
Related
I'm making a VR game where I hava a unity canvas set up as Word space, I'm plannoing to add a plane as background to provide better constrast and use the colliders to allow the user grab it and place it wherevet him wants.
I need to change the size (height and width) of the canvas depending of the content so the content should be always inside the canvas.
Is there any component to allow me change the size of the canvas/container depending on the content of the canvas?
Sure, what you're looking for is the Content Size Fitter component.
You can put it on your world space canvas and it should resize to its content as documented. Depending on your needs this will also involve adding a Vertical Layout Group component or similar.
Lets say i have a canvas with a panel containing a plain white image.
Hidden by mentioned panel, there is a panel with a coloured image on it.
Now lets take a scrollrect, fill it with some smaller panels as content, add a mask to each of those, and put the scrollrect in a panel on top of the plain white panel.
How could i make these scrollable small panels mask out the white panel and show the coloured panel below while the white panel and coloured panel are static and don't move?
I am well aware of the fact, that the white panel and coloured panel would have to be children of the mask component, and that's the problem, because then they would scroll along.
I searched the web a bit, but could only find stuff related to scrollrect viewport masking but not putting masks in a scrollrect.
EDIT: One way would be to directly mask the coloured panel by using each of the small panels as masks and make the coloured panel scroll inside each small panel by *-1 to counter the parent scroll, but that seems like a bad solution
Thanks for any kind of advice <.<
Use a mask or better yet a rect mask 2d. You add this component to a parent, and all of the children get masked based on its ‘rect transform’ which will show up in the top right of the editor on applicable UI elements. Also you can toggle the gizmo on and off to view a green outline.
https://docs.unity3d.com/Packages/com.unity.ugui#1.0/manual/script-RectMask2D.html
Combing rect mask 2d with scroll rect can give you some powerful results and definitely accomplish what you need.
https://docs.unity3d.com/Packages/com.unity.ugui#1.0/manual/script-ScrollRect.html
I'm trying to add some buttons to a gameObject which is a scroll view child. The child is a very wide image, about 4 times as wide as normal screens, which is why I let it control the height, so that it is always from top to bottom, and only exeeds horizontally where scroll is allowed.
Here you can see my setting.
1. is the wide image
2. is a banner that used to be part of the image, but now I want it to be a individual gameObject.
I don't know how I can make the banner (2) inherit the behavior of the "full map" (1), right now when I choose free aspect and resized the game view, the "full map" scales nicely, so the it always fits from top to bottem. The more narrow the screen is, then more of the map will exceed to the right, and vice versa.
However the problem is that then banner (2) has a rect transform, which is set with x,y coordinates relative to the parent which scales. So as i resize around the view, the banner gets out of it's intended position, and also does not scale with the. I have tried many different components, but without luck. Here among, scale constraint, canvas scaler, position constraint
As you can see in this gif, the banner does not scale down, as the island gets smaller, also it stays in the same position horizontally.
Any suggestions on how I can make the children os the map behave as they were part of the map?
Deleted previous, misunderstood the question.
Proposed solution:
You remove the map part from UI and create it as an object: You attach the map image as a texture to (ie) a plane (see a video here). You add the "infinity island" as another texture and have it placed over the island image.
After that, you control the camera to zoom in/out of the island and not struggle with any scaling or moving UI.
I think you need to anchor the images to center of the island mini image, you can drag the anchor gizmo from the scene hierarchy.
If you see it as free aspect it gets buggy and difficult to handle, but if you choose a resolution everything is smooth.
Is this what you want?
Change the resolultion
I have created a 2D game with an orthogonal camera and using 16:9 display size.
I dragged my background image onto the hierarchy (it's about 2048x1152) and then set the camera size to be 22.5, which made it fit the background perfectly and displays just right.
However, when I add a Canvas for a UI it is absolutely giant, about 100 times bigger. It only becomes 'normal' size with respect everything else added when I set the camera to its default size of 5. So when I add a small graphic, it too becomes giant.
I'm simply following a book I read and I'm not doing anything to deviate.
Am I doing something wrong? Below is what I mean. The background image is the little image in the bottom right and the outlined rectangle is the canvas with a small graphic added.
Thanks.
To force your Hierarchy Canvas UI to the same resolution as the Camera View in your Unity Editor Scene window resolution (i.e. not ridiculously massive), or in other words get the Canvas to fit into the Camera size in the Scene, do the following:
Set the Canvas component's Render Mode to Screen Space - Camera.
Make sure you select or drag the relevant Camera from the Hierarchy to the Render Camera field in the Inspector.
You should use the Unity canvas for this along with the canvas scaler component. If I'm not mistaken it will scale all elements relative to the screen they are viewed on.
The canvas scaler allows you to match the scaling based on a preferred viewport size which is a life saver.
However this may not fit you needs perfectly as it would mean that the background element would become fixed. So if you wanted to pan the element you would need to move it's x and y elements within the canvas.
Hope that helps?
I want to implement scrollview in Unity3D 5 UI with horizontal images downloaded from web, they have different random aspect ratios, but I want them to be constant height. And width to be according their aspect ratio, like this:
I tried to use Horizontal Layout Group, but images get too little, so it can all fit in group, when I want them to be constant height and stretch parent's width. So, like, parent's widht is primary and it affects children, but I want children to affect total parent's width (expand it when adding new children images).
Any ideas how to achieve this? Thanks.
You need to use ScrollView with horizontal scrolling enabled and vertical scrolling disabled. Setup your hierarchy as in the image below:
On the GameObject named Content attach Horizontal Layout Group and Content Size Fitter with the following settings:
Then on all your images attach a Layout Element component and during runtime calculate the width using the aspect ratio of the image and height to the Content gameobject and assign this width to Preferred Width property of Layout Element Component: In the following image 300 is the calculated width for the image:
As a result any images you add as child to the Content gameobject will increase their parent's width and also you will be able to scroll horizontally to view all the image.
p.s. I wrote this answer in a hurry. Hopefully it will make sense to you if not let me know and I will improve my answer.