移植到android_微信小游戏 Canvas/WebGL Demo 移植
本文由大神 易旭昕 授权发布,
原文链接:https://zhuanlan.zhihu.com/p/33785287 (点击文后原文链接可跳转至作者的知乎)
----------------------
这是个人关于微信小游戏系列文章的第一篇,在这系列文章里会描述 ——
如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行;
对小游戏在 Android 平台的运行时架构进行分析;
通过对移植的 Canvas/WebGL Demo 在小游戏和 Chrome for Android 浏览器上做 Benchmarking,对 H5 游戏 vs 小游戏的渲染性能进行对比和分析;
Canvas/WebGL Demo
为了做性能对比,一共移植了四个 Demo,这些 Demo 常用于浏览器自身的 Canvas/WebGL 性能测试,包括 GUIMark3 和 WebGL Aquarium。
移植的代码已经上传到 GitHub(https://link.zhihu.com/?target=https%3A//github.com/rogeryi/wx_mini_game_demo),读者可以自行下载运行测试。
上图从左至右分别是:
Canvas Bitmap,修改自 GUIMark3 Bitmap,类似雷电的小游戏,多个小位图的重复绘制,主要测试 Canvas.drawImage 的性能,跟微信开发工具自带的样例游戏类似;
Canvas Compute,修改自 GUIMark3 Compute,模拟鸟群的运动,包含大量的物理运动计算,实际上是测试 JavaScript 的计算性能;
WebGL Compute,Canvas Compute 的 WebGL 版本,用 WebGL 绘制点取代 Canvas 绘制短线段;
WebGL Aqua,修改自 WebGL Aquarium,绘制的场景有一定的复杂度,包含了约 30 个模型;
代码移植过程
总的来说移植并不算太困难,WebGL Aquarium 本身包含了大量的 DOM 元素和利用 DOM 来加载脚本和图片,所以花的时间比较长,其它页面只有很少 DOM 元素和 DOM 操作的,移植起来还是很简单,当然这里只包括主体内容的渲染部分,其它如 HUD,输入事件处理,音频播放等并没有包括在内,如果原来的页面是使用 DOM 做 HUD 的,可能会比较麻烦。另外,如果先开发小游戏再移植到浏览器上运行,理论上应该会更简单。
移植过程中自己写了一些方便双端运行的适配代码(wxhelper.js),示例如下。
检查是否是小游戏运行环境
let WX_GAME_ENV = typeof wx !== 'undefined';let WX_GAME_DEVTOOLS = false;let SystemInfo = null;
if (WX_GAME_ENV) { SystemInfo = wx.getSystemInfoSync();if (SystemInfo.platform == "devtools") WX_GAME_DEVTOOLS = true;}
Performance.now()
function Now() {if (WX_GAME_ENV) {if (WX_GAME_DEVTOOLS)return wx.getPerformance().now();elsereturn wx.getPerformance().now() / 1000; } else {return performance.now(); }}
注意规范里面的 performance.now() 是返回微秒精度,但是以毫秒为单位的浮点数值,而小游戏的 API 定义是返回微秒为单位,并且实机环境跟 DevTools 环境还不一样,DevTools 环境估计就是调用浏览器本身的 API,返回的是毫秒为单位的值,这算是踩到的第一个坑,上面的适配代码统一返回毫秒单位。
创建 Image 对象
function CreateImage() {if (WX_GAME_ENV) {return wx.createImage(); } else {return new Image(); }}
获取主 Canvas 的引用
let MainCanvas = null;
function GetMainCanvas(domId) {function GetMainCanvasImpl(domId) {if (WX_GAME_ENV) {if (window != null && window.canvas != null)return window.canvas;elsereturn wx.createCanvas(); } else {return document.getElementById(domId); } }
if (MainCanvas != null)return MainCanvas;
MainCanvas = GetMainCanvasImpl(domId);return MainCanvas;}
在小游戏环境中,只允许有一个占据全屏幕的主 Canvas,如果使用微信提供的 Adapter,这个 Canvas 会事先创建并通过 window.canvas 引用。
全局对象
在浏览器环境里面,window 是全局对象,而在小游戏环境里面 GameGlobal 才是全局对象,下面的代码演示了如何在小游戏环境里面模拟 window 全局对象,我们可以在 GameGlobal 下创建一个 window 属性并让它引用自身。
if (typeof window !== 'undefined') {window.wxhelper = wxhelper;} else if (typeof GameGlobal !== 'undefined') { GameGlobal.wxhelper = wxhelper; GameGlobal.window = GameGlobal;window.top = GameGlobal.parent = window;} else { console.log("Cannot find any global object!");}
因为在小游戏环境里面,每个 JavaScript 文件都是一个模块,里面包含的方法和变量不会自动包括在全局对象下面,如果我们需要跟浏览器保存一致的行为,就需要将对外的 API 显式地导出到全局变量。比如:
// Vector3D.jswindow.Vector3D = function Vector3D(x, y, z){ this.x = x || 0; this.y = y || 0; this.z = z || 0;}
// Boid.jsBoid.ZERO = new Vector3D(0, 0, 0);
上面的示例代码可以把 Vector3D 在浏览器和小游戏环境都导出到全局对象下面,虽然在浏览器环境下是多余的。当浏览器对 ES6 Module 的支持完善后,理论上我们可以使用统一的模块管理方式来处理浏览器和小游戏环境的模块 API 的导出/导入的问题。
最后
更多精彩,锁定玄说前端
点个在看支持我吧
移植到android_微信小游戏 Canvas/WebGL Demo 移植相关推荐
- 微信小游戏 - Canvas/WebGL Demo 移植
这是个人关于微信小游戏系列文章的第一篇,在这系列文章里会描述 -- 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行: 对小游戏在 Android 平台的运行时架构进行分 ...
- 微信小游戏帧同步demo(minigame-lockstep-demo)学习笔记
微信小游戏帧同步demo(minigame-lockstep-demo)学习笔记 框架 pixi.js 游戏配置game.json 游戏服务gameserver.js 帧同步 操作流程 1.操作发送到 ...
- 微信小游戏_2、demo入门
创建过程 使用微信开发工具创建微信小程序项目,在创建界面先择小游戏,输入自己的id或者使用体验id,如下图: 项目架构 小游戏使用javascript语言作为主要逻辑语言进行开发 game.js 游戏 ...
- 微信小游戏canvas画布拖动图片
新手学习,作为笔记.还请高手多多指点,谢谢. var canvas = wx.createCanvas() var context = canvas.getContext('2d') var bgm ...
- 微信小游戏消灭病毒Demo
从网上白嫖来的资源图片,就想着先随便做做看,实现了一点基础的功能,发现自己从一开始就不对,没有进行详细的分层设计,所以后面的功能和服务器也不想写了,先就这样吧! 上图! 基本的玩法是实现了,但飞机的多 ...
- 微信小游戏 - 小游戏 vs H5 游戏性能对比和分析
这是个人关于微信小游戏系列文章的第三篇,在这系列文章里会描述 -- 如何把一些 Canvas/WebGL Demo 移植到小游戏环境并支持双端运行: 对小游戏在 Android 平台的运行时架构进行分 ...
- 白鹭引擎正式支持微信小游戏开发
12月28日微信迎来更新,正式上线小游戏,并开放了小游戏开发文档和开发者工具.在微信发布新版本后,白鹭引擎立即添加了对于微信小游戏开发的支持,开发者只需要使用白鹭引擎的最新版本,通过使用白鹭引擎完整工 ...
- 微信小游戏学习日记1
1.App手游和微信小游戏 2.微信小游戏Unity WebGL转换方案 解析: 3.提升Unity WebGLue游戏启动速度 4.瘦身游戏代码包体 解析: 5.资源优化与按需加载 解析: 6.游戏 ...
- 微信小游戏-飞机游戏玩法改造系列(二:支持血条)
(文末有源码) 休息会玩了会微信小游戏.但是那个级别只是微信小游戏做的 demo,要说玩的话在体验方面还有不少可以优化的: 1. done:移动操作是跟随手指的(我要给改成 向某个坐标移动,坐标就根据 ...
最新文章
- java redis 命名空间_redis里通过命名空间存储缓存,根据结构生成树型
- POJ1178枚举三个地方(所有点都去同一个点)
- 浏览器兼容--条件样式,选择符前缀,样式属性前缀
- xss劫持 HTML 表单,XSS 之 form表单劫持(通用明文记录)
- Web开发融会贯通: 深入浅出 告别浮云
- 总体方差的充分统计量_R方是否衡量预测能力或统计充分性?
- matlab计算斜方差_计算一幅图像的信噪比
- netty与socket对比_Netty之WebSocket和四种IO介绍
- ARP伪造使用抓包工具进行ARP欺骗arp伪造攻击
- vue json对象转数组_年薪百万之路--第六十七天 Vue入门
- 如何在低代码开发平台上,实施表单设计流程
- 【数字图像处理】MATLAB实现图像旋转
- 牛客练习赛60C 操作集锦(DP)
- AE TypeMonkey
- 手机端微信传动文件,超出文件限制,怎么办?
- FTP、FTPS和SFTP
- 解决Intellij IDEA Debug 多模块下断点目标源问题
- 不同浏览器JS获取浏览器高度和宽度
- 伯明翰大学计算机科学怎么样,独家解析!伯明翰大学的优势专业:工程/计算机科学...
- 理解UVM中的virtual sequencer和virtual sequence