The Hengine (hεnʤɪn) is a JavaScript game engine for both small scale creative coding projects and larger scale games. It can be loaded in both a 2D and 3D mode, to create games with different dimensionality. It has a high-performance WebAssembly physics engine, compute shader support (without WebGPU!), and a robust library of geometric classes and algorithms. See Usage to create your first Hengine program in just 3 lines of HTML, and learn the rest from the documentation and examples!
The Hengine doesn't need to be installed. However, if you want to run code with a local copy of the Hengine (to preserve compatibility), simply clone this repository.
git clone "https://www.github.com/Elkwizard/Hengine.git"Before using the Hengine, it must be included in your HTML file in one of two possible ways.
-
Including a script tag pointing to
Hengine/Package/Engine/Manage/HengineLoader.js, and linking to an external main JavaScript file. If you want to load the engine in 3D Mode, add the query parameter?3dto the end of the URL.app.html: <html> <head> <script src="https://elkwizard.github.io/Hengine/Package/Engine/Manage/HengineLoader.js"></script> </head> <body> <script> // Load Hengine, user's main JavaScript file is index.js in this example. HengineLoader.load([ new HengineScriptResource("index.js") ]); </script> </body> </html>
index.js: // Hengine hello world ui.textMode = TextMode.CENTER_CENTER; // Text will be drawn relative to its center intervals.continuous(() => { ui.draw(Color.BLACK).text(Font.Arial50, "Hello World!", middle); // Draw "Hello World" to the middle of the screen });
-
Including a script tag pointing to
Hengine/Hengine.jswith the main JavaScript code embedded within. Similar to the previous approach, appending?3dto the URL will load the engine in 3D Mode.compactApp.html: <script src="https://elkwizard.github.io/Hengine/Hengine.js"> // Hengine hello world ui.textMode = TextMode.CENTER_CENTER; // Text will be drawn relative to its center intervals.continuous(() => { ui.draw(Color.BLACK).text(Font.Arial50, "Hello World!", middle); // Draw "Hello World" to the middle of the screen }); </script>
The documentation for the Hengine can be found here.