微信小游戏从《跳一跳》开始,很快在小程序领域占据了绝大部分的江山。现在微信上到处可见小游戏的身影。

大量开发者涌入微信小游戏,为微信生态、为微信小程序的生态增添了无数可能性。作为游戏开发者,免不了要被挤入这场战斗。今天我们就来了解一下微信小程序和小游戏背后的技术,来看看它们成功的背后,有哪些技术上的支持和创新。

微信小游戏的技术创新

最早以前,微信小游戏有 3M程序大小的限制,而到了现在,这个大小限制已经上升到了 8M,这使得微信小游戏从轻量级的休闲游戏,逐渐往中级、重量级的方向发展。游戏的品质和操作性也有了质的提升。

小游戏的体积为什么会有限制呢?因为体积较小的话,我们可以从服务器快速拉取资源数据来开启游戏。现在,微信平台本身已经可以做到 20M的体积限制,只是微信并不愿意开放地太快,因为开发者有一个循序渐进的过程,微信平台本身的战略规划也有一个循序渐进的过程。

我在之前的热点剖析部分,分析过 HTML5技术发展以及 HTML5游戏引擎,其实微信小游戏、小程序,甚至微信本身都是基于 HTML5技术的,而微信小游戏用的其实就是 HTML5技术,只是在小游戏中运用的是 Canvas2D的 API和 WebGL1.0的 API。

毕竟微信小游戏也属于小程序的范畴,所以我们先来看一下微信小程序。

微信小程序用的是基于 WebView的技术。所谓的 WebView,你可以理解为在手机中内置一款高性能 WebKit内核的浏览器,然后将这个浏览器核心封装成 SDK,供接口方调用。这个浏览器核心没有地址栏和导航栏,只是单纯的在软件需要的地方展示一个网页界面。

微信小程序本身分为页面的视图层和逻辑层。页面的视图层运用的是 WXML和 WXSS,它们是两种腾讯修改过的 HTML和 CSS技术;而逻辑层则分为 Manager和 API。视图层和逻辑层都呼叫了 JSBridge技术,更下层则是一些网络服务、离线存储,再下层则是系统层。具体的结构,你可以看我画的这幅图。

微信小游戏脱胎于微信小程序。小游戏兼顾传统 HTML5技术和小程序技术,但是小游戏却没有用到 WebView技术,而是修改了 HTML5规范的一些接口内容,成为腾讯自己的内容。也就是说,同一款游戏,如果要在微信小游戏和普通网站都能运行,需要编写两套代码。

那么你或许就要问了,为什么微信要自己开发一套 Web体系而不用 Web本身的标准体系呢,这样不是增加了前端程序员的工作量吗?如果说都是一套 Web体系的话,大家不就可以皆大欢喜,到这里可以用,移植到那儿也可以用。

同样的问题,我们是不是可以这么问,为什么苹果公司要自己研发 iOS系统,用最早最成熟的塞班系统不是挺好,诺基亚用得也挺不错。为什么谷歌要开发一套 Go语言,现成的 Java、Python不也挺好,都挺成熟,为什么一定要开发新的东西,让工程师入坑呢?

有很多人说,自己开发一套体系是因为微信下的棋很大,野心很大,你可以这么理解,我们今天从技术本身来看看,事情是什么样的。

我们从以下几个方面来看为什么微信要自己定义一套体系。

1.可以自定义 Web标准。为什么要自定义 Web标准呢?我们从结果来看,自然是为了提升用户体验。而从技术层面讲,这和 Web兼容性有关。Web标准本身是个庞大的体系。所以如果既要全部兼容 Web体系又要按照自己的意愿去实现功能,这是很难做到的事情。比如,如果微信本身的小程序浏览器会重塑一套渲染规则,比如播放视频的时候自动屏蔽广告、按钮默认变成椭圆形等等,因此,自定义 Web标准,可以去做更多的事情。

2.可以自定义开发标准。微信扔掉了 Web兼容性以及标准 HTML5的内容之后,就开始自定义开发标准了,所以微信强制要求开发者按照某种编码规则来编写代码,从而解决了在普通Web编程中“如果不用某种规则来编码,就会出现兼容性问题”的难题,这样,就从源头上解决了这个问题。事实上,这也是“强制约束开发者写出素质较高的代码”。

3.可以有比 HTML5更强的功能。完全兼容标准 HTML5的话,并非不可能,如果你熟悉前端开发的话,就会知道这个坑会有多大。因为首先 HTML5不具备很多功能,比如获取手机设备信息、获取手机罗盘、地图定位等等。但如果用自定义的体系,加上从微信作为 App本身具有的底层获取功能,就完全可以做到了。

