Starling 多屏幕分辨率的开发

最新推荐文章于 2016-02-29 16:02:12 发布

billyao2006

最新推荐文章于 2016-02-29 16:02:12 发布

阅读量3.3k

点赞数

分类专栏： AS3游戏开发知识库 starling

AS3游戏开发知识库同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

starling

1 篇文章 0 订阅

订阅专栏

多分辨率开发

当您为浏览器创建一个游戏时，它通常显示为一个更大的网页的一部分，所以您可以以一个固定的分辨率创建它。但是在大多数移动设备上，这么做是不可能的：游戏在移动设备上可能会遇到各种不同的屏幕分辨率，而且还得自适应填满整个屏幕。我们该怎么用Starling创建这样一个游戏呢？

注意：Starling下载包中包含一个用于移动设备的scaffold project(脚手架项目)。它针对Iphone屏幕的分辨率进行了优化（因为这是最流行的游戏平台）（ps：原作者想表达虽然是针对Iphone屏幕进行的优化，但在Ipad和Android上也运行的非常完美。）下面的文章中解释了这个scaffold背后的原理，以及可以使用的替代方法。

iphone

当下iPhone仍然是最流行的休闲游戏移动平台，由于经典版本和视网膜版本的分辨率非常相似，而且它也是最简单的平台开发，所以我们以这个移动平台为起点。

iPhone机型可能有两个显示分辨率：旧型号（截止3GS）使用320×480像素的屏幕，新的“视网膜”显示屏采用640 ×960像素的屏幕，这是旧型号分辨率的两倍。

我们从分辨率低的设备开始下手，您的舞台大小和Starling视口大小相同：320×480。这没什么特别的：其工作原理就如同您给一个预留了固定尺寸游戏窗口的网页制作一个大小相同的游戏一样。

starling = new Starling(Game, stage, new Rectangle(0, 0, 320, 480));

到目前为止一切还很轻松，让我们继续对视网膜屏幕下手。

iphone 视网膜

放大

最简单的解决方案是将游戏调节至全分辨率。这非常简单，只要您记住分别设置Starling的viewPort属性和stageWidth/stageHeight属性。

视口显示在屏幕的哪个位置，是以像素为单位指定。

舞台（starling的stage）的大小决定了在该视口中显示的坐标系统的大小。（举个栗子：我用小米，屏幕分辨率是854*480.我设定statling的stage为400*400，那么手机屏幕上显示出来的其实是400*400像素的图像，只不过放大拉伸了，同理我设定starling的stage为1000*1000，虽然小米屏幕只有854*480像素，但它显示的是1000*1000的图像，图像被缩小了。）

了解了这些知识，解决当前“放大”问题是小case：

var screenWidth:int  = stage.fullScreenWidth;
var screenHeight:int = stage.fullScreenHeight;
var viewPort:Rectangle = new Rectangle(0, 0, screenWidth, screenHeight)
 
starling = new Starling(Game, stage, viewPort);
starling.stage.stageWidth  = 320;
starling.stage.stageHeight = 480;

请注意，视口是动态的，它的大小始终匹配当前机型屏幕大小，而舞台的大小是硬编码为320×480 。如果您启动您的游戏，现在它看起来就像这样：

有一点模糊对吧？这是因为我们使用的纹理是低分辨率的。

高清纹理

为解决这一问题我们需要提供高分辨率的特殊纹理。根据屏幕的大小，我们将使用低或高清晰度的纹理集。

这里只有一个问题，想想看：更大的纹理，将返回更大的宽度和高度数值。记住，您的舞台宽度只有320（像素点）。

在这样一个舞台，一个宽度160像素的纹理会填充屏幕的一半。一个相应的高清纹理应该有一个320像素宽度，而高分辨纹理会超出整个舞台。但我们希望高分辨率纹理与低分辨率纹理一样占用相同的空间。

这就是Starling的contentScaleFactor能派上用处的地方。如上所示的设置，trace出Starling的contentScaleFactor 。

trace(starling.contentScaleFactor); // -> 2

contentScaleFactor返回视口的宽度除以舞台的宽度。视网膜上的设备它将返回2，非视网膜设备将返回1。

为了使contentScaleFactor真的有用，纹理也应该有一个比例参数，事实上纹理的确有这个参数。

