整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5简史:距离成熟还有多久?

HTML5简史:距离成熟还有多久?

TML5是移动互联网的未来吗?

自2010年乔布斯公开支持并在iOS禁止Flash后,在多数开发者心中,这开始变成一个肯定的答案。

2010年到2011年,HTML5概念被热炒,受到追捧,甚至不少人预言HTML5应用将会替代原生app。但或许是当初被捧得太高,而不论是生态环境还是技术支持都远远算不上成熟,HTML5游戏在短暂热捧之后遭遇诸多问题,随后开始陷入冰谷,当初使用HTML5开发游戏的团队纷纷转型——HTML5或许将是未来,但现在谈论还为时过早。

在被遗忘一段时间之后,现在,一些专注于游戏领域的HTML5引擎服务提供商正在重整旗鼓(详见今日推送的第二篇文章),这让我们不由再次回头审视HTML5游戏走过的整个路程,并开始思考一个问题:在HTML5那条通往“未来”的遥远道路上,它正站在一个什么样的位置上?

■过去


2010年4月,苹果公司宣布禁止FlashPlayer登陆iOS系统,鼓励开发者使用HTML5技术,这一举动引起了轩然大波,乔布斯甚至为此撰写了一篇长文《关于Flash的几点思考》进行回应。当年十月,Zynga收购了HTML5游戏引擎开发商Dextrose,并在随后发布了第一款HTML5游戏《MafiaWarsAtlanticCity》。

从2011年开始,HTML5的概念开始火爆,在这一年,诸多大厂纷纷出击这一领域进行布局,MOTO投资了HTML5游戏公司Moblyng,迪士尼收购了HTML5游戏引擎公司RocketPack。

Facebook社交游戏开发商Wooga也在当年宣布进军HTML5和iOS游戏领域。

在同一年,Unity确认支持HTML5,Facebook收购HTML5技术团队Strobe,将自身在移动端的发力重心放在HTML5上。同年,手游大厂EA、Popcap、Gameloft也相继发布了自己的HTML5游戏。

在2011年底,还有一件重要的事情,Adobe宣布停止在Android系统更新FlashPlayer,并推荐开发者使用HTML5技术开发移动Web应用。

就在看起来形势一片大好HTML5概念火热的时候,哀歌从2012年开始唱响。

在2012年开年之际,此前MOTO投资的HTML5游戏开发商Moblyng倒闭是第一个音符,随后在六月,Wooga宣布停止开发HTML5游戏,他们曾经推出一款HTML5游戏《MagicLand:Island》,但是玩家玩这个游戏的总次数只有130万次,留存率仅5%,相比之下,他们在iOS平台推出的《DiamondDash》则获得了1800万次的下载。

为这支哀歌谱下强音的是Facebook的失败。在2012年9月,扎克伯格在接受采访时表示:“Facebook曾经错误地将赌注押在了HTML5上,这是我们最大的战略错误,致使我们错失了移动市场的发展良机。”

在那之后,曾经被捧上高位打上未来标签的HTML5技术在移动端狠狠摔落,HTML5开始淡出视野。

总结下来,HTML5在移动游戏领域所遭遇的困境,主要是由于四个原因:

1、技术不成熟,开发生态不完整

2、没有合适的载体,浏览器渲染性能低下

3、没有成熟的生态环境(渠道,运营商)

4、受制于网络环境

这些原因最终造成了游戏功能和表现受限,体验大打折扣。

在2013年底,下一代JavaScript标准规范ES6草案锁定并正式发布。

■现在

目前HTML5的框架和库都普遍偏于Web应用的制作,专注于游戏的偏少,比较流行的HTML5框架包括CreateJS,JQuery,AngularJS和Node.js,专注于HTML5游戏的引擎有Impact、Phaser、Pixi、Createjs、EaselJSPhaser、Turbulenz、GameClosure、Coco2d-HTML5和Egret等。

现在主流网站几乎全部支持HTML5标准,几乎所有流行的网站都采用了HTML5技术。但是在移动设备上,还尚未出现非常成熟的HTML5应用或游戏,这一市场还在刚刚起步。游戏方面,此前有一二三国、修仙三国、三国喵喵传等游戏,而目前,墨麟、游戏谷、光年互动等开发商正在开发HTML5游戏。

正在发生的另外一些事情:

1.各浏览器对HTML5标准化的支持正在慢慢趋于一致

2.硬件的变革正在不断推动采用HTML5技术制作的复杂应用和游戏的用户体验的快速提升

3.Web游戏类型在3G/4G网络下的数据发送接收速度正在变得相对高效,但目前国内总体网络质量仍不乐观

4.逐渐涌现出的HTML5游戏引擎和制作工具,开始降低H5游戏制作成本,并提高游戏开发效率

5.混生应用出现,上层使用h5开发,底层使用c++渲染,性能得到很大提升,这种方式是当前阶段的主流

