一、Game视图的屏幕分辨率可以先自定义添加,供以后选择,以下是手游经常用到的分辨率:

1.1136X640,iPhone5

2.1920X1080,横屏,主流游戏都是这个分辨率

3.1080X1920,竖屏

4.960X640,横屏iPhone4

5.640X960,竖屏iPhone

6.768X1024,ipad

7.800X480

8.480X800

Screen Space(Overlay)模式下的Canvas节点的Rect Transform组件的Width和Height是随着Game视图的分辨率的选择而改变的,是不能手写修改的,但是其子节点的Rect Transform组件是可以改变的。

二、Image节点的Rect Transform组件是可以修改的,其中:

1.PosX,PosY,PosZ(0)表示Image节点在父节点下的相对坐标,以父节点的菊花为参照原点(0,0),可以修改菊花的位置,这时候PosX,PosY也就自动改变了。

2.ScaleX,ScaleY,ScaleZ表示Image节点的缩放,可以让节点随着自己设置的值拉伸收缩

3.Pivot:中心点,支点。定义图片的中心点在哪里,就是相当于Cocos2d里面的精灵的锚点,这个点是受PosX,Pos影响的,也就是说,这个点到父节点原点的距离就是PosX,PosY。Pivot(0,0)在左下角,Pivot(1,1)在右上角,Pivot(0.5,0.5)在中心

4.Rotation旋转,可以选择Scene视图的2D按钮来让视图更好调整。

5.那朵菊花,也就是父节点的原点,可以在父节点的范围内随意移动的,这个只能在子节点的Inspector面板里面设置因为父节点Canvas是不能更改Rect transform组件的。

 菊花不能超过父节点的范围,它是相对于父亲的百分比来算的,这样改变父节点的大小,菊花还是在哪个位置。

 其中Anchors属性(相对父亲的停靠点),是和左上角的图案配套来设置父节点的菊花位置的。Anchors min max 表示四小朵菊花瓣的位置,四小朵菊花瓣组成了大菊花。目前只知道4朵花瓣和在一起可以表示父节点的原点,分开的四朵花瓣的作用还没有搞清楚。

 除了那9个代表性的菊花的位置外,还可以自己设置菊花的位置,可以占用某一列下来的百分比,或者某一行的百分比,通过用鼠标拖拽在Scene视图里面移动可以看到视图中有百分比数值在变化,只要看到自己想要的停下了就行了。

三、菊花的作用:

一个父节点下面有很多的子节点,每个子节点都有自己相对于父节点的菊花,也就是说Image子节点的菊花可以在左上角,然后它把自己的Pivot设置成(0,1),这样,再把自己的PosX,PosY,设置成(0,0),就可以把Image节点附着到父节点的左上角了。

其他的子节点可以根据自己想附着的位置而设置自己的菊花位置。

四、屏幕适配准备工作:

创建一个Canvas节点

设置Canvas节点的Canvas组件的Render Mode为Screen Space(Overlay)

创建一个Image类型的UI节点在Canvas父节点下面

设置图片的Texture Type为Sprite

把图片拖进Image节点的Source Image属性下面

点击Image节点的Set Native Size

设置Canvas节点的Canvas Scaler组件的UI Scale Mode为Scale With Screen Size

设置Canvas节点的Canvas Scaler组件的Reference Resolution为640X960,这个是美术的设计分辨率

设置Image的ScaleX,ScaleY,数值为640/512,640是640X960的宽,512是图片的宽度,让背景图片尽可能地覆盖Canvas,超出一点也没关系。

做背景图的时候要长一点,这样就可以适配所以分辨率的要求,不然如果是按照宽度适配的话,上下会不断改变,而按照高度适配的话,左右会不断改变,我们一般选择用宽度适配,

也就是设置Canvas节点的Canvas Scaler组件的UI Scale Mode为Scale With Screen Size,设置Canvas节点的Canvas Scaler组件的Match拉条,拉到Width,所以美术要做高背景图。

五、屏幕适配开始解决方案:

一个Canvas下面有很多的子节点,每个子节点的宽高设置为0,然后每个子节点自己的子节点的菊花就不能移动,然后改变Canvas子节点的菊花位置到中上位置,这样子节点的子节点就会被固定在Canvas中上的位置,不管怎么改变Game视图的分辨率,Canvas怎么变化,子节点的子节点还是在中上的位置,这就是屏幕适配。

面试会问UGUI的屏幕适配策略

