Skip to content

HTML5

Jump to bottom Edit New page
RblSb edited this page Jun 27, 2022 · 14 revisions

The HTML5 target creates JavaScript based project files for IntelliJ IDEA and HaxeDevelop. For a simple project build enough to execute node Kha/make html5.

But some browsers do not allow you to open a project outside the server, so you can create a local server using khamake: node Kha/make --server.

And open http://localhost:8080 in browser (8080 is default khamake port). You can set custom port with --port 1234.

Also check specific khamake options for the HTML5 target here.

Pointer Lock and Fullscreen APIs

Browsers block mouse lock/fullscreen requests if they are not called by user-generated event handlers, like mousedown/mouseup/keydown/keyup and some more. You must call this code from listeners subscribed to similar events in Kha.

Audio

Mobile browsers and Chrome similarly block audio playback until a first event generated by the user. Kha tries to unlock sound automatically in such events, but you might consider adding a sound select screen or something like a "Play" button in the game before playing audio, to make sure audio behavior feels consistent to the user.

Touch Events behavior

kha.input.Surface events always return similar events for kha.input.Mouse, such as mobile browsers do, but without delay (every ontouchstart send onmousedown, etc). So if your application does not require complex multi-touch gestures, it will be enough to catch only Mouse events.

Full-page canvas

To make a dynamic resizable canvas, that will fill full window, you need to disable kha resizing logic with define in khafile.js:

project.addDefine('kha_html5_disable_automatic_size_adjust');

And then call the following setFullWindowCanvas function before System.start call:

import kha.System;
#if kha_html5
import js.Browser.document;
import js.Browser.window;
import js.html.CanvasElement;
import kha.Macros;
#end

class Main {
	public static function main() {
		setFullWindowCanvas();
		System.start({title: "Project", width: 600, height: 800}, window -> {
			// Your code
		});
	}

	static function setFullWindowCanvas():Void {
		#if kha_html5
		document.documentElement.style.padding = "0";
		document.documentElement.style.margin = "0";
		document.body.style.padding = "0";
		document.body.style.margin = "0";
		final canvas:CanvasElement = cast document.getElementById(Macros.canvasId());
		canvas.style.display = "block";
		final resize = function() {
			var w = document.documentElement.clientWidth;
			var h = document.documentElement.clientHeight;
			if (w == 0 || h == 0) {
				w = window.innerWidth;
				h = window.innerHeight;
			}
			canvas.width = Std.int(w * window.devicePixelRatio);
			canvas.height = Std.int(h * window.devicePixelRatio);
			if (canvas.style.width == "") {
				canvas.style.width = "100%";
				canvas.style.height = "100%";
			}
		}
		window.onresize = resize;
		resize();
		#end
	}
}

In this case, System.windowWidth()/System.windowHeight() will always return the current size of the user's viewport.

Custom index.html and JS libraries

To override the generated index.html, you just need to create it in your resource directory (the default is Assets/). You can also add .js files of the required libraries. Page example:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>New Project</title>
</head>
<body>
	<!-- canvas id and kha.js script are required -->
	<canvas id="khanvas" width="800" height="600" tabindex="-1"></canvas>
	<script src="kha.js"></script>
	<!-- Additional libraries -->
	<script src="pako.min.js"></script>
</body>
</html>

Kha also provides a C++ based HTML5-Native backend, if you are interested in using Kha in conjunction with the C++ code.

Add a custom footer

Table of Contents

Clone this wiki locally