6.一些巨头正在尝试引领这个市场,腾讯的手机QQ空间的安卓版应用,在前段时间将“玩吧”菜单放置在了底部菜单栏的一级入口;在玩吧中,现在已经上线了不少HTML5游戏,不仅有休闲游戏,也有一些卡牌类的中重度游戏,同时在安装QQ空间首次登录时,会自动进入一个名为“让童年飞”的HTML5休闲游戏,腾讯正在尝试引导用户尝试这些HTML5游戏,不过总体来说,内容还处于匮乏阶段,玩吧目前仅提供13款游戏;此外还有百度轻应用等。

看起来一切正在往前有序推进,不过站在游戏开发者角度来说又是什么看法?

在一些开发者看来,HTML5游戏开发快、易调试、跨平台、推广成本更低的特点,或许会是其优势所在,但是问题的核心在于如果不能在游戏体验上给予玩家更多好处,那么就没有太多的理由去看好,基于这点才会有市场,别的都是业内臆想。

而对于游戏玩家来说,内容才是永远的核心。

■未来

HTML5的成熟条件是什么?

TML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后,就开始一发不可收拾,今年《传奇世界》更是突破流水2000万!从两年多的发展来看,游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于 2D 或者 3D 的场景。作为一名开发者,分析了当下最火爆,最热门的HTML5游戏引擎供大家参考,希望大家也能找到属于自己的那款游戏开发引擎。

1、Construct 2

Construct 2是一个运行于Windows平台的游戏制作工具,它可以让没有任何编程基础的用户在短时间内不写一行代码快速开发出一款可运行于所有平台(Windows、Mac、Linux、Android、iOS等)的游戏。

特点:

简单直观,入门容易,无需编程也能做游戏,长处是开发射击及动作类的平面游戏,有丰富的英文资料。

优点:

支持多平台(Android,iOS,Windows)简单易用、无需编程知识可以使用,可实时运行游戏;

提供了大量特效,支持物理效果,有开发者商城,在上面可以购买到各种开发插件和游戏素材;

强大的事件系统,可以不通过写代码来控制游戏逻辑;

提供了可编程扩展的接口,可以自己开发插件;

完整的文档以及社区支持。

2、Three.js

Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。



3、Phaser

Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架,提供JavaScript和TypeScript双重支持,内置游戏对象的物理属性,采用Pixi.js引擎以加快Canvas和WebGL渲染,基于浏览器支持可自由切换。

快速、免费、易于维护,使用Phaser来开发2D小游戏的优势显而易见。一方面,开发者可以直接通过Koding平台上的VM开发系统进行代码编写及预览。另一方面,也可以在支持Canvas的浏览器中直接安装Phaser来进行游戏开发。



主要特性:

· JavaScript、TypeScript双重支持

内置游戏对象的物理属性

· WebGL、Canvas渲染自由切换

· 完全支持Web音频

· 输入:多点触控、键盘、鼠标、MSPointer事件

除了IE 9+、Firefox、Chrome、Safari及Opera等桌面浏览器之外,Phaser还支持Mobile Chrome(Android 2.2+)及Mobile Safari(iOS 5+)等移动浏览器。使用Phaser进行游戏开发没有任何语言设定,并且,在Phaser官网上,还提供了非常详细的开发指南,想要一探究竟的开发者不妨直接登陆Phaser查看。

4、Pixi.js

Pixi.js是一款超快的开源HTML5 2D渲染引擎,使用带有Canvas回调功能的WebGL。作为JavaScript的2D渲染器,Pixi的目标是,可以提供一个快速且轻量级的2D库,并能兼容所有设备。此外,让开发者无需了解WebGL,就可以感受到硬件加速的力量。



主要特性:

· 真正的跨平台:在今天,开发工具跨平台已经不是什么稀奇的事了。不过,Pixi.js则是一个可以兼容所有设备的超快HTML5 2D渲染引擎,并且拥有canvas回调功能的WebGL,实现真正的跨平台。

交互式多点触控:Pixi不仅支持移动和平板设备,还具有完整的多点触控输入识别,让开发者可以发挥自己的能力去挖掘出它所有的潜力。

WebGL过滤器:当使用WebGL时,Pixi允许你使用自己熟悉且现有的过滤器。当然,你也可以使用自己创建的独一无二的过滤器,比如自定位移和半色调效果。

着色和混合模式:对设计师来说,会很喜欢这个,Pixi.js允许用户着色和使用混合模式就像其他常见的视觉包比如Photoshop或Flash。

渲染器自动检测:这个算是Pixi的一大特色,虽然Pixi是主要作为WebGL 2D渲染器而创建的,但仍支持非WebGL平台。其解决方案就是创建一个Canvas回调系统,只需一次编码,Pixi就可无缝管理回调。

