mirror of
https://github.com/Insality/druid
synced 2025-09-27 18:12:21 +02:00
Update docs
This commit is contained in:
Insality
210
example/engine_template.html
Normal file
210
example/engine_template.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!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-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
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">
|
||||
<div id="canvas-container" class="canvas-app-canvas-container">
|
||||
<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="{{display.width}}" height="{{display.height}}"></canvas>
|
||||
</div>
|
||||
<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}},
|
||||
full_screen_container: "#canvas-container",
|
||||
disable_context_menu: true
|
||||
}
|
||||
|
||||
Module['INITIAL_MEMORY'] = extra_params.custom_heap_size;
|
||||
|
||||
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;
|
||||
var prevInnerWidth = -1;
|
||||
var prevInnerHeight = -1;
|
||||
{{#html5.show_made_with_defold}}
|
||||
buttonHeight = 42;
|
||||
{{/html5.show_made_with_defold}}
|
||||
{{#html5.show_fullscreen_button}}
|
||||
buttonHeight = 42;
|
||||
{{/html5.show_fullscreen_button}}
|
||||
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;
|
||||
if (prevInnerWidth == innerWidth && prevInnerHeight == innerHeight)
|
||||
{
|
||||
return;
|
||||
}
|
||||
prevInnerWidth = innerWidth;
|
||||
prevInnerHeight = innerHeight;
|
||||
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);
|
||||
window.addEventListener('focus', resize_game_canvas, false);
|
||||
</script>
|
||||
|
||||
<script id='engine-start' type='text/javascript'>
|
||||
EngineLoader.load("canvas", "{{exe-name}}");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user