Now change to a portrait resolution (height > width). It easily happens that you miss to add the corresponding screen configuration and actually edit the fallback configuration instead. Note: You should always double check if you have a "Rect Transform Override" for the Screen Configuration you are currently editing.
ANYLOGIC AUTO ARRANGE PLUS
After the Better Locator Component appeared, click the Plus symbol in the right upper corner of the "Rect Transform Override" section and select " Portrait " to add transform information for the portrait mode.ĭo this for the other bar as well (Alternately you can select both bars at the same time and do all this for both at once). To do this, select a bar and right click on the header-line of the Rect Transform (or the three dots on the right upper corner of the Rect Transform) and select " ♠ Add Better Locator ". To allow different positions / sizes for different orientations, you need to add a Better Locator to all elements which should be responsive (both bars in this case). If you now change the resolution, the bars will be stretched and shrinked to cover the same percentage of the screen.
Open the Snap Anchors Tool, select both bar objects and hit the big button in the Snap Anchors Tool (Border Tab). The easiest way to achieve this is by moving the anchors to the borders of the bars: When you are done, you should make sure that the bars scale with resolutions. You may use the Align & Distribute Tool to position them perfectly. Now arrange the bars in a way that they are horizontally attached to the left side of the canvas and above each other. You may need to change the resolution in the Game View or you use the Pick Resolution Window for it (The game window must be visible when using this, though). Make sure you are working in a landscape resolution (width > height). Then add another image, name it " RedBar " and change the color to red. Name it " GreenBar " and change the color of the image to green. This will automatically create a Canvas and EventSystem and puts an ordinary UGUI Image inside the Canvas.
In an empty scene right-click in the Hierarchy and select UI -> Image. You can also configure it manually or change things later on by selecting the Resolution Monitor. To achieve this, simply follow the Setup Wizard which should automatically start after importing Better UI and answer the second page as shown in the screenshot on the right (first question: "Landscape", second question: "Yes"). įor this Tutorial we use a Landscape Orientation as default (Fallback) and an additional Screen Configuration for Portrait Orientation.
ANYLOGIC AUTO ARRANGE INSTALL
To not mess with your current project's settings, it is recommended to create a new Unity Project and install Better UI. Setting up the Projectīefore we begin, make sure that your project is set up correctly. Don't expect any logic for calculating the bar sizes based on some values. This approach is just for demonstrating the responsive features of Better UI. Note: The bars are just images which we will arrange by hand. The bars will have a nice horizontal / vertical gradient (see pictures on the right).
ANYLOGIC AUTO ARRANGE HOW TO
You will learn how to use the Better Locator as well as Size Config Collections (in this case: for Better Image )Īt the end of the tutorial we will have a fake-bar-chart with two horizontal bars in Landscape mode and the same two bars arranged vertically in Portrait mode. In this tutorial you will learn step by step how you can create one UI which works in Landscape as well as Portrait resolutions.
0 kommentar(er)