简易API:设计直观,易于上手。

资源加载:精灵表单、图形、字体和动画数据等都可通过Pixi.js来加载和处理。

支持精灵表单(Sprite sheet)。

5、egret

Egret 游戏解决方案包含了开源免费的 HTML5 游戏引擎、Egret 项目开发工具集合、动画特效制作工具、原生多平台打包工具、高效的 HTML5 游戏应用加速器、以及支持多渠道的开放平台等。开发者可以通过Egret项目开发工具快速、高效的制作及开发游戏相关各类内容,加速器将游戏效果提高到与原生游戏相媲美的效果。制作后的游戏发布到开放平台后,有着优质的渠道资源可以将游戏推荐给更多的用户,使得游戏开发、发布、推广变为一体化内容。



主要特性:

基于TypeScript及JavaScript技术,支持Flash到Egret高效转换,引擎、工具、运行时完整工作流

· 跨平台:HTML5、iOS、Android、Windows Phone

· 全中文文档:文档与开发者社区齐全

· 开源免费,BSD开源协议、任意定制及扩展

最后小编支持:

如果你是一名初学者,或者是即将毕业的应届生,那么考虑的不是实习过程中给你带来多大的机会,而是为岗前的技术需求做好最有筹码的准备,多学习,多花时间努力,多参与企业实例项目获得实际的项目经验,那么你的职业就从你能力高低而定位薪水高低,艾悠乐帮助IT行业中百万学习者成功获得高薪岗位,如果你也是其中一威有需要帮助的IT爱好者,那么请及时关注 aoyolo 公众号哦,也可以随时联系美女老师QQ:744933732 留下您的联系方式,我们会及时与您联系,轻松让您从屌丝逆袭高富帅`(*∩_∩*)′

前阵子沉迷 Brotato 无法自拔,刚好掘金又出了个 码上掘金编程挑战赛,就想着用 Pixi.js 仿一个 Brotato,现在刚好活动告一段落,于是准备开一个新坑,算是做一个复习总结吧,也希望能对 Pixi 感兴趣的小伙们有所帮助,国内确实这方面的资料比较少(毕竟 PixiJS 的官网是英文文档)

关于 Pixi.js

官网的解释:HTML5创建引擎。最快、最灵活的 2D WebGL 渲染器。

特征

  • 支持WebGL渲染,因为能调用GPU渲染,所以渲染性能高
  • 支持canvas渲染,当设备不支持WebGL时自动使用canvas渲染,也可以手动选择canvas渲染
  • 简单易用的api,提供了很多封装的模块
  • 丰富的交互事件,支持完整的鼠标和移动端touch事件
  • 不侵入你的编码风格,可以自由选择使用它的多少功能
  • 与其他插件或框架无缝集成

详细点说:PixiJS 的核心是一个渲染系统,它使用 WebGL(或者Canvas)来显示图像和其他 2D 视觉内容。 它提供了完整的场景图(要渲染对象的层次结构),并提供交互支持以启用处理点击和触摸事件。 它是现代 HTML5 世界中 Flash 的自然替代品,但提供了更好的性能和像素级效果,超出了 Flash 所能达到的范围。 它非常适合在线游戏、教育内容、交互式广告、数据可视化……任何需要复杂图形的基于 Web 的应用程序。 再加上 Cordova 和 Electron 等技术,PixiJS 应用程序可以作为移动和桌面应用程序分布在浏览器之外。

Pixi API的优势在于它具有通用性:它不仅仅是一个游戏引擎。 因为你可以完全自由地使用它制作自己喜欢的东西,甚至是创建自己的游戏引擎。

流程

  • 创建舞台
  • 创建画布
  • 把画布挂载到DOM上
  • 创建精灵
  • 显示精灵
  • 操作精灵

这里大家先做简单了解,后续会结合案例给大家详细介绍

游戏设计

作为游戏开发的一环,前期游戏规则的制订,流程的设置,以及为后续功能扩展留好坑位十分重要,本篇的主要内容会围绕着游戏设计展开

游戏流程

Brotota 是一个肉鸽类的射击游戏,主要的游戏流程是怪堆里再规定时间内苟活,击杀怪物获得经验,过关升级可以加强属性和购买道具

这里我把流程简化了下,这样一个无限挑战的游戏流程就出来了

游戏元素

Brotato 的主角是各种各样的土豆,这里我就将角色设计成各种水果,当然初版只有一种,但只要把这个角色类设计好,后面的就是一个换肤和添加各种特色机制就可以了,怪物同理,其它的都是些公共元素,简单设计下就可以

不多不少主要有6个元素,后续篇章将会对这6个部分做逐一的设计与讲解,每个都会以 js 中 class 的形式进行设计(BroFruit,Board,Count,Role,Bullet,Monster...),力求尽可能的逻辑解耦与复用,敬请大家持续关注!