HTML5 人群 – Seb Lee Delisle

HTML5 需要代言人来运作。有很多人在承担这个角色,我们在 Mozilla 认为,通过一系列访谈和短视频向大家介绍其中的一些人是一个好主意。形式很简单——我们向专家发送 10 个问题,然后进行一个简短的视频访谈,让他们自我介绍,并详细阐述他们的一些答案。

Seb今天,我们将稍微偏离 HTML5 的主题,因为我们要采访的是 Seb Lee Delisle。Seb 是一位资深且屡获殊荣的 Flash 开发人员,最近他专注于独立于平台和技术的“创意编码”。

在他的研讨会上,他会让 Web 开发人员走出他们熟悉的、有限的环境,并展示如果你玩转技术而不是被它束缚,可以取得怎样的成就。

我邀请 Seb 来访谈,因为我认为他是一个很好的学习机会,可以了解 Flash 世界多年来一直在做的事情——在很多情况下,他们已经克服了 HTML5 世界尚未面临的问题。

视频访谈

您可以在 此处使用任何支持 HTML5 的设备观看视频(由 vid.ly 提供)。

Seb Lee Delisle 关于 HTML5 的十个问题

1) 你以举办研讨会和谈论非常直观的编程而闻名——创造美丽且高度技术化的东西。人们通常如何反应,你认为我们会在主流中看到更多这样的东西吗?

总的来说,人们的反应都非常好!特别是在 JavaScript 社区,人们现在开始发现这种媒介中新的创意可能性。我最喜欢的一部分是展示如此简单的代码如何创造出美丽的效果。

我已经看到微妙的动画图形正在渗透到主流中——看看 Google 涂鸦最近发生了什么。我的工作是帮助程序员培养对动画的敏感度,并将其品味十足地运用。

2) 在过去,你以纯 Flash 开发人员而闻名——实际上,你是少数几个在 Flash 社区之外发布代码并试图跨越界限的人之一。我个人已经厌倦了“HTML5 作为 Flash 杀手”和“Flash 作为 Web 的救世主,因为它确实是跨平台的”这些争论。我们如何才能更多地打破 Flash 和非 Flash 社区之间的壁垒?

虽然主要以我的(获得英国电影和电视艺术学院奖的 ;-))Flash 作品而闻名,但如今我似乎正在成长为一位博学家!上个月我使用过 C++、Processing、JavaScript 和 ActionScript,并且乐于在它们之间切换。

最重要的是尽可能多地学习所有技术。然后,您可以对最适合工作的工具做出明智的决定。

我很高兴看到其他著名的 Flash 开发人员在 JS 中做了很棒的工作。Mr Doob(three.js 的作者)曾经是一名 Flash 程序员,是一位了不起的视觉代码编写者。Grant Skinner 正在制作一个名为 Easel.js 的画布图形库。

我认为 JS 开发人员不太可能热衷于投入时间学习 Flash,但认识到插件的优势并在适当的地方使用它很重要。

3) 看看开放的 Web 技术栈,什么让你最兴奋?Canvas?SVG?Processing?为什么?

Canvas 很有趣,但如果不仔细处理,可能会比较占用 CPU。SVG 非常有趣,特别是 Raphael.js,它是一个巧妙地封装了 SVG 并回退到 VML 的库——它甚至可以在 IE6 中运行!SVG 绝对被低估了,尤其是在 IE9 可以使用 GPU 超快速渲染它的时候。但我们缺乏制作动画内容的好工具。

我喜欢 Processing 社区,而 Processing.js 使事情变得相当容易上手,但对于真正优化的画布渲染,你可能最好学习原生 Canvas API。

Canvas 是新事物,所以自然每个人都对此感到非常兴奋,但我认为在仅仅移动 DOM 对象方面仍有很多东西需要探索。你获得了更好的向后兼容性,而且通常比 Canvas 更快。

4) 开放 Web 技术的局限性在哪里?你认为标准研究的下一阶段应该朝哪个方向发展?

这是一个非常难以回答的问题!我想最大的困难在于必须合作(或者不合作 ;-))的供应商数量众多。但 WebKit 的普及意味着我们看到浏览器出现在各种不同的设备上,从你的电子阅读器到你的电视。随着这些设备变得越来越快,在任何地方都有游戏和丰富内容将成为一种现实的可能性。我们是否想要这一点是另一回事!

在视频、摄像头访问、套接字连接和 P2P 方面,浏览器仍然远远落后于 Flash。我想其中最重要的将是视频。浏览器应该能够在页面中播放视频。但这个棘手的编解码器问题似乎并没有很快消失。

5) 美丽的事物也需要表现良好。你创建流畅的动画和交互的主要技巧是什么,这些动画和交互不会闪烁?

这是一个非常广泛的问题!但通常渲染是瓶颈,尤其是在你使用 Canvas 时。只有在你绝对需要时才重新绘制像素。我刚刚制作了一个小行星游戏的演示,在那里我为飞船移动了一个小画布,而不是在每一帧都清除一个巨大的画布,即使只有一小部分屏幕需要更新。

如果你正在移动 DOM 对象,请使用 3D CSS 变换——即使你只设置了 0 的 z 位置,你也可以在 WebKit 浏览器中获得硬件加速。我制作了一个粒子系统,它处理数百个 DOM 对象,并且速度非常快,即使在 iOS 上也是如此。

