基于Unity+Vue3通信交互的WebGL项目发布实践_vue unity 通信

基于Unity+Vue3通信交互的WebGL项目发布实践

问题背景

我们最近需要把unity开发的pc项目迁移到web端，因为unity支持发布webgl。所以按照以往的开发流程，都是项目开发完成就发布webgl部署到服务器。

突然有一天，测试人员提出说为什么我们做的网页跟别人的不太一样呢？具体看下面两张图：

1、unity使用ugui做的界面发布webgl渲染的出来的样子

2、别人前端采用vue开发的UI界面。

直观从这两个截图来看还是可以看出unity的ugui在网页端渲染出来比较糊，不清晰。而且从实际体验中ugui的输入框在网页中极其不好用，还有诸多ui上的问题…唉，比较unity的优势不在web端，而且本来它为了性能考虑，在渲染ui方面肯定是比不上这些原生应用的。

所以，我们最终采用vue3开发前端UI界面的方案代替unity的UGUI界面。下面我们就一起来探讨一下Vue和Unity是怎么一起共同配合工作的吧！

准备工作

阅读下文之前，你除了需要具备Unity发布WebGL的知识之外，可能还需要具备一些前端方面的知识，比如"三剑客"：Html、Css、JavaScript，当然如果能熟悉Vue方面的知识就更好了。这样你就能畅通无堵的阅读本文了。

解决方案

1、vue项目中安装unity-webgl插件。

2、vue直接通过SendMessage方法向Unity发送消息。

3、Unity通过jslib脚本中介向Vue发送消息。

4、unity和vue双向通信流程如下：

项目实践

小目标

1、搭建Unity测试项目并发布WebGL部署到Vue项目中。
2、验证Vue向Unity发送信息：通过前端UI控制Unity游戏物体的显隐和修改颜色。
3、验证Unity向Vue发送信息：Unity监听键盘空格键按下触发前端提示框的显示。

搭建Unity测试项目

1、测试场景

2、创建用于Unity与Vue通信的两个重要脚本

• MessageManager.cs
  创建MessageManager游戏物体，挂载MessageManager脚本，脚本提供接口给vue调用。

脚本内容如下：

using UnityEngine;

/// <summary>
/// Unity-Vue消息管理脚本
/// </summary>
public class MessageManager : MonoBehaviour
{
    /// <summary>
    /// 测试cube游戏物体
    /// </summary>
    public GameObject cube;


    /// <summary>
    /// vue设置物体显隐
    /// </summary>
    /// <param name="visible"></param>
    public void Vue_SetVisible(string visible)
    {
        if (cube != null)
        {
            cube.transform.localScale = visible == "0" ? Vector3.zero : Vector3.one;
        }
    }

    /// <summary>
    /// vue设置颜色
    /// </summary>
    /// <param name="htmlColor"></param>
    public void Vue_SetColor(string htmlColor)
    {
        if (cube != null)
        {
            if (ColorUtility.TryParseHtmlString(htmlColor,out Color color))
            {
                cube.GetComponent<MeshRenderer>().material.color = color;
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

• webgl.jslib

注意