Unity发布WebGL浏览器自动适应宽度高度的方法

最新推荐文章于 2024-07-25 19:13:17 发布

DearWWWWWT

最新推荐文章于 2024-07-25 19:13:17 发布

阅读量3.8k

点赞数 7

分类专栏： UNITY-WEBGL 文章标签： unity webgl html

本文链接：https://blog.csdn.net/imwentao/article/details/118413632

版权

UNITY-WEBGL 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

"本文介绍了如何使Unity WebGL应用自动适应浏览器窗口大小，通过修改`<div id="gameContainer">`的样式并添加窗口调整事件监听器，确保Unity窗口随浏览器尺寸变化而调整，提供了一个完整且适用于不同平台的代码示例。"

摘要由CSDN通过智能技术生成

Unity发布WebGL浏览器自适应的方法

发布WebGL

发布WebGL

之前常做windows下运行的项目，最近项目的需求是做Web端B/S架构，所以对Unity发布WebGL进行了简单摸索，在此不多赘述发布WebGL的步骤，直接从发布WebGL后形成一个index.html文件和一个资源文件夹说起，生成的index.html如下。

注：本文使用的Unity版本为2018.3.8f

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | DigitalTwinsWebGL</title>
    <script src="Build/UnityLoader.js"></script>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Bulid.json");
    </script>
  </head>
  <body>
    <div id="gameContainer" style="width: 1920px; height: 1080px; margin: auto"></div>
  </body>
</html>

发布WebGL后用Chrome或者Firefox打开可以发现，网页中的Unity窗体是一个固定分辨率的，分辨率可以在编辑器中的projectsetting修改，也可以用文本编辑器打开index.html后修改，但无论怎么修改，都是一个固定分辨率的，浏览器尺寸调小后Unity就显示不全了。

    <div id="gameContainer" style="width: 1920px; height: 1080px; margin: auto"></div>

自动匹配窗体分辨率

在网上找了很多相关的方法，好使的并不多，可能是因为我们的Unity版本不同吧，下面方式实测可用。将下面的代码粘贴修改至上面的对应位置即可。宽度99vw、高度98vh正好能够实现Unity窗体布满浏览器而且下面不出现滚动条。

    <div id="gameContainer" style="width: 99vw; height: 98vh; margin: auto"></div>

改了这一条之后，打开发布的WebGl网页时，Unity窗口可以自动调整大小与窗口适配，但是如果打开网页后再修改浏览器窗口大小，Unity还是不会同步调整，如果窗口变小，还是会有部分内容被遮挡。

响应浏览器调整

要让unity窗口随着浏览器的调整自动调整，需要为HTML中的onresize事件添加修改Unity窗体的代码。在<body>中增加<script>部分的代码，代码中基于百分比的调整方式，注释中的代码是使用绝对数值的方式，绝对数值方式想要没有滚动条需要减去10-20个像素。

  <body>
    <div id="gameContainer" style="width: 99vw; height: 98vh; margin: auto"></div>
	<script>
		window.onresize = adjuest;
		function adjuest(){
			var canvas = document.getElementById("#canvas");
			canvas.style.width = "99vw";  //window.innerWidth + "px";
			canvas.style.height = "98vh"  //window.innerHeight + "px";
		}
	</script>		
  </body>

在网上看了一些教程，也尝试过调整gameContainer（div块）的大小，但是实测完全没反应，可能与平台也有关系，我用的是pc的windows和linux上的Chrome浏览器打开的。如果想要万无一失，可以采用下面的代码

  <body>
    <div id="gameContainer" style="width: 99vw; height: 98vh; margin: auto"></div>
	<script>
		window.onresize = adjuest;
		function adjuest(){
			var divCon = document.getElementById("gameContainer");
			var canvas = document.getElementById("#canvas");
			divCon.style.width = "99vw";//window.innerWidth + "px";
			divCon.style.height = "98vh";//window.innerHeight + "px";
			canvas.style.width = "99vw";//window.innerWidth + "px";
			canvas.style.height = "98vh"//window.innerHeight + "px";
		}
	</script>		
  </body>

完整代码

完整代码如下。

最好不要直接往自己的工程里面复制，不同工程、不同版本的路径可能都会有不同。最好是只将我上面放的代码放到指定位置，比较靠谱。

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | DigitalTwinsWebGL</title>
    <script src="Build/UnityLoader.js"></script>
    <script>
		var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Bulid.json");
	</script>
  </head>
  <body>
    <div id="gameContainer" style="width: 99vw; height: 98vh; margin: auto"></div>
	<script>
		window.onresize = adjuest;
		function adjuest(){
			var divCon = document.getElementById("gameContainer");
			var canvas = document.getElementById("#canvas");
			divCon.style.width = "99vw";//window.innerWidth + "px";
			divCon.style.height = "98vh";//window.innerHeight + "px";
			canvas.style.width = "99vw";//window.innerWidth + "px";
			canvas.style.height = "98vh"//window.innerHeight + "px";
		}
	</script>		
  </body>
</html>

第一次发，如果有用希望多多点赞转发支持。
转载请注明出处。