自适应神器------Canvas Scaler (画布定标器)

       今天舶主翻阅了大神们的文章和书籍学习一下UGUI牛逼的自适应部分。。。两个字 ,强大。。。。。

       先来看一下Unity官方给Canvas Scaler的定义"The 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."。画布定标器用于画布上UI元素的整体缩放比例和像素密度。该缩放比例会影响画布中的所有东西,包括字体大小和图像边界。

        为了适应不同的分辨率,我们可能会允许适当的UI整体性的缩放,外加一些尽可能少的布局微调。这样就能达到一个比较理想的效果。Unity中 Canvas Scale就是负责该功能的组件。

       下面我们就打开这个组件看一看,Canvas Scaler的 UI Scale Mode(UI缩放模式)有三个值:constant pixel size、scale with screen size 和constant physical size。注意分清楚UI元素的像素和画布像素是完全不一样的。

       首先就应用给大家列举一下:Canvas Scale 模式为 constant pixel size 这个模式一般用于需要整体缩放画布的对象(通过Scale Factor)。constant  physical size 和前面这个类似也可以缩放(通过RectTransform)。scale with screen size这个模式比较常用是我们开发自适应一般用的模式。往后看重点阐述。

         

         Constant Pxiel Size 不变像素大小

         

         Scale Factor:画布的缩放比例。默认况下为1,表示正常大小。

         Reference Pixels Per Unit : 每单位代表的像素量

        

        一般用这个是来缩放图片的,用这个Factor(因子)值我可以一张图实现很多的大小还不失真,这种模式保证了恒定像素的来缩放的。这个对美术来说是个好组建,不用每个大小的都做一张,只要调好Factor因子值就好了。

 

         Scale With Screen Size: 根据屏幕大小定标(根据载体的分辨率来布局,会随屏幕分辨率的变化而变化。)

         

         

          Reference Resolution(参考分辨率):参照当前UI布局所依据的分辨率,随屏幕分辨率的变化而变化。//游戏运行的最理想分辨率,就是你做游戏时采用的分辨率

          Screen Match Mode(屏幕匹配模式): 参考宽或者高或者两者来布局画布。(width和height设置权重来调节影响比例模式)

          一般来说用的都是宽的情况多一点。当下的设备都是宽度变化较大,高度一般都没有什么变化。我们玩的游戏一般情况下要么是全屏,要么是左右留白。上下留白的太少了(横屏玩游戏)。说到这里就要强调一下了自适应并不是一定能适应成全屏的他是跟设备有关系的,它只会找一个最合适的匹配模式来显示。。。。

          这个工作的流程是Screen Match这部分Unity内置的代码和设备屏幕原始信息先匹配得到我们所需要的处理过的屏幕信息。然后Reference Resolution工作根据我们处理过的屏幕信息进行匹配。

         通过下面一个实例来加深认识:

         开始前提一下大家首先要理解应该是上一篇--------什么是画布和下一篇---------RectTransform组件,然后再去理解什么是自适应,怎么去做自适应。上来一下是看不懂的。尤其是不理解RectTransform的同学。。。。

         首先我游戏的理想分辨率为1920*1080,开码:

          创建一个Canvas然后调节Canvas的Canvas Scale组件中的UI Scale  Mode 属性:改为, Scale With Screen Size。Reference Resolution(参考分辨率):改为:1920*1080

         ··

         创建一个image组件,然后将它移动到画布的边缘。

        

         调节image的Anchors属性为父物体的左上角(即为anchorMin=(0,1),anchorMax=(0,1))。修改image的pivot点(UI元素中心点)的位置为左上角(即为pivot=(0,1))

         现在来说一下为什么要这样设置,首先·我的image是放在了UI上画布的左上角,anchors的意义在于以指定点为参考点,对应边到对应点的距离按比例不会发生改变

      我要保证我的image始终在画布里面如果以中间为参考点那么就有可能被撑出画布。这个选点是一个习惯多做几次就知道怎么选了,我这里选择了相对较优的左上点。

      再在image下面创建一个text,  text 进行同样的操作Anchors属性为父物体的左上角(即为anchorMin=(0,1),anchorMax=(0,1))。修改image的pivot点(UI元素中心点)的位置为左上角(即为pivot=(0,1))

      看下效果

      1920*1080(正常)

       

      

       800*600(自适应效果)

      

        

           Contant Physical Size 不变物理尺寸

           

           和Constant Pixel Size类似,但是只能通过RectTransform来改变大小。

           

           单位像素,DPI这类的舶主没有搞懂,有知道到兄弟指导一下,总感觉这个组件还差点火候。 

           

来源:http://www.cnblogs.com/morning-lee/p/7135782.html


智能推荐

数据归一化Scaler-机器学习算法

//2019.08.03下午 #机器学习算法的数据归一化(feature scaling) 1、数据归一化的必要性: 对于机器学习算法的基础训练数据,由于数据类型的不同,其单位及其量纲也是不一样的,而也正是因为如此,有时它会使得训练集中每个样本的不同列数据大小差异较大,即数量级相差比较大,这会导致在机器学习算法中不同列数据的权重很大的差异,数量级大的数据所体现出来的影响会远远大于数量级小的数据(比...

