微信小游戏开发总结有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。小游戏与小程序的区别？小游戏是小程序的一个类目，小游戏是微信开放给小程序的更多的能力，让小程序开发者有了开发游戏的能力。小游戏没有WXSS、WXML、多页面等内容，但加了一些渲染、文件系统以及后台多线程的功能。小游戏的运行环境是小程序环境的扩展，基本思路也是封装必要的 WEB 接口提供给用户，尽可能追求和 WEB 同样的开发体验。小游戏在小程序环境的基础上提供了 WebGL 接口的封装，使得渲染能力和性能有了大幅度提升。不过由于这些接口都是微信团队通过自研的原生实现封装的，所以并不可以等同为浏览器环境。小游戏的运行环境在 iOS 上是 JavaScriptCore（注：webkit的一个重要组成部分，主要是对JS进行解析和提供执行环境。），在 Android 上是 V8 （这个不用多说Node.js目前使用的就是V8）。但是两个都没有 BOM 和 DOM 的运行环境，没有全局的 document 和 window 对象。小游戏 VS H5游戏 VS 小程序对比图第三方代码适配（Adapter）主要目的提供 BOM 和 DOM 的运行环境。由上图可以看出，因为没有 BOM 和 DOM 的运行环境，没有全局的 document 和 window 对象。为了让基于浏览器环境（上图的H5游戏）的第三方代码更快地适配小游戏运行环境，所以就有了适配器（Adapter）。它是用微信 API 模拟 BOM 和 DOM 的代码组成的库，抽象的代码层，可以根据自己的需要去实现相关方法。例如，简单实现document.creatElement方法：var document = {
createElement: function (tagName) {
tagName = tagName.toLowerCase()
if (tagName === 'canvas') {
return wx.createCanvas()
else if (tagName === 'image') {
return wx.createImage()
Adapter是否使用由开发者自己决定。不使用Adapter时，可以通过微信提供的API实现相应的方法，但不能使用 DOM API 来创建 Canvas 和 Image 等元素。有的游戏引擎是直接调用DOM API，和访问DOM属性 ，所以记得使用Adapter让游戏引擎适配小游戏的运行环境，保证游戏引擎在调用 DOM API 和访问 DOM 属性时不会产生错误。微信官方实现了一个
小游戏适配器，但仅仅只针对游戏引擎可能访问的属性和调用的方法进行了模拟，也不保证所有游戏引擎都能通过 weapp-adapter 能顺利无缝接入小游戏。这里将 weapp-adapter 适配器提供给开发者，更多地是让开发者作为参考，让开发者可以根据需要在 weapp-adapter 的基础上进行扩展，以适配自己项目使用的游戏引擎。weapp-adapter 会预先调用 wx.createCanvas() 创建一个上屏 Canvas，并暴露为一个全局变量 canvas。require('./weapp-adapter');
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(0, 0, 100, 100);
weapp-adapter 适配器提供了以下对象和方法：document.createElementcanvas.addEventListenerlocalStorageAudioImageWebSocketXMLHttpRequest其实官方文档里面还有很多 ，感兴趣可以查看官方 。小游戏的模块化小游戏提供了 CommonJS 风格的模块 API，可以通过 module.exports 和 exports 导出模块，通过 require引入模块。这里就不用多解释了，其实大家按正常的编码习惯编码就可以了。module.exports = function (canvas, x, y) {
var image = new Image()
image.onload = function () {
var context = canvas.getContext('2d')
context.drawImage(image, x, y)
image.src = 'res/image/logo.png'
所以小游戏对编码方面的基础能力还是很友善的。小游戏能力这里列出部分已提供的 API 能力，更详细的能力及官方实例可访问 。大家对 Canvas 的优化或者对离屏画布不了解的可以看这篇文章 。小游戏引擎游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心组件。这些系统为游戏设计者提供各种编写游戏所需的各种工具，其目的在于让游戏设计者能容易和快速地做出游戏程式而不用由零开始。Cocos、Egret、Laya 已经完成了自身引擎及其工具对小游戏的适配和支持：Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象2D、3D、VR的支持性能从开发者的反馈来说，Layabox本来就是面向大型游戏的H5游戏引擎，性能优势是毋庸质疑的。设计理念与定位工作流支持力度工具链的提供与支持也是一种选择考量要素，比如UI编辑器、粒子编辑器、骨骼编辑器、场景编辑器等等，如果引擎方直接提供或支持，那么将会较大的提升研发效率。Egret、Layabox、Cocos2d-JS这三个引擎在工具链方面提供足够全面的支撑。引擎的应用广度Egret成名比较早，发展得比较快，各方面的资源而比较多，提供了全套开发流工具。用游戏引擎的优点：开发快，可维护性高用游戏引擎的缺点：牺牲一些性能，小游戏用不用引擎几乎感受不到性能差异。大游戏为了开发效率和可维护性，一般都会使用游戏引擎。小游戏实战总结本次主要实现的是跳一跳小游戏。游戏大概如下：跳一跳如何技术实现可以参考：层级划分景物层：负责两侧树叶装饰的渲染，实现其无限循环滑动的动画效果；阶梯层：负责阶梯和机器人的渲染，实现阶梯的随机生成与自动掉落阶砖、机器人的操控；背景层：负责背景底色的渲染，以及开始结束面板渲染。通过requestAnimationFrame循环调用一定次数来实现动画效果。游戏的逻辑通过监听全局的canvas对象实现。分层按顺序叠加绘至画布，先将背景绘上，通过算法计算出台阶位置，结合上一次的位置用requestAnimationFrame实现移位生成新的台阶，机器人单独抽离出来的，没有和台阶一起实现，通过位置计算，得到机器人的位置，绘制字台阶上，最后将顶层的树叶绘制上。小游戏开发难点首先，小游戏使用JavaScript语言开发，不存在HTML，CSS，所以需要对JavaScript语言，Canvas对象操作熟练。其次，和H5版游戏开发区别并不大，但是小游戏支持的库较少，并且大部分H5版开发所使用的到的库是不支持的。还有，就是H5版游戏的实现方式选择性更多，比如跳一跳原版是使用createjs开发，而小游戏版并不能支持所有的引擎，只能通过上面的几个引擎改造适配。小游戏优化为什么要优化？ 其实为了提高页面加载速度，减少游戏运行中的卡顿，使动画看起来更流畅，游戏的流畅程度及画面直接影响了用户体验。以下提供了几个优化方案。GC优化小游戏的优化文档并未指出，在api中提供一个性能管理器，通过获取性能管理器能够调用 API 加快触发 GC ，GC 时机是由 JavaScrpitCore / V8 来控制的，不能保证调用后马上触发 GC。setData调用次数优化小程序端，官方不建议频繁调用 setData，大图片和长列表图片，都有可能导致 iOS 客户端内存占用上升，从而触发系统回收小程序页面。减小代码包尽量减小代码包的大小，代码包直接影响了下载速度，从而影响用户的首次打开体验。控制图片资源控制代码包内图片资源，小程序代码包经过编译后，会放在微信的 CDN 上供用户下载，CDN 开启了 GZIP 压缩，所以用户下载的是压缩后的 GZIP 包，其大小比代码包原体积会更小。 但我们分析数据发现，不同小程序之间的代码包压缩比差异也挺大的，部分可以达到 30%，而部分只有 80%，而造成这部分差异的一个原因，就是图片资源的使用。GZIP 对基于文本资源的压缩效果最好，在压缩较大文件时往往可高达 70%-80% 的压缩率，而如果对已经压缩的资源（例如大多数的图片格式）则效果甚微。清除无用资源及时清理没有使用到的代码和资源，小程序打包是会将工程下所有文件都打入代码包内，也就是说，这些没有被实际使用到的库文件和资源也会被打入到代码包里，从而影响到整体代码包的大小。fps调优使用 requestAnimationFrame 实现动画时，调整到合适的渲染fps(帧率)。遇到的问题图片尺寸问题？小游戏中图片对尺寸限制在2048像素，长宽要小于等于2048像素。对外开放？小游戏对外没有开放注册入口，现在能使用的是前两天在小程序中开放的游戏类目，将小程序类别设定为游戏类目可开发小游戏，不确定以后是否以这种方式注册，或者是单独开放小游戏的注册入口，两者目前没发现有什么区别。官方目前没有提供对外发布，登录后台能够点击发布，但是需要上传软件著作权证书等一系列，所以没有进行下去，不确定能否对外发布成功。关于小游戏代码体积大小？关于小游戏体积问题，小游戏的体积不得大于 4M，缓存不得大于 50M。具体的解释为：本地的代码和资源不得超过 4M。单个小游戏项目缓存的文件不能超过 50M，目前当缓存超过 50M 时后续的资源将不会缓存，未来新版的 AssetsManager 将会允许开发者自定义哪些资源需要缓存的机制。不允许从服务器下载脚本文件。不允许动态执行代码？不允许动态执行代码的能力，eval、setTimeout 和 setInterval 函数的第一个参数不能为字符串，Function构造函数的参数不能为字符串。开发问题游戏逻辑没处理好，动画有点不流畅，有延时问题。作者：链接：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。141 条评论分享收藏文章被以下专栏收录官网：www.wxapp-union.com 官方QQ群：微信小游戏开发配置API接口_Hi小程序
微信小游戏开发配置API接口
|HiShop|阅读量：
导读：微信小游戏开发者通过在根目录编写一个game.json文件进行配置，开发者工具和客户端需要读取这个配置，完成相关界面渲染和属性设置...
最新消息，Hi小程序小编了解到，当下热门话题内容：微信小游戏开发配置API接口。
微信小游戏开发者通过在根目录编写一个game.json文件进行配置，开发者工具和客户端需要读取这个配置，完成相关界面渲染和属性设置，只能使用JavaScript来编写微信小游戏，微信小程序游戏的运行环境是一个绑定了一些方法的JavaScript VM。
小游戏开发者：微信小游戏开发配置API接口
小游戏只有以下两个必要文件：
├── game.js
└── game.json
game.js&小游戏入口文件
game.json&配置文件
小游戏开发者通过在根目录编写一个&game.json&文件进行配置，开发者工具和客户端需要读取这个配置，完成相关界面渲染和属性设置。
deviceOrientation
支持的屏幕方向
showStatusBar
是否显示状态栏
networkTimeout
网络请求的超时时间，单位：毫秒
networkTimeout.request
wx.request 的超时时间，单位：毫秒
networkTimeout.connectSocket
wx.connectSocket 的超时时间，单位：毫秒
networkTimeout.uploadFile
wx.uploadFile 的超时时间，单位：毫秒
networkTimeout.downloadFile
wx.downloadFile 的超时时间，单位：毫秒
多线程 Worker 配置项，详细请参考&Worker文档
deviceOrientation
{ &deviceOrientation&: &portrait&, &networkTimeout&: { &request&: 5000, &connectSocket&: 5000, &uploadFile&: 5000, &downloadFile&: 5000 }
你只能使用 JavaScript 来编写小游戏。小游戏的运行环境是一个 绑定了一些方法的 JavaScript VM。不同于浏览器，这个运行环境没有 BOM 和 DOM API，只有 wx API。接下来我们将介绍如何用 wx API 来完成创建画布、绘制图形、显示图片以及响应用户交互等基础功能。
创建 Canvas
调用&wx.createCanvas()&接口，可以创建一个&Canvas&对象。
var canvas = wx.createCanvas()
此时创建的 canvas 是一个上屏 Canvas，已经显示在了屏幕上，且与屏幕等宽等高。
console.log(canvas.width, canvas.height)
在整个小游戏代码中首次调用 wx.createCanvas() 创建的是上屏 Canvas，之后调用则创建的是离屏 Canvas。如果你的项目中使用了官方提供的&Adapter&即 weapp-adapter.js（关于什么是 Adpater 请参考官方教程&Adapter），那么你此时创建的会是一个离屏 Canvas。因为在 weapp-adapter.js 已经调用了一次 wx.createCanvas()，并把返回的 canvas 作为全局变量暴露出来。假设你的项目目录结构如下：
├── game.js
├── weapp-adapter.js
└── game.json
在 weapp-adapter.js 中已经调用了一次 wx.createCanvas()，并把返回的 canvas 作为全局变量暴露出来。
// weapp-adapter canvas = wx.createCanvas()
如果你在 require weapp-adapter.js 之后再调用 wx.createCanvas()，那么创建的 Canvas 会是一个离屏的 Canvas，因为此时已经不是对该 API 的首次调用。
require('./weapp-adapter') var myCanvas = wx.createCanvas()
在 Canvas 上进行绘制
但是由于没有在 canvas 上进行绘制，所以 canvas 是透明的。使用 2d 渲染上下文的进行简单的绘制，可以在屏幕左上角看到一个 100x100 的红色矩形。
var context = canvas.getContext('2d')
context.fillStyle = 'red' context.fillRect(0, 0, 100, 100)
通过&Canvas.getContext()&方法可以获取 2d 或 WebGL 渲染上下文&RenderingContext，调用渲染上下文的绘制方法可以在 Canvas 上进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法，详情请见&RenderingContext。由于使用 WebGL 的绘制过程较为复杂，所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。
通过设置 width 和 height 属性可以改变 Canvas 对象的宽高，但这也会导致 Canvas 内容的清空和渲染上下文的重置。
canvas.width = 300 canvas.height = 300
通过&wx.createImage()&接口，可以创建一个&Image&对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时，图片才会显示在屏幕上。
var image = wx.createImage()
设置 Image 对象的 src 属性可以加载一张本地图片或网络图片，当图片加载完毕时会执行注册的 onload 回调函数，此时可以将 Image 对象绘制到 Canvas 上。
image.onload = function () { console.log(image.width, image.height)
context.drawImage(image, 0, 0)
image.src = 'logo.png'
创建多个 Canvas
在整个小游戏运行期间，首次调用 wx.createCanvas 接口创建的是一个上屏 Canvas。在这个 canvas 上绘制的内容都将显示在屏幕上。而第二次、第三次等后几次调用 wx.createCanvas 创建的都会是离屏 Canvas。在离屏 Canvas 上绘制的内容仅仅只是绘制到了这个离屏 Canvas 上，并不会显示在屏幕上。
以如下代码为例，运行后会发现屏幕上并没有在 (0, 0) 的位置显示 100x100 的红色矩形。因为我们是在一个离屏的 Canvas 绘制的。
var screenCanvas = wx.createCanvas() var offScreenCanvas = wx.createCanvas() var offContext = offScreenCanvas.getContext('2d')
offContext.fillStyle = 'red' offContext.fillRect(0, 0, 100, 100)
为了让这个红色矩形显示在屏幕上，我们需要把离屏的 offScreenCanvas 绘制到上屏的 screenCanvas 上。
var screenContext = screenCanvas.getContext('2d')
screenContext.drawImage(offScreenCanvas, 0, 0)
在 JavaScript 中，一般通过 setInterval/setTimeout/requestAnimationFrame 来实现动画效果。小游戏对这些 API 提供了支持：
setInterval()
setTimeout()
requestAnimationFrame()
clearInterval()
clearTimeout()
cancelAnimationFrame()
另外，还可以通过&wx.setPreferredFramesPerSecond()&修改执行 requestAnimationFrame 回调函数的频率，以降低性能消耗。
响应用户与屏幕的交互是游戏中必不可少的部分，小游戏参照 DOM 中的 TouchEvent 提供了以下监听触摸事件的 API：
wx.onTouchStart()
wx.onTouchMove()
wx.onTouchEnd()
wx.onTouchCancel()
wx.onTouchStart(function (e) { console.log(e.touches)
wx.onTouchMove(function (e) { console.log(e.touches)
wx.onTouchEnd(function (e) { console.log(e.touches)
wx.onTouchCancel(function (e) { console.log(e.touches)
window 对象是浏览器环境下的全局对象。小游戏的运行环境中没有 BOM API，因此没有 window 对象。但是提供了全局对象 GameGlobal，所有全局定义的变量都是 GameGlobal 的属性。
console.log(GameGlobal.setTimeout === setTimeout) console.log(GameGlobal.requestAnimationFrame === requestAnimationFrame) // true
开发者可以根据需要把自己封装的类和函数挂载到 GameGlobal 上。
GameGlobal.render = function () { //省略方法的具体实现... }
GameGlobal 是一个全局对象，本身也是一个存在循环引用的对象。
console.log(GameGlobal === GameGlobal.GameGlobal)
console.log 无法在真机上将存在循环引用的对象输出到 vConsole 中。因此真机调试时请注释 console.log(GameGlobal) 这样的代码，否则将会产生这样的错误
An object width circular reference can't be logged
小游戏更新
小游戏启动会有两种情况，一种是「冷启动」，一种是「热启动」。 假如用户已经打开过某小游戏，然后在一定时间内再次打开该小游戏，此时无需重新启动，只需将后台态的小游戏切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小游戏被微信主动销毁后再次打开的情况，此时小游戏需要重新加载启动。
小游戏冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地已有的包进行启动，即新版本的小游戏需要等下一次冷启动才会应用上。 如果需要马上应用最新版本，可以使用&wx.getUpdateManager()&API 进行处理。
v1.9.90 基础库以后，可以通过&wx.getUpdateManager()&获取全局唯一的版本更新管理器，用于管理小游戏更新；另外请下载最新版本的开发者工具(1.02.1803130 以上)才支持在开发者工具上调试。
由于是新版本才支持的 API，请在使用前先判断是否支持，例如：
if (wx.getUpdateManager) { console.log('支持 wx.getUpdateManager')
获取到 updateManager 实例后，updateManager 包含以下方法：
onCheckForUpdate
当向微信后台请求完新版本信息，会进行回调
onUpdateReady
当新版本下载完成，会进行回调
onUpdateFailed
当新版本下载失败，会进行回调
applyUpdate
当新版本下载完成，调用该方法会强制当前小游戏应用上新版本并重启
onCheckForUpdate(callback) 回调结果说明：
是否有新的版本
注：&检查更新操作由微信在小游戏冷启动时自动触发，不需由开发者主动触发，开发者只需监听检查结果即可。
onUpdateReady(callback) 回调结果说明：
当微信检查到小游戏有新版本，会主动触发下载操作（无需开发者触发），当下载完成后，会通过&onUpdateReady&告知开发者。
onUpdateFailed(callback) 回调结果说明：
当微信检查到小游戏有新版本，会主动触发下载操作（无需开发者触发），如果下载失败（可能是网络原因等），会通过&onUpdateFailed&告知开发者。
applyUpdate() 说明：
当小游戏新版本已经下载时（即收到&onUpdateReady&回调），可以通过这个方法强制重启小游戏并应用上最新版本。
完整使用示例
if (typeof wx.getUpdateManager === 'function') { const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console.log(res.hasUpdate)
updateManager.onUpdateReady(function () { // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate()
updateManager.onUpdateFailed(function () { // 新的版本下载失败 })
下一篇：没有了
小程序开发文档针对底部导航，滑块视图实现，以及调用豆瓣电影api等…
微信小程序开发教程为大家介绍小程序开发流程的步骤详解，让大家全…
近日，微信官方小游戏开放客服消息能力，下面是官方开发文档。…
小程序新增自定义业务数据监控功能。开发者可自定义监控数据上报，…
官方文档都是默认你已经有了微信小程序的APPID，但是如何能获取到微信…利用 Phaser 开发微信小游戏的尝试 | indienova 独立游戏
前言这是一次利用 Phaser 开发微信小游戏的尝试，并不能算作是教程，也像前一篇一样，还只能算是一篇笔记吧。（本文得到了
的大力协助）之前我们使用 three.js 进行了尝试，如果您错过了之前的文章，可以查看前文。随着这几天的研究，有了一些新的进展，也尝试了一些新的引擎，发现问题还是蛮多的，不过官方的开发工具一直在更新，相信小游戏的开发环境会越来越完善的。所以建议大家等官方的开发工具和接口完备之后再进行正式开发，目前我们所做的都是一些尝鲜，并且不保证今后也能一定适用。今天，我们要利用 Phaser 进行一次尝试。 是一款相当流行的免费开源 HTML 5 游戏框架擎，利用它可以轻松的开发 HTML 5 游戏。在国内也有很多开发者使用，详细的情况除了官网之外，也可以到
站去了解（不过我这个网站应该是爱好者自建的，还是建议直接访问）。准备工作开始之前，我们需要准备如下资源：最新版本的 。其实目前最高的版本是即将正式发布的 Phaser 3，但是由于还在开发中，我们这里还是使用最新的 CE 版；首先应该具有一定的 Phaser 开发经验，至少有所了解；最新版本的“”。另外，我们还需要一个自定义的 &weapp-adapter.js，这是使用 wx API 模拟 BOM 和 DOM 的代码组成的库，我们在之前有过（），这里就不赘述了。我们会在文章后面的源代码中包含这个做了很多修改（来自 ）的 Adapter，所以现在就认为它是基本正常工作的就可以了。这一次我做了一个简单的示例，HTML 文件也放在源代码中，在页面上跑起来大概是这个样子：项目结构跟上一次不同，如果我们直接引入 phaser.min.js 到 main.js 里面：import * as Phaser from 'libs/phaser.min.js'会出现如下错误：ReferenceError: PIXI is not defined因为 Phaser 内置了 PIXI.js 作为渲染引擎，所以它需要 PIXI，因为是打包在一起的，所以我们之前的方法失效了。不过，Phaser 提供了自定义 Build 功能，所以我们可以根据自己的需要重新编译，移除一些不需要的功能比如微信小游戏开发根本不需要的手柄和键盘支持等等。这里有官方的。很麻烦是吧？不过在 Phaser CE 的包里面其实有一个 build/custom 的文件夹，里面已经包含了分别编译好的文件，我们开发的时候必需的主要是三个文件：pixi.min.js，p2.min.js 以及 phaser-split.min.js我们将这三个文件拿出来单独使用即可。最后，我们项目的结构就是这样：├── game.js
├── game.json
├── project.config.json
├── README.md
├── main.js
└── libs
├── gamelibs
├── p2.min.js
├── phase-split.min.js
└── pixi.min.js
├── symbol.js
└── weapp-adapter.js
└── images
└── spritesheet
为了不让这篇笔记复杂化，我们粗暴的按照一定顺序将这个包引入，然后我们的 main.js 就是这样：window.PIXI = require('libs/gamelibs/pixi.min.js')
window.p2 = require('libs/gamelibs/p2.min.js')
window.Phaser = require('libs/gamelibs/phaser-split.min.js')
* 游戏主函数
export default class Main {
constructor() {
console.log('Main')
}运行一下，是可以跑的，我们应该已经成功的引入了 Phaser 必要的组件。创建游戏对象Phaser 的创建很简单，正常情况只要写这样一句就可以了：var game = new Phaser.Game(320, 200, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });我们将我们的 main.js 的代码主体这样写：/**
* 游戏主函数
export default class Main {
constructor() {
game = new Phaser.Game(320, 200, Phaser.AUTO,
'phaser-example',
{ preload: this.preload, create: this.create, update: this.update });
preload() {
console.log('载入素材')
game.load.image('bg', 'images/bg/field_1920.png')
create() {
console.log('创建内容')
let back = game.add.image(0, 0, 'bg');
update () {
console.log('更新')
}代码很简单：创建我们的游戏，然后载入一张图片，将其放到屏幕上。跑一下，出现错误：TypeError: window.scrollTo is not a functionwindow.scrollTo 显然是没有通过 Adapter 露出，看来创建游戏的时候，还将窗口滚动到顶部了。我们可以给它添加到 weapp-adapter.js 并露出。不过我们在微信小游戏中是不需要这个方法的，可以粗暴的加入：window.scrollTo = function() {}现在再跑，应该没有错误了，而且更新函数也一直在跑，但是屏幕上就是没有任何显示。这是怎么回事？（黑人问号……）因为：Phaser 自己会创建一个 Canvas 画布，而在微信小游戏中已经有了一个现成的 canvas，随后再创建的 canvas 都是离屏的（off-screen），所以，游戏现在是跑在一个不可见的 canvas 里面。所以，我们需要修改我们的初始化方法，让 Phaser 使用微信自动创建的 canvas。于是，将我们的游戏对象创建代码改成这样：constructor() {
// 配置参数
const conf = {
width: size.w,
height: size.h,
canvas: canvas,
renderer: Phaser.WEBGL,
parent: 'phaser',
transparent: false,
antialias: false,
state: { preload: this.preload, create: this.create, update: this.update },
scaleMode: Phaser.ScaleManager.EXACT_FIT
// 创建游戏
game = new Phaser.Game(conf)
}再次运行，应该就出现画面了。一些需要后面处理的问题接下来我尝试了不少东西，包括 SpriteSheet 载入和处理、触摸事件响应等，看来制作一款游戏相对基本的功能都可以实现。在提交的源代码中完成了：双手触摸屏幕的两边，角色会向该方向引动，在 iPhone X 上是这样，画面位置回头需要校正：尝试通过 Phaser 自己播放音频的时候出现了问题，但是应该可以通过修改 Adapter 解决。而且可能通过微信提供的声音播放类也是能完成的，所以并没有努力尝试。比较大的一个问题是在试图使用 Shader 的时候没有成功，这个目前看来好像是因为 getContext() 初始化参数的问题，那天大城小胖提交给微信团队的里面也有涉及，估计后面会得到解决。也可能是我哪里搞错了，后面会在小组中讨论。结束语好了，简单的介绍了一下怎么利用 Phaser 开发微信小游戏，这并不是一篇教程，只是在目前信息和资料不完善情况下的一种尝试，也希望大家一起参与到开发和研究中来，互相交流。欢迎加入我们的小组： 微信小游戏小组indienova 小组源代码为了方便大家参考，特提供源代码。其中包括一个微信小游戏项目和原始的 WebGL 项目，以及大城小胖修改过的 &weapp-adapter.js。 Github源代码下载其它相关链接请先阅读：目前，Cocos、Egret、Laya 已经完成了自身引擎及其工具对小游戏的适配和支持，访问对应的官方文档可以更快地接入小游戏的开发Cocos：Egret：Laya：
近期点赞的会员
&分享这篇文章
从前的边城浪子，现在的路人乙&
您可能还会对这些文章感兴趣
参与此文章的讨论
您需要登录或者注册后才能发表评论
<div id="failed-message" data-notify-position="top-right" data-notify-type="error" data-notify-msg=" 操作失败！请通知管理人员。">}