unity发布WebGl在手机上的横屏适配，webgl横版游戏在手机上直接转横屏

Posted 2023-04-04 似水流年wxk

unity版本2020.1

问题：webgl的横版游戏 1920*1080,在手机上适配的不好，还是竖屏显示，

使用官方的说明，说是只在全屏模式下能旋转，也不好用，可能直接旋转也不会达到理想的效果

解决方案：

1.我这边使用的方案是UI的适配，UGUI,采用的是两套UI，根据不同平台加载不同的资源就行，我这里使用的Addressable来加载资源的，pc端加载的比如是UILogin,手机上加载的是mb_UILogin

（1）需要配置canvas这里 适配Match改成两者之间

 

（2）就是pc端使用的是横版ui,就是设计分辨率的ui,1920*1080的，

（3）手机端使用的直接竖屏下的横版ui,

 

这么做的原因是因为我尝试过许多方法，都不好用，方法如下

1.转Canvas的相机 ，因为已经是竖屏，相机转了，在横屏下只显示一半的屏幕，调节相机的Size也不行
2.转预制体根节点，可以，但是对齐的按钮需要调整，那些边缘对齐之类的按钮就会错乱
3.直接调整预制体的内容为横屏，背景图按照中间对齐的方式
4.转UI的Canvas 不行
5.webgl代码实现旋转，这个有点困难，因为打包后的html的unityCanvas是webgl的，webgl是基于openGL发展出来的，没有这方面的经验

所以最终选择的3号方案

2.除UI之外，对于游戏场景中的3d和2d相机的适配,默认的平台是pc，不需要操作，判断如果是在手机上就需要操作

我这里游戏场景的 相机 size是5

Unity会根据当前屏幕实际的宽高比和摄像机的orthographicSize值来计算出摄像机的宽度值，即

摄像机实际宽度 = 摄像机高度 * 屏幕宽高比

比如，iPhone4的屏幕像素为640*960，宽高比为2:3，假设Pixels To Units值为100，那么如果设摄像机高度size值为4.8，那么摄像机实际宽度按照公式算出6.4，刚好就是屏幕的单位宽度。

 我们这里就要重新计算一下相机的实际宽度，假如在手机上的宽高是1080*1920，

那么，就要把宽高反过来，计算相机宽度，因为相机需要旋转90度

 if (UnityCallJs.Instance.GetCurPlatForm() == 1)
        // 手机上 相机旋转
            transform.rotation = Quaternion.Euler(0,0,90);

            // 屏幕适配
            float orthographicSize = GetComponent<Camera>().orthographicSize;
            orthographicSize *= (Screen.height / (float)Screen.width);
            GetComponent<Camera>().orthographicSize = orthographicSize;
       

因为默认情况下 orthographicSize是5，在手机的竖屏状态下，是unity计算出来的，我们这里把相机旋转，那么宽高就反转一下来重新计算一下orthographicSize的值，最终得到8.85,正好和横版游戏的显示比例一样。

结语：这是我尝试出来比较好点的方案，如果有同学有更好的方法，还望不吝赐教！

unity导出webgl如何设置横屏

关于横屏，似乎体现不是太好。尝试过旋转CSS样式，但canvas画布严重变形，也不适合。

不过2023版导出webgl后，在手机浏览器中访问时，点击图标即可全屏化。

但在微信内置浏览器中若不开启横屏，则永远无法横屏显示。

此外，微信浏览器访问webgl后，如果变成横屏显示，上面的标题会占据许多内容，显示并不友好，因此仍是推荐引导用户在手机浏览器中访问较佳。

导出webgl后，打开html，在script中发现一行代码：

unityInstance.SetFullscreen(1);

 点击上面图标后，执行此代码则全屏化，若Unity发布时设置的是横屏，则H5页面会转为横屏。

于是把这句话直接写在script里，发现并不能自动全屏化：

script.onload = () => 
        createUnityInstance(canvas, config, (progress) => 
          progressBarFull.style.width = 100 * progress + "%";
              ).then((unityInstance) => 
                  loadingBar.style.display = "none";

unityInstance.SetFullscreen(1); //此处在进度完成后直接全屏化并不生效


                fullscreenButton.onclick = () => 
                  unityInstance.SetFullscreen(1);
                  ;           
              ).catch((message) => 
                alert(message);
              );
            ;

研究发现此时虽然表面上进度加载完成了，实际并没有完全加载，因此需要延迟执行，如：

script.onload = () => 
        createUnityInstance(canvas, config, (progress) => 
          progressBarFull.style.width = 100 * progress + "%";
              ).then((unityInstance) => 
                  loadingBar.style.display = "none";
                fullscreenButton.onclick = () => 
                  unityInstance.SetFullscreen(1);
                  ;


                  setTimeout(() => 
                      unityInstance.SetFullscreen(1); //延迟执行全屏化，即可自动转横屏
                  ,3000)


              ).catch((message) => 
                alert(message);
              );
            ;

以上即可自动横屏，由于项目并不大，并未测试延迟多少秒为佳，但几百毫秒时也是无效。

 

此时仍有一个问题：加载时的LOGO，进度条等依然是竖屏显示，此时需要处理的是加载界面，即处理生成的html文件样式。

找到相关的div元素，或新建一个div元素覆盖在最上面，等资源加载完成后再显示画布即可。

关于CSS样式及DIV元素，查看index.html便知，此处不再阐述。