自适应讲解部分可以参考以下网址: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只支持比其大的屏幕)的更多相关文章

  1. NGUI 屏幕自适应大屏与小屏(初始设定宽高为1280x720,能适应比其小或者更大的屏)

    具体细节可以参考另外一篇随笔! 以下提供的算法完成的事: 1.自适应1280x720分辨率以下的屏幕 2.自适应1280x720分辨率以上的屏幕 在我设定的要求内包括的分辨率大部分都测过了,背景图.全 ...

  2. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  3. js获取屏幕(设备)宽高

    平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见 ...

  4. css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  5. js-获取屏幕的中各种宽高

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  6. CSS实现宽度自适应100%,宽高16:9的比例的矩形

    现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...

  7. JS根据屏幕分辨率改变背景宽高

    //控制浏览器显示的高宽 function document_loaded() { GotoMainStep(); /; document.getElementById("main1&quo ...

  8. CSS实现宽度自适应100%,宽高16:9的比例的圖片或者矩形

    前言 图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利 ...

  9. 获取iframe自适应后的宽高

    1.同域 一:引入jquery <script type="text/javascript" src="../jquery.min.js">< ...

随机推荐

  1. ACM知识点

    基础算法 高精 模拟 分治 贪心 排序 DFS 迭代加深搜索 BFS 双向BFS 动态规划 DAG上DP 树上DP 线性DP 图算法 最短路 FLYD DJATL BF 最大流 Dinic ISAP ...

  2. SpingMVC ModelAndView, Model,Control以及参数传递

    1.web.xml 配置: <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class& ...

  3. ContentProvider小结

    1.什么情况下需要使用ContentProvider 跨进程提供数据访问的接口,如果在同一个App下,没有必要使用此种方式 2.自定义ContentProvider public class MyCo ...

  4. 第一个ruby程序

    老实说不是很喜欢去讨论ruby和python的对比,似乎总是把两个语言放在对立的位置上,我觉得没有必要,同样是动态语言,同样是解释型脚本语言,很多特性都是互相影响的,语言本身也在不断进化,我们更应该关 ...

  5. wordpress stratus模板使用 产品显示问题

    产品不显示,只显示展示产品代码. 1.研究原站demo,思考产品展示调用自woocommerce. 2.查看woocommerce文档,更新展示代码. 3.修改后产品出现,但是多余的关联推荐也展示出来 ...

  6. According to TLD or attribute directive in tag file, attribute test does not accept any expressions

    HTTP Status 500 - /WEB-INF/views/emp/list.jsp (line: 30, column: 4) According to TLD or attribute di ...

  7. Cordova webapp实战开发(20161207 )

    http://www.cnblogs.com/zhoujg/archive/2015/05/28/4534932.html 1.https://www.jetbrains.com/idea/downl ...

  8. AOP和IOC的作用

    IOC:控制反转,是一种设计模式.一层含义是控制权的转移:由传统的在程序中控制依赖转移到由容器来控制:第二层是依赖注入:将相互依赖的对象分离,在spring配置文件中描述他们的依赖关系.他们的依赖关系 ...

  9. PAMI 2010 Context-aware saliency detection

    This is a highly-cited paper. The context aware saliency proposed based on four principles, which ca ...

  10. Nginx限制访问速率和最大并发连接数模块--limit (防止DDOS攻击)

    Tengine版本采用http_limit_req_module进行限制 具体连接请参考 http://tengine.taobao.org/document_cn/http_limit_req_cn ...