Unity打包WebGL后 自适应网页分辨率
利用版本：Unity2022.3.14效果： 可自适应 ，留白为黑色
视频效果：
2024-03-21-16-46-25-CSDN直播
坑1
top left 无效，无法居中显示游戏内容
原因; position 不能是 static 改为absolute
<canvas id="unity-canvas"
style=" position: absolute; width: 1920px; height: 1080px;">
</canvas> 坑2
留白改为黑色
<style>
html
{
background-color: black;
}
</style>
修改步骤
1 自适应代码块（'unity-canvas'拼写需要和上发一样 否则无效）
<script>
var unityContainer = document.getElementById('unity-canvas');
function unityContainerResize()
{
var w = window.innerWidth || document.body.clientWidth,
h = window.innerHeight || document.body.clientHeight,
ratio = 16 / 9,
r = w/h;
var setW, setH, setTop, setLeft;
if (r >= ratio) { // 高度撑满
setW = h * ratio;
setLeft = (w - setW) / 2;
} else { // 宽度撑满
setH = w / ratio;
setTop = (h - setH) / 2;
}
unityContainer.style.width = (setW || w) + 'px';
unityContainer.style.height = (setH || h) + 'px';
unityContainer.style.top = (setTop || 0) + 'px';
unityContainer.style.left = (setLeft || 0) + 'px';
}
window.addEventListener('resize', unityContainerResize)
unityContainerResize()
</script> 2 修改了positon属性为absolute
<canvas id="unity-canvas"
style=" position: absolute; width: 1920px; height: 1080px;">
</canvas> 3 修改默认 留白为留黑
<style>
html
{
background-color: black;
}
</style> 完备代码
在unity打包后的文件夹下面名字是index.html
按照上方修改步骤举行
<!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 | TestWebGL</title> <link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="stylesheet" href="TemplateData/style.css"> <link rel="manifest" href="manifest.webmanifest"></head><body> <div id="unity-container"> <canvas id="unity-canvas"
style=" position: absolute; width: 1920px; height: 1080px;">
</canvas> <div id="unity-loading-bar"> <div id="unity-logo"></div> <div id="unity-progress-bar-empty"> <div id="unity-progress-bar-full"></div> </div> </div> <div id="unity-warning"> </div> </div> <script> window.addEventListener("load", function () { if ("serviceWorker" in navigator) { navigator.serviceWorker.register("ServiceWorker.js"); } }); 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 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. function unityShowBanner(msg, type) { function updateBannerVisibility() { 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 + "/TestWebGL.loader.js"; var config = { dataUrl: buildUrl + "/TestWebGL.data", frameworkUrl: buildUrl + "/TestWebGL.framework.js", codeUrl: buildUrl + "/TestWebGL.wasm", streamingAssetsUrl: "StreamingAssets", companyName: "DefaultCompany", productName: "TestWebGL", 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').appendChild(meta); } loadingBar.style.display = "block"; var script = document.createElement("script"); script.src = loaderUrl; script.onload = () => { createUnityInstance(canvas, config, (progress) => { progressBarFull.style.width = 100 * progress + "%"; }).then((unityInstance) => { loadingBar.style.display = "none"; }).catch((message) => { alert(message); }); }; document.body.appendChild(script); </script> <script> // 自适应代码块 var unityContainer = document.getElementById('unity-canvas'); function unityContainerResize() { var w = window.innerWidth || document.body.clientWidth, h = window.innerHeight || document.body.clientHeight, ratio = 16 / 9, r = w/h; var setW, setH, setTop, setLeft; if (r >= ratio) { // 高度撑满 setW = h * ratio; setLeft = (w - setW) / 2; } else { // 宽度撑满 setH = w / ratio; setTop = (h - setH) / 2; } unityContainer.style.width = (setW || w) + 'px'; unityContainer.style.height = (setH || h) + 'px'; unityContainer.style.top = (setTop || 0) + 'px'; unityContainer.style.left = (setLeft || 0) + 'px'; } window.addEventListener('resize', unityContainerResize) unityContainerResize() </script> </body>
<style>
html
{
background-color: black;
}
</style></html> 声明
代码鉴戒的不同帖子的代码非完全原创
仅仅作为记录！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]