UI Development Core problem-ui with screen adaptive

The effect of screen resolution on UI adaptation

In general, Uiroot chooses the fixsize zoom mode, which allows the UI to scale automatically with resolution, keeping the ratio of the size of the screen relative to the same, so that the overall UI doesn't look as if it's going to get bigger and smaller. However, there is another really serious problem: the aspect ratio of different screens is not the same.

In unity, the aspect ratio of different screens is generally stretched to the height of the width.

The way to toggle screen Scale mode is in the screen scale menu in Game view, where the freeaspect is an unlimited aspect ratio, where you can select the desired aspect ratio.

If the screen scale menu does not have the desired screen scale, you can click on the menu at the bottom of the small better button, you will be prompted to customize a new screen scale mode of the interface, the label option, you can enter a name to the custom screen scale name. You can select the Fixedresolution and aspect ratio two options in type, and if you select Fixedresolution, you can enter specific pixels of the resolution width and height in the width&height below, if you select aspect Ratio, you can enter the aspect ratio of the resolution in the width&height below. Once set, click the OK button to save this custom screen resolution mode.

Because the Ngui Uiroot has fixsize mode, the main focus is to solve the adaptation of the screen aspect ratio when the UI is adaptive to the screen.

Screen resolution for mainstream devices

Whether it's a PC device or a mobile device, the screen resolution is typically between 4:3 and 16:9, and in general, you only need to consider these two values as limit values.

The use of adaptive core component anchor

The so-called anchor, that is, the anchor point, it works is that it will automatically bind to a certain point of the camera as the anchor point, there are total anchor points on the left, upper, right, left, middle, right, left, bottom, right, lower 9 points can be set. When the camera changes, the position of the object where the anchor component is located also changes as the camera changes and is always positioned at the anchor point of the camera boundary.

Anchor is created by selecting Create->anchor in the Unity top Ngui menu.

Settings for the Anchor component:

The Uicamera option automatically locks the camera on the UI where the anchor is located, and it binds a point on the edge of the camera as the anchor point. Container is a contained object, which is normally not required, because placing an object in a anchor sub-object allows the "child object to follow the parent object" to implement the anchor point following the anchor.

Side one of the core items, select the anchor EEG, a total of 9 points, respectively, corresponding to the camera edge of the left, upper, upper right, left, middle, right, bottom left, bottom, right lower.

Runonlyonce means to execute once, that is, only at the beginning of the time of the adaptation, the default is ticked, a put do not need to modify it.

Relativeoffset, which is the relative position offset of the anchor, in percent form.

Pixeloffset, pixel offset, anchor is offset in pixels relative to the anchor point on the edge of the camera.

Precautions for using anchor

(1) After setting the anchor side anchor Point, anchor will automatically run to the anchor position of the response, do not need to manually drag anchor.

(2) The use of 3D UI or 2D ui,anchor is identical, do not manually drag the anchor position.

(3) In general, try not to set anchor Relativeoffset and Pixeloffset, let the anchor keep the anchor point of the original position, and then put the UI control under the anchor as a sub-object, and then adjust the position of the UI control.

(4) Anchor body, as far as possible to ensure that only anchor a component, in order to facilitate management and maintenance.

(5) In a set of UI systems, there can be countless multiple anchor (for example, 5 anchor are located in the upper-left corner are allowed), but try to ensure that anchor is not anchor in the parent object, that is, to avoid anchor. The parent object of anchor can be either UI Root or an empty object.

(6) Do not misuse anchor, if the camera edge of the 9 anchor points in each point has more than one anchor to locate, then it must be the actual UI structure is problematic.

Several issues that must be clarified before you formally develop the UI

(1) What kind of platform is being targeted.

(2) The Game device screen width to height ratio of the largest, the smallest is a few.

(3) The standard resolution of the game development is how many pixels, this will be related to the art production of picture resources standards.

(4) Check the UI design sketch, and the Planner to determine which UI will adapt to the position when the screen aspect ratio changes.

(5) identify which anchor point the UI of the adaptive location belongs to, and design an optimal UI structure.

UI Development Core problem-ui with screen adaptive