迪士尼TRON幕后花絮——如何使用HTML5构建数字图书网站

30 天开发一个 Windows 8 应用

链接：http://tron.vectorform.com/

在迪士尼和 Vectorform 团队的惊人合作下，仅用了一个月左右的时间就构建了全新的迪士尼 TRON：Legacy 数字图书网站，这是一个基于 Internet Explorer 9 硬件加速 HTML5 的沉浸式 HTML5 体验。

在这篇文章中，我想分享一些关于参与该项目的团队的“幕后”故事，特别是关于经验教训和最佳实践的实施。我特别要感谢 Vectorform 的创意总监 Ken Disbennett 和首席开发人员 Alex Barkan，感谢他们分享了他们关于该项目的经验和想法。

从纸张到网络（Ken Disbennett）

一切都始于印刷的漫画书。目标是利用 HTML5 的力量来升级这种体验，同时不失传统漫画体验的真实感。我们希望确保漫画的每一格都能像印刷版本一样充满生命力和动作，并且网站能提供故事的节奏感。因此，我们认为线性、时间轴式的体验是最合适的。每一格都以自定义的揭示方式呈现，强调和巩固故事的动作。从左到右浏览漫画的动作保持了传统的阅读体验，而没有翻页的干扰。

原始素材以高分辨率 Photoshop 源文件的形式提供，按书页或章节进行组织。

花费了大约 5 天的时间，仔细地将每个漫画格子中的角色和关键元素与背景分离。我们对背景进行了二次绘制，使背景呈现出无缝的外观。然后，将每个格子按照网站的线性和有机布局顺序重新构建。最后，将每个元素导出为各种状态，以产生最终的动画效果。

选择最佳底层技术（Alex Barkan）

花费了大约 5 天的时间来构建几个原型，这些原型将帮助我们确定最适合该项目并能在各种浏览器中提供最佳结果的底层技术。

最初的想法是使用 CSS3（特别是 CSS3 2D Transforms）。我们开始构建一些测试，使用 CSS3 模拟该项目所需的交互级别；主要复杂性在于在不损失性能的情况下进行编程交互。我们经历了多种方法和实验，使用了纯 JavaScript、jQuery 动画、应用绘图、DOM 和 CSS 优化；然而，这些模式都没有在任何浏览器中提供每秒 60 帧（FPS）的性能。

对 CSS3 的性能不满意，我们转向了基于 HTML5 <canvas> 元素的解决方案。从我们之前的项目（Foursquare HTML5 Playground）开始，我们构建了一个新的原型来测试浏览器性能。该原型运行流畅，在低端办公设备上能达到 60 FPS；我们能够管理 10,000 座建筑物，并渲染数百个具有基本视口剪切功能的 32 位 RGBA PNG。当我们在 drawImage() canvas 方法（下面将详细介绍）的具有图像切片功能的版本中添加动画精灵时，我们看到了巨大的“顿悟”时刻。我们添加了数百个精灵角色，具有深度测试功能，在数百座建筑物周围行走。

很明显——Internet Explorer 9 中的 HTML5 <canvas>（以及在其他浏览器上程度较小的效果）彻底改变了游戏规则！

在不降低质量的情况下减少带宽（Alex Barkan）

带宽从一开始就是一个显而易见的问题。我们想要高清图像：大量的像素、高比特率和流畅的透明度。为了让视差效果正常工作，我们需要叠加多个具有超过 1 位 alpha 的层，否则图像看起来不会比 GIF 好。PNG 是显而易见但昂贵的选择。但在此过程中，Vectorform 的艺术总监 John Einselen 提出了一个非常有用的工具，名为 pngquant。如今，所有浏览器都支持 PNG/8，这是 PNG 的一个很少见的变体，其中 RGB 和 Alpha 可以在同一个 8 位通道内存储，这使我们能够拥有多个 alpha 位，从而实现更平滑的 alpha 混合，同时将文件大小减半！我们必须进行实验，找到适合这种量化的地方，并且不会过多地损害图像保真度。

我们学到的一个技巧是 8 位 RGBA 和 32 位 RGBA 之间的折衷方案。您将图像烘焙成两个独立的图层：基础纹理和发光。然后将两者都压缩为 8 位 RGBA。这为平滑的发光（例如雾中的路灯）提供了大量位，但每 RGB 三元组减少了 16 位数据。结果是总文件大小比单个 32 位 RGBA png 小，质量比单个 8 位 RGBA 高！这是第一页汽车的发光效果（完整图像在“使用开发者工具导航代码”部分）。

