Adobe Scout 入门

时间:2021-05-10 15:40:11

http://www.adobe.com/cn/devnet/scout/articles/adobe-scout-getting-started.html

Adobe Scout 是新一代 Flash 内容探查器,广泛适用于桌面 (Flash Player) 和移动设备 (Adobe AIR) 上运行的 Flash 内容。它能够让您洞悉过去无法了解的 Flash 内容行为。最重要的是,Scout 入门十分容易,不包含任何复杂的安装步骤!

Scout 问世之前,您可以使用 Flash Builder 探查器调查 ActionScript 3 代码级的性能问题,但无法查看任何 Flash Player 内部操作。如果出现渲染问题或者 Flash API 使用错误,无法通过探查器指出错误原因,因为您无从了解后台究竟发生了哪些状况。

Scout 通过搜集有关 Flash Player 内部运行状况的数据解决了这个问题。这有助于您了解 ActionScript 代码与运行时的交互情况,以便您真正找到性能问题的根源。

Adobe Scout 的工作原理如何?

Scout 依靠 Flash Player 11.4 和 Adobe AIR 3.4 中引入的遥测 功能工作。这项功能将搜集有关 Flash 运行时内部构件及 Flash 运行时执行的 ActionScript 代码的详细信息,然后将其全部发送到 Scout。Scout 清晰、简洁、生动地显示这些数据,以便您快速诊断内容存在的性能问题(参见图 1)。

Adobe Scout 入门
        图 1:Adobe Scout 使用 Flash Player 和 Adobe AIR 提供的遥测功能。

Scout 不需要 Flash Player 调试程序版本。这意味着,您可以使用用户运行的相同 SWF 和网页在发布环境中分析内容。最重要的是,Scout 可让您全速分析内容,这样您就能集中精力处理用户体验的实际性能问题。

在 SWF 上启用高级遥测功能

启用 Scout 时,您不必执行任何特殊操作。只需在 Scout 运行时运行 SWF,而后将会显示一个新的会话,数据也将随之出现。不过,默认情况下,SWF 仅提供基本信息。要访问所有可用数据(如有关 ActionScript 代码的信息和有关 DisplayList 渲染和 Stage3D 的详细信息),您需要在 SWF 上启用高级遥测 功能。Adobe 默认不显示所有此类信息的原因在于,防止他人使用 Scout 轻松获取有关您内容的详细信息。不过,不用担心,这项功能很容易启用,这样即可释放 Scout 的全部能量。

用户可以运用以下几种不同方式启用高级遥测功能。

使用 Flash Builder 4.7

启用高级遥测功能的最简便方法(也是 Adobe 推荐的一种启用方法)是使用内置 Scout 支持的 Flash Builder 4.7 构建您的项目。

Flash Builder 4.7 提供了一个全新的 ActionScript 编译器选项,用于启用高级遥测功能。无论在新项目还是现有项目中,都可以使用这个选项:

  1. 打开项目属性。
  2. 选择 ActionScript Compiler。
  3. 选中 Enable Detailed Telemetry(参见图 2)。
Adobe Scout 入门
        图 2:在 Flash Builder 4.7 中启用高级遥测功能

启用该功能后,您将能够接收有关 ActionScript 代码、DisplayList 渲染和 Stage3D 的数据。

使用 Flash Professional

如果您当前未使用 Flash Professional,则不会显示用于启用高级遥测功能的集成用户界面。Adobe 将在即将推出的版本中添加这一选项,但在此期间,您可以从 https://github.com/adamcath/telemetry-utils 下载并使用 Python 脚本 (add-opt-in.py)。如果您尚未安装 Python,请访问 http://python.org 了解更多信息并进行下载。而后,只需在 SWF 上运行 add-opt-in.py 脚本,您便做好了充分的准备工作。

如果您需要分析现有 SWF,但无法轻松进行重新编译,这种方法可能十分有效。

启用高级遥测功能的示例内容

如果您希望利用某些现有的实际内容测试 Adobe Scout,下面几个示例已经启用了高级遥测功能:

只需打开 Scout,访问上面的任意链接,即可开始尝试运行。

本地分析和远程分析

要使用 Scout,需要具备以下组件:

  • Flash Player 11.4(插件或单机)或 Adobe AIR 3.4。
  • Adobe Scout 桌面应用程序。

如果您要分析运行 Scout 的同一计算机上的桌面内容,则只需要这些组件。只需在运行 Scout 时运行您的内容,您将发现 Scout 中会显示一个新的会话。

您还可以使用所谓的远程分析 功能在另一台计算机(非运行 Scout 的计算机)上分析您的内容。最常见的情形有:

  • 一台桌面机运行内容(使用 Flash Player),另一台计算机运行 Scout。这在调试远程项目或者当您无法在期望运行内容的计算机上运行 Scout 时颇有成效。
  • 一台移动设备运行内容(使用 Adobe AIR),另一台计算机运行 Scout。这是开发移动内容时的典型场景,因为您希望优化目标设备的性能。

远程分析桌面内容

如果您在远程桌面机上运行内容,则可以将 Flash 遥测数据定向到运行 Scout 的任何可访问的计算机。为此,您需要在运行 Flash 内容的计算机上创建一个名为 .telemetry.cfg 的特殊文件。文件位置取决于您运行的操作系统:

  • MacOS: ~/.telemetry.cfg
  • Windows: %HOMEDRIVE%%HOMEPATH%\.telemetry.cfg

注意:如果您在 Chrome 中运行内容,请参阅本指南结尾的常见问题列表了解详细信息。

设想这样一种场景:Scout 在 IP 地址为 192.168.1.20 的计算机的端口 7934 上运行。要连接到 Scout,您的 .telemetry.cfg 文件可能如下所示:

         TelemetryAddress=192.168.1.20:7934 SamplerEnabled = true CPUCapture = true DisplayObjectCapture = false Stage3DCapture = false

最后四行分别对应 “Settings for New Sessions” 下的 Scout 选项,但此处需要重点注意的是,如果您执行的是远程分析,则必须手动输入这些代码行。.telemetry.cfg 配置完毕后,只需运行您的远程内容,它就会显示在 Scout 中了。

在移动设备上远程分析 AIR

Scout Companion 应用程序(iOS 和 Android 均提供这款应用程序)能够简化移动设备配置。安装此应用程序后,您可以用它来定位 Scout,然后使用 Scout 配置要接收的数据。

要使用该应用程序,请执行下列操作:

  • 确保您的设备连接的 Wi-Fi 网络与运行 Scout 的计算机连接的 Wi-Fi 网络相同,然后启动 Scout Companion App。它将会搜索运行 Scout 的计算机,向您显示其找到的所有 Scout 实例列表。
  • 当显示计算机的名称时,单击进行连接。
  • 在 Scout 桌面应用程序中,选择您要搜集的数据。您将会发现这些数据显示在 Companion app 中。
  • 启动您的 AIR Mobile 内容,将看到 Scout 中会显示一个新的会话(参见图 3)。
Adobe Scout 入门
        图 3:Adobe Scout 分析一款 AIR 移动设备游戏

在 Scout 中启动会话

如果您运行的是本地 Flash 内容,或者按照上一节的说明配置远程内容与 Scout 进行通信,那么您已经做好妥善准备,可以开始执行分析操作。只需启动您的内容(可以在浏览器中、通过单机版 Flash Player 启动,也可以通过 Adobe AIR 启动),Scout 中将会显示一个新的会话。当您发现图表中出现很多鲜明的色彩时,就可以确信运行正常!

Flash Player 仅会检查 Scout 是否在加载 Flash 内容,因此如果您的内容在启动 Scout 之前已经运行,您将必须进行重新加载。在屏幕左侧,您将会看到一个打开会话列表,包括 SWF 名称及其域名。如要阻止新数据传入,请单击会话旁边的红色方形按钮(参见图 4)。如果您停止运行 Flash 内容,则该会话将自动停止记录数据,同时禁用停止按钮。

Adobe Scout 入门
        图 4:Scout 中的活动会话及其停止按钮

默认情况下,您加载的所有 Flash 内容均将在 Scout 中生成一个新会话。这样,您将能够真正轻松地开始执行分析,但与此同时,如果您使用该浏览器执行其他任务,那么情况将会变得非常讨厌;只要您加载带有任何 Flash 内容的页面,就会显示新的会话。

为了加强控制,您可以命令 Scout 筛选出不需要的会话。如果您单击会话旁边的筛选图标(参见图 5),Scout 将只会对同名 SWF 启动新会话。这意味着,您可以浏览不同的网站,而不必担心被会话所淹没,但只要您重新加载内容,仍将显示新会话。

Adobe Scout 入门
图 5:筛选新会话

新会话设置

鉴于您已经能够在 Scout 中启动会话,下面可以开始思考要搜集的数据类型。您会发现,在屏幕左侧、会话列表的上方,有一个标有 Settings For New Sessions 字样(参见图 6)的区域。其中向您提供了各种类别的数据,您可以要求 Flash Player 发送这些数据。注意,某些 Scout 功能只有在您收集相关数据时才会生效。

Adobe Scout 入门
图 6:新会话设置

启动新会话之前,请选中您要收集的数据旁边的方框。由于会话中途无法更改这项设置,因此事先想好要尝试评估的事项至关重要。如果您希望评估性能,如某个 ActionScript 功能花费的时间,那么只需收集低开销数据。如未执行此操作,则计时数据可能不准确,因为 Flash Player 必须额外执行操作收集和发送这些数据。

下面简要描述一下这些数据类型:

  • Basic Telemetry 始终处于启用状态,旨在为您提供 Flash Player 内部操作相关信息,并总结 CPU 和 GPU 内存的使用情况。
  • ActionScript Sampler 用于通过定期拍摄调用堆栈快照来衡量执行 ActionScript 代码花费的时间。这种数据类型开销极低,因为它采用的是统计抽样 模式。如果您抽取足够长时间的样本,就能够准确界定耗时最长的功能。
  • CPU Usage 用于定期评估 Flash Player 占用的 CPU 时间量,如操作系统报告所示。相应地,您会在 Mac OS 的 Activity Monitor 或 Windows 的 Task Manager 中看到这项数据。
  • DisplayList Rendering Details 用于详细划分 DisplayList 当前渲染的所有对象,并直观地将它们映射到该屏幕。这样,您将能够了解哪些屏幕区域花费的渲染时间最长。
  • Stage3D Recording 用于捕获您的内容执行的各项 Stage3D 命令,因此,您可以在 Scout 中重放并逐步执行这些命令。因为很可能在短短几分钟内生成千兆字节的数据,您可以选择将记录模式设置为 delayed。这样,就能够控制 Scout 何时开始捕获 Stage3D 数据。

