* Added html5 dir, has a .bat file that can build the html5 version. I went ahead and added the html5 specific Dink media as well, a bit big for SVN though. It has mp3 versions of all songs, otherwise it's the same as the normal data I think
git-svn-id: svn://rtsoft.com/rtsvn/projects/RTDink@1600 353e56fe-9613-0410-8469-b96ad8e6f29c
This commit is contained in:
seth
parent
0974642cfb
commit
35c284b014
824 changed files with 4164 additions and 1121 deletions
250
html5/CustomMain4-3AspectRatioTemplate.html
Normal file
250
html5/CustomMain4-3AspectRatioTemplate.html
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
<!-- This unity webgl template is based on "A better Unity WebGL template" by greggman: https://github.com/greggman/better-unity-webgl-template -->
|
||||
<!-- Also based on code by John Sharp: https://lyceum-allotments.github.io/2016/06/emscripten-and-sdl2-tutorial-part-7-get-naked-owl/ -->
|
||||
<!-- Tweaks by Seth A. Robinson (rtsoft.com) - note, this is sort of a mess because I haven't fully intregrated the unity/emscripten stuff at this time. It works though -->
|
||||
|
||||
<script>
|
||||
var appName = "RTTemplateName";
|
||||
</script>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>RTTemplateName</title>
|
||||
<style>
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: #444;
|
||||
}
|
||||
#gameContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
canvas.emscripten {
|
||||
width: 100vw;
|
||||
height: 75.0vw; /* height:width ratio = 9/16 = .5625 */
|
||||
#background: black;
|
||||
max-height: 100vh;
|
||||
max-width: 133.333vh; /* 16/9 = 1.778 */
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top:0;bottom:0; /* vertical center */
|
||||
left:0;right:0; /* horizontal center */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
width: max-width: 100vw;
|
||||
height: max-height: 70vh;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin: 1.5em;
|
||||
border: 1px solid white;
|
||||
width: 50vw;
|
||||
display: none;
|
||||
}
|
||||
.progress .full {
|
||||
margin: 2px;
|
||||
background: white;
|
||||
height: 1em;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
#loader {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events:none;
|
||||
|
||||
}
|
||||
|
||||
.loadingtext {
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.spinner,
|
||||
.spinner:after {
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
.spinner {
|
||||
margin: 10px;
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
|
||||
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
|
||||
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
|
||||
border-left: 1.1em solid #ffffff;
|
||||
transform: translateZ(0);
|
||||
animation: spinner-spin 1.1s infinite linear;
|
||||
|
||||
}
|
||||
@keyframes spinner-spin
|
||||
{
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="gameContainer">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
<div id="loader">
|
||||
<img class="logo" src="WebLoaderData/logo.png">
|
||||
<div class="spinner"></div>
|
||||
<div class="loadingtext">Setting up...</div>
|
||||
|
||||
<div class="progress"><div class="full"></div></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
<script>
|
||||
var textNum = 0;
|
||||
|
||||
//Uncomment below to disable webassembly loading
|
||||
//UnityLoader.SystemInfo.hasWasm = false;
|
||||
|
||||
var Module =
|
||||
{
|
||||
setStatus: function(text)
|
||||
{
|
||||
//console.log('SetStatus: ' + text)
|
||||
const progress = document.querySelector("#loader .progress");
|
||||
|
||||
if (!Module.progress)
|
||||
{
|
||||
//set it up
|
||||
progress.style.display = "block";
|
||||
Module.progress = progress.querySelector(".full");
|
||||
loader.querySelector(".spinner").style.display = "none";
|
||||
Module.progress.style.transform = `scaleX(${0})`;
|
||||
} else
|
||||
{
|
||||
//continue it
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
if (m)
|
||||
{
|
||||
loader.querySelector(".loadingtext").innerHTML = "Loading stuff...";
|
||||
var cur = parseInt(m[2])*100;
|
||||
var progressMax = parseInt(m[4])*100;
|
||||
console.log('cur: ' + cur+' max: '+progressMax) ;
|
||||
Module.progress.style.transform = `scaleX(${cur/progressMax})`;
|
||||
} else
|
||||
{
|
||||
//done loading
|
||||
UpdateText(); //will show index 0
|
||||
loader.style.display = "none";
|
||||
loader.querySelector(".spinner").style.display = "block";
|
||||
}
|
||||
}
|
||||
},
|
||||
print: function(text) {console.log('>> ' + text) },
|
||||
printErr: function(text) { console.log(appName+' ERROR: ' + text) },
|
||||
|
||||
onRuntimeInitialized: function()
|
||||
{
|
||||
|
||||
loader.querySelector(".spinner").style.display = "none";
|
||||
loader.style.display = "none";
|
||||
Module.ccall('mainf', null, null);
|
||||
|
||||
},
|
||||
canvas: (function()
|
||||
{
|
||||
var canvas = document.getElementById('canvas');
|
||||
return canvas;
|
||||
})()
|
||||
};
|
||||
|
||||
var start_function = function(o) {
|
||||
loader.querySelector(".spinner").style.display = "none";
|
||||
loader.style.display = "none";
|
||||
Module.ccall('mainf', null, null);
|
||||
};
|
||||
|
||||
</script>
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
var memoryInitializer = appName+'.js.mem';
|
||||
if (typeof Module['locateFile'] === 'function') {
|
||||
memoryInitializer = Module['locateFile'](memoryInitializer);
|
||||
} else if (Module['memoryInitializerPrefixURL']) {
|
||||
memoryInitializer = Module['memoryInitializerPrefixURL'] + memoryInitializer;
|
||||
}
|
||||
var xhr = Module['memoryInitializerRequest'] = new XMLHttpRequest();
|
||||
xhr.open('GET', memoryInitializer, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
xhr.send(null);
|
||||
})();
|
||||
|
||||
var script = document.createElement('script');
|
||||
script.src = appName+".js";
|
||||
document.body.appendChild(script);
|
||||
|
||||
|
||||
var textIntervalHandle;
|
||||
var textTimerIntervalMS = 5000; //how fast the text updates after the initial two
|
||||
|
||||
var textCommentArray = [
|
||||
"This can really take a while.",
|
||||
"Webgl apps like this are still relatively new, they will get faster to initialize in time.",
|
||||
"While slow to initialize, this is safer to run and always up to date as compared to a downloadable that you would need to install.",
|
||||
"Make sure you're using a 64 bit browser. Chrome or Firefox are good choices.",
|
||||
"Did you know RTsoft has been making weird games since 1989? It's true, Seth is just that old.",
|
||||
"It's looking like you'll be old too before this game starts.",
|
||||
"You've gotta be bored out of your gourd by now. Sorry about the wait.",
|
||||
"This doesn't work great on mobile. Chrome on Android *might* work, if you wait long enough.",
|
||||
"It's possible this could take like 5 minutes. Wait if you want, or go try it on a powerful desktop machine maybe."
|
||||
];
|
||||
|
||||
|
||||
function UpdateText()
|
||||
{
|
||||
if (textCommentArray.length > textNum)
|
||||
{
|
||||
//we have more to show
|
||||
const loader = document.querySelector("#loader");
|
||||
|
||||
loader.querySelector(".loadingtext").innerHTML = textCommentArray[textNum];
|
||||
|
||||
textNum++;
|
||||
|
||||
if (textNum > 1)
|
||||
{
|
||||
//keep rescheduling them after the first two messages
|
||||
textIntervalHandle = window.setTimeout(UpdateText, textTimerIntervalMS);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue