Skip to content

Commit cb5e331

Browse files
JohannesDemlJohannesDeml
committed
Change improve templates to support custom user aspect ratios
Those can be configured in the project settings and limit the aspect ratios of the game, to make it easier to deisgn your UI (since you can define the constraints for which aspect ratios it should work).
1 parent 2c9ab15 commit cb5e331

File tree

7 files changed

+174
-26
lines changed

7 files changed

+174
-26
lines changed

‎Assets/WebGLTemplates/Develop/index.html‎

Lines changed: 76 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,26 +24,85 @@
2424
text-align: center;
2525
}
2626

27+
#unity-container {
28+
position: absolute;
29+
left: 0px;
30+
top: 0px;
31+
width: 100%;
32+
height: 100%;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
#if CONTAINER_BACKGROUND_COLOR
37+
background-color: {{{CONTAINER_BACKGROUND_COLOR}}};
38+
#endif
39+
}
40+
41+
/* Default values, might be overwritten by aspect ratio media queries */
2742
#unity-canvas {
43+
width: 100%;
44+
height: 100%;
45+
background-color: #fff;
46+
}
47+
48+
#if MIN_ASPECT_RATIO
49+
@media (min-aspect-ratio: {{{ MIN_ASPECT_RATIO }}}) {
50+
#unity-canvas {
51+
width: auto;
52+
height: 100%;
53+
aspect-ratio: {{{ MIN_ASPECT_RATIO }}};
54+
}
55+
}
56+
#endif
57+
58+
#if MAX_ASPECT_RATIO
59+
@media (max-aspect-ratio: {{{ MAX_ASPECT_RATIO }}}) {
60+
#unity-canvas {
61+
width: 100%;
62+
height: auto;
63+
aspect-ratio: {{{ MAX_ASPECT_RATIO }}};
64+
}
65+
}
66+
#endif
67+
68+
#unity-loading-container {
2869
position: absolute;
2970
left: 0px;
3071
top: 0px;
3172
width: 100%;
3273
height: 100%;
74+
background-color: #fff;
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
78+
flex-direction: column;
79+
gap: 40px;
80+
81+
opacity: 1;
82+
visibility: visible;
83+
transition: 800ms linear;
84+
}
85+
86+
#unity-loading-container.finished {
87+
opacity: 0;
88+
visibility: collapse;
89+
}
90+
91+
#unity-loading-container .logo {
92+
width: 15%;
93+
height: 15%;
3394
}
3495

3596
#unity-loading-bar {
36-
position: absolute;
37-
left: 30%;
38-
top: 50%;
97+
position: relative;
3998
width: 40%;
4099
height: 10px;
41100
background-color: #fff;
42101
border: 1px solid #ccc;
43102
border-radius: 10px;
44103
}
45104

46-
#unity-progress-bar {
105+
#unity-loading-bar-inner {
47106
position: absolute;
48107
left: 0%;
49108
top: 0%;
@@ -58,10 +117,13 @@
58117
</head>
59118

60119
<body>
61-
<script src="./debug-console.js"></script>
62-
<canvas id="unity-canvas"></canvas>
63-
<div id="unity-loading-bar">
64-
<div id="unity-progress-bar">
120+
<div id="unity-container">
121+
<canvas id="unity-canvas"></canvas>
122+
</div>
123+
<div id="unity-loading-container">
124+
<img src="logo.svg" class="logo" alt="Logo {{{ COMPANY_NAME }}}">
125+
<div id="unity-loading-bar">
126+
<div id="unity-loading-bar-inner"></div>
65127
</div>
66128
</div>
67129
<script src="Build/{{{ LOADER_FILENAME }}}"></script>
@@ -92,24 +154,26 @@
92154
}
93155

94156
var canvas = document.querySelector("#unity-canvas");
95-
var loadingBar = document.querySelector("#unity-loading-bar");
96-
var progressBar = document.querySelector("#unity-progress-bar");
157+
var loadingContainer = document.querySelector("#unity-loading-container");
158+
var loadingBar = document.querySelector("#unity-loading-bar-inner");
97159

98160
var unityGame; // This variable can be used to access the application with .SendMessage() commands
99161
var script = document.createElement("script");
100162
script.src = loaderUrl;
101163
script.onload = function() {
102164
createUnityInstance(canvas, config, function(progress) {
103-
progressBar.style.width = 100 * progress + "%";
165+
loadingBar.style.width = 100 * progress + "%";
104166
}).then(function(unityInstance) {
105167
unityGame = unityInstance;
106-
loadingBar.style.display = "none";
168+
loadingContainer.classList.add("finished");
107169
}).catch(function(message) {
108170
alert(message);
109171
});
110172
};
111173
document.body.appendChild(script);
112174
</script>
175+
<!-- Add an html debug console and handle unity rich text styling for both html and browser console-->
176+
<script src="./debug-console.js"></script>
113177
</body>
114178

115179
</html>

‎Assets/WebGLTemplates/Develop/logo.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎Assets/WebGLTemplates/Develop/logo.svg.meta‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Assets/WebGLTemplates/Release/index.html‎