4.防止刷流量、刷广告。在防止垃圾 HTML5页面出现的这件事情上,微信做了大量的工作,比如你应该经常可以看到的,如果出现单纯的 IP地址的页面,微信就给出提示,询问你是否跳转,或者提示你可以举报诱导分享等等,当然这都不能完全避免垃圾 HTML5页面出现在微信生态下,所以在小程序自定义规则的情况下,你只能按照定义规则来开发,如果想钻空子,最后小程序和小游戏的上线还有一道人工审核的关卡,所以想要出现垃圾 HTML5页面的情况几乎是不可能出现的。

5.方便后续优化。由于微信自己那一套体系是高层次抽象层,所以微信小程序团队可以在用户完全没有感知的情况下进行底层优化,而上层不用修改任何代码就可以了。

所以说,微信小游戏其实是基于 HTM5技术,并在此之上,充分结合自己的需求和产品特性,添加了自己的创新。

微信小游戏成功的原因

微信小游戏建立在微信本体上,因此微信能获取到的移动端的底层功能小游戏基本都能一并获取,比如网络连接、内部存储等等,而 HTML5做不到这点。微信可以获取底层平台的接口且并不需要授权,因为微信安装上去后已经获取了手机的权限,小游戏想要或者一部分权限是很容易的事情,相比 HTML5游戏要从浏览器获取权限那就是很麻烦的一件事情。

其次,因为微信本身作为流量入口,对于小游戏的传播是一个极大的便利,独立开发者或者中小游戏开发公司,如果前期没有推广资源和推广渠道,那么通过微信本身这个巨大的流量入口,就可以获取相比传统 HTML5游戏更好的效果。

除此之外,传统 HTML5小游戏可以包装成 App的外壳做成 App的形式供人下载,因此又多了一个获客途径。到了后期,苹果公司加大了对于 HTML5应用和游戏包装成 App这种形式的审核力度,加上网页机制的运行效率限制,HTML5套壳程序比原生应用的体验感也更差。

传统 HTML5游戏发布之后,如果需要更新,则需要重新上传一次网页代码。如果用户端还需要重新刷新网页,甚至清除浏览器缓存等复杂的操作,如果做成 App套壳,那就更需要在各个渠道市场上传一遍程序,这在效率上就慢了一截。而微信作为平台本身,更新游戏后,你重新获取只需要上传到微信平台就可以了,获取新游戏,刷新网页缓存,微信一并帮你做了。

传统 HTML5游戏的广告接入,是非常麻烦的一件事情,你需要去和广告商去做分成机制、对接广告接口等等。如果是微信小游戏,你只需要对接微信自己的广告渠道就可以,可以说是一键就能对接几种广告机制,广告分成也是透明的、公开的。

微信平台本身拥有打击拷贝游戏的能力,如果有一款游戏被抄袭了,你可以投诉,如果发现属实,微信就会将抄袭的游戏下架,这样一来,就保护了原创游戏,激发广大开发者创作出更好的游戏,给微信带来更好的游戏生态。当然这里所谓的原创机制,是指的微信小游戏本身生态下的原创,因为作为成熟的游戏生态来讲,已经基本不存在狭义上的“原创”这两个字了。

小结

这节内容差不多了,我们来总结一下。我和你讲了这样几个内容。

  • 微信小游戏、小程序都是基于 HTML5技术的,而微信小游戏的技术就是 HTML5技术,只是在小游戏中运用的框架并不是普通的 HTML5的框架。
  • 微信小程序用的是基于 WebView的技术;小游戏却没有用到 WebView技术,而是修改了HTML5规范的一些接口内容,成为腾讯自己的内容。
  • 微信平台之所以要自定义自己的一套体系,比如 Web标准、开发标准等等,是因为可以结合微信本身的特性,在此基础上制作出更契合腾讯生态的产品,一句话就是,为了方便自己开发、优化和管理。
  • 微信小游戏基于微信的底层获取功能、广告接入优势和打击拷贝的能力,塑造了一个更好的微信小程序生态。

(文章来源于网络,侵删。)

作者:蔡能/原网易游戏引擎架构师、资深游戏底层技术专家

