Unity2D多分辨率屏幕适配方案(转载)

一下内容转自:http://imgtec.eetrend.com/forum/3992

此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个方案影响,可以完美和此方案配合使用。

先说明一些基本的概念:

1.屏幕的宽高比Aspect Ratio = 屏幕宽度/屏幕高度

2.Unity2D中摄像机镜头的尺寸决定了我们实际看到游戏内容的多少,在编辑器中我们可以通过调整摄像机Camera的orthographicSize属性值来调整摄像机的大小。如下图所示,当摄像机orthographicSize属性值等于当前屏幕高度单位的一半时,摄像机大小正好与屏幕大小相等。注意这里提到的是屏幕单位高度的一半,这个数值是经过像素到单位比即Pixels To Units换算的,Unity2D中这个比例的默认值是100,即100像素等于1单位。如果我们的游戏屏幕有640像素高,那么实际换算成单位高度则是6.4个单位,当我们摄像机的orthographicSize值是3.2时,摄像机大小刚好与屏幕大小相等。

(可以通过此选项调整每张图片的像素单位比)

看到这里你可能会发出疑问,Unity编辑器中只能直接调整摄像机的高度,那摄像机的宽度是如何确定的呢?答案就是我们最前面提到的屏幕宽高比。Unity会根据当前屏幕实际的宽高比和摄像机的orthographicSize值来计算出摄像机的宽度值,即:

摄像机实际宽度 = 摄像机orthographicSize * 2 * 屏幕宽高比

也即是

摄像机实际宽度 = 摄像机高度 * 屏幕宽高比

我举个例子说明一下,iPhone4的屏幕像素为640*960,宽高比为2:3,假设Pixels To Units值为100,那么如果设摄像机高度size值为4.8,那么摄像机实际宽度按照公式算出6.4,刚好就是屏幕的单位宽度。

好了,讲了以上的东西我们就知道为何我们的游戏会在不同的屏幕分辨率的设备上有不同的显示了。

不同的屏幕分辨率,相同的摄像机orthographicSize值会产生不同的摄像机尺寸,不同的摄像机尺寸导致实际显示的游戏内容的不同。

接下来我再提出两个概念,为了方便后文的说明:

1.游戏有效内容,指游戏中一定需要完整显示在屏幕上的内容;

2.游戏实际内容,指全部的游戏内容,包括有效内容和主要是为了适配多分辨率的或其他不重要的目的而增加的内容。

我们的开发一般都会选择在一个固定的设计分辨率上进行,比如常用的iOS竖屏游戏设计分辨率640*960,我们就以这个设计分辨率为例。通常情况下,设计分辨率尺寸就是我们游戏有效内容的尺寸。

采用这个分辨率,我们将摄像机的orthographicSize值设为4.8。假设我们不做任何多分辨率的适配处理,使我们游戏的有效内容区域和实际内容区域尺寸相同,都为6.4*9.6(已经做过像素到单位的换算,下同),让这个游戏运行在一款iPhone5设备上(即屏幕是640*1136)时,我们来看看会发生什么情况。

为了更好的说明,我们先设变量:

游戏有效内容尺寸为gameValidContentSize
游戏实际内容尺寸为gameContentSize
摄像机尺寸为cameraSize
实际屏幕尺寸为screenSize
屏幕宽高比为aspectRatio
接着开始计算:

orthographicSize = 4.8

aspectRatio = 640/1136 = 9/16

cameraSize.height = 摄像机orthographicSize * 2 = 4.8 * 2 = 9.6

cameraSize.width = cameraSize.height * aspectRatio = 9.6 * 9 /16 = 5.4
根据计算,我们得到实际摄像机的宽度为5.4,而游戏有效内容宽度是6.4,摄像机宽度小于游戏有效内容宽度,即cameraSize.width < gameValidContentSize.width = gameContentSize.width,这时游戏内容被摄像机裁减!

以下以我做的一个小游戏为例子,我们可以更清楚的看到这个问题:

第一张是在640*960的设备上运行时的效果,一切正常。第二张是在640*1136的设备上运行的效果,可以看到游戏内容被剪得很明显,右上角的按钮都快没有了。

如何解决这个问题呢?最直接的想法是,如果我们的游戏在640*1136屏幕的设备上,摄像机宽度依然保持是6.4,那肯定就不会剪切了。为了做到这一点,我们必须在运行时来调整camera的orthographicSize值。方法很简单,还是套用上面讲到的公式:

