-
-
Notifications
You must be signed in to change notification settings - Fork 167
HTML5
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.
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.
Browsers like Chrome similarly block audio playback until first event generated by the user. Kha tries to unlock sound automatically in such events, but you should make sound select screen or something like "Play" button in the game before start playing audio, if sound synchronization is important for you.
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.
To make a dynamic resizable canvas you can use the following code before the System.init
call:
import kha.System;
import kha.Window;
#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 = cast(document.getElementById("khanvas"), CanvasElement);
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.
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.
- Introduction
- Getting Started
- Breaking Changes
- FAQ
- System targets
- Graphics targets
- Documentation
- API package descriptions