剖析:谈谈微信小游戏的成功点相关推荐

  1. 毁灭行星,微信小游戏开发

    很久没有更新博客了,因为最近我在开发一款自己的微信小游戏. 这款游戏叫<毁灭行星>,现在已经在微信小游戏上线了,大家可以在微信搜索体验. 创作来源刚开始是来自一位前同事,后来他由于工作原因 ...

  2. 微信“小游戏”遭抄袭质疑;程维霸气谈美团约战;苹果就降速门道歉 |一周业界事

    微信"小游戏"来了,开屏你得"跳一跳" 12月28日下午,微信更新了6.6.1版本,上线了三项新功能:1.新增小程序任务栏功能:2.支持小程序间快捷切换:3.小 ...

  3. 微信小游戏开发学习记录2

    接上一篇:微信小游戏开发学习记录_寂静流年韶华舞的博客-CSDN博客_微信小游戏开发学习 目录 一.UI系统 1.基础渲染组件-精灵组件 (1)操作: (2)Sprite 属性 (3)渲染模式 2.L ...

  4. 使用Laya引擎开发微信小游戏(下)

    本文由云+社区发表 6. 动画 6.1 创建伞兵对象 在src目录下创建一个新目录role,用来存放游戏中角色. 在role里创建一个伞兵Soldier.ts对象文件. module role{exp ...

  5. Egret 生成 自带EUI 的微信小游戏 踩坑!

    1. 首先,再次被网上一大堆屎一样的资料搞得浪费了我一天时间.各种坑. 2. 本文先讲一种正确的方式,然后再列举坑. 去www.egret.com下载最新的引擎,我的最新版本是5.2.2. 然后就会被 ...

  6. 【微信小游戏实战】零基础制作《欢乐停车场》二、关卡设计

    1.游戏立项 微信小游戏中有一款<欢乐停车场Plus>的小游戏,大家可以搜索玩下.这是一款益智类的小游戏,游戏中有红.黄.绿.蓝.紫5辆豪车6个停车位,玩家通过可行走路线移动小车,最终让各 ...

  7. mfc使用cef源代码实现_如何获得微信小游戏跳一跳源码以及源代码组合包括哪些...

    很多小游戏都是由源代码编写而成的,那大家知道源代码组合包括哪些吗?手机游戏源代码怎么使用的呢?还有,如何获得微信小游戏跳一跳源码?下面就由奇瑰网小编带大家来了解一下相关的内容吧. 源代码组合包括哪些 ...

  8. js转json工具_菜鸟丨Egert3D微信小游戏发布与Unity工具使用

    本次教程将会为大家介绍Egret3D工具导出Unity场景对象的使用,以及发布微信小游戏流程.让大家对Egret 3D有更加熟悉的了解. 需求工具: 1.Unity场景导出插件: 2.微信开发者工具. ...

  9. 微信小游戏凭什么拿走开发者 70% 的日流水?

    作者 | 屠   敏 责编 | 唐小引 一年多前,张小龙在微信公开课 PRO 上正式宣布小程序的到来,彼时大批的创业者开始在 O2O 服务.电商.制作平台.周边服务等运营模式中探索小程序的红利场景.经 ...

最新文章

  1. php四位数加密,如何使用php实现一个对数字进行8位的加密解密函数
  2. android linearlayout 边框 圆角,如何将圆角半径应用于LinearLayout
  3. python【力扣LeetCode算法题库】66-加一
  4. 数据库连接数过多 too many
  5. 用C++实现简单随机二元四则运算
  6. MySQL进阶(DDL与DML)
  7. html列表隐藏显示出来,JavaScript栏目列表隐藏/显示简单实现
  8. hdu 4308 Saving Princess claire_ 广搜 多校联合赛第七题
  9. php防止SQL注入
  10. 软件测试技术——覆盖方法介绍
  11. Excel,遗忘密码后如何撤销工作表保护密码
  12. 计算机组成原理习题集
  13. 飞信2009_那个时代独有的目光局限——浅谈“飞信”的兴衰
  14. 坚果pro官方固件_坚果Pro线刷包_坚果Pro刷机包_坚果Pro固件包_坚果Pro救砖包 - 线刷宝ROM中心...
  15. 三大框架之---MyBaits第二章
  16. pyspark LEAK: ByteBuf.release() was not called before it's garbage-collected. Enable advanced leak
  17. html标签 lt heavy gt,HTML Purifier:转换&lt; body&gt;到&lt; div&gt;
  18. Windows压缩指定文件并删除原文件内容bat脚本
  19. 神经网络学习笔记(五) 径向基函数神经网络
  20. EmguCV入门(一)

热门文章

  1. 二维离散动力学系统的混沌研究【基于matlab的动力学模型学习笔记_9】
  2. 领芯微基于LCM32F037吹风筒方案
  3. Vue中的视频播放插件( vue-video-player )
  4. [机器学习基础][台大林轩田]机器学习概念
  5. Scrum立会报告+燃尽图(Final阶段第七次)
  6. fopen函数的打开模式
  7. metamask 最新版官方版
  8. TMS320F280049C 学习笔记9 CMD文件 程序从FLASH复制到RAM中运行
  9. 【专题5: 硬件设计】 之 【9.案例一:门控开关,制作BOM表和成本核算】
  10. 区块链的基本概念和工作原理