Xilinx ZYNQ Ultrascale+ 性能测试之 Video Multi Scaler

Video Multi Scaler 的 总线频率配置为 300M Samples per Clock 配置为4 其他配置如下 占用资源比较多,如下: 跑Bare Metal,用官方的 xv_multi_scaler_example.c 稍微修改下 源为 1080P 图片,目标为 720P 图片,格式为 YUYV8 每次同时跑几张图片 每秒帧率 1 555fps 2 278fps 4 138fps...

自适应滤波器及其应用 - 自适应噪声抵消器

       传统IIR和FIR滤波器在处理输入信号的过程中滤波器参数固定,当环境发生变化时,滤波器无法实现原先设定的目标。自适应滤波器根据当前自身的状态和环境调整滤波器权系数。 1 自适应滤波器理论           其中,x(n)是输入信号,y(n)是输出信号,d (n)为期望信号或参考信号,e(n) ...

unity 3D中实现canvas自适应问题

canvas自适应问题的出现: 在进行unity中UGUI界面设置时,往往会利用各类组件,控件。 当分辨率变换时,相应的如何让各类组件,控件实现大小,位置,状态的自适应成为需要解决的问题 问题解决方法1: 首先明确一点:如果在UGUI界面中未出现3D模型时,三种canvas渲染模式均可以进行canvas自适应。 若出现3D模型时,尽量使用Screen Space-Camera和World Spac...

echarts图表自适应浏览器窗口的大小

echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 显示效果如图...

猜你喜欢

让div自适应浏览器窗口居中显示

今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码:   css代码:   原理就是,先用 left:50%; top:50%; 让这个 div 的左上角位于页面正中,如图:   然后再利用 margin-left:-600px;margin-top:-200px...

[Winodows Phone 7控件详解]绘图控件-2

二.Path:路径控件通过Markup Syntax来绘制一系列的线条或通过Geometries来绘制形状,这个控件是图形控件中最复杂的。 还可以使用Mini-Language为Data属性赋值,Mini-Language强大。 Mini-Language: 移动命令:   M:绝对起始点   m:相对前一点的起始点   如:M 100,200 直线命令:   L/l:直线的结束点   如:L10...

设置tomcat项目发布目录

2019独角兽企业重金招聘Python工程师标准>>> a、选择发布路径 b、设置超时时间   15秒内停止完成,如果没有停止完成,就可能会出现端口被占用,所以停止时间设置成300秒,让它完全停止 c、资源有变化时自动发布 d、切换到modules面板,勾掉auto,否则可能会导致每一个ctrl + s都会导致重新发布   e、设置发布内容,发现把web-co...

Android+app测试基础1+安装软件appium

最近在安装appium软件,发现好多问题,这里跟大家共勉 1: node ,通过官网去下载node,https://nodejs.org/zh-cn/,下载最新的版本node, 注意如果你改变了node的安装路径,需要去配置path,就是把你的安装路径放置进去, 在命令窗口,输入 node -v ,如果出现如下界面,说明node安装好, 2: 配置 sdk,注意sdk的版本号必须高17,SDk需要...

5个提升技能的数据工程项目

所有迹象都表明数据工程将蓬勃发展。 Dice发布的2020年科技工作报告将数据工程列为2020年增长最快的领域,增长幅度达到惊人的50%,而数据科学职位仅增长了10%。您可以放心,数据工程的发展势头不会很快消退。为支持这一假设,国际数据集团 (IDG) 预测,从2021年到2024年,数据使用量的五年复合增长率 (CAGR) 将超过过去 30 年的数据创建总量。 如果您仍然不相信数据工程的前景,那...

问答精选

Makefile syntax: what is $(RM)?

I saw the following Makefile online (here): When there is a hello.c file in the same directory with the Makefile, make command in Terminal builds hello executable. When make clean is run, hello execut...

Bootstrap Navbar not working when Responsive CSS not used

I am using latest Bootstrap for designing my Admin panel. The Navbar I have included work fine when the Responsive css is include as below : But when I remove this line and reload the page, the Dropdo...

Iterate over first N rows in pandas

What is the suggested way to iterate over the rows in pandas like you would in a file? For example: I was thinking to do something like: Is there a built-in way to do this though in pandas? Hasn't any...

Is there a pre-made Continuous Integration solution for .NET applications?

From my perspective, we're constructing our own 'flavour' of NAnt/Ivy/CruiseControl.Net in-house and can't help but get the feeling that other dev shops are doing exactly the same work, but then every...

In Enyo, how do you remove a control you created?

One example, I have a refresh buttons I created that is displayed on top, could I have code to later on remove this control????? code with refresh button in it I would like to remove later on as the p...

相关问题

相关文章

热门文章

推荐文章

相关标签

推荐问答