behind 创建一个数字书籍网站的with的场景

分享于 

10分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

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

由于迪迪和Vectorform的奇妙团队,花了大约 1个月的时间建立新的迪斯尼创作: 遗留数字图书网站,一个沉浸在 IE 9硬件加速HTML5之上的沉浸式HTML5体验。

在这篇文章中,我希望共享项目中参与的一些"behind 场景"故事,具体的集中在课程中。 我非常感谢Ken的创意总监Ken和Alex从Vectorform分享他们对项目的经验和想法,这是一个非常重要的问题。

从纸张到网络( Ken Disbennett )

这一切都是从印刷的漫画书开始的。 它的目标是利用HTML5的力量提升体验,而不会失去传统漫画体验的真实感。 我们想确保漫画的每个面板都有自己的生活和动作,而且网站提供了一个故事。 因此我们认为线性时间线类型经验是最合适的。 每个面板都有一个强调并加强了故事动作的定制展示。 通过漫画进行正确的行动保持了传统的阅读体验,而没有中断页面的中断。

原始资产已经作为高分辨率的Photoshop源文件提供,按书页或者章节组织。

从每个漫画面板的background 中精心分离字符和基本元素花了大约 5天的时间。 我们back布景给 background 一个无缝的外观。 然后按照场地的线性和有机布局依次重建每个面板。 finally 每个元素被隔离并导出到各种状态以产生 final 动画结果。

选择最佳的底层技术( Alex Barkan )

花了大约 5天来建立一些原型,以帮助我们识别在这个项目中适合的最佳技术。

最初的想法是使用 CSS3 ( 尤其是 CSS3 2D 转换)。 我们开始构建一些模拟这里项目所需的交互级别的测试;主要复杂性不会失去性能。 在pure的基础上,我们使用纯 JavaScript。jQuery动画。应用图形。DOM和CSS优化进行了几种方法,但是这些模式在任何浏览器中都没有给我们每秒钟的第二。

不满足jdo性能,我们查看了基于 HTML5 <画布> 元素的解决方案。 从先前的项目(。 Foursquare HTML5游乐场) 开始,我们构建了一个新的Prototype来强调浏览器性能。 这个Prototype是光滑的,在低规格设备上计时,低规格设备,我们可以管理 10,000建筑和render的32位 PNGs的基本视窗剪辑功能。 当我们使用 drawImage() 画布方法( 有关这里 below的更多信息)的image-slicing-capable版本添加动画精灵时,出现了大"aha"时刻。 我们添加了数百个精灵角色,深度测试,步行数百个建筑物。

很清楚- HTML5 <画布> 在 IE 9 ( 以及其他浏览器上的更小程度) 中改变了游戏 !

降低带宽而不降低质量( Alex Barkan )

从开始开始,带宽是一个明显的问题。 我们需要高清图像:大量像素。高比特率和平滑透明度。 为了使视差效果正确工作,我们需要覆盖多个层,超过 1-bit的alpha,否则图像看起来不超过 gif。 png是很昂贵的选择。 但在 John,John提出了一个方便的工具叫做 pngquant。 现在所有浏览器都支持 png/8,很少见 png,在中可以存储RGB和 Alpha,在切割文件大小时,我们可以使用Alpha的Alpha进行平滑 ! 我们必须试图找到这种量化的地方,并且没有取得太多的质量,从图像保真度。

我们学到的一个技巧是 8-bit 和 32位 之间的分裂妥协。 将图像烘焙为两个单独的图层: 基本纹理和发光。然后将两者压缩为 8-bit。 这为光滑发光( 在雾中思考 LAMP ) 提供了很多位,但是每个RGB三元数都会减少 16位 值。 结果比单个 32位,的文件大小低,而且质量比单个 8-bit 更高。 下面是第一页( 图像中的完整图像'上的汽车的光源,用开发人员工具'节) 导航代码。

