0


Unity 2021 发布WebGL之后, 实现和网页(JS)进行交互

新建

Plugins

文件夹,新建文本文档,修改名字为

JSAndUnityInteraction.jslib

。注:JSAndUnityInteraction随便起名,后缀必须为.jslib。
修改里面的内容为如下:
注:不可以有中文,注释里有中文也不行

mergeInto(LibraryManager.library,{
    _UnityToJS:function(Value){var a =UTF8ToString(Value);
        console.log("Untiy To JS: "+ a);getFileInfo(a);},});

发布为WebGL之后,修改index.html,代码如下:

<!DOCTYPEhtml><htmllang="en-us"><head><metacharset="utf-8"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><title>Unity WebGL Player | My project (4)</title><linkrel="shortcut icon"href="TemplateData/favicon.ico"><linkrel="stylesheet"href="TemplateData/style.css"></head><body><!--重点,生成一个按钮,用来和Unity进行交互--><buttontype="button"onclick="send('1234567890')">点我!</button><divid="unity-container"class="unity-desktop"><canvasid="unity-canvas"width=960height=600></canvas><divid="unity-loading-bar"><divid="unity-logo"></div><divid="unity-progress-bar-empty"><divid="unity-progress-bar-full"></div></div></div><divid="unity-warning"></div><divid="unity-footer"><divid="unity-webgl-logo"></div><divid="unity-fullscreen-button"></div><divid="unity-build-title">My project (4)</div></div></div><script>var container = document.querySelector("#unity-container");var canvas = document.querySelector("#unity-canvas");var loadingBar = document.querySelector("#unity-loading-bar");var progressBarFull = document.querySelector("#unity-progress-bar-full");var fullscreenButton = document.querySelector("#unity-fullscreen-button");var warningBanner = document.querySelector("#unity-warning");// Shows a temporary message banner/ribbon for a few seconds, or// a permanent error message on top of the canvas if type=='error'.// If type=='warning', a yellow highlight color is used.// Modify or remove this function to customize the visually presented// way that non-critical warnings and error messages are presented to the// user.functionunityShowBanner(msg, type){functionupdateBannerVisibility(){
                  warningBanner.style.display = warningBanner.children.length ?'block':'none';}var div = document.createElement('div');
              div.innerHTML = msg;
              warningBanner.appendChild(div);if(type =='error') div.style ='background: red; padding: 10px;';else{if(type =='warning') div.style ='background: yellow; padding: 10px;';setTimeout(function(){
                      warningBanner.removeChild(div);updateBannerVisibility();},5000);}updateBannerVisibility();}var buildUrl ="Build";var loaderUrl = buildUrl +"/1.loader.js";var config ={dataUrl: buildUrl +"/1.data.unityweb",frameworkUrl: buildUrl +"/1.framework.js.unityweb",codeUrl: buildUrl +"/1.wasm.unityweb",streamingAssetsUrl:"StreamingAssets",companyName:"DefaultCompany",productName:"My project (4)",productVersion:"0.1",showBanner: unityShowBanner,};// By default Unity keeps WebGL canvas render target size matched with// the DOM size of the canvas element (scaled by window.devicePixelRatio)// Set this to false if you want to decouple this synchronization from// happening inside the engine, and you would instead like to size up// the canvas DOM size and WebGL render target sizes yourself.// config.matchWebGLToCanvasSize = false;if(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)){// Mobile device style: fill the whole browser client area with the game canvas:var meta = document.createElement('meta');
              meta.name ='viewport';
              meta.content ='width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
              document.getElementsByTagName('head')[0].appendChild(meta);
              container.className ="unity-mobile";// To lower canvas resolution on mobile devices to gain some// performance, uncomment the following line:// config.devicePixelRatio = 1;

              canvas.style.width = window.innerWidth +'px';
              canvas.style.height = window.innerHeight +'px';unityShowBanner('WebGL builds are not supported on mobile devices.');}else{// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:

              canvas.style.width ="960px";
              canvas.style.height ="600px";}

          loadingBar.style.display ="block";/*重点,myGameInstance 必须进行定义,不然会报找不到的错误 */var myGameInstance =null;var script = document.createElement("script");
          script.src = loaderUrl;
          script.onload=()=>{createUnityInstance(canvas, config,(progress)=>{
                  progressBarFull.style.width =100* progress +"%";}).then((unityInstance)=>{/*重点,myGameInstance进行赋值 */
                  myGameInstance = unityInstance;
                  loadingBar.style.display ="none";
                  fullscreenButton.onclick=()=>{
                      unityInstance.SetFullscreen(1);};}).catch((message)=>{alert(message);});};
          document.body.appendChild(script);//接收消息//重点,JS调用此方法,实现接收Unity的消息getFileInfo=function(id){
              window.parent.postMessage({ id },"*");
              console.log('id', id)};//发送消息//重点,JS给Unity发送消息,Scripts场景里面游戏对象的名字,_JSToUnity挂载的脚本上的方法functionsend(obj){
              myGameInstance.SendMessage("Scripts","_JSToUnity", obj);}</script></body></html>

注:需要修改的代码为标注重点的地方
Unity里新建脚本,名字为GetJson,代码如下:

usingSystem.Collections;usingSystem.Collections.Generic;usingSystem.Runtime.InteropServices;usingUnityEngine;usingUnityEngine.UI;publicclassGetJson:MonoBehaviour{[DllImport("__Internal")]publicstaticexternvoid_UnityToJS(string str);publicButton button;publicText UnityToJStext;publicText JSToUnitytext;// Start is called before the first frame updatevoidStart(){
        button.onClick.AddListener(delegate{_UnityToJS("1234567890");
            UnityToJStext.text ="Unity To JS = 1234567890";});}publicvoid_JSToUnity(string Value){
        Debug.Log(Value);

        JSToUnitytext.text ="JS To Unity = "+ Value;}}

场景里新建一个游戏对象,名字为Scripts,挂载GetJson脚本,入下图:
在这里插入图片描述
注:Button为点击给JS发送消息
UnityToJStext为Unity给JS发送的消息
JSToUnityText为JS给Unity发送的消息
Demo(百度网盘)地址:
链接:https://pan.baidu.com/s/1nJZya0I2gU8iBAO-1zHFmw
提取码:2c2r

标签: unity webgl javascript

本文转载自: https://blog.csdn.net/LWKlwk11/article/details/127888451
版权归原作者 Unity刘文凯 所有, 如有侵权,请联系我们删除。

“Unity 2021 发布WebGL之后, 实现和网页(JS)进行交互”的评论:

还没有评论