当前位置:首页 > SNS游戏 > SNS产业 > 微信小游戏开发技术与应用

微信小游戏开发技术与应用

来源:本站投稿发表时间:2018-03-31 14:52:05发布:关注:

文/陈阳(Younger)
作者介绍:2011年加入腾讯,现就职于腾讯游戏增值服务部,负责AMS游戏营销平台,致力于研究和推动Web及大前端相关技术的发展。

一、微信小游戏——h5游戏及微信小程序

微信小游戏h5游戏以及微信小程序,他们到底是什么关系呢?  就像这个图一样,微信小游戏,目前其实就是微信小程序里能运行的h5游戏,既属于微信小程序,也是h5游戏。 另外这三者 实际也是有区别的,后面会讲。



二、h5游戏什么是h5游戏

首先看一下,什么是HTML5

HTML(Hyper Text Markup Language),超文本标记语言。

  • 1991年,HTML1开始研发。

  • 1993年,HTML1发布。

  • 1999年12月,HTML4发布。

  • 2004年,WHATWG提出Web Applications 1.0,HTML5草案的前身。

  • 2006年,W3C与WHATWG决定合作,推进新版HTML。

  • 2008年01月,HTML5第一份正式草案公布。

  • 2014年10月,W3C宣布HTML5正式公布发布。



HTML5新规则:减少对外部插件的需求,比如Flash等;


HTML5新特性:canvas、video、本地存储、websocket、新内容元素等等。


可以看到其实在1999年的时候,就已经是html4了,但是到14年w3c,也就是万维网联盟(World Wide Web Consortium,简称W3C) 才正式宣布html5发布。 这中间是一个比较艰辛漫长的过程。而且这中间还出现了一些插曲,比如在06年左右,那个时候盛行flash,很多站点整站flash,还出现了一些比较有代表性的flash小游戏,比如小小flash。不知道大家是否有印象,就是简单几个小人可以操作打来打去,非常有趣。



那个时候还有个闪客帝国比较有名,可以上传自己的flash作品。这些是06年左右。



但其实广义上来看,h5开发,是一个技术合集。如图五,我列了一些主要的点,比如基础知识及标准规范,包括html5、css3、es(我们现在开发中用的主要是es6规范来的),还有typescript (typescript和javascript最大的一个区别就是 typescript是强类型的),当然还有W3C的一些其他规范比如DOM/BOM(浏览器对象模型,比如window.xxx)。然后还有h5开发需了解熟悉的开发及调试工具。接着就是在安全及性能优化这块,csRF/xss 这些是常见的。


这里再简单说一下 WebAssenmbly, 说一下这个webAssembly的大致由来,js解释性语言,一大特点相对来说性能比较慢,而且特别是网页应用复杂的时候,所在google在09年的时候 在v8引擎里加入了JIT(即时编译),有了buff后,差不多提升20~40倍。JIT是基于运行期分析编译的,而javascript是一个没有类型的语言,于是大部分时间,JIT编译器是在猜测类型,如果类型猜错了只能推倒重来。所以那个时候就有两种思路,一种是Typescript, 这样就不用猜类型了;一种是asm.js,其实也是标记类型。然后谷歌、 苹果、 微软、 W3C就想把这种方法标准一下,结果呢, 激进了,标注类型的事情也不要了,干脆直接定义一种新的方式,比如用c/ c++写,编译成一个.Wasm格式二进制文件,通过javascript直接载入这个二进制文件运行。这样子的话,可以让web应用和原生应用性能差距缩小。


接着说 h5开发的其他主要相关点,一个是工程化,这其实也是最近这些年兴起的,特别是在前端的大型项目上。这主要需要掌握几种规范Commonjs、AMD,以及主要的工具比如webpack。然后就是主要的库 和 框架。这里说一下weex, weex是阿里推出来的其实通常是和vue配合使用的,和facebook的react native类似,可以让开发人员用js去写原生的应用,所以通常被人称为 vue-native。week会提共weekSDK,会准备一个js引擎,在执行过程中会产生各种命令发送给原生端渲染等等。


最后主要是游戏开发相关的,比如DOM CSS,还有Canvas、WebGL,以及一些游戏引擎。当然还有些其他点。 其实游戏开发这块,和整个h5开发来说,区别还是有一些的,做普通web开发的可以不用了解这块。所以在一些公司,已经将h5游戏开发与web前端开发分开了。 好,这里总结一下,h5游戏,就是基于h5技术合集开发出来的小游戏


h5游戏特点:


优点:
  • 开发成本相对低

  • 跨系统、跨终端、跨平台

  • 无需下载安装,即点即

缺点:
  • 制作门槛相对低

  • 缺少固定流量入口

  • 体验差距(性能、流量等)

据艾瑞咨询与白鹭时代等网络数据——2017年h5游戏市场为30亿元,手游市场规模达到1440亿元,两者比值为1:48。以端游、页游发展过程为参考,页游与端游的市场比值约为1:3。伴随着流量资费的降低、手机的更新换代、h5的持续发展,h5游戏多流量入口和即点即的特征,h5游戏市场 可能存在巨大的增长空间。


h5游戏发展简述

2014年,《围住神经猫》、《愚公移山》,朋友圈病毒式传播,参与量过亿



2015年,《狂挂传奇》、《奇迹