var scale:Number = starling.contentScaleFactor;
var texture:Texture = Texture.fromBitmap(bmp, true, false, scale);

如果您创建一个像这样带有比例参数的纹理，当您获取宽度或高度时会用到这个参数。

SD Texture (width ⇒ 320 pixels, scale factor ⇒ 1): texture.width == 320 (320 / 1)
HD Texture (width ⇒ 640 pixels, scale factor ⇒ 2): texture.width == 320 (640 / 2)

现在，我们有了我们所需要的所有工具！

使用如上所示的视口和舞台尺寸建立您的游戏。
根据屏幕尺寸加载高分辨率或低分辨率纹理。
给Starling的contentScaleFactor设置纹理的比例参数。

我建议您单独创建一个类来处理您的游戏的素材资源。这个类将记录比例参数，并在您需要的时候返回相应的纹理。（参照scaffold project中的相应类）

就是这样：现在我们有了一个清晰的针对视网膜屏幕的游戏。

其它方法

总的来说，上述任务很简单是不是？它之所以那么容易，是因为iPhone的视网膜屏幕正好是旧版屏幕分辨率的两倍。（毕竟苹果并不是偶然的选择了这两种分辨率）这似乎开始变得有些麻烦了，当我们试图匹配一个高分辨率设备，但这个设备的分辨率与我们低分辨率版本相除并不是整数。Ipad就是这样一个例子，还有各式各样的android设备。

这里有一些方法可以使用，当您想支持各式各样显示分辨率的时候。此处我们拿ipad来举例，其它设备也同理。

方法1 ：拉伸舞台

事实上，这不是一个方法—其实是个反面教材，请不要用这个方法：它会让您的游戏丑陋不堪。

上图展示了如果只是简单的放大游戏而不考虑屏幕尺寸所产生的后果。在iPad上可以明显看到失真，在其他设备上它可以变得更糟。这绝对不是我们想要的！

方法2 ：信箱

还有一个简单的解决方案看起来要好得多：把游戏固定在屏幕中心，在游戏的周围添加一个黑框。您需要做的只是修改视口：

starling = new Starling(Game, stage, new Rectangle(64, 32, 640, 960));

这样可以使视口位于iPad屏幕的中心，并赋予它与视网膜iPhone上完全相同的尺寸（像素）。这就是我们所需要做的，其余的代码保持不变使用这个方法，游戏在ipad上的显示如同在iphone上一样清晰和锐利，而且，您将避免任何锯齿问题。但缺点是：您无法使用全屏。

这个方法的另一种解决方案是在避免画面超出屏幕的情况下最大限度扩大视口。

游戏画面稍稍有些模糊，但这是可以接受的。它也可能会造成一些锯齿问题。尽管如此：这可能是最实用的解决方法，它可以让您的游戏以一个可接受的画面质量运行在各种各样显示分辨率的屏幕上。而且除了设置合适的视口大小以外您不必做任何额外的设置。

因此，Starling下载包中的这部分scaffold project使用这种方法。当您以这个project作为游戏的基础，那么您不必做任何特殊改动就能使游戏运行在任何可用平台。

方法3：智能对象放置

另一方面，如果我们真的能用额外的空间那会非常给力。在很多游戏中，这个方法并不难：我们只需要根据游戏边界调整我们的用户界面（例如两侧对齐），而不是使用硬编码，在320 ×480范围内指定游戏元素的位置。

换句话说：您必须支持不同的舞台大小:

IOS

比方说，您要支持所有iOS设备，那么您有以下的舞台大小:

320× 480 iPhone设备
384× 512 iPad设备

这个奇怪的iPad分辨率从何而来？难道不应该是768 ×1024吗？

请记住，我们希望 contentScaleFactor的值是2。因为我们需要显示高清纹理，就像视网膜iPhone一样。这就是为什么我们的舞台像素是iPad的分辨率的一半。另一方面，视口仍然是768 ×1024。

starling = new Starling(Game, stage, new Rectangle(0, 0, screenWidth, screenHeight));
 
var isPad:Boolean = (screenWidth == 768 || screenWidth == 1536);
starling.stage.stageWidth  = isPad ? 384 : 320;
starling.stage.stageHeight = isPad ? 512 : 480;