Its anchors are fixed on the bottom border of the screen.Note: This tutorial is intended for an intermediate to advanced audience, and won’t cover things such as adding components, creating new GameObjects scripts or the syntax of C#. Bottom Panel, where you have other buttons.Its anchors are fixed on the right border of the screen. Right Panel, where you have some buttons.Its anchors are fixed on the middle of the screen. Middle Panel, where you have the game title and the main buttons.I’ve made a simple UI example so you can download it and see how everything’s set. Now that you know how Layout components work, you can start playing with our UI. Read more here: Layout Element Documentation. For example you can use it if you want an image to behave differently when placed inside a Layout Group. The “ Layout Element” component lets you override the size of your UI element (minimum, preferred or flexible). Read more here: Horizontal Layout Group Documentation, Vertical Layout Group Documentation, Grid Layout Group Documentation. The “ Grid Layout Group” places them in a grid,? following the number of rows and columns that you provide. The “Horizontal Layout Group” component for example places its childs one next the other (along the X axis) and the “Vertical Layout Group” places them vertically. You can select the space between them, control their size and so on. Layout Groups place their childs side by side, depending on how you set them. There are a lot of components that give you more control on the displacement of UI elements, other than Rect Transforms. Read more here: Text Mesh Pro Documentation (1.3) Auto Layout You can use the “Best Fit” here too, it’s only called “Auto Size“. I suggest to look at the Text Mesh Pro package, which replaces the Legacy Text UI and it’s available in Unity for free in the package manager. The “ Best Fit” property of the Text component is what you’re looking for, you can set the “ Min Font Size” and the “ Max Font Size” and it will automatically fit the whole Rect Transform area (caring about those constant). More than the stretch Rect Transform, you’d also need to scale the size of your text with different resolutions. Read more here about the Rect Transform: Rect Transform Documentation. You can notice in which corner/side the anchor is placed remember that it has its parent Rect Transform as a reference, so if you want to anchor an image called “A” to “B”, A needs to be a child of B in the hierarchy. The “ Stretch” consist of the 0-1 range that we talked before, “red lines” are the one that will never change and persist between resolutions (so, Min = Max). They already give you a clear idea of where and how your object will be “hooked/anchored”. PresetsĪnchors have presets, you can see all the available ones and set them clicking the icon on the top-left here: It’s also the reference point for the position. The Pivot is the location where the rectangle/rect transform/area rotates around. Since it’s an area, you can also change the Width and the Height and you can modify its Pivot and its Anchors. It represents an area that contains your UI element you can scale it, rotate it and change its position. Rect TransformĪll UI elements have a Rect Transform component, which is the 2D counterpart of the Transform component. To show you about the Rect Transform component in the next part, I created an empty image. Read more here: Canvas Scaler Documentation.Īt this point we have a canvas that fits all resolutions proportionally based on our reference, now we need to resize and replace all our UI elements accordingly. If the slider is near width, the canvas will match the width of your screen first.“Screen Match Mode” to “Match Width Or Height“.“Reference resolution” (mine is 1920×1080).“UI Scale Mode” to “Scale with Screen Size“.There are a few properties that we need to set in order to change the Canvas based on our screen 100%, set: You can also set the Render Mode to “Screen Space – Camera” but be aware that it will fit the Camera Frustum this time.
0 Comments
Leave a Reply. |