请记住,无论打开除 Basic Telemetry 以外的任何类别,您的内容都必须启用高级遥测功能。

使用 Scout 执行分析

Scout 用户界面设计简洁,便于使用且效率极高。其中包含大量可视化功能,有助于您了解数据及筛选出不必要的信息,从而快速找出性能问题根源。该用户界面包含许多不同的面板(参见图 7),起初看起来似乎有些应接不暇,但随着您详细了解各个部分,将能够了解它们的组合方式。

Adobe Scout 入门
图 7:Scout 用户界面

您可以调整面板位置,只需拖动标签,然后将面板移动到您希望它显示的位置。如果您关闭某个面板,则可以随时从 Window 菜单中再次打开它。特定的面板布局形式称作工作区。您可以从 Window 菜单保存工作区并在不同的工作区之间切换。

您可以隐藏左侧的侧边栏,然后通过单击其折叠按钮即可显示打开会话列表和新会话的配置选项(参见图 8)。

Adobe Scout 入门
        图 8:折叠侧边栏

本节的剩余部分将按照使用 Scout 时通常经历的步骤顺序介绍这些面板。最重要的面板是 Frame Timeline,它位于*位置,并且包含很多图表。它会向您显示每帧 SWF 花费的时间明细,同时还会提供一些有关内存使用情况和事件的其他图表。

为使会话内部导航更加轻松,屏幕顶部还会显示 Frame Timeline 的缩小视图。这就是所谓的 Session Summary,因为您可以通过它简要查看整个会话活动峰值出现的位置。

Session Summary

如果您要跳转到会话中的某个时间或事件(例如活动出现大峰值的位置),只需单击您要查看的 Session Summary 部分。默认情况下,您会看到一个图表,显示每帧花费的时间,您还可以右键单击它(参见图 9)以显示一些额外的图表(参见图 10)。

Adobe Scout 入门
        图 9:Session Summary 选项
Adobe Scout 入门
        图 10:Session Summary,显示 Frame Time、CPU Load、Memory 和 Events

这些图表对应于 Frame Timeline 中提供的图标,您可以从中选择任意图表,从整个会话的角度整体了解该图表。这在持续监控内存使用情况方面尤其有效。例如,如果您在足够长的时间内运行内容,就会清楚地看到 Session Summary 中发生的缓慢内存泄露。

Frame Timeline

用于定位性能问题的 Scout 主面板就是 Frame Timeline。此面板顶部的图表显示的就是 Frame Time,它将会话分解为多个独立帧,并向您显示 Flash Player 在每帧中花费的时间量(参见图 11)。

Adobe Scout 入门
        图 11:Frame Timeline 面板

最值得注意的是红线。它代表预算 时间,如果要满足希望实现的帧速率,则每帧都必须低于此时间。例如,在运行速率为每秒 30 帧 (fps) 的 SWF 上,预算为每帧 33 毫秒(1000毫秒/30 帧)。换句话说,如果每帧花费的时间超过 33 毫秒,您的应用程序将开始出现停滞并跳帧,您一定不希望发生这种状况!

图 11 清晰地展示了哪些帧超出预算,需要小心留意。您可能会好奇为什么红色预算线各有不同;这是因为您可以动态更改 SWF 的帧速率,这个特定内容就是这种情况。

接下来,在 Frame Time 图表中需要注意的是每一栏的颜色变化。每种颜色代表 Flash Player 执行的一种不同活动,因此,您可以查看各帧花最多时间执行哪项活动:

  • 蓝色             执行 ActionScript
  • 绿色             DisplayList 渲染
  • 黄色             网络和视频
  • 橙色             其他(活动,如垃圾收集、事件处理等)

不要担心记不住这类颜色编码。Summary 面板(接下来我们将会进行介绍)会显示每种颜色的含义。您还可以将鼠标悬停到图表的特定部分,此时将会显示工具提示,告知您这种颜色的确切含义(参见图 12)。

Adobe Scout 入门
图 12:Frame Timeline 面板中的工具提示

Frame Timeline 面板中还包含一些其他图表。CPU Usage,顾名思义,一目了然,但要注意,如果您的计算机具有多个核心,CPU 使用率可能会超过 100%。此外,还有一个 Memory 细分图表,图表中的颜色对应于不同类型的内存(再次重申,Summary 面板中已经对这些颜色进行了阐释)。

您可以通过切换 Frame Timeline 面板顶部的按钮选择要查看哪些图表。图 11 中只显示了 Frame Time、CPU Usage 和 Memory 图表。如果您单击 Events,将会看到 Memory 图表下弹出事件轨迹(参见图 13)。每条水平轨迹代表一个特定类型的事件,蓝色条带的密集度用于表示每帧发生的每种类型的事件数量。

