Skip to content

Commit

Permalink
Defold 1.2.170 fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@AGulev
AGulev committed Jun 14, 2020
1 parent c0b8f6e commit 0905eee
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 92 deletions.
221 changes: 134 additions & 87 deletions example/engine_template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,31 @@
<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, maximum-scale=1, user-scalable=0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<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>{{DEFOLD_APP_TITLE}}</title>
<style>
<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 {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* DEF-3413
* The Facebook container will be populated with the Facebook SDK content
* when a Facebook App Id is provided in game.project.
* This caused problems with selections in Chrome on Windows, just like
* above. Explicitly disabling selection on the root div fixes the issue.
*/
.fb-root {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
{{^DEFOLD_SCALE_MODE_IS_NO_SCALE}}
position: fixed; /* Prevent overscroll */
{{/DEFOLD_SCALE_MODE_IS_NO_SCALE}}
margin:0;
padding:0;
}

.canvas-app-container {
background: rgb(255,255,255) no-repeat center url("try_game.png");
/* A positioned parent for loading visuals */
position: relative;
width: 100%;
height: 100%;
position: absolute;
align-items: center;
justify-content: center;
overflow: hidden;
}

.canvas-app-container:-webkit-full-screen {
Expand All @@ -48,63 +36,55 @@
height: auto;
}

.canvas-app-canvas {
max-height: 100vh;
max-width: 100%;
#canvas {
outline: none;
border: 0;
width: 100%;
vertical-align: bottom;
}

.canvas-app-progress {
position: absolute;
background-color: rgb(245, 245, 245);
height: 20px;
/* Progress same width as canvas. */
width: {{DEFOLD_DISPLAY_WIDTH}}px;
bottom: 0px;
canvas:focus, canvas:active {
outline: none;
border: 0;
ie-dummy: expression(this.hideFocus=true);
-moz-outline-style: none;
}

.canvas-app-progress-bar {
font-size: 12px;
height: 20px;
color: rgb(255, 255, 255);
background-color: rgb(30, 100, 234);
text-align: center;
line-height: 20px;
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;
}

.button {
color: #fff;
background-color: #1e64ea;
border-color: transparent;
padding: 10px 20px;
}
{{{DEFOLD_CUSTOM_CSS_INLINE}}}
</style>

{{{DEFOLD_DEV_HEAD}}}
</head>

<body>
<div id="fb-root" class="fb-root"></div>

<div id="app-container" class="canvas-app-container">
<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="{{DEFOLD_DISPLAY_WIDTH}}" height="{{DEFOLD_DISPLAY_HEIGHT}}"></canvas>
<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>

<button id="fullscreen" class="button">Fullscreen</button>

<!-- -->
{{{DEFOLD_DEV_INLINE}}}
<script type='text/javascript' src="dmloader.js"></script>
<script id='engine-loader' type='text/javascript' src="dmloader.js"></script>
<!-- -->

<script type='text/javascript'>
<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}}");
},
{{#HAS_DEFOLD_ENGINE_ARGUMENTS}}
engine_arguments: ["{{DEFOLD_ENGINE_ARGUMENTS}}"],
{{/HAS_DEFOLD_ENGINE_ARGUMENTS}}
splash_image: "{{DEFOLD_SPLASH_IMAGE}}",
engine_arguments: [{{#DEFOLD_ENGINE_ARGUMENTS}}"{{.}}",{{/DEFOLD_ENGINE_ARGUMENTS}}],
custom_heap_size: {{DEFOLD_HEAP_SIZE}},
disable_context_menu: true
}
Expand All @@ -118,39 +98,107 @@
// 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 = "{{DEFOLD_BINARY_PREFIX}}.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 = '{{DEFOLD_BINARY_PREFIX}}_wasm.js';
engineJS.src = '{{exe-name}}_wasm.js';
} else {
engineJS.src = '{{DEFOLD_BINARY_PREFIX}}_asmjs.js';
engineJS.src = '{{exe-name}}_asmjs.js';
}
document.head.appendChild(engineJS);
}

/* Fullscreen button */
document.getElementById("fullscreen").onclick = function (e) {
Module.toggleFullscreen();
};

if ({{DEFOLD_HAS_FACEBOOK_APP_ID}}) {
// 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);
} else {
</script>
<script id='engine-start' type='text/javascript'>
load_engine();
}
</script>

<!-- JsToDef example -->
<script type='text/javascript'>
setInterval(function(){
Expand All @@ -163,6 +211,5 @@
JsToDef.send("BooleanEvent", false);
}, 3000)
</script>

</body>
</html>
10 changes: 5 additions & 5 deletions jstodef/lib/web/lib_jstodef.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,25 @@ var LibJsToDef = {
var msg_id = allocate(intArrayFromString(message_id), "i8", ALLOC_NORMAL);
switch (typeof message) {
case 'undefined':
Runtime.dynCall("vi", JsToDef._callback_empty, [msg_id]);
dynCall("vi", JsToDef._callback_empty, [msg_id]);
break;
case 'number':
Runtime.dynCall("vif", JsToDef._callback_number, [msg_id, message]);
dynCall("vif", JsToDef._callback_number, [msg_id, message]);
break;
case 'string':
var msg = allocate(intArrayFromString(message), "i8", ALLOC_NORMAL);
Runtime.dynCall("vii", JsToDef._callback_string, [msg_id, msg]);
dynCall("vii", JsToDef._callback_string, [msg_id, msg]);
Module._free(msg);
break;
case 'object':
var msg = JSON.stringify(message);
msg = allocate(intArrayFromString(msg), "i8", ALLOC_NORMAL);
Runtime.dynCall("vii", JsToDef._callback_object, [msg_id, msg]);
dynCall("vii", JsToDef._callback_object, [msg_id, msg]);
Module._free(msg);
break;
case 'boolean':
var msg = message ? 1 : 0;
Runtime.dynCall("vii", JsToDef._callback_bool, [msg_id, msg]);
dynCall("vii", JsToDef._callback_bool, [msg_id, msg]);
break;
default:
console.warn("Unsupported message format: " + (typeof message));
Expand Down

0 comments on commit 0905eee

Please sign in to comment.