专为多设备、多分辨率应用而设计

 要求

必备知识

熟悉 Flash Professional CS6、ActionScript 3.0 以及 Flash 运行时提供的最新改进功能。

 

其他所需产品：

• Starling
• Feathers

用户级别

中级

必需产品

• Flash Player
• Flash Professional CS6 (下载试用版)
• Adobe AIR

范例文件

• MultiScreenDemo

在本文中，我们将针对基于 Flash 的游戏菜单启用多屏幕布局，使其能够跨越不同屏幕分辨率的设备无缝运行。本游戏为虚构作品，名为 “Burning Feathers”。它包含三个独立的屏幕，您可以从 Startup 菜单进行访问。这些屏幕应当适应台式机、平板电脑和移动设备的不同布局、屏幕大小、分辨率和操作系统。

要在浏览器中实际查看此示例及模拟各种设备屏幕，请 单击这里.

为了实现这一目标，我们将使用 Flash Professional CS6、GPU 加速的 Starling 框架以及 Feathers UI 组件和布局库。这种工具和库的组合可让我们充分利用 Flash Player 和 Adobe AIR 提供的最新 Stage3D 功能和加速机制，从而适应维度、方向及其他因素的变化。

当然，我们还有其他选择，但 Starling 和 Feathers 是广受 Adobe 认可和支持的产品——这使它们成为针对 Flash 运行时的绝佳选择。

关于 Stage3D、Starling 和 Feathers

Flash Player 11 和 AIR 3 中最有用的功能之一是通过 Stage3D（以前的代号为 “Molehill”）提供的新型加速图形呈现引擎。这种高级呈现架构可通过直接使用 API 或实施构架于这些 API 之上的许多引擎和框架，呈现该运行时内的 2D 和 3D 视觉对象。

Stage3D

使用这些 Stage3D API 的主要好处在于，一切内容均可以通过系统 GPU（图形处理单元）直接呈现。这样，GPU 将能够全面承担这些复杂的视觉呈现任务，同时 CPU（中央处理单元）仍然可供其他功能使用。目前许多高级框架均在 Stage3D 基础上构建，从而吸引了更广泛的游戏开发商。

要在 Flash Player 中使用 Stage3D，如果嵌入 Web 浏览器内，我们必须将 wmode 设置为 direct。如果针对 AIR 运行时，我们需要将呈现模式设置为 direct。

Starling

Starling 是一个开源 ActionScript 3.0 框架，能够逼真地模仿传统 Flash 显示列表。抛开架构层面，使用 Starling 能够获得两大主要好处；还可让开发人员放心使用 Stage3D，而不必担心 AGAL 和错综复杂的 GPU。还能够通过使用纹理地图集、粒子系统及其他结构实施新的工作流程。

Starling 的其中一项巨大优势在于，它由 Adobe 提供全面支持，因此用户可以对该框架的未来运行时和工具树立充分的信心。Starling 还支持 Sprite Sheets（可以从 Flash Professional CS6 生成）。卓越的工具与这些新型框架的集成是游戏开发工作流程中必不可少的一部分，Flash Professional 促使任务执行过程异常轻松。

在 Flash Professional CS6 中生成 Sprite Sheet

要生成 Sprite Sheet，只需在希望转换为 Sprite Sheet 的 Flash Professional 项目库中导航到 MovieClip 符号，右键单击它，显示上下文菜单选项。从给定的选项中选择 Generate Sprite Sheet（参见图 1）。

图 1. Generate Sprite Sheet 将会打开一个对话框，供进一步选择。

这将会打开 Sprite Sheet creation 对话框，我们可以通过它预览生成的 Sprite Sheet 并执行所有必要的调整。当生成 Sprite Sheets 供在 Starling 中使用时，我们只需从 Data format 下拉菜单中选择 Starling（参见图2）。

图 2. 通过 Flash Professional CS6 选择导出 Starling Sprite Sheet 变得相当方便。

Feathers UI

Feathers 是 Starling 的一个开源用户界面组件库（作者：Josh Tynjala）。Feathers 完美适用于台式机和移动屏幕，并且还包括大量卓越的布局功能，能够轻而易举地营造跨设备体验。本文同时使用 Starling 和 Feathers 对象，以便提供灵活的布局示例。

