Skip to content

HTML5

Jump to bottom Edit New page
Robert Konrad edited this page Sep 14, 2019 · 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 you can use the following code before the System.init call:

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

class Main {

	static function main():Void {
		setFullWindowCanvas();

		System.start({title: "New Project", width: 800, height: 600}, init);
	}

	static function init(window:Window):Void {} //Your code

	static function setFullWindowCanvas():Void {
		#if kha_html5
		//make html5 canvas resizable
		document.documentElement.style.padding = "0";
		document.documentElement.style.margin = "0";
		document.body.style.padding = "0";
		document.body.style.margin = "0";
		var canvas:CanvasElement = cast document.getElementById(CompilerDefines.canvas_id);
		canvas.style.display = "block";

		var resize = function() {
			canvas.width = Std.int(window.innerWidth * window.devicePixelRatio);
			canvas.height = Std.int(window.innerHeight * window.devicePixelRatio);
			canvas.style.width = document.documentElement.clientWidth + "px";
			canvas.style.height = document.documentElement.clientHeight + "px";
		}
		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"></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