并使用 requestAnimationFrame 而不是 setInterval 作为你的重绘循环。这确保了你将与显示器刷新率同步,避免屏幕撕裂。也许更重要的是,当你的浏览器选项卡不可见时它会被禁用,从而节省你的电池电量。

6) 我们在构建游戏和动画时所做的事情很多都是“作弊”。我记得在 Commodore 64 等非常低规格的环境中工作,在那里你可以使用真实的物理算法,但发现了一种计算量小得多的方法来完成工作,并依靠人眼偷懒并为我修复故障。我们现在是否还在这样做?

我仍然这样做。概述这些简单解决方案的资源很少,大多数书籍都非常高级。多年来,我积累并设计了这些技巧,这就是为什么我喜欢在我的课程和演示中分享和揭开这些技巧的神秘面纱。

7) 在 Web 设计非常流畅并且你永远不知道分辨率和可用屏幕空间的情况下(这就是为什么你在打开例如菜单之前对其进行测试),大多数游戏似乎都处于固定边界内。例如,Canvas 具有固定的像素大小。这是一个限制吗?我一直认为 Web 设计的未知部分是最让我兴奋的事情,因为它意味着我的代码必须是防弹的。

我同意,但当然,如果你正在构建游戏,这是一个巨大的挑战,并且你通常会使用固定的像素大小。任何基于位图的东西都是固定的,尽管我想你可以放大和缩小它们。即使 Flash 游戏现在似乎也使用位图。这很有讽刺意味,因为 Flash 非常擅长缩放矢量图形。从历史上看,Flash 游戏被设置为固定且小的像素大小,这是由于早期 Flash Player 版本中的性能问题造成的。

8) 在库开始实现缓动来模拟具有加速度和自然减速的自然运动之前,动画看起来并不正确。接下来的步骤是将物理学引入动画。现在这容易吗?

有一种视觉程序员熟悉的技术——一种实时缓出,我喜欢称之为“缓动”。事实上,我在 Flash 中制作了一个名为 Tweaser 的库来封装此技术。传统的补间动画具有起始点、结束点和持续时间。缓动只有目标,并且对象会缓动到该目标。如果你保留前一帧的一些动量,你甚至可以实现弹性自然的运动。

使用它的最佳原因是,你可以在动画的任何时间更改目标,并且你的对象会以平滑的方式更新其轨迹。它非常强大且响应迅速,尤其是在 3D 中。查看 tweaser.org 以获取该技术的完整视频解释。也许如果足够多的人想要,我会将其移植到 JS 中!

9) 你认为 WebGL 在互联网上的杀手级应用是什么?我玩过 Google 的 Body Browser,我非常喜欢它——你认为 Web 和开放的技术栈已准备好迎接 3D,还是 Flash 以及 Molehill 仍然统治着这个领域?

我还不确定浏览器内 3D 的实际用途是什么。我希望我们可能会看到 Google 提供一些非常令人兴奋的 3D 映射。但当然,游戏是每个人都感到兴奋的事情——这些 3D 游戏功能将如何影响休闲浏览器内游戏市场还有待观察。

WebGL 能够直接在浏览器中启用 GPU 图形,这一点非常令人满意,但 IE 没有计划支持它,这是一个很大的问题。Flash 的 GPU 启用播放器(代号为 Molehill)具有巨大的优势——Flash Player 的采用率令人难以置信,新版本的播放器在几个月内就达到了 90% 的渗透率。我认为不会再有另一个插件能够达到 Flash 的渗透率。

尽管有像 three.js 和 Away3D 这样的开源库,但 WebGL 和 Molehill 都有巨大的工作流程问题。值得庆幸的是,Unity3D 宣布他们正在针对 Molehill。Unity3D 确实令人愉快地使用——它可以无缝导入 3D 模型和位图,具有内置的物理、灯光、阴影和粒子系统。你甚至可以用一种 JavaScript 的风格来编程它!所以如果他们也可以针对 webGL……?

10) 灵感时间。你认为人们应该关注哪些东西才能感染视觉编程的热情,以及在哪里可以找到学习它们的教程?

如果你想要代码提示,你不应该错过 Keith Peters。Keith 在 ActionScript 世界中以其《Making Things Move》书籍而闻名。他刚刚完成了 30 天 30 个 JavaScript 实验——非常值得一看。

在 JavaScript 之外,我深受数字艺术家(如 Robert Hodgin(@flight404)、Chris O’Shea、Jared Tarbell 和 Jer Thorp(@blprnt)的影响,他们都使用各种不同的编程语言工作。

对于交互式技术来说,这是一个非常令人兴奋的时代,除了我的 CreativeJS 研讨会外,我将继续在 openFrameworks 和 Processing 中进行更多大型运动检测投影项目。

照片由 Andy Polaine 拍摄

你认识我应该为“HTML5 人群”采访的人吗?在 Twitter 上告诉我:@codepo8

关于 Chris Heilmann

HTML5 和开放 Web 的布道者。让我们来修复它!

更多 Chris Heilmann 的文章……


一条评论

  1. Meteor

    好文章。帮助我学习 HTML5。

    2011 年 6 月 14 日 07:03

本文评论已关闭。