Flash Professional 项目设置

第一项任务是在 Flash Professional CS6 中新建一个 ActionScript 3.0 文件，搜集执行此操作所需的所有库。关键是要妥善准备，以便尽量充分利用这些框架，因为这样我们才能专注于游戏本身，而不是每个目标设备的细节。

Flash Professional 舞台资产缩放

当使用传统显示列表时，Flash Professional 可让您轻松地缩放针对各种项目目标的舞台布置的内容。这样，我们就能针对特定的解决方案和设备十分轻松地修改 FLA 文件。要访问此设置，请单击 Document Settings 下Size 设置旁边的扳手按钮。它可以启用 Document Settings 面板，这样我们在调整文档大小时便可以选择缩放 Flash professional 舞台中的所有资产（参见图 3）。还能使我们在使用传统显示列表时创建特定的应用程序解决方案，避免为每台设备单独创建 .fla 的麻烦，因为所有文档可以采用同样的代码库。不过，这种方法不适用于所有 Stage3D 内容，这是因为 Stage3D 不使用显示列表。

图 3. 通过访问 Document Settings 面板，您可以选择在调整项目尺寸的同时缩放舞台内容。

在 Flash Professional 项目中配置 Starling

开始配置 Starling 之前，重要的是要正确设置和配置 Flash Professional CS6 项目。

我们在项目初始设置阶段提出了一些注意事项，以便做好妥善准备，适应使用 Stage3D 框架时的多屏幕状况。在 Flash Professional 中，新建一个文档，并仔细查看 Properties 面板。您将需要做出以下调整（参见图 4）：

• 将帧速率设置为 60FPS：我们当前使用的是 Stage3D 和设备 GPU——不妨充分利用它们的优势！这是什么意思呢？通过传统的显示列表及流畅的 60 fps 电影图形使 2D 和 3D 呈现的速度提升 1000 倍，所有上述内容均可跨越桌面浏览器、iOS 和 Android，并对连接的约 85% 的 PC 实现完全 GPU 加速。
• 设置文档舞台大小：您可以将文档舞台的大小设置为自认为舒适的值。这对使用 Stage3D 时运行应用程序或游戏没有任何影响，但会对在 AIR Debug Launcher for Mobile 中测试应用程序时造成一定的影响。通常情况下，我会测试主要目标分辨率。例如，对于 iPhone 4S 来说是 960 × 640 px，326 ppi。（可以在 Feathers中模拟 PPI）
• 设置 Flash Player 和 AIR 的目标版本：请务必设置为 Flash Player 11（或更高版本）或 AIR 3（或更高版本），以便利用 Stage3D。请注意，运行时版本越新，您获得的性能和兼容性越好。
• 设置文档类定义：最后，设置文档类定义，其中将包含游戏的准备位。在这个例子中，我们将文档类命名为 “MultiScreenDemo”。

图 4. 重要的是从一开始就正确配置文档，从而避免日后出现问题。

另一项十分重要的步骤在于，确保项目在编译时选择适当的呈现模式。当针对 Flash Player 或 AIR 执行操作时必须注意这一点。

要访问 AIR 编译的呈现模式设置，单击 Properties 面板中所选目标右侧的扳手按钮。随后，您将能够从 General settings 选项卡中的呈现模式选项中选择 “Direct”（参见图 5）。

图 5. 呈现模式： Direct 允许应用程序使用 Stage3D 并访问系统或设备 GPU。

要在使用 Flash Player 时访问此设置，您必须首先输入 Publish Settings，然后从左侧的列中选择 “Flash (.swf)”（参见图 6）。

图 6. 从左侧的列中单击 Flash(.swf)。

旋转打开 “Advanced settings”，找到 “Hardware acceleration” 下拉菜单，并确保选中 “Level 1 – Direct”（参见图 7）。

图 7. 将 Hardware acceleration 设置为 Level 1 – Direct，这样将允许应用程序使用 Stage3D 并访问系统 GPU。

设置类舞台属性

