Unity 之 发布WebGL转微信小游戏

  • 前言
  • 一,准备工作
  • 1.1 下载插件
  • 1.2 下载Unity
  • 1.3 安装微信开发者工具
  • 1.4 创建小程序
  • 二,开始转换
  • 2.1 创建项目
  • 2.2 Mac适配
  • 2.3 Mac适配的一个问题
  • 2.4 打包报错 需要-x执行权限
  • 2.5 资源文件过大
  • 2.6 常见问题
  • 三,发布游戏
  • 3.1 发布设置
  • 3.2 首次使用
  • 3.3 完美运行


前言

用 Unity WebGL 小游戏适配(转换)方案,本方案设计目的是降低 Unity 游戏转换到微信小游戏的开发成本。基于WebAssembly技术,无需更换Unity引擎与重写核心代码的情况下将原有游戏项目适配到微信小游戏。

效果展示

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏

一,准备工作

1.1 下载插件

进入官方GitHub地址,找到安装与使用 – Unity插件, 也可直接点击下载,下载完成后是.unitypackage的包:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_游戏引擎_02


1.2 下载Unity

我这里用的是Unity2021.3.3f1c1版本:

下载时需要添加:WebGL Build Support 模块:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_游戏引擎_03

官方提示:转微信小游戏插件已验证Unity版本:2018、2019、2020、2021(请尽量使用LTS, 推荐使用2019、2021)。使用Big Sur版本Mac系统的童鞋,在使用2019.4.14之前的版本,会遇到些问题,则需另外安装 python3,并安装brotli 命令如下: python3 -m pip install brotli

若你没有安装过,则等着进度条走完即可:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_04

若已安装,则会显示python3的版本号:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_微信_05


1.3 安装微信开发者工具

点击进入,微信小游戏开发工具页,根据系统选择下载工具,然后安装到本地。

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_微信_06

打开后大致长这个样子:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_游戏引擎_07


1.4 创建小程序

点击进入,小游戏注册页,每个邮箱仅能申请一个小程序,按照要求填写信息:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_08

注册完成后,点击登录。然后完成小程序信息小程序类目的信息补充。

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_09

小程序信息:按照你的需求填写即可

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_游戏引擎_10

小程序类目:类目设置为"游戏",若不设置则后续使用此Appid打开时,否则开发工具会自动将你的项目转化成小程序。

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity_11

最后,在后台界面往下滑,左侧找到”开发工具“ --> 获取AppID

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_游戏引擎_12

目前的设置,已经满足测试需求了。


二,开始转换

2.1 创建项目

使用刚刚下载的新版本Unity创建一个Webgl平台的项目:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity_13

打开后,将1.1下的插件导入到工程中,导入后工程目录如下:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_14

2.2 Mac适配

若使用的不是Mac可直接跳到2.3。

2019.4.13f1 版本:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity_15

使用Big Sur版本Mac系统的童鞋,在使用2019.4.14之前的版本,会遇到些问题,则需另外安装 python3,在上面1.2已经说了,没安装的话,再去看一下。

Mac版本打包之前,找到微信小游戏菜单,点MacOS脚本授权

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity 微信小游戏 集成微信sdk_16

  1. 提示:无法打开“PVRTextoolCLI”,因为无法验证开发者。点击取消:

会在设置 “安全与隐私” -> “通用” 点击 仍然允许 。 后的2,3同样处理

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_17

  1. 提示:无法打开“pngquant”,因为Apple无法检查其是否包含恶意软件。
  2. 提示:无法打开“brolib_x64.dylib”,因为无法验证开发者。

MacOS脚本授权 成功后会打印一个日志:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_微信_18


2.3 Mac适配的一个问题

【新版SDK官方做了适配,已经没有这个问题了】

我使用2019.4.8f1也遇到了同样的问题,但是使用2021.3.3f1版本就可以弹出下面这个提示,然后“安全与隐私” -> "通用"中允许授权就没问题了。

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_19

2019.4.8f1 不知道为什么弹不出来,就一直授权不成功(多操作几次):

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity_20

MaxOS脚本授权一直失败 – 我目前也没有解决,只能升级了工程使用的Unity版本,可以点官方issues 看一下,没准你看到的时候,这个问题已经解决了。


2.4 打包报错 需要-x执行权限

发布微信小游戏,权限问题:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_21

命令行解决:

  1. 查看权限:
ls -l 执行文件目录
  1. 添加权限
chmod +x 文件目录
  1. 验证是否添加成功
ls -l 执行文件目录

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity_22


2.5 资源文件过大

使用包内加载时,资源过大打包完成后会提示:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_微信_23


使用微信开发工具打开导出的文件会报错:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_微信_24

解决方法:将首包资源加载方式修改为:CDN,然后将资源上传到CDN地址即可。

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_微信_25


将打包出来的webgl文件夹下所有资源都上传到上面指定的CDN目录下:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity_26

2.6 常见问题

官方技术常见问题QA,点击查看更多

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_27


unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity_28


设置帧率

#if UNITY_WEBGL && WX
		WeChatWASM.WX.SetPreferredFramesPerSecond(60);
#else
		Application.targetFrameRate = 60;
#endif

设置小程序常亮 – 仅当前小程序生效

WeChatWASM.WX.SetKeepScreenOn(new SetKeepScreenOnOption
        {
            keepScreenOn = true
        });

三,发布游戏

3.1 发布设置

点击”转换小游戏“:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_29

会弹出一个设置面板:

填写AppId(在1.4申请的那个),CDN和项目名先随便写一个,选择一个导出路径,将首包资源加载方式转换为小游戏分包,最后点击导出WEBGL并转换为小游戏(常用):

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_游戏引擎_30

等待导出完成,导出后的目录:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_游戏引擎_31

3.2 首次使用

打开微信开发者工具,选择小游戏 --> 导入 --> 选择导出的minigame路径:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_游戏引擎_32

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity 微信小游戏 集成微信sdk_33

打开后,输入上面的AppID,后端服务选择不使用云服务

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_游戏引擎_34


若不消息打开了微信云开发,在打开后的界面点 “云开发” 按照下面操作进行删除,然后重新进入即可:

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_游戏引擎_35

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_36

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity_37


unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_38


首次打开,会提示插件未授权使用,双击添加(下次使用就不用添加了)

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_39

点击添加即可,添加后需要手动关闭,

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_unity 微信小游戏 集成微信sdk_40

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏_41

3.3 完美运行

等待编译完成,即可看到我么熟悉的Unity的加载动画,然后进入到场景

unity 微信小游戏 集成微信sdk unity支持微信小游戏吗_小游戏