Created
March 30, 2020 07:00
-
-
Save TinyDobbins/295cb9a9692740c8f8ba50fc6abfbbe5 to your computer and use it in GitHub Desktop.
updated engine_template.index
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui, shrink-to-fit=no"> | |
<meta name="apple-mobile-web-app-capable" content="yes"> | |
<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
<title>{{project.title}} {{project.version}}</title> | |
<style type='text/css'> | |
/* Disable user selection to avoid strange bug in Chrome on Windows: | |
* Selecting a text outside the canvas, then clicking+draging would | |
* drag the selected text but block mouse down/up events to the engine. | |
*/ | |
body { | |
{{^DEFOLD_SCALE_MODE_IS_NO_SCALE}} | |
position: fixed; /* Prevent overscroll */ | |
{{/DEFOLD_SCALE_MODE_IS_NO_SCALE}} | |
margin:0; | |
padding:0; | |
} | |
.canvas-app-container { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
align-items: center; | |
justify-content: center; | |
overflow: hidden; | |
} | |
.canvas-app-container:-webkit-full-screen { | |
/* Auto width and height in Safari/Chrome fullscreen. */ | |
width: auto; | |
height: auto; | |
} | |
#canvas { | |
outline: none; | |
border: 0; | |
width: 100%; | |
vertical-align: bottom; | |
} | |
canvas:focus, canvas:active { | |
outline: none; | |
border: 0; | |
ie-dummy: expression(this.hideFocus=true); | |
-moz-outline-style: none; | |
} | |
div { | |
-webkit-tap-highlight-color: rgba(0,0,0,0); | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
{{{DEFOLD_CUSTOM_CSS_INLINE}}} | |
</style> | |
</head> | |
<body> | |
<div id="app-container" class="canvas-app-container"> | |
<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="{{display.width}}" height="{{display.height}}"></canvas> | |
<div class="buttons-background"> | |
{{#html5.show_fullscreen_button}} | |
<div class="button" onclick="Module.toggleFullscreen();">Fullscreen</div> | |
{{/html5.show_fullscreen_button}} | |
{{#html5.show_made_with_defold}} | |
<div class="link">Made with <a href="https://defold.com/" target="_blank">Defold</a></div> | |
{{/html5.show_made_with_defold}} | |
</div> | |
</div> | |
<!-- --> | |
<script id='engine-loader' type='text/javascript' src="dmloader.js"></script> | |
<!-- --> | |
<script id='engine-setup' type='text/javascript'> | |
var extra_params = { | |
archive_location_filter: function( path ) { | |
return ("{{DEFOLD_ARCHIVE_LOCATION_PREFIX}}" + path + "{{DEFOLD_ARCHIVE_LOCATION_SUFFIX}}"); | |
}, | |
engine_arguments: [{{#DEFOLD_ENGINE_ARGUMENTS}}"{{.}}",{{/DEFOLD_ENGINE_ARGUMENTS}}], | |
custom_heap_size: {{DEFOLD_HEAP_SIZE}}, | |
disable_context_menu: true | |
} | |
Module['onRuntimeInitialized'] = function() { | |
Module.runApp("canvas", extra_params); | |
}; | |
Module["locateFile"] = function(path, scriptDirectory) | |
{ | |
// dmengine*.wasm is hardcoded in the built JS loader for WASM, | |
// we need to replace it here with the correct project name. | |
if (path == "dmengine.wasm" || path == "dmengine_release.wasm" || path == "dmengine_headless.wasm") { | |
path = "{{exe-name}}.wasm"; | |
} | |
return scriptDirectory + path; | |
}; | |
var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; | |
var buttonHeight = 0; | |
{{#html5.show_made_with_defold}} | |
buttonHeight = 42; | |
{{/html5.show_made_with_defold}} | |
{{#html5.show_fullscreen_button}} | |
buttonHeight = 42; | |
{{/html5.show_fullscreen_button}} | |
// Resize on init, screen resize and orientation change | |
function resize_game_canvas() { | |
// Hack for iOS when exit from Fullscreen mode | |
if (is_iOS) { | |
window.scrollTo(0, 0); | |
} | |
var app_container = document.getElementById('app-container'); | |
var game_canvas = document.getElementById('canvas'); | |
var innerWidth = window.innerWidth; | |
var innerHeight = window.innerHeight - buttonHeight; | |
var width = {{display.width}}; | |
var height = {{display.height}}; | |
var targetRatio = width / height; | |
var actualRatio = innerWidth / innerHeight; | |
{{#DEFOLD_SCALE_MODE_IS_DOWNSCALE_FIT}} | |
//Downscale fit | |
if (innerWidth < width || innerHeight < height) { | |
if (actualRatio > targetRatio) { | |
width = innerHeight * targetRatio; | |
height = innerHeight; | |
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px"; | |
app_container.style.marginTop = "0px"; | |
} | |
else { | |
width = innerWidth; | |
height = innerWidth / targetRatio; | |
app_container.style.marginLeft = "0px"; | |
app_container.style.marginTop = ((innerHeight - height) / 2) + "px"; | |
} | |
} | |
else { | |
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px"; | |
app_container.style.marginTop = ((innerHeight - height) / 2) + "px"; | |
} | |
{{/DEFOLD_SCALE_MODE_IS_DOWNSCALE_FIT}} | |
{{#DEFOLD_SCALE_MODE_IS_STRETCH}} | |
//Stretch | |
width = innerWidth; | |
height = innerHeight; | |
{{/DEFOLD_SCALE_MODE_IS_STRETCH}} | |
{{#DEFOLD_SCALE_MODE_IS_FIT}} | |
//Fit | |
if (actualRatio > targetRatio) { | |
width = innerHeight * targetRatio; | |
height = innerHeight; | |
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px"; | |
app_container.style.marginTop = "0px"; | |
} | |
else { | |
width = innerWidth; | |
height = innerWidth / targetRatio; | |
app_container.style.marginLeft = "0px"; | |
app_container.style.marginTop = ((innerHeight - height) / 2) + "px"; | |
} | |
{{/DEFOLD_SCALE_MODE_IS_FIT}} | |
{{#DEFOLD_SCALE_MODE_IS_NO_SCALE}} | |
//No scale | |
var margin_left = ((innerWidth - width) / 2); | |
margin_left = margin_left > 0 ? margin_left : 0; | |
var margin_top = ((innerHeight - height) / 2); | |
margin_top = margin_top > 0 ? margin_top : 0; | |
app_container.style.marginLeft = margin_left + "px"; | |
app_container.style.marginTop = margin_top + "px"; | |
{{/DEFOLD_SCALE_MODE_IS_NO_SCALE}} | |
app_container.style.width = width + "px"; | |
app_container.style.height = height + buttonHeight + "px"; | |
game_canvas.width = width; | |
game_canvas.height = height; | |
} | |
resize_game_canvas(); | |
window.addEventListener('resize', resize_game_canvas, false); | |
window.addEventListener('orientationchange', resize_game_canvas, false); | |
function load_engine() { | |
var engineJS = document.createElement('script'); | |
engineJS.type = 'text/javascript'; | |
if (Module['isWASMSupported']) { | |
engineJS.src = '{{exe-name}}_wasm.js'; | |
} else { | |
engineJS.src = '{{exe-name}}_asmjs.js'; | |
} | |
document.head.appendChild(engineJS); | |
} | |
</script> | |
<script id='engine-start' type='text/javascript' merge='keep'> | |
// Load Facebook API | |
var fb = document.createElement('script'); | |
fb.type = 'text/javascript'; | |
fb.src = '//connect.facebook.net/en_US/sdk.js'; | |
fb.onload = load_engine; | |
document.head.appendChild(fb); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment