微信小程序 初步调研

根据微信官方文档说明:小程序的RenderingContext支持2dwebgl2d部分支持HTML The 2D rendering context的大部分属性,方法。webgl部分支持 WebGL 1.0的所有属性、方法、常量。

准备

初步想了下,由于现在小程序的架构限制,有些值得注意的地方。

  • 移植

移植的时候需要进行一些API的适配。官方提供了工具。

  • 资源

由于大小限制,资源需要做网络加载。这需要访问本地文件系统的能力和访问网络的能力。分别对应于FileSystemManagerDownloadTask相关API。在这基础之上需要有个资源管理功能。但是对于游戏来说,音乐,UI,模型等等资源,体积实在不小,一打开,十几MB流量可能就没了。

  • 调试

开发者工具提供了预览功能。扫码打开小游戏开发辅助,右上角菜单,可以打开调试模式,性能监控监控面板。vConsole,可以显示日志,系统信息等。性能监控面板可以显示一些基本信息。总体来说调试还算方便。Chrome对WebGL支持的太好了,很多东西只有在手机上才会暴露问题,所以多预览还是很必要的。

  • 网络

可以使用WebSocket。用户登陆需要调用微信提供的接口。

  • 性能

给予three.js写了个测试。将一个性能测试移植到小程序上(没有调整相机,应该是少于5000个suzanne),大概稳定在60fps左右(一加3T手机)。这里是源代码。

微信图片_20171230222454.jpg
  • 优化

有两个想法:

  • 使用asm.js这类的工具。脱离小程序开发工具。和Unity一样,给小程序导出项目,再打包。这样不管是编译成js代码,还是WebAssembly,都能得到很大的性能提升。而且如果哪天小程序支持WebAssembly了,痛苦也会小很多。
  • 编写一套专门的引擎。这样方便调试,全部掌握再手中。但是问题是成本太大,而且

开发

想试水,就要写点东西。写东西就要用到框架,基础库一类。大概找了找,非常多。主要来自:WebGL-frameworks-librarieshtml5gameengine.com,总结下其中了解的几个。

对于开发游戏来说,这个是一个库。缺少一些框架级别的东西,例如相关的可视化工具。如果牛逼,可以自己封一套。

导出为WebGL项目。可以不进行js压缩来移植。需要修改UnityLoader.js的代码。可取之处在于:使用了asm.js(WebAssembly实验性支持);相关内容非常成熟;相关工具非常全面(骨骼,开发插件等)。

写这个记录的时候(1.7.14beta)使用TypeScript和JavaScript便宜默认的小游戏项目代码后,使用微信开发者工具无法直接运行(bin/game.js竟然有个require("./项目手动发布为单个JS(参考工具webpack).js");这种代码。不过很好改,只能说没准备好那两种语言。ActionScript版,编译本默认小程序项目代码后可用微信开发者工具直接运行。

默认的例子是一套UI例子,没有3D场景,等有时间进一步测试。

初步来看,毕竟是专注H5游戏,应该不差


当然,还有Egret,其他一些开发框架环境,这里就不多说了

其他

three.js

在检测webgl版本的时候,会发生错误。因为内部使用的代码会引发错误。

var version = parseFloat( /^WebGL\ ([0-9])/.exec( gl.getParameter( gl.VERSION ) )[ 1 ] )

我在测试的时候,gl.getParameter( gl.VERSION )返回的是OpenGL的版本,而不是WebGL的版本,导致了运行时错误。

将version直接赋值为1即可,因为官方指明标准是WebGL 1.0。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,050评论 4 370
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,538评论 1 306
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,673评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,622评论 0 218
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,047评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,974评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,129评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,893评论 0 209
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,654评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,828评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,297评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,619评论 3 262
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,326评论 3 243
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,176评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,975评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,118评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,909评论 2 278

推荐阅读更多精彩内容