HTML5网页版Atari经典游戏幕后开发技术揭秘

将风靡一时的Atari经典游戏引入到互联网，并支持多个现代浏览器及多点触控技术，这一切都是通过HTML5、CSS3和JS创作出来的。分享Atari开发背后的故事，你可以从中了解到开发过程中用到的源代码、JS库等内容： Atari 在线游戏主机是要求最高的游戏开发项目之一，它需要完全支持多个现代浏览器和设备的多点触控，并且支持多人游戏，如果没有 Create JS 我们就不可能从头开始构建这些游戏，更不可能只用原先一半的时间就把它完成，要知道，写完这些游戏大约要花上一年以上的时间。我们也没有现成的模拟器可用 – 几乎什么都没有，从设计到代码，一切都是用 HTML5、CSS3 和 JS 原创出来的，当然，创作的过程同样充满乐趣。在这篇开发背后的故事中，我们将分享一些很实用的构建HTML5游戏的经验 – 如何使用 CreateJS 工具包构建我们理想中的在线游戏主机。我们所实现的数百个用于这类游戏开发的功能你都可以在GitHub (http://github.com/atariadmin/AtariArcadeSDK) 上获得源码，其中包括游戏预加载模型、预设的触控功能、特效、记分助手以及一些实现基本碰撞效果和物理过程的JS 库。许多灵感都源自 Internet Explorer 10 的新功能和性能，让我们利用 Windows 8 平板设备的触控功能以全新方式进行 web 互动。《小行星》(Asteroids) 和《导弹指挥官》(Missile Command) 之类的经典游戏都完美展示了触控至上的网络体验。 IE 与 Atari 在线游戏合作

少走弯路

我们在很短的时间内设计并开发了一个小型游戏库以展示 HTML5 在支持触控的 Internet Explorer 10 上的出色表现。我们希望在最大程度保证 Atari 经典游戏的原汁原味的前提下，使用最新标准的 web 技术使游戏视觉效果、动画和互动体验变得更具现代感。因此，这也是 CreateJS 发挥其价值的最佳时机：降低 HTML5 项目的开发难度和开发成本，让开发者以简单、熟悉的方式打造更具现代感的网络交互体验。更酷的是，我们与 Atari 一同工作。游戏设计和开发需要具备灵活性、敏捷性，并且是并行工作的 – 用最少的时间解决跨平台的限制和功能差异造成的问题。CreateJS 具有浏览器识别能力，通过优先排序的优雅降级帮助你避开那些不确定的难题，减少调试时间。如果你还是第一次听说 CreateJS，请看看它里面是什么：

EaselJS：用于Sprites 、动画、矢量和位图的绘制，创建HTML5 Canvas 上的交互体验（包含多点触控），同时提供 Flash中的“显示列表” 的功能。(easeljs.com)
TweenJS ：一个简单的用于制作类似Flash中“ 补间动画” 的引擎，可生成数字或非数字值的连续变化效果。可配合 EaselJS使用，也可单独使用。(tweenjs.com)
SoundJS ：一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。 (soundjs.com)
PrloadJS ：帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS 、数据 …(preloadjs.com)
Zoë ：将Flash 动画导出成为可配置的Sprites ，可与 EaselJS 配合使用。(createjs.com/zoe)

Atari Arcade SDK 作为 CreateJS 的补充，为开发者提供大量其他工具：

游戏实例化和控制框架，包括游戏通关场景，暂停、高分条目的显示等。
定义游戏预加载资源。
处理用户输入（键盘、鼠标、触摸和多人输入），包括换肤控制。
处理字符串、数学计算和碰撞效果的工具库，及一些特效库。

有了 CreateJS 和 Atari Arcade SDK ，你的客户端游戏开发的基础设施就能轻松搭建好了。如果你会用 Flash ，那么使用 EaselJS 和 CreateJS 包的其他组件为 Internet Explorer 10 和其他现代浏览器进行开发将变得尤为轻松。如果你希望用 HTML5 构建游戏，这确实是最好的选择了。

EaselJS – 更易用的画布

EaselJS 是 CreateJS 工具包的核心，同样也是每款Atari在线游戏的核心。游戏的全部视觉元素都使用 EaselJS 进行渲染，每隔 16-60 毫秒重绘一次（可配置为 20 至 60 fps ）。该周期，或叫做 “Tick” ，会被EaselJS Ticker 自动捕捉，用于文本、位图、矢量形状和HTML5 Canvas 中动画的绘制（在诸如 Internet Explorer 10 之类的现代浏览器中受到良好支持，并能充分利用它们的硬件加速特性:http://blogs.msdn.com/b/ie/archive/2011/04/26/understanding-differences-in-hardware-acceleration-through-paintball.aspx) 游戏的视觉元素可以是 EaselJS 提供的任何显示对象。这些元素提供的功能避免了繁琐的重建工作。 核心功能 1. EaselJS 提供对简单的显示对象（位图 Bitmap 、图形 Graphics 和文本 Text）位置、变形、透明度、滤镜、可见性和其他属性的简单易用的操作方法。你还可以利用 Container 将元素分组，统一操作。利用这个方法，即使不用画布也能轻松创建、更新和删除游戏中的元素（例如 Sprites 、控件和游戏 HUD ）。 EaselJS 提供对简单的显示对象

//  创建容器（组）
var container = new createjs.Container();
//  变形和旋转。将影响任何子对象。
container.x = 100;
container.rotation = 5;
//  创建形状
var shape = new createjs.Shape(new createjs.Graphics().beginFill("#999").
drawRect(0,0,50,50));
//  创建图形
var bitmap = new createjs.Bitmap("path/to/image.png");
bitmap.x = 100;
//  创建一些文本
var text = new createjs.Text("Hello World", "24px Arial", "#990000");
text.x = 200;
//  全都添加进Container，然后在屏幕上显示。
container.addChild(shape, bitmap, text);
stage.addChild(container);

2. 简化且强大的图形层，让开发者使用熟悉的 API 实例化矢量图，这些 API 可以被串联使用（类似 jQuery），甚至能够被多个图形共享。

//  呈现 Atari 标志的 Graphics 对象。
//  图形命令间相互连接。
var logo = new createjs.Graphics()
 .beginFill("#ff0000")
 .moveTo(37,3).lineTo(41,3).lineTo(41,23)
  .quadraticCurveTo(41,62,8,68)
  .lineTo(8,59).q uad raticCur veTo(37,53,37,3).c p()
 .dr(44,3,10,65)
 .moveTo(61,3).lineTo(57,3).lineTo(57,23)
  .quadraticCurveTo(57,62,90,68)
  .lineTo(90,59).quadraticCurveTo(61,53,61,3).cp()

3. 基于帧的动画使用 Sprites 进行绘制，将所有帧的图像集中在一张图中，因此只需加载一次。

{"fra mes":{
 "width":52,
 "height":60
 "regX":0,
 "regY":0,
 "count":56,
}, "animations":{
  "CentipedeBodyWalk":[14, 26],
  "CentipedeWalk":[42, 55],
  "CentipedeButtWalk":[0, 12],
  "CentipedeBodyAltWalk":[28, 40],
  "CentipedeBodyWalkDown":[27, 27],
  "CentipedeButtDown":[13, 13],
  "BodyDown":[41, 41]
}, "images":["centipede-article.png"]}

专业提示

一张Sprite 可以只包含一个单独动画的所有图像，也可以包含多个Sprites的信息。
gskinner.com 提供的新工具 Omega(http://gskinner.com/blog/archives/2012/08/reducing-file-size-for-images-with-alpha-channels.html) 利用单独的 alpha 通道提供 JPEG 图形文件和alpha 透明度信息的保存功能。
面向 CreateJS 的 Flash 工具包可导出紧凑矢量数据，利用 SpriteSheetBuilder 可以将这些数据实时转变成为Sprites，用于图片的预存储，提高运行时的性能。

4. 图形和 Container 级别的缓存能够提升性能、充分利用 GPU 特性，并且持续使纹理动态合成。此外， EaselJS SpriteSheetBuilder 类可生成“ 运行时” 的Sprites ，从而缩减矢量文件的大小，发挥出位图缓存和硬件加速功能在运行时的优势。图形和Container 级别的缓存能够提升性能、充分利用 GPU 特性

//  在竞技场中标记每一次射击。
function explodeShot(shot) {
  var stamp;
 // 确定合适的标记。标记是 EaselJS 位图。
 // 重用实例，而非每次新建。
  if (shot.hitSomething) {
    stamp = this.craterStamp;
  } else {
    stamp = this.explosionStamp;
 }
 // 定位射击
  stamp.x = shot.x();
  stamp.y = shot.y();
 // 设定一些随机缩放/ 旋转
  stamp.scaleX = stamp.scaleY = 0.5 + Math.random() * 0.5;
  stamp.rotation = Math.random() * 360;
 // 在竞技场中标记一次射击
 this.arena.stamp(stamp);
}
// Arena.js  包含标记方法 
function stamp(stamp) {
 // 清理旧的子对象。 
 // 仅当我们希望标记新东西时才清除它们。
 this.groundLayer.removeAllChildren();
 // 在现有缓存之上用新的Sprite 生成射击动作
 this.groundLayer.addChild(stamp);
 // 使用 source-over
 this.groundLayer.updateCache("source-over");
}

还没结束。EaselJS 是 CreateJS 中最成熟的工具，同时也拥有大量不断被完善的功能，许多功能就是在我们项目开发的过程中被更新和引入的。

实例：超级突围

这里有一个简单实例 (超级突围游戏) 展示了所有不同显示对象的特性。它使用：

文本，用于记分牌
图形，用于绘制不同种类的球
位图，用于绘制球轨迹
Sprites ，用于绘制拨片和砖块
缓存图，用于火花效果

交互正是交互，将伟大的理念、伟大的艺术和伟大的动画变成伟大的游戏。幸运的是，HTML 和 Javascript 长期以来都良好支持了鼠标的交互操作。不幸的是，使用 HTML5 Canvas 实质上使这种交互方式出现巨大漏洞。原因如下：当你的游戏在 HTML5 Canvas 中渲染时，所有鼠标的交互动作都是由单一的 Canvas 对象捕捉的。Canvas 中一切对象都被像素化了，当你点击一个对象的时候，实际上点击的是这个对象上的某个像素，而 Canvas 无法捕捉到像素点击事件。 EaselJS 为你解决这个问题。它能以高效、直接的方式将用户交互转化为“像素点击” 的检测。这是 EaselJS 真正要干的事：将 Canvas 中的绘图功能和交互响应有效地连接在一起。

实例：多点触控支持

像 Internet Explorer 10 和 Safari 移动版这样的最新浏览器都提供了功能强大、易于使用的触控 API 。直到最近，EaselJS 有了对于单点触控的支持，而正是因为这个项目对于多点触控的迫切需要才促使我们加入了该功能，现在你就可以在 EaselJS 中找到它，并且无需任何附加代码就可以使用。不同浏览器以不同方式（按照不同 API）支持多点触控，但是如果你使用 EaselJS，那么你不必担心，我们已将各个浏览器的 API 抽象为统一的接口。多点触控支持

var button = new createjs.Bitmap(imagePath);
//  标准显示对象鼠标事件
button.onPress = handlePress;
//  简单拖放操作。事件会被自动移除。
function handlePress(event) {
  event.onMouseMove = handleDrag;
}
function handleDrag(event) {
  button.x = event.stageX;
  button.y = event.stageY;
}

实例：鼠标交互控制

对于 Atari Arcade 而言，我们也认真考虑了用户到底希望怎样的交互体验，努力带给用户独具匠心的独特感受。为此我们使用了在《小行星》( Asteroids ) 、《亚尔的复仇》 ( Yar's Revenge )、《虫虫入侵》 ( Centipede ) 和《大战斗》( Combat ) 中用到的 Joystick 组件，它能够跟踪特定区域内的鼠标操作，然后以人们熟悉的方式呈现拖拽动作，并将其转化为游戏可用的规范化数据。

//  你应该在最开始时候初始化鼠标交互控制
function initialize(stage, assets, gameInfo) {
  if (gameInfo.touchEnabled) {
  // 创建一个joystick 实例。它还有很多很棒的配置选项，
  // 但是一开始你只需要这些而以。想了解更多请查看它的文档。
    var joystick = new GameLibs.Joystick(stage);
  joystick.setPosition(25, 25);
  stage.addChild(joystick);
 }
}

TweenJS – 摆动、跳动或滑动

游戏中大多数重要的交互和动画都使用可编程动作来响应持续变化的鼠标或键盘输入。但是，游戏的其他方面（渐变、定时动画、滴答记分牌等）需要那些可预测的动作来呈现，这是Tween 引擎的任务。 TweenJS 采用通常使用的“ 将它从这里移动到那里” 的动画补间方法，增强的补间效果使得游戏动画和事件的连贯性更好。在 TweenJS 的帮助下，仅用几行代码就可以轻松控制复杂的动画队列。我们还可以很容易地在动画序列中的任何点插入一段函数，使其处理得更加完美。

//  使角色前后移动更加平滑，控制眼睛的开合。
createjs.Tween.get(yar, {loop:true})
 .wait(3000)
  .call(yar.gotoAndStop, [1], yar) // 红色眼睛
 .wait(300)
  .to({x:450}, 1200, createjs.Ease.backInOut) // 移动
  .call(yar.gotoAndStop, [0], yar)
 .wait(3000)
  .call(yar.gotoAndStop, [1], yar)
 .wait(300)
  .to({x:50}, 1200, createjs.Ease.backInOut)
  .call(yar.gotoAndStop, [0], yar);
//  角色悬停时的上下浮动 
createjs.Tween.get(yar, {loop:true})
  .to({y:20}, 500, createjs.Ease.quadInOut)
  .to({y:0}, 500, createjs.Ease.quadInOut);

TweenJS 不只用于控制显示对象，它几乎可以作用于任何东西。举个例子，游戏中所有的记分牌都使用 SDK 中包含的 ScoreManager 库 , 它提供一个简单 API：setScore () 。一旦分数变化，几乎无需添加任何代码，TweenJS 就可以在指定时间范围内使分数产生透明度。

//  每次加分，产生分数透明度。
function addScore(score) {
 // 保存新分数
  this.newScore = score;
 // 创建用于更新 "displayScore" 的补间动画，
 // 我们用其显示数字变化。
  var tween = createjs.Tween.get(this).to({displayScore:score}, 800);
 // 对于本例，设定一个局部 "范围"，这样 onChange
 // 就有了调用它的对象。
  var scope = this;
 // 当补间动画运行时，"onChange"将被调用
  tween.onChange = function(tween) {
  // 使用 "displayScore" 更新文本。
    scope.text.text = scope.displayScore;
 }
}
// "ScoreManager"  管理分数格式和动画补间。
function killEnemy(points) {
 this.scoreManager.addScore(points);
}

我们开发 Atari Arcade 游戏的过程中，TweenJS 帮了我们大忙，因此怎么强调它的价值都不为过。从《超级突围》 ( Super Breakout ) 中瓷砖的移动到《虫虫入侵》中地精复位的效果，再到《大战斗》( Combat ) 中生成坦克，TweenJS 为制作精确到每一帧的持续渐变的效果提供了直接可靠的方法。由于受到 CreateJS Ticker 的控制，补间动画也会随着游戏的进程暂停和恢复运行。还有一些实例包括：

《超级突围》( Super Breakout ) 开始时球的闪光效果，每次闪光间发出的声音
Pong 和《超级突围》( Super Breakout ) 中拨片的渐入渐出效果
Pong 中，计分时的火花效果
《小行星》( Asteroids ) 开始时船的闪光效果
《虫虫入侵》( Centipede ) 中等级和分数弹出时的效果
《虫虫入侵》( Centipede ) 中跳蚤移动和蘑菇修复时透明度
《虫虫入侵》( Centipede ) 中的昼夜透明度
鼠标交互控制（控制杆和推力）中重置位置效果
《登月历险》( Lunar Lander ) 中游戏结束的延迟效果
《登月历险》( Lunar Lander ) 中的推进器旋转效果

我们甚至在 Arcade Chooser 导航中，在你选择游戏使相应导航栏复位的效果中使用 TweenJS。最后一点提示。由于我们的游戏受 CreateJS Ticker 的控制，拥有相同的重绘周期，因此 TweenJS 能够完全替代例如 setTimeout 这些延时函数的工作。这样，我们就可以定义定时的事件链，而无需担心用户暂停游戏之类的事情。

function killPlayer() {
 // 创建补间动画
  var tween = createjs.Tween.get(this.player).wait(100);
  for (var i= 0; i<5; i++) {
  // 游戏角色进出五次的补间动画
  tween.to({alpha:1}, 200)
   .to({alpha:0}, 600, createjs.Ease.quadOut);
 }
  // 2  秒后显示对话。
 // 再经过 3  秒，隐藏对话并重启游戏。
 createjs.Tween.get(this)
   .wait(2000)
   .call(this.showGameOverDialog, null, this)
   .wait(3000)
   .call(this.hideGameOverDialog, null, this)
   .call(this.restartGame, null, this);
}

PreloadJS – 涵盖所有资源

CreateJS 的预加载功能事实上已经为开发者完成了大量繁琐的工作。只要定义一张资源清单（描述资源及其位置的简单 XML 文件），网站就可以使用 PreloadJS 自动下载并管理游戏所需的资源了。这些资源包括传入游戏的脚本（注入 HTML DOM 中的在线脚本）、音频、图像和 JSON 数据。 PreloadJS 对于我们来说也是个宝物。预加载是 JavaScript 中最为繁琐、最不可预测、并且需要降级策略的技术之一，而 PreloadJS 将所有这些繁杂的工作都隐藏在了几个简单的 API 之中。站在开发者角度，浏览器是否支持 XHR (XMLHttpRequests)、是否需要 ArrayBuffer 响应、定义复杂的表头或其他变通方案都变得无关紧要了。你只需要找好那些资源，然后就等着下载它们。最新浏览器能够细分数据粒度，实现更有效的资源加载，旧浏览器支持成块加载，但作为开发者，这些你都不用考虑。一旦资源被加载进来，PreloadJS 就会在游戏开始之前将一个包含所有资源信息的JS 对象传给游戏。资源可以通过游戏清单中定义的 ID 进行访问，包括实际被加载的内容，这些内容能够在游戏中直接使用，无需等待它的加载。实例：在游戏中使用加载进来的资源。

//  游戏清单包含一个图像
var assets = [
  {id:"projectile", src:"images/projectile.png"}
];
//  在游戏中，我们只需要做这些 
function initialize(assets, stage) {
  var bitmap = new createjs.Bitmap(assets.projectile);
 stage.addChild(bitmap);
}

SoundJS – 儿时的记忆

音乐使游戏变得更加完整。在写《虫虫入侵》( Centipede ) 的时候，我们怎么也找不到小时候玩父母落满灰尘的旧游戏机时有恐惧感（吭吭~ 我们没那么老）。在加入音效和背景音乐之后，那感觉一下子就有了。我们与 Washingtron 公司才华横溢的艺术家们合作，共同构想出一些游戏配乐，并很快就将它们实现。实际上，大部分时间都花在了确定何时播放它们，而不是如何播放。毫无疑问地，我们面临着浏览器性能、音频格式和降级等等的不确定的问题，但还好，每一类的问题都可以用一个特定方法轻松解决。作为 PreloadJS 插件，SoundJS 接管了音频的预加载工作 – 细致到确定哪个浏览器应该加载什么格式的音频。这再简单不过了。 专业提示：

音频标签的加载不太优雅 – 但高级浏览器对于音频的播放支持的很好，跨域和本地都可以进行测试。
加载音频只需要在游戏清单中定义其基本的 MP3格式。一旦相同文件名的其他格式的音频文件被加载进来（当然，不同的文件后缀），SDK 就能够根据用户浏览器的性能选择加载适当格式的文件。

目前我们遇到的唯一障碍就是在iOS 平台上使用HTML5音频出现的问题。在iOS 上的确可以播放HTML 音频（单个音频文件，点击播放），但是无法按需加载播放多个音频文件，这功能在其他平台上都能实现。而现在我们已经看到了希望 – iOS6 中应该会加入WebAudio 功能，到那时SoundJS 就能够正常使用了！

Zoë – 捕获瞬间

熟悉 gskinner.com 的人都知道，我们拥有很强的 Flash 技术背景。即使目前我们正在运用大量的新技术，我们仍认为 Flash 有它自身的优势。我们的艺术家们使用 Illustrator 和 Photoshop 进行图形资源设计 – 但是对于时间线或者游戏角色动画设计来说，没有哪个工具比经典的Flash Pro更好用了。工具开发也是我们热衷的事情之一。如果一个任务需要重复 1000 次，为什么不写个批处理工具帮我们完成这些工作呢？为此我们开发了Zoë ( http://createjs.com/zoe/ ) 。在 2010 年与微软一道开发我们的首款 HTML5 游戏《海盗爱雏菊》( www.pirateslovedaisies.com ) 时，Zoë 就为我们处理了很多重复性的工作。 Zoë 能够帮助我们将Flash 动画轻而易举地导出成为Sprites 。它可以记录你的历史动作，因此如果你对生成的Sprites 不满意，只要按一两个按钮就能重新导出。我们还提供了一个很棒的脚本，帮你把所有游戏资源都整合到一个Sprite 中: http://gskinner.com/blog/archives/2012/08/prep-for-zoe-jsfl-command.html 实例：《虫虫大战》（Centipede）中的蜈蚣 有了Zoë ，只需要一个简单的包含了图像和运动路径信息的 Sprite ，就可以将《虫虫大战》中的大反派—蜈蚣—展现在你面前了。绘制游戏关底的 Sprites 资源除了这个之外，还包含了蜈蚣被消灭时的动画Sprite 资源。

不但如此，作为我们团队中的“一员”，Zoë 还帮助我们将Sprites 转变为JSON 数据，我们就可以使用EaselJS将这些数据渲染成动画了。神奇！《虫虫大战》（Centipede）中的蜈蚣

游戏时间

CreateJS 让游戏开发者随意使用适合自己的框架，同时最大限度地维护框架的安全可控性。目前，无插件的网页游戏和应用的开发仍然是一个难题，CreateJS 旨在降低它的难度。当我们将超酷的Atari Arcade SDK 和游戏开发框架融合进工作流程中时，开发者就可以将浏览器兼容性工作，繁杂的 Canvas API ，多用户输入 API，预加载队列等等这些问题都抛在脑后，将精力集中在游戏内容的开发上。 下一步 1. 阅读我们的 SDK 游戏开发文章。它深度剖析了游戏构建方法，包括我们开发首批游戏时的一些经验和技巧。利用 Atari Arcade SDK 进行游戏开发： http://atari.com/arcade/developers/building-html5-games-atari-arcade 2. 访问 Arcade GitHub 库，下载 SDK、文档和《快速入门指南》。 GitHub 上的 Atari ArcadeSDK ： http://github.com/atariadmin/AtariArcadeSDK/ 3. 试试这款游戏!