Después de consultar muchos materiales en Internet, finalmente se completó la función de comunicación bidireccional entre Vue y Unity Webgl. Encontré muchos problemas durante este proceso, así que registré el proceso general.
Implementación de la solución:
1. El lado de la unidad implementa una función predefinida de archivo jslib como puente.
2.c# usa DllImport para introducir y llamar a funciones predefinidas.
3. El lado web usa js para definir la función llamada.
1.Programa Unity Webgl integrado en vue
2.Unity -> comunicación vue
3.vue -> Comunicación unitaria
1.Programa Unity Webgl integrado en vue
1) Después de que Unity empaquete y genere el proyecto webgl, copie el contenido de la carpeta webgl a la carpeta estática en el directorio del proyecto vue.
Agregue el archivo Web.Config con el siguiente contenido:
<?xml version="1.0" encoding="utf-8"?>
<!--
有关如何配置 ASP.NET 应用程序的详细信息，请访问
https://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.webServer>
<httpProtocol>
<!-- 允许跨域配置 -->
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type,Authorization" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE,OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>
</httpProtocol>
<staticContent>
<remove fileExtension=".mem" />
<remove fileExtension=".data" />
<remove fileExtension=".unity3d" />
<remove fileExtension=".jsbr" />
<remove fileExtension=".membr" />
<remove fileExtension=".databr" />
<remove fileExtension=".unity3dbr" />
<remove fileExtension=".jsgz" />
<remove fileExtension=".memgz" />
<remove fileExtension=".datagz" />
<remove fileExtension=".unity3dgz" />
<remove fileExtension=".json" />
<remove fileExtension=".unityweb" />
<mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
<mimeMap fileExtension=".data" mimeType="application/octet-stream" />
<mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
<mimeMap fileExtension=".jsbr" mimeType="application/octet-stream" />
<mimeMap fileExtension=".membr" mimeType="application/octet-stream" />
<mimeMap fileExtension=".databr" mimeType="application/octet-stream" />
<mimeMap fileExtension=".unity3dbr" mimeType="application/octet-stream" />
<mimeMap fileExtension=".jsgz" mimeType="application/x-javascript; charset=UTF-8" />
<mimeMap fileExtension=".memgz" mimeType="application/octet-stream" />
<mimeMap fileExtension=".datagz" mimeType="application/octet-stream" />
<mimeMap fileExtension=".unity3dgz" mimeType="application/octet-stream" />
<mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />
<mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />
</staticContent>
</system.webServer>
</configuration>2) Llamar como iframe en el proyecto vue
<iframe src="/static/Unity/index.html"
ref="unityvue">
</iframe>2.Unity -> comunicación vue
1) Después de crear el proyecto en Unity, cree una nueva carpeta de complementos en el directorio de Activos y cree un archivo jslib. Puede crear el archivo en txt. El nombre del archivo más el sufijo es "xxx.jslib". Recuerde cambiar el sufijo de jslib.
jslib actúa como intermediario, unity se comunica con él y el front-end también se comunica con él, sobre esta base se realiza la comunicación y el acoplamiento entre los tres.
2) En el archivo jslib recién creado, agregue el siguiente código:
mergeInto(LibraryManager.library,{
//Unity内自定义调用方法名 PostScore(string sceneName)
PostScore: function (sceneName) {
strs = Pointer_stringify(sceneName); //字符串需用Pointer_stringify转换
GetScore(strs); //前端自定义方法名GetScore(strs)
},
});3) En Unity, cree un nuevo script, agregue el espacio de nombres usando System.Runtime.InteropServices y agregue el siguiente código C#:
[DllImport("__Internal")]
private static extern void PostScore(string currentScene); //当前场景Llame al método PostScore () en unity, es decir, llame al método PostScore () en jslib
4) Al empaquetar, deshabilite el formato de compresión en Configuración del reproductor->Reproductor->Configuración de publicación y seleccione Webgl como plataforma.
5) Después de que Unity empaquete el programa, agregue el método GetScore() en index.html
Lo anterior es el método básico de comunicación front-end de Unity.
En este momento, cuando hacemos clic en el botón de interacción en la página de Unity incrustada en la página web , se puede activar el método PostScore (str) para transferir los datos de la página de Unity al html de front-end.
3.vue -> Comunicación unitaria
La página de inicio necesita usar la función unityInstance.SendMessage () para transferir valores a la página de Unity. El formato de llamada es el siguiente:
Enviar mensaje (objeto de unidad, nombre de método de unidad, valor)
unityObject——Nombre del objeto de montaje del script de Unity
unityMethodName: el nombre del método llamado en el script de Unity (debe ser un método público)
valor: el valor que debe ser enviado por el front-end
1) El objeto unityInstance no se puede encontrar directamente en el webgl empaquetado y generado por la versión Unity2022.3. Debe realizar el siguiente procesamiento en la página index.html y personalizar un objeto myGameInstance para obtener unityInstance.
var myGameInstance = null;
createUnityInstance(document.querySelector("#unity-canvas"), {
...//省略代码
}).then((unityInstance) => {
myGameInstance = unityInstance;
});
2) Entonces puedes llamar felizmente a este método en la página de vue ~
const refreshAllItem = ()=>{
console.log('当前unity对象', unityvue.value)
unityvue.value.contentWindow.myGameInstance.SendMessage('WeatherControl', 'TransToAfternoon', "")
}Documentación de referencia
Me gustaría agradecer a los siguientes autores por sus materiales de referencia ~
La última postura de la comunicación Unity (WebGL) y JS en 2022 - Zhihu
comunicación web - llamadas web unity método_bilibili_bilibili