现在 Flash 文档已经得到适当配置，下面我们可以开始编写一些代码。在文档类构造函数中执行的首项操作是设置项目舞台。这项操作将通过以下代码行完成，从而使布局真正实现很强的适应性，避免调整大小和重定方位时出现缩放迟钝的情况。

this.stage.align = StageAlign.TOP_LEFT; this.stage.scaleMode = StageScaleMode.NO_SCALE;

模拟设备 DPI/PPI

当使用桌面时，您还需要模拟 DPI 和像素宽度，以便使各 Feathers 组件适当地自我调整大小。这项操作可以通过 feathers.system.DeviceCapabilities 类来完成，并且应当在上一阶段调整后立即进行设置。

DeviceCapabilities.dpi = 265; DeviceCapabilities.screenPixelWidth = 480; DeviceCapabilities.screenPixelHeight = 800;

初始化 Starling

现在，唯一要做的是初始化 Starling，这样我们就可以开始使用 Starling 和 Feathers 类。为此，我们必须导入starling.core.Starling，然后将 Starling 实例定义如下：

private var starling:Starling;

实际上，实例化 Starling 的最佳时间是在确保项目中的所有内容均已加载完成后。我们可以通过在构造函数（会在发生 COMPLETE 事件时触发）中添加事件侦听器达到这一效果。

this.loaderInfo.addEventListener(Event.COMPLETE, loaderInfoComplete);

COMPLETE 事件触发后，我们将能够安全地查看并完成 Starling 实例的实例化，并通过 start() 命令触发它。

private function loaderInfoComplete(e:Event):void { starling = new Starling(Main, this.stage); starling.start(); }

图 8. 编译并运行应用程序，确定 Starling 是否已经完成实例化。我们可以看到，Starling 统计数据覆盖在左下角，这表明 Starling 当前处于活动状态。

在 Starling 视图中使用 Feathers

您会发现，在实例化 Starling 对象时，您必须进入该类，它将作为 Starling 视图。在这个例子中，我们将这个类定义为 com.josephlabrecque.multiScreenDemo.Main——这个类扩展 starling.display.Sprite。要在这个类及其他基于 Starling 的类中使用 Feathers 组件，只需从 feathers.* 包中导入要使用的组件，然后根据舞台进行实例化，就像处理任何其他对象一样。

调整组件布局

根据使用的视觉对象是否为 Feathers 屏幕类的子项确定如何调整应用程序大小及总体布局。扩展feathers.controls.Screen 的所有类均将自动获得大量有用的、可以被重写的函数，从而简化布局调整过程，也是处理此类状况的首选方式，尽管也需要对 Starling 端实施少量调整。

图 9. 采用特定的主题（在这种情况下是指 Metal Works Mobile）实施 Feathers 将会呈现默认的背景纹理。

根据舞台大小调整安排布局

跨对象调整舞台大小的方法取决于它们是否为 Feathers 组件。对于 Starling 对象，我们必须通过侦听舞台上的 RESIZE 事件并对相关对象实施类似的属性修改来采取更为手动的方法。为做到这一点，我们首先根据文档类 (MultiScreenDemo) 内的舞台本身设置事件侦听器。这个类正是实例化 Starling 引擎以及在 Flash 应用程序内建立引擎的类。

this.stage.addEventListener(Event.RESIZE, stageResized);

一旦触发 resize 事件，您便可以查看 Starling 舞台和视区设置并做出任意调整，以便确保获得所需的项目布局。

private function stageResized(e:Event):void { starling.stage.stageWidth = this.stage.stageWidth; starling.stage.stageHeight = this.stage.stageHeight; const viewPort:Rectangle = starling.viewPort; viewPort.width = this.stage.stageWidth; viewPort.height = this.stage.stageHeight; starling.viewPort = viewPort; }

要调整各 Starling 对象的位置和大小，您需要在相应的类中向舞台中添加一个相同的侦听器。例如，下面的函数位于我们的主 Starling 类 (com.josephlabrecque.multiScreenDemo.Main)。

private function stageResized(e:Event):void { ps.x = this.stage.stageWidth/2; ps.y = this.stage.stageHeight+30; gameMenuBar.width = this.stage.stageWidth; }

