(15th) unity4.6 learn Ugui Chinese Document ------- tips-Designing UI for Multiple Resolutions, ugui-designing

(15th) unity4.6 learn Ugui Chinese Document ------- tips-Designing UI for Multiple Resolutions, ugui-designing

Hello everyone, I am Sun Guangdong. Reprinted please indicate the source: http://write.blog.csdn.net/postedit/38922399

More comprehensive content please see my game pretty cool address: http://www.unitymanual.com/forum.php? Mod = guide & view = my

3. UI How Tos

In this section, you will learn how to use some advanced user interface functions.

1. Designing UI for Multiple Resolutions

Modern games and applications often need to support a wide variety of screen resolutions, especially for UI la S. The unity UI system includes various tools for this purpose, which can be combined with various methods.

In this operation, we will use a simple case study to look at different tools in this context. In our case study, we have three buttons, as shown below. In the corner of the screen, the goal is to adapt to the layout

Resolution Rate

This operation requires us to consider four screen resolutions: Phone HD in portrait Phone HD portrait (640x960) and landscape (960x640) and Phone SD in portrait mobile SD portrait (320x480) and landscape (480x320 ). The layout was initially the resolution of Phone HD Portrait Phone Portrait.

Use the anchor to adapt to different aspect ratios

The UI element is located in the center of the parent rectangle by default. This means they keep a constant and offset to the center.

If you change the landscape aspect ratio of the installer, the button may not be in the Rectangular screen.

Face

One way is to change the layout when the button is still in the screen, so that the button position is tied to their respective corners on the screen. You can use Anchors Preset in the checker to select a position from the drop-down list to set the top left button's Anchors to the top left corner, or drag the triangle anchor to the upper left corner of the scene view. It is best to do this, while the current screen resolution set in the game view is an initial design layout, and the button Layout looks very correct. (For more information about the anchpoint on the UI Basic Layout page, see ). Similarly, the lower left and lower right buttons can be set to the lower left and lower right buttons respectively.

Once the buttons have been anchored to their respective corners, they still stick to themselves when changing different aspect ratios of screen resolutions

Location.

When the screen size changes to a larger or smaller resolution, the button will also be anchored to its respective corners. However, since they keep their original size specified in pixels, they may occupy a larger or smaller proportion of the screen (that is, the button size is not scaled at all ). This may or may not be desirable because you want your layout to act on screens of different resolutions.

In this operation, we know that the smaller resolution PhoneSD Portrait and Landscape do not correspond to the smaller material on the screen, but the lower pixel density of the screen. Buttons on these low-density screens should be displayed larger than the content on the high-density screen ----- the display has the same size and they should be the opposite.

This means that the button should be smaller as the screen is small. In other words, the size of the button should follow the screen size. This is where the Reference Resolution component can help.

Reference Resolution

The ReferenceResolution component can be added to the root Canvas-a Canvas component of a game object, which uses all UI elements as its own sub-objects.

You can specify a resolution in the ReferenceResolution component as a reference. If the current screen resolution is smaller than or greater than this reference resolution, the scale factor on the canvas is set to accordingly, so all the UI elements are scaled together with the screen resolution.

In our example, we set the reference resolution to 640 × 960 of Phone HD landscape. Now, when the screen resolution is set to 320x480 of the Phone SD portrait, the entire layout is scaled down in proportion and displayed in proportion to the full resolution. Scaled down: the size of buttons, the distance between their screens, button graphics, and the edges of text elements. This means that the layout is the same on the Phone SD portrait and Phone HD portrait; it only uses a low pixel density.

One thing to note: After adding a Reference Resolution component, it is important to check how other aspect ratios are laid out. Now set the resolution to Phone HD landscape. We can see that the button is larger than just now.

The reason why a large button appears in the landscape aspect ratio is that the Reference Resolution component works. By default, it compares the width of the current resolution and the width of the reference resolution. The result is measured as a scale factor. The current landscape resolution is 960x640 wider than the portrait reference resolution 640x960, and the layout scale is increased by 1.5 times.

The referenceresolution reference resolution has an attribute called Match Width Or Height, which can be 0 (Width), 1 (Height), Or a value between the two. By default, it is set to 0, and the current screen width reference resolution width is compared, as described above.

If the Match Width OrHeight attribute is set to 0.5, it compares the reference resolution Width with the current resolution Width and the current resolution height with the reference resolution height, and selects the scale factor between the two. In this case, landscape resolution is 1.5 times wider, but 1.5 times shorter. Then the two factors are combined to generate a scale factor of 1, this means that these buttons keep their original size.

At this point, the layout supports all four screen resolutions. Use the appropriate anchor and Reference Resolution component combinations on the canvas.

Physical Resolution

TODO

Zookeeper