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

本周四我们举行了《Cocos Creator微信小游戏开发入门》公开课

受到了同学们的一致好评!

纷纷跑来打听“八卦消息问”微信小游戏课程何时上线...

本期干货我们就带大家来简单了解

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

微信小游戏 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小游戏特点:

优点:

1,开发成本相对低

2,跨系统、跨终端、跨平台

3,无需下载安装,即点即玩

缺点:

1,制作门槛相对低

2,缺少固定流量入口

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

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

二、H5小游戏发展简述

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

 2015年,《狂挂传奇》、《奇迹西游》,月流水上百万

 2016年,《传奇世界》、《决战沙城》,月流水2000万+

 2017年,《大天使之剑H5》,公测24天流水破亿,逐渐形成盈利效应—(三七互娱);  同年,QQ、微信、QQ浏览器、腾讯视频开启H5小游戏专区; 企鹅游戏APP、玩吧APP等专门的H5游戏平台诞生。

 2017年12月28日,微信正式公布小程序支持小游戏。

三、简单H5游戏开发技术

最初只是一些简单的游戏,比如俄罗斯方块,这种主要的技术点就是DOM操作,用jq 原生javascript css3就可以了。画面内元素比较简单,逻辑不会太复杂,结构与常规Web页面一致;主要技术点:DOM元素、jQuery、原生javascript css3。

四、稍复杂H5游戏开发技术

复杂度相对传统Web页高。主要技术点:canvas、javascript、部分dom元素  css3

再复杂一点,比如切水果,相对复杂一些,主要是canvas 部分dom元素的操作。

五、复杂H5游戏开发技术

再看一下,复杂的游戏开发,比如传奇世界,主要是基于H5游戏引擎来做的。

六、H5小游戏引擎

看一下这些游戏引擎的主要对比。白鹭,是目前社区非常活跃的H5引擎,去年宣布支持 webassembly,而且2d 3d vr都支持的,同时支持js、ts开发,经典的代表就是传奇世界。另外,laya引擎,是支持js ts as(actionscript)的。所以以前做flash/as开发的或许可以转到这上面来。然后还three.js,只支持3d的,跳一跳和纪念碑谷小游戏,都是通过three来的。然后cocos2d,这个也是一个老牌引擎,欢乐斗地主。然后再说一款,阿里也开源了一款H5小游戏引擎hilo。阿里双十一的营销活动小游戏、天猫狂欢城等都是通过这个来的。

七、前端工程化

再看一下前端工程化,这个其实也是近些年起来的一个概念。主要是需掌握代码组织规范、webpack工具(帮你压缩 打包 解决依赖关系等等 ),然后还要了解node.js, 基于v8引擎的。其实这个也用于服务端编程。另外就是NPM  包管理。 以上这些就是H5游戏要了解的基本点。

微信小程序

然后看一下微信小程序。微信小程序,其实也是基于webview的。

小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore(IOS)、X5(安卓) 作为运行环境。

微信小游戏

一、小游戏 与 H5游戏、小程序对比

小游戏是在H5游戏的基础上增加微信社交能力、文件系统、工具链,去掉一些对游戏开发不是那么重要的,像Dom、Bom等,从这张图可以看出来,微信小游戏没有webview了,H5规范API这里是 微信小游戏sdk自己实现的,比如canvas  webgl。然后还有就是 游戏引擎这一层,是做了一个适配。

二、小游戏资源加载

目前核心游戏包 4M(用于首次加载),可以实现即下即玩,需3~5秒的下载

理论上,用户若不主动删除,微信客户端只会更新不会删除;容量没有固定值,只有不够用的情况下根据LRU(Least recently used)规则进行删除。

 三、小游戏Adapter

小游戏的运行环境在IOS上是Javascript Core, 在Andriod上是 V8,没有DOM和BOM的运行环境。 Adapter,通过wx api模拟BOM、DOM的代码库。

  "Adapter 是为了让基于浏览器环境的第三方代码更快地适配小游戏运行环境的一层适配层,并不是基础库的一部分。更准确地说,我们将 adapter 视为和游戏引擎都视为第三方库,需要开发者在小游戏项目中自行引入。"

当然,游戏引擎也自己做了适配的,例如cosos

四、小游戏开放注册品类

目前是6大类 24个子类

五、小游戏开放能力及API

登录使用微信登录

用户信息用户授权后,可获取用户的昵称头像

转发分享小游戏可转发至会话

游戏内关闭小游戏快捷关闭小游戏

位置小游戏可读取用户位置信息,需用户授权

发送桌面(安卓)在统一菜单提供发送至桌面

异步语音可搭配使用录音、播放能力组合成为异步语音能力

关系链支持排行榜等基于好友/群关系链的应用

跳转App小游戏跳转符合规则的App

带参数二维码可扫小程序二维码进入游戏内特定场景

腾讯云为开发者提供免费的开发环境和生产环境,方便构建小游戏

小程序跳转小游戏绑定同一公众号下的小程序/小游戏可以跳转

支付安卓开放微信支付能力,苹果IOS暂不支持

 六、小游戏开放工具

七、小游戏开发工具

为了帮助开发者简单和高效地开发和调试微信小程序、微信小游戏,微信在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序、小游戏开发两种开发模式,而且自带小游戏demo。详情可参考mp.weixin.qq.com。

微信小游戏应用

一、小游戏营销体系的建设

小游戏的营销活动、营销应用等的建设。

二、游戏预热及用户沉淀

简单试玩版,提升玩家对游戏的期待,沉淀用户。

三、小游戏化营销

通过小游戏做一些营销活动 或者 营销推广。(阿里双十一、天猫狂欢城等)

可以给APP导流、借助小游戏的流量传播优势,做品牌传播等等。


作者:腾讯IEG事业群\增值服务部\AMS游戏营销平台团队负责人——陈阳

原文发布于微信公众号 - 腾讯NEXT学位(NextDegree)

原文发表时间:2018-07-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ThoughtWorks

前端不止:Web内容的无障碍性 | 洞见

截至 2017 年 6 月,中国网民规模达 7.51 亿,中国手机网民规模达 7.24 亿, 中国网民中农村网民占比 26.7%,规模为 2.01 亿。

16430
来自专栏腾讯云数据库(TencentDB)

腾讯分布式数据库TDSQL成为DCA首批分布式事务数据库认证产品

2018年11月30日,为期两天的数据中心联盟(DCA)第七批大数据产品评测结果评审会圆满结束。腾讯分布式数据库TDSQL在分布式事务数据库的50项产品能力能力...

48940
来自专栏SEO

「思考」百度搜索算法与手机号之间的事情

42580
来自专栏ytkah

安卓微信新版内测 可分享小视频/可设微信字体大小

  安卓版微信最新版本日前已开启内测,小的们(哈哈,轻拍),你们收到邀请了吗?微信安卓最新版加入了5项新特性: ①右上角加号中,可通过展示二维码来收钱; ②拍好...

31750
来自专栏农夫安全

如何给企业做好基本的网络安全防御工作

企业防御 这里总结的是企业在做安全防御的统筹方法,并不是具体某个漏洞如何修复~ 信息安全的实质是采取措施保护信息资产,使之不因偶然或者恶意侵犯而遭受破坏...

94140
来自专栏数据库新发现

面对1.3 亿用户数据泄露,企业如何围绕核心数据构建安全管理体系?

更多精彩:http://www.enmotech.com/services/software.html

14110
来自专栏FreeBuf

99%的人都不知道的秘密:世上竟有如此酷炫的钓鱼系统!

钓鱼作为从远古时期出现的手段,到现在的风靡在各种成功的攻击案例中几乎成为一个高级hacker必不可少的技能。

12240
来自专栏数据和云

面对1.3 亿用户数据泄露,企业如何围绕核心数据构建安全管理体系?

据 FreeBuf 报道,8 月 28 日早上 6 点,暗网中文论坛中出现一个帖子,声称售卖华住旗下所有酒店数据,数据标价 8 个比特币,约等于人民币 37 万...

18430
来自专栏区块链

真实案例讲解如何采取正确的措施防范ICS攻击

很多行业的工业控制系统(ICS),都可能遭受数据泄露、病毒、恶意软件、内部攻击或其它任何形式的攻击。令人遗憾的是,很多自动化工程师并没有意识到问题的严重性,说他...

20100
来自专栏FreeBuf

[专题]Blackhat2013黑帽大会:五款值得一看的黑客工具

2013年的黑帽大会将于7月27日到8月1日期间在拉斯维加斯召开。在即将到来的2013黑帽安全大会上,安全研究者们将会介绍一些黑客工具。 这些工具可以解决的...

19970

扫码关注云+社区

领取腾讯云代金券