aspectRatio = 9/16

为了使cameraSize.width = 6.4,我们计算

cameraSize.height = cameraSize.width/aspectRatio = 6.4 * 16 / 9 (因为除不尽,后面就不继续写了)

camera的orthographicSize = cameraSize.height / 2 约=5.69
我们再一次运行游戏,动态修改camera的orthographicSize值为5.69,可以看到:

宽的方面是完全显示出来了,可是上下都出现了的“黑边”(这里是蓝边,呵呵)。这是因为摄像机的高度已经大于了游戏内容的高度,所以自然会出现没有内容的区域,即“黑边”。为了解决这个问题,我们就需要给游戏增加上下边,直接上和黑边同尺寸的图是一种方法,但是还有一种更简易的办法,直接将游戏背景放大一些,以盖住黑边!这个游戏比较简单,我们就用这个简易的方法,我们将游戏背景放大到1.3倍,如下图:

OK!现在我们的游戏看起来已经很正常了,已经完成了iPhone5的适配。

注意到这个时候我们游戏的有效内容区域已经不等于实际内容区域了,我们放大了背景图片,实际上等于为游戏增加了一层外边缘。如图,在白框内部的就是有效内容区域,在白框外部的就是无效内容区域。整体实际游戏内容区域已经大于了有效内容区域。

根据以上解决分辨率问题的过程,我们可以得出,实际的分辨率适配问题与三个尺寸相关,他们分别是:摄像机尺寸,游戏内容尺寸(包括有效内容尺寸和无效内容尺寸)和实际屏幕尺寸。为了能够显示我们需要的有效内容,并且不显示黑边,我们必须要保证:

摄像机的尺寸既必须要小于或等于游戏实际内容尺寸,又必须要大于或等于游戏有效内容尺寸。如下图,蓝色的线框表示摄像机的尺寸,我们即只要保证蓝色框在白框外,在图内就能保证游戏内容的显示正确。

只要能够确保以上这一点,那么我们的游戏就能够应对几乎所有的屏幕分辨率。

按照这种方案,说到底,解决屏幕分辨率适配的问题,其实就是解决如何让游戏摄像机尺寸限定在给定范围的问题。

总结起来,步骤就是:首先,需要确定游戏的有效内容区域和实际内容区域;然后,游戏启动时,根据实际的屏幕宽高比将你的摄像机尺寸调整到合适你游戏的大小即可。

最近写了很多小游戏,用这个方案一劳永逸地解决了多分辨率适配特别是Android设备适配的问题。这种方法的好处一方面是只要理解了,操作起来很简单,另外一方面不同于缩放游戏内容的方案,这种方法保证了游戏内容的原汁原味。当然,缺点可能也是有的,暂时能想到的可能是对于一些需要依赖摄像机做效果或者操作的游戏,改变摄像机的大小可能会造成一些影响。目前这方面经验还比较少,希望以后可以不断地完善这个方案。

最后上一下自己写的一段简单的调整orthographicSize值的脚本,用于保证camera的width值不会小于游戏有效内容宽度,有效内容尺寸为6.4*9.6。这个脚本只要附加在游戏的Camera上就可以生效。

using UnityEngine;
using System.Collections;

public class GameCamera : MonoBehaviour {

float devHeight = 9.6f;
float devWidth = 6.4f;

// Use this for initialization
void Start () {

float screenHeight = Screen.height;

Debug.Log ("screenHeight = " + screenHeight);

//this.GetComponent().orthographicSize = screenHeight / 200.0f;

float orthographicSize = this.GetComponent().orthographicSize;

float aspectRatio = Screen.width * 1.0f / Screen.height;

float cameraWidth = orthographicSize * 2 * aspectRatio;

Debug.Log ("cameraWidth = " + cameraWidth);

if (cameraWidth < devWidth)
{
orthographicSize = devWidth / (2 * aspectRatio);
Debug.Log ("new orthographicSize = " + orthographicSize);
this.GetComponent().orthographicSize = orthographicSize;
}

}

// Update is called once per frame
void Update () {

}
}

时间: 2024-10-21 18:03:27

Unity2D多分辨率屏幕适配方案(转载)的相关文章

[原创]一种Unity2D多分辨率屏幕适配方案