我们使用的素材包含多个图层，所有图层都使用不同的混合模式，有些还需要绘画来填补缺失的背景。我们的艺术家 Ken 和 John 必须在 Photoshop 中将混合模式转换为普通混合模式，以便渲染的图像能在网络浏览器中正确显示。他们在必要时填充了背景，并充分利用了可用的像素，然后我们将其重新采样以获得清晰的外观。我们学到的一个重要经验是，我们需要一个固定大小的目标屏幕，才能制作出能够以有意义且令人愉快的方式揭示故事的动画。在整个项目期间，这是一个需要解决的关键挑战：平滑的缓动动画，无论浏览器大小和鼠标灵敏度如何都能正常工作，并由背景图像预加载器提供支持。

保持同步和快速（Alex Barkan）

一个普遍存在的动画问题，涵盖所有技术（CSS、HTML、Canvas），是如何处理 vsync。复杂之处在于所有浏览器的计时器分辨率都不同，误差范围也更大或更小。因此，有可能在代码正在绘制到帧缓冲区时，它已经被绘制到屏幕上。为了防止视觉瑕疵，我们必须微调 setTimeout() 的绘制回调，以尝试匹配 60Hz 的重绘。总的来说，我希望这能在所有方面都更容易。我期待看到 W3C 关于 requestAnimationFrame 的讨论的演变。

最后，我们对 Internet Explorer 9 中的硬件加速支持印象非常深刻；Canvas 2D 内部的实际图像渲染被证明是非常高效的。在其他浏览器上，最终也取得了不错的结果，尽管在低端机器上会有些瑕疵。

使用开发者工具导航代码

为了使应用程序灵活、模块化且易于维护，整个游乐场被分成 13 个不同的“页面”（就像原书一样）。页面在应用程序启动时被预缓存，并在水平轴上一个接一个地排列。每个页面定义自己的显示和交互逻辑，这与其 X 坐标（在启动期间配置）相关。

只有一个绘图循环（Draw()，在 experience.js 中）负责在屏幕上绘制所有可见的面板（以及最终的调试信息）。

提示：在检查代码时，您可以通过在开发者工具中启用“格式化 JavaScript”（按 F12）来使 JavaScript 更具可读性。

调试模式

大多数页面都包含在开发过程中非常有用的调试信息。特别是，您可以通过按键盘上的“d”键来显示性能帧计数器。其他调试数据会发送到控制台（按 F12，控制台选项卡）。

附注：应用程序中还有一个隐藏的按键，您能猜到是哪个按键以及它的作用吗？

预加载图像

在第一次页面加载期间，每个页面会异步请求 experience.js 中定义的预加载器类所需的资源。预加载器负责对项目中的所有资源进行排队和下载。

在加载阶段，会显示一个漂亮的旋转圆圈。这是使用精灵动画技术实现的。动画定义在一个图像中（loading-base-128.png，为显示目的，下方旋转了 90 度），作为可循环有限步骤的序列。当我们通过 Canvas 绘制图像时，我们会更改绘制窗口以一次只裁剪一个状态，并根据需要增加偏移量。

我们如何知道这个图像比其他图像都准备好了？很简单。我们在下载任何其他资源之前就下载它，并保持其相对较小的尺寸。

保留原始字体

保持与原漫画书相同的字体是该应用程序的关键方面。在研究了 WOFF 格式后，我们决定使用 FontSquirrel.com 来打包 WOFF 字体（以及其他备用格式），并生成我们需要的 @font-face 代码片段。

IE9 网站固定

通过几行额外的代码，我们能够进一步改善网站在 Internet Explorer 9 中观看时的用户体验。网站甚至可以固定到 Windows 7 任务栏（只需将选项卡拖放到任务栏即可）。我们使用 BuildMyPinnedSite.com 来创建网站的高分辨率图标（包含 16x16、24x24、32x32 和 64x64 像素大小）。

    <meta name="application-name" content="Tron: Legacy HTML5" />
    <meta name="msapplication-tooltip" content="Enter Tron: Legacy" />
    <meta name="msapplication-navbutton-color" content="#00CCFF" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

测试和互操作性

为了正确显示网站，您的浏览器需要支持 HTML5 <canvas>、HTML5 <audio> 和 CSS3 WOFF。根据我们的测试，虽然 Internet Explorer 9 提供了最佳和最快的体验，但在 Firefox、Safari、Chrome 和 Opera 中也能正确显示。我们使用了功能检测技术来识别无法运行页面的旧版浏览器。

var canvas = document.createElement('canvas');
if (!canvas.getContext) { 
// The browser doesn’t support HTML5 Canvas
}