自适应讲解部分可以参考以下网址: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. java.map使用

    Map以按键/数值对的形式存储数据,和数组非常相似,在数组中存在的索引,它们本身也是对象.       Map的接口       Map---实现Map       Map.Entry--Map的内部 ...

  2. MongoDB中insert方法、update方法、save方法简单对比

    MongoDB中insert方法.update方法.save方法简单对比 1.update方法 该方法用于更新数据,是对文档中的数据进行更新,改变则更新,没改变则不变. 2.insert方法 该方法用 ...

  3. 关于reset.css的疑问:为什么一定要重置浏览器样式?

    自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...

  4. Spark Streaming源码解读之Driver中ReceiverTracker架构设计以具体实现彻底研究

    本期内容 : ReceiverTracker的架构设计 消息循环系统 ReceiverTracker具体实现 一. ReceiverTracker的架构设计 1. ReceiverTracker可以以 ...

  5. 图片链接hover移动的解决方案分析

    现实在网站中,我们经常看到有鼠标滑过某个图片,出现边框的效果.如下图:

  6. Thinkphp的单字母函数整理

    有人不太喜欢TP这种单字母函数,其实这也是TP的一个特色,如果理解了这些函数的作用,不管是背,还是写,都是非常方便的,接下来我们以字母顺序开始.A函数 B函数 C函数 D函数 F函数 L函数 R函数 ...

  7. jqurey的跨域使用getjson(http://www.jb51.net/Special/894.htm)

    JS的跨域问题,我想很多程序员的脑海里面还认为JS是不能跨域的,其实这是一个错误的观点:有很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUER ...

  8. excel 作图中次横坐标及次纵坐标的调试,以及excel自定义轴标签的步骤方法

    在工作中除了要做一些常用的图表之外,不时还会有一切奇怪图表的制作需求. 今天的内容主要记录的是如何对excle图表的次横坐标及次纵坐标进行调试,以及如何自定义调整轴标签 首先看下如何做次纵坐标,工作中 ...

  9. Sql With as 用法

    with district as (     select  * from Area where AbbrTW= N'中國'     union all     select  a.* from Ar ...

  10. Hello mybatis

    idea玩mybatis,终于搞出个hello mybatis.记录下过程,备忘. 1.person表 CREATE TABLE `person` ( `id` ) NOT NULL AUTO_INC ...