Preface
Screen adaptation is a question that must be asked in interviews. Today I will tell you how to do screen adaptation.
Yes, there is a game development exchange group here. I hope everyone can click in to exchange development experiences together!
Design resolution is easy for everyone to understand, so what is the adaptation strategy?
Suppose we take the design resolution as 960x640 as an example, and we want to adapt it to 1920x1080. You will find out, how to adapt this? 960x640----> 1920x1080, the height is different, the width is different, and there are two different latitudes that need to be adapted, which makes it difficult to handle. The game engine came up with a way. I first kept it consistent at one latitude, and then adapted it at another latitude. So which latitude should I choose? If the height is the same, it is a fixed height; if the width is the same, it is a fixed width. This is the origin of fixed height and fixed width.
Fixed height: 960x640, first adapt the logical resolution ((1920 * 640 / 1080) x 640), then, we multiply it by a scale (1080/640) to 1920x1080;
Fixed width: 960x640, first do the logical resolution adaptation (960 x (1080 * 960 / 1920)), then we have a remaining proportion scale (1920/960), to 1920x1080;
The size and coordinates processed by the game engine are all logical sizes. The logical size of the game window is the resolution calculated by our fixed height or fixed width strategy;
Therefore, the size and position in our code are all based on the logical resolution. In the final drawing, the size and position will be multiplied by the scale fixed by the target pixel resolution;
For example, 100 * 100, fixed height, after reaching 1920x1080, the pixel size is (100x100) * 1080/640, so we will eventually adapt to 1920x1080;
Tip 1: Stops
One latitude is consistent with the design. We only need to consider the adaptation of the other latitude and arrange all the main contents of the design within the scope of the other latitude. At this time, several relative points will appear. For example, my type is based on the center, based on the top, based on the bottom... When adapting, we usually make several reference points for signs, as shown in the red dots.
The core principle is that no matter how your screen size changes, I only need to dynamically adjust the position of the reference point according to the screen size, so that the elements relative to the reference point will also move accordingly. This is how we generally do adaptation. Many of us will have components to complete this adaptation, such as Widgets, etc. Your logo on the top will always be on the top no matter how the screen changes, and the logo on the bottom will always be on the bottom no matter how the screen changes.
Tip 2: Content scaling
Even so, because one latitude is different after all, it is possible that the content cannot be placed at this latitude and is stuck together. We still need to make some adjustments to the size of the content. We can make some content adjustments based on the logical resolution. Zooming can allow these contents to be arranged;
Quick Tip 3: Resize
Some UI controls are regional, such as scroll bars, etc. We hope that after adaptation, the size of the area will also change with the change of the screen. At this time, you can set the offset of the area relative to the boundary, as shown in the figure:
In this way, the boundary changes, and the size also changes.
In fact, it is not difficult at all once you understand the core principle of adaptation. Will you answer the question in the next interview?
Attached: video tutorial
Lesson 022 UGUI screen adaptation www.bycwedu.com/promotion_channels/171555448 Edit