Adobe Scout 入门
图 13:Frame Timeline 面板中的 Events

事件轨迹如下所示:

  • Mouse 是否调度了任何 mouse 事件?
  • Keyboard 是否调度了任何 keyboard 事件?
  • Network 是否发生任何 I/O 操作??
  • Timer 是否使用 Timer 类?
  • Rendering 是否发生任何渲染?
  • Trace Events ActionScript  代码中是否调用了任何 trace() 调用函数?

您可以看到,Frame Timeline 面板可让您在应用程序中快速查找热点,识别花费过多时间的位置,并确定相应的原因。

摘要

Summary 面板介绍了 Frame Timeline 面板的各图表的颜色编码,但这不止是一个文字说明而已。您可以在 Frame Timeline 中单击拖动选择帧范围。Summary 面板随后会对选定帧的数据进行总结,以便您查看这些帧的平均水平。

图 14 显示的 Summary 面板选择了两个帧。首先要注意的是,左上角的帧速率数值。此帧速率仅为 1.8 fps,而目标帧速率为 24.0 fps,因此帧速率超出预算 248%。内容运行不畅,您可能希望了解导致这种状况的原因!

仔细观察一下时间详情,您可以看到,绝大部分时间花在执行 ActionScript 代码方面。这意味着,您可能希望调查这些代码的用途,然后尝试进行优化。Scout 中还包含其他一些面板可以帮助您执行此操作,您将会在稍后进行仔细了解。请注意,如果您单击右侧的小齿轮图标,就能切换显示选项总时间(参见图 14)与每帧平均时间。

Adobe Scout 入门
        图 14:Summary 面板

在这种情况下,由于 ActionScript 代码显然存在问题,您可能希望筛选出其他类别,以便集中精力执行 ActionScript。Scout 中包含很多不同的颜色,这可能会分散用户的注意力,花点时间筛选出您不想看到的颜色。

单击 ActionScript 类别,您将会看到其他类别变灰(参见图 15)。更重要的是,Frame Timeline 也会被筛选出来,您可以看到,每个帧中均仅执行 ActionScript 代码(参见图 16)。事实上,Scout 中的所有颜色都会被筛选,从而便于您仅专注于您感兴趣的数据。

Adobe Scout 入门
图 15:在 Summary 面板中进行筛选
Adobe Scout 入门
        图 16:经过 Summary 面板筛选的 Frame Timeline

除单击某个类别进行筛选外,还可以展开一些类别以显示更加详细的信息。图 17 显示 Bitmap Memory 可以展开为更详细的分类。Frame Timeline 中显示新颜色,因此您可以查看它们的演变过程。

Adobe Scout 入门
        图 17:在 Summary 面板中展开 Bitmap 内存

Top Activities

Top Activities 面板用于显示 Flash Player 内部活动相关信息,并且比 Summary 面板更加详细。它并未将时间分解为多个高级类别(如 ActionScript),而是显示详细的活动细分类别,如处理特定事件(参见图 18)。

Adobe Scout 入门
        图 18:Top Activities 面板

右侧一列中的数值反映了每项活动花费的时间量,以及 Flash Player 在执行该活动方面耗费的时间比例。在这个示例中,大部分时间(54% 或 2,279 毫秒)均花在 enterFrame event 事件处理器上,因此优化这个处理器是一个不错的主意。稍后在讲解 ActionScript 面板时,我们还会返回这里进行介绍。

Activity Sequence

Top Activities 面板显示哪些活动花费的时间最多,但往往对于查看各项活动的精确序列十分有用。这是 Activity Sequence 面板的目的。与 Top Activities 面板(该面板会聚合多个帧的数据)不同,Activity Sequence 面板(参见图 19)仅会向您显示一个帧的信息(否则,数据太多无法显示)。

Adobe Scout 入门
图 19:Activity Sequence 面板

Activity Sequence 面板显示一个帧内的活动的确切顺序和嵌套关系。例如,在图 19 中,您可以看到,92% 的时间用于处理 enterFrame event,这反过来导致 gameObjectDie 事件占用 61% 的时间。您还可以发现,事件处理期间收集了大量垃圾,且文本布局已经更新。

默认情况下,系统会从 Activity Sequence 和 Top Activities 面板中筛选出占用时间不足 0.5 毫秒的活动,以便您集中精力处理最耗时的操作。您可以通过取消选中左上角的筛选按钮来禁用这项功能。

请注意,此处的色彩方案与 Summary 面板保持一致,这样您就可以轻松将不同面板中的数据关联在一起。在 Summary 面板中筛选某个类别会将除您感兴趣的类别以外的所有活动呈现为灰色,这样,您便可以专心处理自身要查找的信息。

ActionScript

迄今为止,您已经了解了 Flash Player 的内部活动,但您最感兴趣的方面或许是 ActionScript 3 代码的用途。这部分信息将显示在 ActionScript 面板中(参见图 20)。

Adobe Scout 入门
        图 20:ActionScript 面板

