开发者应重视的HTML5局限性及认知误区

　　在本文，我们将介绍HTML5的能力和解释关于JavaScript的常见误解，提出一些解决HTML5可怕的音频问题的方案，以及介绍开发HTML5游戏可能遇到的主要问题。

　　我敢说，读者们应该已经知道，用单一的语言编写游戏且不需要移植或甚至重新编译就在多个平台上发布，能扩大游戏的普及范围，增加玩家的自主权，这对商业是有好处的。

　　关于HTML5，网上流传着诸多误解。最重要的一个问题是，“HTML5迎来全盛时期了吗?”

　　简短的答案是：是的，你可以用HTML5写出很好的游戏，这些游戏可以在多个浏览器、平台和设备上运行且保持相同的品质。

　　更长的答案是：详见下文——HTML5仍然很年轻，它还有一些非常现实的问题应试避免。

　　HTML5-logo(from 36kr.com)

　　热词之外

　　所以当我们谈论HTML5时，我们其实是指Javascript(JS)与图像和交互API相给合，用JS在浏览器显示。与其他成熟的技术一样，Javascript也有它自己的教条和误解。

　　以下是常见的误区：

　　“Javascript 太慢!”

　　这是真的，直到2005年以后浏览器制作者开发好好搞JS的优化。现在通常认为，JS已经是最富动态的语言——与静态语言Java和C#相比，速度只有本地编译的C的约一半。这是很了不起的。

　　“Javascript没有类库!”

　　我们经常听到这个报怨，但这不是真的;JS的原型遗产传达了你想在游戏中出现的所有基本的OO特征(面向对象)：成员变量、成员功能、亚类、静态成员、多态形、反射在、函数/构造函数过载、类型识别。

　　“Javascript不安全，因为它不是编译的!”

　　使用极简化和混淆(如果反射不需要的话)，把你的代码变成少空白的、少评论的废话，就像本地代码编译一样有效，对人记住，任何在客户端上运行的东西，无论它是Javascript、Java还是C++，都是不安全的，含糊并不是安全。

　　“Javascript不是真正的编程语言!”

　　这太蠢了。从语言设计的角度出发，Javascript是相当好的。它是Scheme Lisp语言加上C式句法和Smalltalk风格原型的对象的简化版本。

　　顺便一提，Javascript的下一个版本——ES6会非常好的。

　　我们已经认识了关于Javascript的几个常见误解，现在可以谈谈HTML5了。HTML5只是添加到我们所知道和喜爱的现有的HTML上，作为游戏开发者，我们真的只关心几个选项。以下是使用HTML5的好处和一些陷阱。

　　Canvas

　　这是我们都已经听说的与HTML5游戏有关的特征。Canvas在你的网页页面上创造一个2D绘制空间。你可以控制帧缓存大小(象素宽和高)，设置Canvas元素的屏幕大小;它会根据元素大小自动拉伸或收缩缓存。你甚至可以创造离屏幕的Canvas，然后复制一个Canvas到另一个，使效果和表现更加强大。

　　使用简单的间隔计时顺(或更好的，请求动画帧 API)和Canvas，你就可以用更少的时间绘制东西。

　　“陷阱!”

　　除了飞快地加速位图图像，Canvas包含强大的API(基于PostScript)，用于几何线和填充，和初步的文本渲染工具;然而，你要少量地使用这些，因为它们往往降低帧率。

　　另外，Canvas喜欢从少量的源图像绘制，所以你要控制好绘制图像调用次数(这可能是底层驱动/API的现实)。所以，压缩这些小图像(你会希望旧能减少http加载调用)和使用离屏幕Canvas来缓存嘲中不变的部分(游戏邦注：把那些6400次绘制贴图变成一次绘制图像命令)。

　　老实说，HTML5的音频弱爆了。这个问题没有办法掩盖了。在我进一步探讨这个问题以前，我先向你保证，HTML5是可以提供比较体面的声音体验的，但你将面临以下几个问题：

　　音频格式问题：

　　某种浏览器只能播放某种音频格式，这意味着你不得不至少配置两种音频格式(目前是.mp3和.ogg)。要怪就怪软件专利吧。

　　糟糕的信息：

　　有一个API会询问浏览器它可以播放什么音频格式;可悲的是，这个API有一个非常可怕的解码器支持，所以它得到的回答是“也许”。纵观那么多种浏览器，我们还发现这个API在支持什么和不支持什么上完全说谎了。

　∩怕的执行：

　　有些浏览器，即使它们发誓它们可以播放某种格式;它们的解码器/流媒体执行法也是无效的。延迟严重、低劣的音频质量、不正确的计时。有些浏览器(或操作系统)根本不能播放，却说自己支持某种格式。

　　严重的延迟

　　如果你通过http加载一个声音然后点击播放，到声音下载完的时候，对应的事件已经过去了。如果这是背景音乐，那就无所谓，但如果是动作游戏的声音特效呢?那就不能接受了。

　　听起来真是太糟了!

　　音频是HTML5当下的第一大问题;所幸有许多能人开动脑筋，再加上技术的进步，HTML5的音频至少能用了，虽然还算不上好。

　　音频救星：Audio Sprites

