NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕)
自适应讲解部分可以参考以下网址:http://www.xuanyusong.com/archives/2536,下面代码中提到的AdaptiveManualHeight()函数就是参考该文章的。
下面主要说的就是背景图、全屏透明Sprite和控件位置自适应的东西。
由于我们所要开发的游戏只支持800x480及以上的分辨率的手机,因此分辨率小于800x480的自适应这里不考虑(其实都差不多的,就是多了一个if判断,然后分别调整下背景图、全屏透明背景而已)
见下图,背景图和全屏sprite(这里为了方便观看,背景图和全屏sprite就没重叠,且全屏sprite设置成透明灰色而不是完全透明)不是父子关系,处于九宫格位置的控件可以使用Anchors来固定在屏幕中的相对位置,UIRoot的Scaling Style属性选择FixedSizeOnMobiles(PS:这个属性要再IOS或者Android平台上才能起作用,为什么可以看UIRoot里面的代码有条件编译,我是在BlueStacks安卓模拟器上运行此测试案例的),ManualHeight就是你实际设计UI时定的高度(可参照上面网址中雨凇momo所讲解的)
首先确定设计时用的宽高为designWidth、designHeight;实际屏幕宽高为realScreenWidth、realScreenHeight;
widthScale = realScreenWidth/designWidth;
heightScale = realScreenHeight/designHeight;
1.因为实际游戏中,背景图一般都是带有不规则图案的(如果宽高不是等比缩放的话,则图案就会变形),因此背景图按照widthScale 与heightScale之间的大者进行缩放(比如设计时定下的屏幕宽高为800x480,实际手机分辨率960x640,那960/800=1.2, 640/480=1.333,那么此时取1.333为背景图的缩放值),这样的话背景图就能铺满整个屏幕不会出现黑边且不变形,但是一般会超出屏幕,这个时候可以让背景图居中(当然了,需要让美术在设计的时候将背景图的重点图案放在中间,边角位置不要放重点图案,这样的话背景图的边缘位置就不会有什么重要信息,也就是发生裁切了也没什么关系)
2.由于游戏中处于九宫格位置的(比如左上角、左下角、右上角、右下角、还有中间、左中间等等其他的区域)控件需要贴着屏幕边缘,这个时候就是要用锚点Anchors(其Target在本例中是指FullScreenSprite)来自动调整,而此时完全透明的Sprite(UIRoot中的ManualHeight缩放起作用之后,将Sprite拉伸至整个屏幕)就起了这个作用,除了背景图外的所有控件都是全透明Sprite的子控件。这样UIRoot缩放起作用之后处于九宫格位置的控件也可以贴边!
具体的见以下代码吧:
using UnityEngine; using System.Collections; using System; public class Test : MonoBehaviour { public UIRoot mUIRoot = null; public UISprite mBackgroundSprite = null; public UISprite mFullScreenSprite = null; ; ; ; ; private readonly float mWidthScale = Convert.ToSingle(Screen.width) / cDesignWidth; private readonly float mHeightScale = Convert.ToSingle(Screen.height) / cDesignHeight; void Awake() { CalculateScreenWidthHeight(); } void Start() { Assert.IsNotNull(mUIRoot, "Test.Start(), mUIRoot is null"); Assert.IsNotNull(mBackgroundSprite, "Test.Start(), mBackgroundSprite is null"); Assert.IsNotNull(mFullScreenSprite, "Test.Start(), mFullScreenSprite is null"); AdaptiveManualHeight(mUIRoot); AdaptiveBackgroundSprite(mBackgroundSprite); AdaptiveFullScreenSprite(mFullScreenSprite); } private void CalculateScreenWidthHeight() { float scale = (float)mUIRoot.activeHeight / Screen.height; mRealScreenWidth = Mathf.CeilToInt(Screen.width * scale); mRealScreenHeight = Mathf.CeilToInt(Screen.height * scale); } public void AdaptiveManualHeight(UIRoot uiRoot) { Assert.IsNotNull(uiRoot, "Test.AdaptiveManualHeight(), uiRoot is null"); if (Convert.ToSingle(Screen.height) / Screen.width > Convert.ToSingle(cDesignHeight) / cDesignWidth) { uiRoot.manualHeight = Mathf.RoundToInt(Convert.ToSingle(cDesignWidth) / Screen.width * Screen.height); } else { uiRoot.manualHeight = cDesignHeight; } } //自适应背景图,按宽宽比、高高比的大者缩放 public void AdaptiveBackgroundSprite(UISprite backgroundSprite) { //此if语句针对屏幕宽或高大于设计时所定的宽或高 if (mRealScreenWidth > backgroundSprite.width || mRealScreenHeight > backgroundSprite.height) { int adaptiveHeight = Mathf.RoundToInt(cDesignHeight * mHeightScale); int adaptiveWidth = Mathf.RoundToInt(cDesignWidth * mHeightScale); if (mHeightScale <= mWidthScale) { adaptiveHeight = Mathf.RoundToInt(cDesignHeight * mWidthScale); adaptiveWidth = Mathf.RoundToInt(cDesignWidth * mWidthScale); } backgroundSprite.SetDimensions(adaptiveWidth, adaptiveHeight); } } public void AdaptiveFullScreenSprite(UISprite fullScreenSprite) { fullScreenSprite.SetDimensions(mRealScreenWidth, mRealScreenHeight); } }
上面代码我在很多分辨率下都测试过(当然要是大于等于800x480的分辨率),如果要支持800x480以下分辨率的,那么自己修改函数
AdaptiveBackgroundSprite(),就是加个else语句做多个调整。 如果存在什么问题或者更好的建议麻烦告知,不胜感激!
NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕)的更多相关文章
- NGUI 屏幕自适应大屏与小屏(初始设定宽高为1280x720,能适应比其小或者更大的屏)
具体细节可以参考另外一篇随笔! 以下提供的算法完成的事: 1.自适应1280x720分辨率以下的屏幕 2.自适应1280x720分辨率以上的屏幕 在我设定的要求内包括的分辨率大部分都测过了,背景图.全 ...
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- js获取屏幕(设备)宽高
平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见 ...
- css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
- js-获取屏幕的中各种宽高
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- CSS实现宽度自适应100%,宽高16:9的比例的矩形
现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...
- JS根据屏幕分辨率改变背景宽高
//控制浏览器显示的高宽 function document_loaded() { GotoMainStep(); /; document.getElementById("main1&quo ...
- CSS实现宽度自适应100%,宽高16:9的比例的圖片或者矩形
前言 图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利 ...
- 获取iframe自适应后的宽高
1.同域 一:引入jquery <script type="text/javascript" src="../jquery.min.js">< ...
随机推荐
- 几种常见 容器 比较和分析 hashmap, map, vector, list ...hash table
list支持快速的插入和删除,但是查找费时; vector支持快速的查找,但是插入费时. map查找的时间复杂度是对数的,这几乎是最快的,hash也是对数的. 如果我自己写,我也会用二叉检索树,它在 ...
- java.lang.classnotfoundexception org.json.jsonexception
java.lang.classnotfoundexception org.json.jsonexception 解决方法 http://www.java2s.com/Code/Jar/j/Downlo ...
- Maven依赖版本冲突的分析及解决小结
1:前言 做软件开发这几年遇到了许多的问题,也总结了一些问题的解决之道,之后慢慢的再遇到的都是一些重复性的问题了,当然,还有一些自己没有完全弄明白的问题.如果做的事情是重复的,遇到重复性问题的概率也就 ...
- 配置Struts.xml DTD文件报错
报错信息为: The content of element type "struts" must match "((package|include|bean| cons ...
- RunLoop的模式
RunLoop的模式有Default模式.Connection模式.Modal模式.Event tracking模式和Common模式. 1) NSDefaultRunLoopMode: 大多数工作中 ...
- OpenLayers Map理解
1,视口坐标的原点在左上角,水平向右为x轴正向,垂直向下为y 轴正向:2,地图坐标原点为初始图层的中心点,水平向右为x轴正向,垂直向上为y轴正向:3,视口中心点永远与地图中心点重合,不一定与瓦片中心点 ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
- Xamarin Android自学和实践步骤
一.入门(已完成) 1.学习Xamarin Android项目的基本结构 2.学习界面布局的基本方式 3.学习基本编码规则 4.学习页面跳转和传值 5.学习对话框和提示信息显示方法 6.学习使用系统剪 ...
- 第三周作业--VS 2013 单元测试
VSTS可以实现自动测试,简而言之就是编写一个测试程序的程序,通过输入自动判断输出是否与预想相符,并给出代码覆盖率等等一大堆统计数据,以下为如何利用这一功能的简介. 1.新建项目,创建一个类.即要完成 ...
- Servlet学习四——传输文本
在最初使用Servlet时,觉得get方法很好用,也了解到传输一般性的变量,除了文件流和安全性外,都可以用get方法,所以,也就习惯用get方法了. 在实现一个注册方法过程中,中文注册都是乱码,跟踪后 ...