首次查看 ActionScript 面板时,您将会看到一系列*函数调用,Flash Player 会在您的 ActionScript 代码中调用这些函数。要展开查看整个调用堆栈,只需单击 Top-Down 设置右侧的 Expand All 按钮(参见图 21)。您还可以按住 Alt,然后单击其中一个三角形完全展开它。

Adobe Scout 入门
        图 21:选择 Expand All 后的 ActionScript 面板

您可以向下滚动调用堆栈,查找哪些本机调用占用的时间最多。在图 22 中,您可以看到,Context3D.present 调用最为耗时,占用 35% 的时间。

Adobe Scout 入门
        图 22:ActionScript 面板,用于显示 Context3D.present 花费的时间

默认情况下,ActionScript 面板会自上而下地显示调用堆栈视图,其中入口点位于顶部,本机调用位于堆栈底部。颠倒此视图查看各函数耗费的时间量往往十分有效。只需从面板顶部选择 Bottom-Up。

您还可以在 Summary 面板中展开 ActionScript 类别,大概了解每个包花费的时间量。这提升了 ActionScript 面板中函数颜色编码的优势。本机函数呈深蓝色,自定义 ActionScript 呈浅蓝色,而 Stage3D 则呈碧绿色。图 23 显示了这些颜色所在的 Bottom-Up 视图。

Adobe Scout 入门
        图 23:选择 Bottom-Up 后的 ActionScript 面板

您还可以使用 Summary 面板筛选出未包含在特定包中的所有函数,从而轻松地查找并集中处理自己感兴趣的代码。图 24 显示了集中处理 invawayders 包时的外观状态。

Adobe Scout 入门
        图 24:invawayders 包上筛选出的 ActionScript 面板

在 Bottom-Up 视图中,父节点是独立函数,其中 Self Time 列是指该函数在选定帧中所花费的总体时间(不包括对其他函数可能执行的任何调用)。当展开父节点时,您会看到一个反向调用堆栈,旨在显示哪些代码调用了这个父函数,以及这项调用对于父函数的 Self Time 造成了哪些影响。

ActionScript 面板显示 Frame Timeline 选定帧中执行的 ActionScript 代码的聚合视图。重要的是要记住,此数据通过统计抽样获得,这意味着抽取的样本越多,获得的数据越准确。如果您看到右上角显示“哭脸”,则表明您需要选择更多的帧!

ActionScript 面板的另一项有用功能在于,您可以使用 Top Activities 面板和 Activity Sequence 面板进行数据交互。在这两个面板中,您都可以单击特定的活动筛选 ActionScript 面板。举例来说,图 25 显示了单击 Top Activities 面板中的 mouseDown 事件后的 ActionScript 面板视图。其中仅显示在这个特定的事件处理程序中执行的 ActionScript。

Adobe Scout 入门
图 25:根据 mouseDown 事件筛选 ActionScript 面板

您可以筛选任何活动,而不仅仅是 ActionScript 事件处理程序。例如,图 26 显示按垃圾收集筛选的 ActionScript 面板。与 ActionScript 内部调用的事件不同,您可以在代码执行期间触发垃圾收集器。按垃圾收集筛选可让您查看哪些函数导致垃圾收集。您可以看到它内联到调用堆栈。如果某个特定函数造成大量垃圾收集,可能会产生过量内存分配工作。

Adobe Scout 入门
        图 26:按垃圾收集筛选 ActionScript 面板

Trace Log

与 ActionScript 代码采样一样,Scout 会收集代码输出的所有 trace() 语句。Frame Timeline 的事件跟踪记录显示了哪些帧执行了 trace() 语句,如果您选择某个帧,它们会显示在 Activity Sequence 面板中。您也可以选择任意数量的帧,并在 Trace Log 面板中查看完整的 trace() 输出(参见图 27)。

Adobe Scout 入门
        图 27:Trace Log 面板

可以看到,面板顶端的工具栏中有两个按钮。第一个按钮允许您打开和关闭各 trace() 语句旁边的时间戳的显示。图 27 中打开了时间戳的显示。第二个按钮允许缩小选定帧,仅包含 trace() 输出与您突出显示的内容相符的帧。例如,在图 27 中单击此按钮,Scout 会将您转到输出为 “SUPER DUPER :AbstractScene” 的帧,时间为 0:07.902。

Session Info

Scout 可让您与他人轻松地共享数据。例如,如果您在某些 Flash 内容中发现性能问题,可以记录 Scout 会话,将其保存为 FLM 文件,并将其发送给同事,从而帮助调试问题。由于所有这些数据,您很可能跟丢重要信息,如哪台计算机上运行 Flash Player,以及使用哪个 Flash Player 版本。

Scout Session Info 面板将显示此信息。它会划分为多个部分,从而为您提供有关当时运行的 SWF、Flash 运行时、计算机操作系统和硬件,以及您要求 Scout 收集的这些类型的遥测数据的详细信息(参见图 28)。

Adobe Scout 入门
        图 28:Session Info 面板

DisplayList Rendering

现在,您已经探讨了很多面板,从而帮助您诊断 Flash Player 当前执行的操作,以及 ActionScript 代码执行的操作。但是,如果您的问题与渲染有关,该怎么办?Scout 的功能重点之一是,帮助您深入探究渲染问题。

