I am making an attempt to make a customized WebGLTemplate that’ll load equally to the Minimal template, however centered+maximized (NOT fullscreen) just like the PWA template.
I discovered tips on how to make it resized to correct proportions (minus when the window is shrunk down height-wise), however I am unable to work out tips on how to make it centered. I attempted to do what PWA’s html file did with its types.css and make the unity-canvas styled place: fastened;, which seems to be prefer it may work, but it surely simply finally ends up shifting the entire sport space a half-screen to the proper for some cause.
Can somebody assist me work out what I am doing fallacious?
Here is my index.html:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content material-Sort" content material="textual content/html; charset=utf-8">
<title>Unity Internet Participant | {{{ PRODUCT_NAME }}}</title>
#if SHOW_DIAGNOSTICS
<hyperlink rel="stylesheet" href="<<<TemplateData/diagnostics.css>>>">
<script src="<<<TemplateData/diagnostics.js>>>"></script>
#endif
</head>
<physique type="text-align: heart; padding: 0; border: 0; margin: 0;">
<canvas id="unity-canvas" width={{{ WIDTH }}} top={{{ HEIGHT }}} tabindex="-1" type="width: 100%; top: 100%; background: {{{ BACKGROUND_FILENAME ? 'url('Construct/' + BACKGROUND_FILENAME.substitute(/'/g, '%27') + '') heart / cowl' : BACKGROUND_COLOR }}}"></canvas>
#if SHOW_DIAGNOSTICS
<div id="unity-footer">
<img id="diagnostics-icon" src="TemplateData/webmemd-icon.png">
</div>
#endif
<script src="Construct/{{{ LOADER_FILENAME }}}"></script>
<script>
if (/iPhone|iPad|iPod|Android/i.check(navigator.userAgent)) {
// Cellular gadget type: fill the entire browser shopper space with the sport canvas:
var meta = doc.createElement('meta');
meta.identify="viewport";
meta.content material="width=device-width, top=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=sure";
doc.getElementsByTagName('head')[0].appendChild(meta);
var canvas = doc.querySelector("#unity-canvas");
canvas.type.width = "100%";
canvas.type.top = "100%";
canvas.type.place = "fastened";
doc.physique.type.textAlign = "left";
#if SHOW_DIAGNOSTICS
// place the diagnostics icon within the nook on the canvas
let diagnostics_icon = doc.getElementById("diagnostics-icon");
diagnostics_icon.type.place = "fastened";
diagnostics_icon.type.backside = "10px";
diagnostics_icon.type.proper = "0px";
canvas.after(diagnostics_icon);
#endif
}
createUnityInstance(doc.querySelector("#unity-canvas"), {
arguments: [],
dataUrl: "Construct/{{{ DATA_FILENAME }}}",
frameworkUrl: "Construct/{{{ FRAMEWORK_FILENAME }}}",
#if USE_THREADS
workerUrl: "Construct/{{{ WORKER_FILENAME }}}",
#endif
#if USE_WASM
codeUrl: "Construct/{{{ CODE_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
symbolsUrl: "Construct/{{{ SYMBOLS_FILENAME }}}",
#endif
streamingAssetsUrl: "StreamingAssets",
companyName: {{{ JSON.stringify(COMPANY_NAME) }}},
productName: {{{ JSON.stringify(PRODUCT_NAME) }}},
productVersion: {{{ JSON.stringify(PRODUCT_VERSION) }}},
// matchWebGLToCanvasSize: false, // Uncomment this to individually management WebGL canvas render dimension and DOM ingredient dimension.
// devicePixelRatio: 1, // Uncomment this to override low DPI rendering on excessive DPI shows.
}).then((unityInstance) => {
#if SHOW_DIAGNOSTICS
doc.getElementById("diagnostics-icon").onclick = () => {
unityDiagnostics.openDiagnosticsDiv(unityInstance.GetMetricsInfo);
};
#endif
}).catch((message) => {
alert(message);
});
</script>
</physique>
</html>As well as, I have been making an attempt to get both the sport or the webpage to verify the sport is resized to slot in both/each top or width within the browser window. Kinda like in Unity3D’s canvas with the Scale with Display Measurement possibility, Display Match Mode - Broaden. However in fact I am not utilizing the Canvas for this.
All it is supposed to indicate it doesn’t matter what:
The way it at present is, the place it cuts off the display if it is squished:
Is there a means to do that throughout the net template? Or is that this an in-game concern I want to determine?
