最新消息: 大屏互动软件全新升级为 6.0 啦,启用了新的网址,还是永久免费,但有更多惊喜。点击立即体验

利用 Phaser 开发微信小游戏的尝试

新闻 乐宝 334浏览 0评论

前言

这是一次利用 Phaser 开发微信小游戏的尝试,并不能算作是教程,也像前一篇一样,还只能算是一篇笔记吧。(本文得到了 @大城小胖 的大力协助)

之前我们使用 three.js 进行了尝试,如果您错过了之前的文章,可以查看前文。

利用 three.js 开发微信小游戏的尝试indienova.com

随着这几天的研究,有了一些新的进展,也尝试了一些新的引擎,发现问题还是蛮多的,不过官方的开发工具一直在更新,相信小游戏的开发环境会越来越完善的。所以建议大家等官方的开发工具和接口完备之后再进行正式开发,目前我们所做的都是一些尝鲜,并且不保证今后也能一定适用。

今天,我们要利用 Phaser 进行一次尝试。Phaser 是一款相当流行的免费开源 HTML 5 游戏框架擎,利用它可以轻松的开发 HTML 5 游戏。在国内也有很多开发者使用,详细的情况除了官网之外,也可以到 Phaser 中文网 站去了解(不过我这个网站应该是爱好者自建的,还是建议直接访问官方英文网站)。

准备工作

开始之前,我们需要准备如下资源:

  1. 最新版本的 Phaser CE(社区版)。其实目前最高的版本是即将正式发布的 Phaser 3,但是由于还在开发中,我们这里还是使用最新的 CE 版;
  2. 首先应该具有一定的 Phaser 开发经验,至少有所了解;
  3. 最新版本的“微信开发者工具”。

另外,我们还需要一个自定义的 weapp-adapter.js,这是使用 wx API 模拟 BOM 和 DOM 的代码组成的库,我们在之前有过介绍(官方介绍),这里就不赘述了。我们会在文章后面的源代码中包含这个做了很多修改(来自 @大城小胖)的 Adapter,所以现在就认为它是基本正常工作的就可以了。

这一次我做了一个简单的示例,HTML 文件也放在源代码中,在页面上跑起来大概是这个样子:

” data-caption=”” data-size=”normal” data-rawwidth=”800″ data-rawheight=”496″ class=”origin_image zh-lightbox-thumb lazy” width=”800″ data-original=”https://pic1.zhimg.com/v2-153a4085745850639e553afffd8b998d_r.jpg” data-actualsrc=”https://www.hixianchang.com/wp-content/uploads/2018/20180720/T202851.jpg”>

项目结构

跟上一次不同,如果我们直接引入 phaser.min.jsmain.js 里面:

import*asPhaserfrom'libs/phaser.min.js'

转载请注明:好现场 » 利用 Phaser 开发微信小游戏的尝试

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址