如果您使用传统 Flash DisplayList 进行渲染,可以在新会话设置中打开 DisplayList Rendering Details,收集有关当前操作的详细信息。当您选择某个帧时,您可以在 DisplayList Rendering 面板中查看此数据(参见图 29)。

Adobe Scout 入门
        图 29:Heat Map 模式下的 DisplayList Rendering 面板

面板左侧是选定帧的所有渲染通道列表,以及它们花费的时间。渲染通道并不总是与帧边界完全一致,您可能会发现某条渲染通道始于一个帧,而止于另一个帧。如果您发现每个帧包含多个完整的渲染通道,这可能表明您的渲染操作过于频繁。例如,您可能在不必要时调用 updateAfterEvent()

默认情况下,DisplayList Rendering 面板会在 Heat Map 模式下打开。这个显示屏幕会表明渲染了哪些区域。最亮的区域是指花费渲染时间最长的区域,您可以单击某个区域使其突出显示在右侧的树中。这将让您详细分析该渲染通道发生的状况,以及每个步骤持续的时间。

您可以切换到 Regions 模式获取更加详细的渲染通道视图(参加图 30)。它将屏幕区域分为四个不同的类别,Flash Player 会将其用作渲染引擎的一部分。了解这些类别有助于您大幅改善渲染效果;例如,您不希望缓存在各帧上不同的内容。

Adobe Scout 入门
图 30:Regions 模式下的 DisplayList Rendering 面板

四个类别(显示在面板顶部)均经过颜色编码,并且每一个都可以打开和关闭:

  • Regions(红色)是包含需要重新绘制的屏幕像素的边界矩形。这些信息与您从调试版本的 Flash Player 中的 DisplayList Rendering 功能中获取的信息相同。
  • Updated Surfaces(蓝色)是此渲染通道中更新的平面。平面是指 Flash Player 使用滤镜、混合模式、位图缓存和位图在内部创建的位图。
  • Cached Surfaces(黄色)是运行时缓存的平面,因此可以在多个帧中进行重用。仅会显示在此渲染通道上进行重新渲染的缓存。
  • Display Objects(绿色)是您添加到 DisplayList 的矢量内容。同样,仅会显示经过渲染的显示对象。

注意,右侧的活动也采用同样的方案进行颜色编码。您可以单击屏幕上的任何区域突出显示对应的活动(参见图 31)。条目旁边的小圆点表示区域经过重新绘制,这是因为该区域需要更新。

Adobe Scout 入门
        图 31:在 DisplayList Rendering 面板中选择图形对象

Stage3D Rendering

如果您开发的是 Flash GPU 加速内容,您需要使用新型 Stage3D API。这是一种运用与平台无关的方式使用 GPU 加速桌面(Adobe AIR 3.0 和更高版本以及 Flash Player 11 和更高版本)和移动(Adobe AIR 3.2 和更高版本)应用程序上的渲染。您可以开发 3D 内容,也可以使用 Starling 等 2D 框架(运用 GPU 渲染 2D 内容)。

如果您在 Scout 中打开 Stage3D Recording,Flash Player 将发送您的内容对 Scout 执行的每一项 Stage3D 命令。换句话说,系统将记录您对 Context3D 对象执行的所有调用操作。Stage3D Rendering 面板可让您按步骤重放这些命令(参见图 32)。

Adobe Scout 入门
        图 32:Stage 3D Rendering 面板

在此面板中,您可以在选定的帧中看到一个包含所有 Stage3D 命令的列表。您可以单击任何绘制调用 (Context3D.drawTriangles),面板左侧将进行相应更新,以便在执行调用后即时向您展示后台缓冲区的状态。按空格键将跳转到下一个绘制调用(按 Backspace 键可跳回前一个绘制调用),从而十分轻松地完成场景渲染(参见图 33)。

Adobe Scout 入门
        图 33:通过逐步执行绘制调用创建的部分渲染场景

如果您在内容中使用渲染到纹理,则 Scout 将自动向您显示当前选择的渲染目标(即要渲染的纹理效果),而不是后台缓冲区。

每项 Stage3D 命令均以紧凑的格式显示,参数则以传递到该命令的顺序排列。如果您忘记各参数的含义,可以右键单击命令列表,然后选择 Show Argument Names。

Stage3D Rendering 面板可以逐步完成绘制调用,因为 Scout 包含一个内部运行的 Stage3D 引擎副本。运行时不会将位图发送到 Scout;而是发送各 Stage3D 命令和您提供的参数,如纹理、程序和缓冲区。因此,您可以使用 Scout 运用有趣的方式调查和探索场景及调试内容。

Wireframe 模式(可以从面板(参见图 34)顶部的工具栏中开启)向您显示场景预览视图且仅呈现三角形边缘,以便您透视各对象的后台信息及了解绘制的内容。

Adobe Scout 入门
        图 34:Stage3D wireframe 模式

当您需要打开 Stage3D Recording 使用 Stage3D Rendering 面板时,往往会捕获有关 GPU 内存的有用信息。有关任何 Stage3D 内容,可以参阅 Summary 面板(参见图 35)的 GPU Memory 部分,也可以在 Session Summary 和 Frame Timeline 中打开对应的图表。