检测到 RESIZE 事件后，我们便可以根据需要调整 Starling 元素的位置和大小。在上面的示例中，我们更改了粒子系统呈现器的位置并调整了菜单栏的宽度，使其与舞台布局相匹配。

图 10. 我们在此处实施 Starling 粒子发射器并通过调整大小进行重新定位。

通过 Feathers 设定布局

Feathers 框架不仅是一个组件（如按钮和开关），而且还包含大量有用的布局类。这些布局类也可以帮助完成跨设备定位计算，因为布局本身能够适应方向和分辨率的变化。

Feathers Screen 类包含 draw() 方法，每当发生 resize 事件时能够自动触发。这种方法对于大小调整和方向更改皆适用。我们只需要修改 draw() 方法中这个特定屏幕的组件属性，一切都将根据需要重新生成。

override protected function draw():void { startButton.validate(); startButton.x = (this.stage.stageWidth - startButton.width) / 2; }

在这里，我们对 Feathers 按钮调用 validate()，以确保即将报告的所有属性都得到更新，然后根据与舞台大小相关的按钮宽度重新定位元素。这种方法适用于所有 Feathers UI 组件。

图 11. 在这里，我们看到 Feathers TabBar 和 Button 显示。

针对各种屏幕和设备进行编译

一旦我们对项目设置了 resize 侦听器来调整 Starling 舞台和视区，通过主 Starling 类中的类似 resize 事件侦听器对任何 Starling 对象实施布局调整，以及通过 Screen.draw() 重写功能调整全部 Feathers 组件… 当用于跨设备编译时，实际上相当有效！

桌面 AIR 或 Flash Player

实施桌面（Flash Player 或 AIR）编译时，最重要的是要记住根据本文中的说明强制使用适当的 DPI 和像素宽度。否则，您应当能够通过 Flash Professional 的 Properties 面板为舞台设置目标大小，一旦编译项目完成初始化，一切均将适应所选的大小。

图 12. 当将界面作为桌面应用程序运行时，各种界面元素将如上图所示。

移动设备纵向显示

无论针对 iOS 还是 Android，也无论在哪种设备上运行，该项目都能够读取这些设备的功能，并根据设备报告的特定像素宽度和 DPI 设置组件缩放。

在这里，我们看到该应用程序在模拟纵向运行，所有组件及其他对象均适当定位和缩放（参见图 13）。

图 13. 在上面的图中，我们可以看到，当在移动设备上纵向查看时各种界面元素如何适当显示。

移动设备横向显示

通过模拟横向模式，我们看到，尽管桌面和各种移动定位使用的代码库完全相同，所有元素都能很好地适应新的定位布局（参见图 14）。

图 14. 在这里，我们可以看到各种界面元素如何适应横向调整。

使用 Flash Professional 移动设备模拟器执行测试

虽然无法解决实际硬件的测试问题，Flash Professional CS6 的移动设备模拟器却提供了一个很好的起点。它在处理设备定向方面十分有效。当针对 AIR for iOS 或 AIR for Android 使用模拟器进行测试时，只需选择：Control > Test Movie > In AIR Debug Launcher (Mobile)，实施调试时选择：Debug > Debug Movie > In AIR Debug Launcher (Mobile)。模拟的屏幕尺寸将取决于您的文档分辨率（参见图 15）。

图 15. 选择在模拟器中执行测试，您可以执行全方位测试，从设备旋转到加速计调整和触摸手势。

视网膜显示屏注意事项

Flash Professional CS6 supports Retina Display。虽然此处没有介绍，但 Starling 还能够支持许多最新设备（包括 iPad 4 和 Nexus 10）提供的高密度视网膜显示屏。许多方法可以处理这种情形，如 该篇文章中所述。

下一步阅读方向

搭配使用 GPU 加速框架（如 Starling）与 Feathers 提供的兼容组件库的一大优势在于，您将不再局限于提供某种特定类型的体验。虽然 Starling 是一个不错的游戏构建平台，它还能够创建一些不同凡响的应用程序，并且这些应用程序还能在这些库上运行。我们在本文中介绍的这种适应性极强的布局无论对于应用程序还是游戏都同样方便。

有关 Starling 的详细信息，请参阅 API 文档。

通过Starling 论坛轻松与其他用户沟通交流。