我们必须使用多层的资产,所有使用不同的混合模式和一些需要涂料的工作。 为了使渲染图像正确显示在网页浏览器中,我们的艺术家Ken和John不得不转换为普通的混合模式。 他们也在必要的时候填充背景,并利用可以用像素,然后重新压缩,看起来很清晰。 我们学习的一大课是,我们需要一个固定大小的目标屏幕,以生成一种有意义的动画。 在整个项目期间,这已经成为解决问题的一个关键挑战: 平滑松动动画,无论浏览器大小和鼠标灵敏度和 background 图像预先加载器都能使用。

保持同步和快速( Alex Barkan )

一个跨越所有( CSS,HTML,画布) 技术的常见动画问题是如何处理垂直的。 复杂性是所有浏览器都有一个不同的定时器分辨率,它有一个更大或者更小的错误。 由于这个原因,可以将一些代码绘制当作在屏幕上绘制时的一些代码绘制。 为了防止视觉错误,我们必须精细调整 setTimeout() 绘图回调,以尝试 MATCH的60hz 重绘。 总之,我希望这在整个董事会中更容易。 我期待看到关于 requestAnimationFrame 会话的演变。

最后,我们对 IE 9中的硬件加速支持非常深刻,画布 2D的实际图像呈现 inside 非常显著。 在其他浏览器上,虽然在低端机器上有一些工件,但它也给了我们良好的结果。

使用开发人员工具导航代码

为了保持应用程序灵活。模块化和维护更容易维护- 整个场所分为 13个不同的"页面"( 如原书)。 在应用程序启动期间,页面被预先缓存,并在水平轴之后布置一个。 每个页面定义自己的显示和交互逻辑,这是 relative 到它的X 坐标( 在启动过程中配置)的。

只有一个绘图循环( Draw(),inside experience.js ) 负责绘制屏幕( 最后是调试信息) 上的所有可见面板。

提示:检查代码时,可以在开发工具( 按 F12 ) 中启用"格式化 JavaScript",从而使JavaScript更加可读。

调试模式

大多数页面都包含在开发过程中帮助的调试信息。 特别是,你可以在键盘上按"d"来显示性能框架计数器。 其他调试数据被发送到控制台(。按F12键,控制台选项卡)。

在应用程序中有另外一个隐藏的密钥,你可以找出哪一个和它的它的?

预加载图像

在第一页加载期间,每个页面异步请求在 experience.js. 中定义的in类的所需资源。

在加载阶段,会显示一个漂亮的旋转圆。 这是使用sprite动画技术实现的。 动画定义为 inside 图像(。loading-base-128.png,用于显示,它旋转 90o below ) 作为一个有限步骤的loopable系列。 在画布上绘制图像时,我们更改绘图窗口一次只剪辑一个状态,并根据需要增加偏移。

我们怎么知道这个图像已经准备好了? 简单,我们在任何其他资产之前下载它,并保持它的大小为 relative。

保留原始字体

维护原漫画书的相同字体是这个应用程序的一个关键方面。 查看了WOFF格式之后,我们决定使用 FontSquirrel.com 插件来打包WOFF字体( 和其他用于回退的格式),并生成我们需要的@font-face 代码 Fragment。

IE9站点固定

在 IE 9中查看时,我们能够更进一步提高站点体验的用户。 站点甚至可以被固定到 Windows 7任务栏( 只需将标签拖放到任务栏)。 我们使用 BuildMyPinnedSite.com 创建站点( 其中包括 16个 x16,24 x24,32 x32和 64像素大小)的高分辨率 icon。


<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 <音频> ;以及 CSS3 WOFF。 尽管 IE 9提供了最好和最快的体验,但它也在 Firefox。Safari。Chrome 和 Opera 中正确显示。 我们使用特征检测技术识别那些无法运行页面的旧浏览器。


var canvas = document.createElement('canvas');


if (!canvas.getContext) { 


// The browser doesn't support HTML5 Canvas


}




构建  BOO  Html5  DIG  Digital  Scene  
相关文章