Adobe Scout 入门
        图 35:Summary 面板中的 GPU 内存使用信息

您可以查看每个场景的绘制调用数量及资源内存分类,通常以您上传的纹理为主。

Stage3D Program Editor

由于 Scout 包含有关应用程序执行的 Stage3D 命令的完整信息,您可以通过交互方式修改每项命令并了解特定命令会对渲染产生哪些影响。每次调用 Context3D.drawTriangles 时, 您都是在告诉 GPU 运行两个程序:一个顶点程序(用于在屏幕上定位多个三角形)和一个 片段程序(用于为每个三角形的各像素着色)。Scout 可让您运用 Stage3D Program Editor 通过交互方式查看和编辑这些程序。

在 Stage3D Rendering 面板中,单击某个绘制调用(参见图 36),然后切换到 Stage3D Program Editor(参见图 37),您可以从 Window 菜单中打开该编辑器。它将向您展示该绘制调用执行的顶点程序和片段程序的 AGAL 代码。

Adobe Scout 入门
图 36:选择绘制调用的 Stage3D Rendering 面板
Adobe Scout 入门
        图 37:Stage3D Program Editor

您可以通过交互方式编辑各程序,然后单击 Upload,告诉 Scout 使用修改的程序重新渲染场景。图 38 显示 Stage3D Rendering 面板中的场景,其中选定绘制调用的片段程序如下所示:

         //fragment program (agal 1) tex ft0, v0, fs1 <2d, linear, miplinear, repeat> tex ft1, v1, fs2 <2d, linear, miplinear, repeat> mul oc, ft0, ft1

此程序的前两行取样自两个不同的纹理,最后一行将各纹理汇总到一起,确定该像素的输出颜色。第一个纹理 (fs1) 是建筑物墙壁的砌砖模式,第二个纹理 (fs2) 针对阴影。

Adobe Scout 入门
        图 38:原始场景,没有经过任何程序修改

要了解程序修改的工作原理,请更改最后一行,这样无需综合两个纹理,即可根据第一个纹理设置颜色:

         //fragment program (agal 1) tex ft0, v0, fs1 <2d, linear, miplinear, repeat> tex ft1, v1, fs2 <2d, linear, miplinear, repeat> mov oc, ft0
Adobe Scout 入门
图 39:无阴影场景

当您单击 Upload 时,您可以看到通过新程序渲染的场景(参见图 39)。您将会发现,某些绘制调用变成紫色,表明已经修改了它们使用的程序。您可以在 Stage3D Program Editor 中单击 Reset 以返回到原始程序。

接下来,您可以更新该程序,从而仅显示第二个纹理(阴影):

         //fragment program (agal 1) tex ft0, v0, fs1 <2d, linear, miplinear, repeat> tex ft1, v1, fs2 <2d, linear, miplinear, repeat> mov oc, ft1
Adobe Scout 入门
图 40:仅显示阴影效果的场景

再次单击 Upload 后,您可以看到仅会呈现阴影(参见图 40)。

这种交互能力十分适用于调试,您还可以在学习如何编写 AGAL 程序时使用它。

在 Scout 中搜索

Scout 1.1 版本提供了两种新特性,让您能够更轻松地围绕一个会话进行导航。该版本中包含一个全新的 Search 菜单,其中的第一项是 Go to Frame,如图 41 所示。该选项允许您快速跳转到会话中的特定帧。

Adobe Scout 入门
图 41:Go to Frame

第二项也是最为有用的特性就是 Find。该选项将在屏幕底部打开 Find 栏,您可在其中键入希望在当前会话中搜索的文本(如图 42 所示)。

Adobe Scout 入门
        图 42:在 Scout 中搜索

在您键入时,Scout 将在所打开的全部面板中搜索您输入的文本。它将灰显所有不包含该文本的内容,使您能轻而易举地将注意力集中在所查找的内容上。它还会告诉您在打开的面板中找到了多少匹配项。图 43 展示了在 ActionScript 和 Top Activities 面板中执行的搜索,搜索包含“context”这个词的一切内容。根据所打开的具体面板,Scout 将搜索 ActionScript 函数名称和活动、trace 语句、显示对象的名称和 Stage3D 命令。

Adobe Scout 入门
        图 43:在可见面板中搜索文字

只需单击“>”或“<”按钮,Scout 即可在各搜索结果中前后移动。当前结果以较大的字体显示,便于您识别。在结果间跳转时,Scout 将打开树中的任意行,并通过滚动来保证结果可见。在大型应用程序中查找特定函数调用时,这项功能极为有用。

或许最为有用的功能就是查找不同帧内文字的能力。如果单击“>>”按钮,Scout 将搜索当前选定帧结尾之后的内容,直至找到包含您查找的文字的帧为止。随后 Scout 将跳转到该帧,如果搜索结果未处于可见面板中,它将打开相应的面板,并滚动到结果处。“<<”按钮的功能与上述按钮相同,唯一的差别就是向前搜索。

常见问题解答