Lines changed: 76 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,26 +24,85 @@
2424
text-align: center;
2525
}
2626

27+
#unity-container {
28+
position: absolute;
29+
left: 0px;
30+
top: 0px;
31+
width: 100%;
32+
height: 100%;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
#if CONTAINER_BACKGROUND_COLOR
37+
background-color: {{{CONTAINER_BACKGROUND_COLOR}}};
38+
#endif
39+
}
40+
41+
/* Default values, might be overwritten by aspect ratio media queries */
2742
#unity-canvas {
43+
width: 100%;
44+
height: 100%;
45+
background-color: #fff;
46+
}
47+
48+
#if MIN_ASPECT_RATIO
49+
@media (min-aspect-ratio: {{{ MIN_ASPECT_RATIO }}}) {
50+
#unity-canvas {
51+
width: auto;
52+
height: 100%;
53+
aspect-ratio: {{{ MIN_ASPECT_RATIO }}};
54+
}
55+
}
56+
#endif
57+
58+
#if MAX_ASPECT_RATIO
59+
@media (max-aspect-ratio: {{{ MAX_ASPECT_RATIO }}}) {
60+
#unity-canvas {
61+
width: 100%;
62+
height: auto;
63+
aspect-ratio: {{{ MAX_ASPECT_RATIO }}};
64+
}
65+
}
66+
#endif
67+
68+
#unity-loading-container {
2869
position: absolute;
2970
left: 0px;
3071
top: 0px;
3172
width: 100%;
3273
height: 100%;
74+
background-color: #fff;
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
78+
flex-direction: column;
79+
gap: 40px;
80+
81+
opacity: 1;
82+
visibility: visible;
83+
transition: 800ms linear;
84+
}
85+
86+
#unity-loading-container.finished {
87+
opacity: 0;
88+
visibility: collapse;
89+
}
90+
91+
#unity-loading-container .logo {
92+
width: 15%;
93+
height: 15%;
3394
}
3495

3596
#unity-loading-bar {
36-
position: absolute;
37-
left: 30%;
38-
top: 50%;
97+
position: relative;
3998
width: 40%;
4099
height: 10px;
41100
background-color: #fff;
42101
border: 1px solid #ccc;
43102
border-radius: 10px;
44103
}
45104

46-
#unity-progress-bar {
105+
#unity-loading-bar-inner {
47106
position: absolute;
48107
left: 0%;
49108
top: 0%;
@@ -57,10 +116,13 @@
57116
</head>
58117

59118
<body>
60-
<script src="./pretty-console.js"></script>
61-
<canvas id="unity-canvas"></canvas>
62-
<div id="unity-loading-bar">
63-
<div id="unity-progress-bar">
119+
<div id="unity-container">
120+
<canvas id="unity-canvas"></canvas>
121+
</div>
122+
<div id="unity-loading-container">
123+
<img src="logo.svg" class="logo" alt="Logo {{{ COMPANY_NAME }}}">
124+
<div id="unity-loading-bar">
125+
<div id="unity-loading-bar-inner"></div>
64126
</div>
65127
</div>
66128
<script src="Build/{{{ LOADER_FILENAME }}}"></script>
@@ -91,24 +153,25 @@
91153
}
92154

93155
var canvas = document.querySelector("#unity-canvas");
94-
var loadingBar = document.querySelector("#unity-loading-bar");
95-
var progressBar = document.querySelector("#unity-progress-bar");
156+
var loadingContainer = document.querySelector("#unity-loading-container");
157+
var loadingBar = document.querySelector("#unity-loading-bar-inner");
96158

97159
var unityGame;
98160
var script = document.createElement("script");
99161
script.src = loaderUrl;
100162
script.onload = function() {
101163
createUnityInstance(canvas, config, function(progress) {
102-
progressBar.style.width = 100 * progress + "%";
164+
loadingBar.style.width = 100 * progress + "%";
103165
}).then(function(unityInstance) {
104166
unityGame = unityInstance;
105-
loadingBar.style.display = "none";
167+
loadingContainer.classList.add("finished");
106168
}).catch(function(message) {
107169
alert(message);
108170
});
109171
};
110172
document.body.appendChild(script);
111173
</script>
174+
<!-- Parse Unity rich text to render stylized browser console logs -->
175+
<script src="./pretty-console.js"></script>
112176
</body>
113-
114177
</html>

‎Assets/WebGLTemplates/Release/logo.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎Assets/WebGLTemplates/Release/logo.svg.meta‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ProjectSettings/ProjectSettings.asset‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -529,7 +529,10 @@ PlayerSettings:
529529
openGLRequireES31: 0
530530
openGLRequireES31AEP: 0
531531
openGLRequireES32: 0
532-
m_TemplateCustomTags: {}
532+
m_TemplateCustomTags:
533+
CONTAINER_BACKGROUND_COLOR: '#222'
534+
MAX_ASPECT_RATIO: 1/2
535+
MIN_ASPECT_RATIO: 3/1
533536
mobileMTRendering:
534537
Android: 1
535538
iPhone: 1

0 commit comments

Comments
 (0)