|
|
# 第28讲 | 热点剖析（一）：HTML5技术是如何取代Flash的？
|
|
|
|
|
|
本周开始，我将会在**每周六**更新一篇“热点剖析”，阐述我对2D游戏开发之外的热点，比如HTML5游戏、移动端游戏、AR和人工智能在游戏领域的应用，以及我对微信小游戏、移动游戏、独立游戏开发者的一些观点和看法。
|
|
|
|
|
|
我已经为你讲解了核心的开发知识，对于这些相对热门领域的知识，你可以根据兴趣进行选择学习。
|
|
|
|
|
|
本周及接下来两周的周六，我会依次为你介绍HTML5游戏，以及[如何选择HTML5的游戏引擎](https://time.geekbang.org/column/article/9702)，并带你编写一款H5小游戏。
|
|
|
|
|
|
从前几年开始，H5这个技术就开始蓬勃发展。不管是懂行的还是不懂行的，都开始以“H5”这个字眼来描述产品。比如老板会说“我们就做个H5的页面吧”，或者“这个游戏是H5的吗”。很多人已经把H5等价于“手机端页面”了，这样的理解显然是错误的。
|
|
|
|
|
|
那么H5究竟是什么？它的优点在哪里？为什么现在大家都在谈论H5？你真的知道H5是什么，并真的深入理解了它吗？
|
|
|
|
|
|
## Flash是什么？
|
|
|
|
|
|
首先，在说H5之前，我想先介绍一下Flash技术。
|
|
|
|
|
|
**Flash是由Adobe公司开发的一种富媒体技术，起初是一种放置在浏览器中的插件，填补了当时HTML页面平淡的空白，增强了网页交互的能力。**你可以在Flash中做出任何东西，也可以访问本地电脑中的东西。后来，Adobe公司推出了播放器，在电脑上不打开浏览器，也可以观看或者游戏Flash程序员编写出来的产品。乃至今日，依然有大量应用于Flash的富媒体应用，比如视频的播放，比如独立的小游戏，比如网页游戏，甚至桌面应用，都是使用Flash开发的。
|
|
|
|
|
|
虽然Flash拥有大量优点，并在当时弥补了网页端的很多不足，但是Flash的缺点也是很明显的。
|
|
|
|
|
|
首先，**它的浏览器插件的运行效率并不高，而且访问电脑资源也很不方便，导致很多程序员在开发的过程中出现许多的问题**，就算成功发布了一款Flash应用，浏览器也会被Flash插件拖得很慢，电脑会因此变得很卡，所以H5技术出现后，很多人就开始转投到H5的门下。
|
|
|
|
|
|
另一方面，由于Flash技术掌握在Adobe公司下，一家独大，所以从商业角度讲，很多大公司并不会坐视不管，就开始从Flash中抽取内容并制定公有的Flash规范，到了后面就添加到了H5规范下，成为大家都能掌握的规范。
|
|
|
|
|
|
谷歌苹果等大公司都不支持Flash应用，所以在大公司的压力下以及现在H5的流行，Adobe公司决定在2020年终止Flash技术的提供。
|
|
|
|
|
|
## H5技术究竟是什么？
|
|
|
|
|
|
有了这个铺垫，我们再来看看H5技术究竟是什么，它为什么会取代Flash。
|
|
|
|
|
|
首先，H5大量应用在手机端的网页上面，但这并不等于“H5等于手机网页”，因为普通的HTML页面也可以适配手机端屏幕。
|
|
|
|
|
|
H5全称是HTML5，HTML是超文本标记语言的首字母缩写。而HTML4.01的标准在1999年年底发布。HTML5的草案，前身是网络应用1.0（Web Application），而HTML5的第一份草案于2008年1月月份公布，定稿是在2012年的年底。
|
|
|
|
|
|
在H5标准出现后，各大浏览器纷纷开始支持H5，比如火狐、谷歌的Chrome、IE9、苹果的Safari，Opera等等。事实上，**H5技术很大程度上是为了移动平台所设计，能在移动平台支持多媒体，当然取代Flash这是顺理成章的事情**，但是，H5技术并不等同于移动平台网页，我们在很多的PC端的网页也能看到HTML5的技术。
|
|
|
|
|
|
## H5技术有什么新特性？
|
|
|
|
|
|
H5技术拥有很多最新的特性。
|
|
|
|
|
|
在**语法**方面，HTML5的语法给了网页编写程序员拥有更好的语法结构以及更加丰富的标签。比如，video标签就可以直接在H5页面中嵌入播放器。H5也支持更多的**设备兼容**，比如可以支持摄像头，支持麦克风（移动端的或者电脑端的都可以）。
|
|
|
|
|
|
H5也支持**本地存储**的功能，我们可以使用H5技术来开发网页app，这些都来自本地存储的缓存技术，所以H5网页的**载入速度**会比传统网页更加迅速和便捷，连接也变得更快。H5支持多媒体这是必然的，包括音频、视频、摄像头等功能，事实上使用H5技术的多媒体技术已经完全可以取代Flash技术了。
|
|
|
|
|
|
在**编程**方面，以前我们需要跨域的技术，在H5中，可以使用XMLHttpRequest来解决跨域问题。而且H5页面一经修改就能直接更新上去，基本上刷新页面就能看到效果，而如果使用Flash来做，需要进行编译和发布，并且替换Flash页面，才可以看到Flash应用的更新，从时间效率讲，H5技术又是技高一筹。
|
|
|
|
|
|
另外，如果有专业的SEO人员，也可以很方便地通过H5来做SEO优化，做网站的索引和搜索引擎的抓取优化工作，这在Flash来说几乎是不可能做到的工作。
|
|
|
|
|
|
## 用H5编写游戏有什么优点？
|
|
|
|
|
|
使用H5技术编写的应用和游戏，可以很方便地嵌入到苹果或者安桌的App中。这种方式可以免去原生开发两套App的麻烦，只需要编写一套类似App的H5页面，然后使用类似WebView的方式来嵌入到原生应用中。
|
|
|
|
|
|
由于**H5页面可以随时更改**，所以现在苹果商店对于H5内嵌应用的审核比较严格，所以H5页面必须做得好，而且逻辑流程都不能有问题。所以在H5发展的阶段，有很多声音说，H5除了取代Flash，还会取代App，事实上这是不可能的。虽然H5取代Flash已经毋庸置疑，但是H5取代原生App还是有很多的掣肘，比如H5只能编写轻量级的App，如果需要那种画面效果特别好的App，或者对设备进行深层次的操控，那就只有原生可以办到了，所以现在有许多的App开发，都选择H5和原生混合开发，这样会减轻一定的工作量，并且在实现其他深层次的功能的时候也能使用原生代码。
|
|
|
|
|
|
**用H5比Flash编写游戏更快速，占用资源也更少**，所以以前利用Flash技术编写的游戏，现在都改成H5技术编写，当然H5编写的游戏仍然比不上原生编写的游戏。毕竟原生有对底层的操控能力，直接而且快速，而H5毕竟需要通过浏览器的解释和渲染，所以它的速度基本取决于浏览器，代码优化地再好，也无法直接穿过浏览器这一层去做事情。
|
|
|
|
|
|
所以，用H5编写的游戏，如果是在电脑端，我们可以编写大一点的网络游戏，因为电脑的资源能随心所欲地利用；而如果在手机端，H5技术适合编写小型游戏，比如电商领域、推广平台等营销类的小游戏，再比如玩家操作不是特别复杂的游戏，比如战棋类的、益智类的、策略类的，或者静态画面比较多的游戏（比如选择一个正确答案，猜一个成语那样的等等）。这样的游戏，占用的资源不大，动态资源载入不多，移动平台也不会有太多的卡顿感，各种手机都可以适配和游戏，这样小型的H5游戏是比较适合移动平台的。
|
|
|
|
|
|
**H5游戏的传播能力比Flash更好。**首先Flash技术需要安装一个插件才可以使用，然而H5游戏只需要浏览器支持即可，所以从这方面讲，只需要你通过浏览器分享一个H5游戏到微信、QQ等社交软件，就可以直接进行传播，而不像Flash那样需要安装额外的东西。所以利用H5技术编写的营销工具现在占领了绝对的主流，所以才会有本篇文章最初所说，很多人认为“H5等价于移动平台网页”这样的误解。
|
|
|
|
|
|
## 小结
|
|
|
|
|
|
总结一下今天的内容：
|
|
|
|
|
|
* H5游戏拥有比Flash更好用更开放的规范，开发和发布也更方便，修改代码后放到网上，只需要刷新一下页面就可以看到修改的内容；
|
|
|
|
|
|
* 另外，Flash技术需要安装一个插件，而H5技术直接在浏览器就可以呈现。所以H5技术完全替代Flash只是时间问题。
|
|
|
|
|
|
|
|
|
现在留一个小问题给你。
|
|
|
|
|
|
我们都知道浏览器渲染出来的网页都是2D的页面和游戏，但是H5技术也可以编写3D视觉效果的内容。你知道H5技术所拥有的3D效果是用什么技术实现的吗？
|
|
|
|
|
|
欢迎留言说出你的看法。我在下一节的挑战中等你！
|
|
|
|