下面是一组常见问题,在您开始使用 Scout 时可能会有所帮助。

为什么我无法将 Flash Player 连接到 Scout?

如果您没有看到任何会话显示,请尝试执行以下操作:

  • 确保您的 Adobe Scout 版本为最新版本。
  • 确保您的 Flash Player 版本足够新。
  • 对于移动项目,请确保使用最新版本的 SDK 或 Flash Builder 进行构建。
  • 对于移动项目,请确保已经连接配套的应用程序。
  • 同时,确保 .telemetry.cfg 文件位于正确的位置,并且包含适当的内容。
  • 验证 Scout 服务器侦听。打开 Scout,然后在 Web 浏览器中键入 localhost:7934。如果“服务器断开连接”、“未收到数据”或者出现某种类似问题(因为 Scout 并非 HTTP 服务器),应当迅速做出响应。Scout 应显示错误消息“由于遥测数据无效,无法启动会话”。如果浏览器长期停止运行,而后返回“找不到服务器”或类似消息,则套接字无法正常工作。请检查您的防火墙和安全设置。您可以尝试在 Preferences > Listen For New Session On Port 下更改 Scout 端口。如果您执行此操作,请记得更新 .telemetry.cfg 文件。

如果无法连接 iOS 或 Android Scout 配套应用程序,请尝试执行以下操作:

  • 确保您的 Scout 配套应用程序为最新版本。
  • 如果配套应用程序找不到您的计算机,请确定当您选择 Other 并键入 IP 地址时是否能够连接。
  • 确定使用另一应用程序时从设备是否能够连接到您的应用程序。您可能希望尝试设置计算机上的 Web 浏览器,然后进行连接:
    • 在 Mac OS 上,转到 System Preferences > Sharing,然后启用 Web Sharing。
    • 在 Windows 上,启用 Internet Information Services (IIS)。
    • 测试您是否可以从您的计算机网站访问其本身。
    • 现在,尝试从您的设备中执行同样的操作。

如何从 Chrome 执行远程分析?

如果您在 Chrome 上使用 Flash Pepper 插件(默认情况下启用),.telemetry.cfg 文件的位置将不那么方便。这是因为 Chrome 的沙盒限制了 Flash Player 可以读取文件的位置。位置如下所示(文件格式完全相同):

Mac OS:   ~/Library/Application Support/Google/Chrome/Default/

Pepper Data/Shockwave Flash/UserHome/.telemetry.cfg

Windows:  %HOMEDRIVE%%HOMEPATH%\AppData\Local\Google\Chrome\

User Data\Default\Pepper Data\ Shockwave Flash\UserHome\.telemetry.cfg 

“等待 GPU”是什么意思?

在 Stage3D 应用程序中,您的 CPU 和 GPU 必须彼此同步才能获得所需的帧速率。任何一项过载都会导致帧率下降。如果花费大量时间“等待 GPU”,这意味着您的 GPU 过载。有以下几种可能情形:

  • GPU 速度不得超过 60 fps。如果您在超过此速度的情况下更新屏幕,则操作会遭到阻止。如果您的速度刚好达到 60 fps,则不用担心任何 GPU 等待时间。
  • 如果您的帧速率一贯很低,但要求 GPU 执行的操作过多。您将不得不优化您的 3D 代码(或者在一款功能更加强大的设备上运行)。例如,尝试呈现更少的三角形、使用更简单的 AGAL 程序或者使用更小的纹理。目前,Scout 无法直接向您显示 GPU 上的缓慢项目,因为它无法衡量 GPU 上的时间。不过,如果您打开 Stage3D Recording 并查看 Stage3D Rendering 面板,就可以看到您究竟在执行哪些 Stage3D 命令,逐步查看并了解它们对于该场景造成的影响。您可以设法提高它的运行效率。
  • 如果您的帧速率不断波动、震荡或出现锯齿模式,您可能会遇到 Flash Player CPU 与 GPU 同步相关问题。Adobe 正在努力解决这个问题。

Scout 发生崩溃或显示错误,该怎么办?

如果 Scout 发生崩溃,没有时间保存会话,您可以从以下位置恢复数据,您将会在这些位置发现一个或多个 FLM 文件:

Mac OS:  /var/folders/… …/Adobe Performance Data

Windows:  %HOMEDRIVE%%HOMEPATH%\AppData\Local\Temp\Adobe Performance Data

请注意,在 Mac OS 上,实际位置可能会有所不同,因此最好的查找方法是在 Finder 中转到 /var/folders,然后搜索 "Adobe Performance Data"。

如果您尝试打开 FLM,Scout 再次崩溃,而后您发现一个错误。如果您提交 FLM,Adobe 将不胜感激,这样我们才能解决这个问题!

如果发生错误,Scout 日志中可能会提供详细信息:

Mac OS:  ~/Library/Preferences/Adobe/Scout/1.0/logs

Windows:  %HOMEDRIVE%%HOMEPATH%\AppData\Roaming\Adobe\Scout\1.0\logs

下一步阅读方向

鉴于您了解了 Adobe Scout 的工作原理和使用方法的详细信息,我鼓励您尝试用它来优化 Flash Player 或 AIR 上运行的游戏。