　⊥像Atlas是针对图像的2D封装方案，为了减少http调用和域名费用的负担，针对音频的1D解决方案——Audio Sprites应运而生。Remy Sharp在这方面做了一些基础工作。他的基本思路是，你把你的声音特效打包进一个声音文件中，每个声音之间留半秒的无声状态，作为计时误差。一个附带的.json文件罗列了所有这些包含在Audio Sprites中的文件，以及它们的起止位置。

　　借助Audio Sprites，你只需要把一个文件转换为ogg和mp3，且你只需要一个http请求就能加载它了。

　　延迟消失了!

　　有一个统一的大声音文件的主要好处是，我们避免了小声音文件的传输问题。浏览器可以预加载这个大声音文件，然后当被调用时就寻找各个声音特效的开头，这样延迟就非常小了。我们的 问题是，在这个声音结束而下一个声音播放以前，我们必须监控和中止传输。

　　“糟糕的格式检测怎么办?”

　　在一定程度上这仍然是一个问题;我们已经发现，你可以使用MP3，大部分浏览器都支持MP3;但在编写的时候，最好能在菜单中加入“MP3或OGG”的设置选项。另外，确保你没写错;许多人在格式检测方面偷懒。

　　“这听起太难处理了!”

　　是的，是很让人头疼;要求我们花几周的时间开发必须的工具和寻找技巧。

　　顺便一提，希望还是有的。大部分网页浏览器已经支持新的Opus格式和/或新的基于OpenAL的WebAudio API。普及只是一个时间的问题。

　　WebGL

　　作为HTML5运动中的一个主要热词，WebGL承载了太多希望，即3D游戏能够使用本地图像API。然而我们的实验表明，WebGL还没有准备好迎接黄金时代。在相同的机子上，可以运行用C++写的OpenGL程序，但用WebGL写的就运行不了，这个事实意味着仍然存在问题。该死的NVidia/ATI 驱动专利!与Canvas相比，WebGL还很难学习。到年底，WebGL应该非常有希望成为2D和3D图像中间件的可行选择。

　　WWW负担

　　浏览器支持许多文件格式化的特性(CSS、HTML、XML、SVG等)，而这些特性对Canvas和WebGL游戏太不实用了，可能最好避免。一款简单的游戏只需要半页的HTML作为装载javascript的容器。不幸的是，如果出于某些原因你并不了解网页设计，那么为了制作JS游戏，你就得学习基础的HTML和CSS。无论如何，登录页面和UI对话框是必须知道的。

　　因为Canvas和WebGL的渲染是很糟糕的，你可能希望使用HTML作为游戏内的文本(游戏邦注：如提示、角色对话等)。这个技巧是使用“pointer-events: none”(CSS)来避免通过鼠标点击出现文本。

　　使用CSS的“正解方法”可能是单调且没有意义的。当不确定时，就使用和滥用“position: absolute”!

　　XML是HTML的近亲，有些人可能会认为浏览器会有出色的XML工具。相反的是，我们发现它们不仅笨拙，有时候甚至漏洞百出，所以我们把旧的XML资产转换成JSON。

　　另外，你可能需要安装一个网页服务器程序，比如Apache。打开你的硬盘中的HTML 文件，你也许能够运行你的游戏，但有一些奇怪的案例限制会让你很为难，特别是当你的游戏是AJAX或WebGL的。

　　陷阱：网页浏览器不是100%兼容的

　　众所周知，“跨平台”从来就不是无缝的。我们的建议是，至少支持最常用的3、4种浏览器，并经常性地在这些浏览器上做测试。Chrome和Safari通常是最适合玩游戏的，且它们都使用WebKit，所以100%是互相兼容的。

　　Firefox也不错——在某些方面甚至更好，但要注意避免渗出边界特征如“let [x,y] = point”。IE和Opera需要额外的努力，它们可能不太适合比较大的游戏，因为所有设备都会选择比它们更好的浏览器。但另一方面，对于简单的休闲游戏，支持IE还是比较简单的，且可能是获得商业成功的必须条件。

　　如果你在制作手机/平板游戏，请记住：手机浏览器是不同的。

　　资源打包和加载

　　在其他平台你可以在安装包里解压所有资源，HTML5却不同，你要把子画面和声音特效、小的HTML文件嵌入JSON，嵌入GLSL着色器如果你使用的是WebGL的话，把JSON嵌入JS，然后合并和压缩所有JS文件。我们使用Make、PHP和NodeJS scripts、ImageMagick、LAME和OggEnc自动化这个过程。

　　之后，当你的游戏启动时，预加载你的所有资源(可能除了音乐)。我们使用async.js来从AJAX中同时取得所有东西，然后开始游戏循环。

　　AppCache(AKA Offline Mode)是一种相当简单的加速预加载和重新加载的方法(甚至于对在线多人游戏)，如果你保持游戏简单的话。记住，这个方法也可能出大错，在你得意忘形以前，先读读《Application Cache is a Douchebag》这篇文章吧。

　　一开始，当你在你自己的机子上运行游戏时，是不会发生这种问题的。提醒你一下，如果你完成了一款HTML5游戏，资源加载问题可能拖延你的发布日程。

　　总结

　　用一种能够无缝兼容现有的网页服务器的语言制作游戏，具有简化免费和开放平台的网页开发的潜能，使HTML5成为开发和实用性方面非常诱人的选择。