Unity WebGL监听是否进入全屏模式
今天遇到一个需求打包成WebGL之后要当做一个iframe,嵌入到别的网页中,其中遇到两个难题。
1.要增加一个全屏模式。
2.全屏的时候使用unity中的title,非全屏的时候要使用网页本身的title。
全屏一开始使用webkitRequestFullScreen,直接控制全屏发现,当点击全屏后,画面出现拉伸,需要点击一下才会回复正常的画面。没有找到有效的解决方法。
于是使用unity自己封装的方法来控制全屏吧。
修改打包后的CSS文件,将全屏按钮移动到画面中。
#unity-fullscreen-button { position: absolute;
bottom: 10px;
width: 38px;
height: 38px;
right: 10px; background: url('fullscreen-button.png') no-repeat center }
第二个问题,做好js调用unity中的代码,控制title的显示和隐藏,然后增加这个方法就可以监听浏览区是否进入全屏状态。
window.onresize = function() {
if (document.fullscreenElement) {
console.log('进入全屏')
unityInstance.SendMessage("JSToUnity","Show");
} else {
// TODO...
console.log('退出全屏')
unityInstance.SendMessage("JSToUnity","Close");
}
};