此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个方案影响,可以完美和此方案配合使用. ---------------------------------------正式开始的分割线----------------------------------------- 先说明一些基本的概念: 1.屏幕的宽高比Aspect Ratio = 屏幕宽度/屏幕

一种Unity2D多分辨率屏幕适配方案

此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个方案影响,可以完美和此方案配合使用. ---------------------------------------正式开始的分割线----------------------------------------- 先说明一些基本的概念: 1.屏幕的宽高比Aspect Ratio = 屏幕宽度/屏幕

Android 屏幕适配方案(转载)

3.百分比的引入 1.引入 其实我们的解决方案,就是在项目中针对你所需要适配的手机屏幕的分辨率各自简历一个文件夹. 如下图: 然后我们根据一个基准,为基准的意思就是: 比如480*320的分辨率为基准 宽度为320,将任何分辨率的宽度分为320份,取值为x1-x320 高度为480,将任何分辨率的高度分为480份,取值为y1-y480 例如对于800*480的宽度480: 可以看到x1 = 480 / 基准 = 480 / 320 = 1.5 ; 其他分辨率类似~~ 你可能会问,这么多文件,难道

JavaScript强化教程——cocosjs屏幕适配方案

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 ——cocosjs屏幕适配方案 首 先说点题外话,对于任何大型项目来说,coding的规范重要,在cocos2dx-jsbinding这个框架中,javascript是一个绝对核心 的脚本语言,99%的游戏逻辑都由js完成.脚本的编写量绝对大于大多数的web项目,掌握javascript的扎实的基础至关重要. 入 正题,今天讨论的是如何使用jsb来处理移动平台的多分辨率适配问题.就目前的移动平台来讲,分辨

Android开发屏幕适配方案

Android屏幕适配方案总结 日常开发中,难免遇到屏幕适配的方案,网上也有很多方案,在这里本人只是做一个总结,以免日后使用 单位的概念 pt(point):磅,一个标准的固定长度单位,大小为1/72英寸,主要用于印刷与平面设计.1英寸=2.54厘米=72磅 1pt=0.03527cm px(pixel):像素,组成屏幕图像的最小点,一个相对大小单位.同尺寸屏幕中像素越小越多,代表屏幕分辨率越高,反之越高. 1pt=(ppi/72)*px 屏幕尺寸(screen size):屏幕物理尺寸,指屏幕

web屏幕适配方案

一个多月前水了一篇移动web屏幕适配方案,当时噼里啪啦的写了一通,自我感觉甚是良好.不过最近又有一些新的想法,和之前的有一些不同. 先说一下淘宝的方案,感觉现在好多的适配方案都是受了它的影响,上周六看了winter在一个会议的分享,讲到了这个方案.现在你谷歌一下移动 web适配,绝对可以看到很多类似的,切活动页的童鞋都忍不住试一把.这些方案和我的博客写的其实还是相似的,就是抛弃了那种viewport直接缩放, 然后给定html的初始font-size值,使用rem这个单位. 在屏幕的设备像素比上

cocos2dx屏幕适配方案

我们在利用cocos2dx来开发游戏时,在开始时就不可避免的会遇到屏幕适配问题,来使我们的游戏适应移动终端的各种分辨率大小.目前,大家采用的屏幕适配方案不一,网上的资料也比较丰富,下面我也将自己使用的方案做下记录.由于我的Mac系统下只有一个分辨率的虚拟机,所以这次使用的是VS2010,使用的是cocos2dx2.2.2版本. 我这里采用的方案是为不同分辨率的屏幕设置不同资源目录的方案,根据我们的需求需要准备多套资源,但是由于部分分辨率较为接近,所以也不必为所有分辨率都去单独准备资源,可以几种分

android屏幕适配方案

曾经看了android的屏幕适配方案,有非常多种.当中自己用到的一种是:先找一款主流的分辨率的android机,如:1080*1920的分辨率做基准,然后在这个基准上.调整好一切布局.图片.适配其它手机分辨率的手机.用百分比来调节.比如:在480*800的主流手机上,写了一个height=520,那么在480*800的手机上,这个控件的高度则为 480height = 520 * 屏幕高度/1920. 这种方案做屏幕适配. 项目遇到一个问题. 在剩余空间里.在1080*1920的手机上适配非常好

JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代码: cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL); setDesignResolutionSize函数的前两个参数是你想要在你的代码中使用的游戏分辨率,第三个参数就是你选择的适配方案.引擎中内置了5种