多语言展示
当前在线:693今日阅读:84今日分享:32

Unity UGUI技巧 之 Canvas对屏幕的自适应适配

Unity UGUI技巧 之 Canvas对屏幕的自适应适配。本节介绍,在Unity开发中,Canvas的UI对屏幕的自适应问题,特别是移动端的简单案例,具体如下
工具/原料
1

Unity

2

UGUI

方法/步骤

CanvasScaler:1)功能描述class in UnityEngine.UIInherits from:EventSystems.UIBehaviourThe Canvas Scaler component is used for controlling the overall scale and pixel density of UI elements in the Canvas. This scaling affects everything under the Canvas, including font sizes and image borders.For a Canvas set to 'Screen Space - Overlay' or 'Screen Space - Camera', the Canvas Scaler UI Scale Mode can be set to Constant Pixel Size, Scale With Screen Size, or Constant Physical Size.Using the Constant Pixel Size mode, positions and sizes of UI elements are specified in pixels on the screen. This is also the default functionality of the Canvas when no Canvas Scaler is attached. However, With the Scale Factor setting in the Canvas Scaler, a constant scaling can be applied to all UI elements in the Canvas.Using the Scale With Screen Size mode, positions and sizes can be specified according to the pixels of a specified reference resolution. If the current screen resolution is larger then the reference resolution, the Canvas will keep having only the resolution of the reference resolution, but will scale up in order to fit the screen. If the current screen resolution is smaller than the reference resolution, the Canvas will similarly be scaled down to fit. If the current screen resolution has a different aspect ratio than the reference resolution, scaling each axis individually to fit the screen would result in non-uniform scaling, which is generally undesirable. Instead of this, the ReferenceResolution component will make the Canvas resolution deviate from the reference resolution in order to respect the aspect ratio of the screen. It is possible to control how this deviation should behave using the screenMatchMode setting.Using the Constant Physical Size mode, positions and sizes of UI elements are specified in physical units, such as millimeters, points, or picas. This mode relies on the device reporting its screen DPI correctly. You can specify a fallback DPI to use for devices that do not report a DPI.For a Canvas set to 'World Space' the Canvas Scaler can be used to control the pixel density of UI elements in the Canvas.

二、UGUI技巧 之 Canvas对屏幕的自适应适配
1

打开Unity,新建一个空工程,具体如下图

2

在场景中,新建一些“Image”,绿色的“Image”放置在Canvas画布右上角且锚点也位于Canvas画布右上角,其他图片如图放置,且锚点在Canvas画布中心,具体如下图

3

此时,Canvas的“Canvas Scaler”的“UI Scale Mode”为“Constant Pixel Size”,具体如下图

4

切到Game视图,视图比例设置为“4:3”,此时UI正常显示,但是当Game视图屏幕变小,由于UI Scale Mode”为“Constant Pixel Size”,所以,最后UI超出了屏幕,具体如下图

5

把Canvas的“Canvas Scaler”的“UI Scale Mode”设置为“Scale With Screen Size”,其他默认设置,具体如下图

6

切到Game视图,此时UI正常显示,当Game视图屏幕变小,由于“UI Scale Mode”为“Scale With Screen Size”,无论多小,UI都缩小正常显示,具体如下图

7

但是把“Reference Resolution”设置为“X400  Y600”,其他不变,则Game视图UI又会超出屏幕,具体如下图

8

但是,把“Canvas Scaler”的“Match”改为“1”,则又能正常显示,具体如下图

9

总结:1)当开发应用在移动端时,“Canvas Scaler”的“UI Scale Mode”为“Scale With Screen Size”,以便自适应移动端屏幕2)最好事先知道应用到移动端屏幕的分辨率,或屏幕比例,以对应合适设置“Canvas Scaler”的“Reference Resolution”3)当应用是横屏游戏时,把“Canvas Scaler”的“Match”改为“0”,以“Width”为基准缩放UI适应屏幕;当应用是竖屏游戏时,把“Canvas Scaler”的“Match”改为“1”,以“Height”为基准缩放UI适应屏幕4)当然“Canvas Scaler”还有其他设置,但是不是常用,这里不做介绍了,以上内容针对UI屏幕自适应就够用了

10

到此,《Unity UGUI技巧 之 Canvas对屏幕的自适应适配》讲解结束,谢谢

注意事项

您的支持,是我们不断坚持知识分享的动力,若帮到您,还请帮忙投票有得;若有疑问,请留言

推荐信息