关于Unity中的屏幕适配的更多相关文章

  1. Android 开发中的屏幕适配技术详解

    本文主要介绍Android开发中比较头疼繁琐的一个问题-屏幕适配问题.主要从适配原因.基本核心概念.适配方法等方面介详细 介绍从而是的深入或者进一步对Android屏幕适配技术的掌握和理解. 真题园网 ...

  2. 在Unity中实现屏幕空间阴影(2)

    参考文章: https://www.imgtec.com/blog/implementing-fast-ray-traced-soft-shadows-in-a-game-engine/ 完成的工程: ...

  3. 在Unity中实现屏幕空间反射Screen Space Reflection(1)

    本篇文章我会介绍一下我自己在Unity中实现的SSR效果 出发点是理解SSR效果的原理,因此最终效果不是非常完美的(代码都是够用就行),但是从学习的角度来说足以学习到SSR中的核心算法. 如果对核心算 ...

  4. 【Unity笔记】UGUI中Canvas屏幕适配

    1.通过RectTransform中的Anchors和Pivot来进行控件和窗体的布局适配. Anchors控制当前Panel相对于父窗体的布局位置,可以设置为居中或者左上角,当父窗体拉伸的时候当前P ...

  5. 在Unity中实现屏幕空间阴影(1)

    接着上篇文章,我们实现了SSR效果. 其中的在屏幕空间进行光线追踪的方法是通用的.借此我们再实现一种屏幕空间的效果,即屏幕空间阴影. 文中的图片来自Catlike coding http://catl ...

  6. 在Unity中实现屏幕空间反射Screen Space Reflection(4)

    第四部分讲一下如何在2D屏幕空间步进光线. http://casual-effects.blogspot.com/2014/08/screen-space-ray-tracing.html 中的代码感 ...

  7. phaser小游戏框架学习中的屏幕适配

    这篇博客主要讲一下上一篇博客的右侧和底部出现的问题.就是页面会有偏移量.说一下这个产生的原因吧. 一开始在构建html页面的时候,习惯性的在页面中加了 <meta name="view ...

  8. 在Unity中实现屏幕空间反射Screen Space Reflection(3)

    本篇讲一下相交检测的优化.有两个措施. 线段相交检测 之前的检测都是检测光线的终点是否在物体内.我们可以尝试检测光线的线段是否与物体相交. 比如说有一个非常薄的物体,光线差不多垂直于它的表面.如果用普 ...

  9. 在Unity中实现屏幕空间反射Screen Space Reflection(2)

    traceRay函数 在上一篇中,我们有如下签名的traceRay函数 bool traceRay(float3 start, float3 direction, out float2 hitPixe ...

随机推荐

  1. Android 数据加密算法 Des,Base64详解

    一,DES加密: 首先网上搜索了一个DES加密算法工具类: import java.security.*;import javax.crypto.*; public class DesHelper { ...

  2. 【转】一个对 Dijkstra 的采访视频

    一个对 Dijkstra 的采访视频 (也可以访问 YouTube 或者从源地址下载 MPEG1,300M) 之前在微博上推荐了一个对 Dijkstra 的采访视频,看了两遍之后觉得实在很好,所以再正 ...

  3. Linux内核jiffies简介

    在LINUX的时钟中断中涉及至二个全局变量一个是xtime,它是timeval数据结构变量,另一个则是jiffies,首先看timeval结构struct timeval{time_t tv_sec; ...

  4. VC++获取操作系统的版本 GetVersionEx函数

    原文链接: http://blog.sina.com.cn/s/blog_8a7012cf010189tn.html 函数:BOOL CSystemOperate::GetOSDisplayStrin ...

  5. django中数据库的相关操作

    一.使用环境 python2.7,django>1.7 二.数据库进行配置 在setting文件中进行修改 1.找到DATABASES DATABASES = { 'default': { 'E ...

  6. mongo操作及相关资料

    mongo操作 find方法 db.collection_name.find(); 查询所有的结果: select * from users; db.users.find(); 指定返回那些列(键): ...

  7. Swift语言 简明基础 代码演示样例

    开发环境: Mac.Xcode6.0 下面内容均可创建ios common line项目来測试 1.Hello World演示样例 使用xcode创建新的common line项目,查看主文件main ...

  8. gulp自动化ES6转ES5

    npm install --save-dev gulp npm install --save-dev gulp-babel npm install --save-dev babel-preset-es ...

  9. 给singer的左侧添加fixedTitle,并显示向上滚动偏移效果;

    1.将写好的dom绝对定位到顶部: 2.dom值为singerlist的currentIndex.title(通过计算属性获取),如果有则显示fixedTitle,没有则隐藏: 3.计算diff:当d ...

  10. SwitchOmega的详细配置——for Windows

    必看 先下载Shadowsocks客户端进行相应配置,然后只要对SwitchOmega 进行新建情景模式后简单配置即可. 本文不谈如何安装SwitchOmega只谈如何配置SwitchOmega 不会 ...