Horizontal and vertical orientation depending on the device - html games

Questions
32

Example of how apply orientation in browser.

Copy /builtins/manifests/web/engine_template.html to /main/engine_template.html.

Update game.project file with:

[html5]
scale_mode = fit
htmlfile = /main/engine_template.html

Update /main/engine_template.html by adding script below at the end of <body>:

<body>
// Others scripts

<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;
	};

	{{^DEFOLD_HAS_WASM_ENGINE}}
	Module["isWASMSupported"] = false;
	{{/DEFOLD_HAS_WASM_ENGINE}}

	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 = 0;
{{/html5.show_made_with_defold}}
{{#html5.show_fullscreen_button}}
	buttonHeight = 0;
{{/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 isLandscape = innerWidth > innerHeight;
		var targetRatio = isLandscape ? width / height : height / width; // the trick is here!
		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>
</body>
2 Likes