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

基于unity+vue3通信交互的webgl项目发布实践

请添加图片描述

实践路线

- 基于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;
            }
        }
    }
}

webgl.jslib

注意📢 ：unity官方文档中有说明，请使用 .jslib扩展名将包含 javascript 代码的文件放置在 assets 文件夹中的“plugins”子文件夹下。所以一般的做法就是在plugins下新建文本文档，然后改名字改后缀即可。该jslib文件需符合js语法，否则发布webgl会报错。

jslib脚本格式内容如下：

mergeinto(librarymanager.library, {

  showdialog: function (str) {
    var tip = utf8tostring(str);
    // '__unitylib__' 是插件提供的unity对象，相当于绑定了网页渲染出来的unity容器
    __unitylib__.showdialog(tip);
  },

});

那么unity怎么调用jslib中的方法呢？

c#为我们提供了这个命名空间system.runtime.interopservices下的dllimport方法，允许引入非托管代码程序集，也就是说我们在unity里可以通过dllimport方法调用外部程序集的方法。

这里为了测试方便，我就直接将unity调用jslib的方法写在messagemanager里面了。

using unityengine;
using system.runtime.interopservices;

/// <summary>
/// unity-vue消息管理脚本
/// </summary>
public class messagemanager : monobehaviour
{
    [dllimport("__internal")]
    private static extern void showdialog(string msg);//方法名需要jslib书写一致


    private void update()
    {
        if (input.getkeydown(keycode.space))
        {
            showdialog("来自unity的消息");
        }
    }
}

至此完成unity项目的搭建，将项目发布成webgl包，部署到vue项目中测试。
请添加图片描述

创建vue3测试项目

1、创建vue3项目，并安装unity-webgl插件

创建vue3项目这里就不再赘述了，自行搜索相关教程，如有必要，后期再考虑出相关教程。

使用npm安装unity-webgl插件，执行以下命令：

安装成功可在vue项目下node_modules看到unity-webgl。
请添加图片描述

2、创建vue3组件unitygame.vue用于渲染unity画布

vue组件一般我们就放在components文件夹下，vue默认的资源文件夹目录是public，所以我们在public下新建unity文件夹用于部署unity发布出来的webgl包内容。

unitygame.vue内容如下：

<template>
    <vueunity :unity="unitycontext" width="800" height="600"></vueunity>
</template>

<script setup>
import unitywebgl from 'unity-webgl';
import vueunity from 'unity-webgl/vue';

const unitycontext = new unitywebgl({
    loaderurl: '/unity/unityvue.loader.js',
    dataurl: '/unity/unityvue.data.gz',
    frameworkurl: '/unity/unityvue.framework.js.gz',
    codeurl: '/unity/unityvue.wasm.gz',
})

unitycontext.on('mounted',() => console.log('unity加载完成...'))

</script>

注意📢 ：配置项必须包含最基本的四个属性loaderurl, dataurl, frameworkurl, codeurl ，这四个属性都是初始化 unity 应用程序所需的资源文件。

我们还需要再app.vue注册并渲染unitygame.vue组件：

<template>
  <unitygame />
</template>

<script setup>
import unitygame from './components/unitygame.vue'
</script>

这样我们使用vue部署unity项目的基本结构就完成了。

请添加图片描述

执行命令：npm run dev打开本地服务器地址：http://localhost:5173/，即可看到我们用vue部署的unity webgl项目。

请添加图片描述

3、vue中实现与unity通信的基础

unity-webgl插件为我们提供了两个关键方法：

vue调用unity方法
unity调用vue方法

所以，我们需要在unitygame组件里添加实现unity与vue通信交互的测试代码。

我们将通信的方法写在unitygame.vue组件里。示例：

<template>
    <vueunity :unity="unitycontext" width="800" height="600"></vueunity>
    <div style="width: 50%; margin-left: auto; margin-right: auto;">
    <button @click="onshowcube" class="defaultbutton">{{visible ? '隐藏':'显示'}}</button>
    <button @click="onsetcolor" class="redbutton"></button>
    <button @click="onsetcolor" class="bluebutton"></button>
    <button @click="onsetcolor" class="yellowbutton"></button>
    </div>
</template>

<script setup>
import unitywebgl from 'unity-webgl';
import vueunity from 'unity-webgl/vue';
import {ref} from 'vue';

//构建unity实例对象
const unitycontext = new unitywebgl({
    loaderurl: '/unity/unityvue.loader.js',
    dataurl: '/unity/unityvue.data.gz',
    frameworkurl: '/unity/unityvue.framework.js.gz',
    codeurl: '/unity/unityvue.wasm.gz',
})

const visible = ref(true)

unitycontext.on('mounted',() => console.log('unity加载完成...'))
.on('showdialog',(tip)=> alert(tip))//监听unity调用的方法


//向unity发送信息
function postunitymessage(methodname, arg) {
    unitycontext.send('messagemanager', methodname, arg)
}
//调用unity的方法
//设置cube显隐
function onshowcube(){
    visible.value = !visible.value;
    postunitymessage('vue_setvisible',visible.value ? "1" : "0")
}

//设置cube颜色
function onsetcolor(event){
    const button = event.target;
    const style = window.getcomputedstyle(button);
    const htmlcolor = rgbtohex(style.backgroundcolor.tostring());
    postunitymessage('vue_setcolor',htmlcolor);
}

function rgbtohex(rgb){
	// rgby颜色值的正则
	var reg = /^(rgb|rgb)/;
	// 判断是否为rgb格式 
	if(reg.test(rgb)){
		// 将rgb的三个数值切割成数组 rgb(255,0,0) ——> ["255","0","0"]
		var colorarr = rgb.replace(/(?:rgb|rgb|\(|\))*/g,"").split(',');
		var hex = "#" + ((1 << 24) + (parseint(colorarr[0]) << 16) + (parseint(colorarr[1]) << 8) + parseint(colorarr[2])).tostring(16).slice(1);
     	return hex;
	}else{
		return rgb
	}
}

</script>

<style>
.defaultbutton{
  width: 50px;
  height: 50px;
}
.redbutton{
  background-color: red;
  width: 50px;
  height: 50px;
}

.yellowbutton{
  background-color: yellow;
  width: 50px;
  height: 50px;
}

.bluebutton{
  background-color: blue;
  width: 50px;
  height: 50px;
}

</style>

至此，vue测试通信unity项目构建完成。

请添加图片描述

运行项目验证unity和vue通信功能

1、unity打开vue的前端提示框。

请添加图片描述

2、vue前端ui按钮点击事件控制unity游戏物体的显隐和设置颜色。
请添加图片描述

ok，我们已经完成本次实践目标。

总结与展望

unity发布的webgl，使用ugui在界面显示和处理用户输入方面存在体验差的问题。这些都可以用vue来解决。其实就是使用vue开发前端页面代替unity的ugui界面，充分发挥了vue的优势，也保留了unity渲染3d部分的优势。当前这就需要unity开发人员同时具备vue开发前端方面的知识了。

当我们开发前端的项目时，如果同时需要2d界面和3d场景交互时，如数字孪生、虚拟仿真等数据可视化项目，采用unity+vue3技术开发是个不错的选择！

本文对基于unity+vue3的webgl项目发布实践做了一个测试demo演示unity与vue通过第三方插件unity-webgl通信的流程。需要对你有所帮助哦！创作不易，如果合你胃口，来个三连支持吧！我们一起加油！

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

2024年08月01日 • Vue.js •我要评论