steren / hl-engine-js

Half-Life Engine in the browser, based on JS port of FWGS/xash3d-fwgs

Half-Life Engine JS

A JavaScript module to play Half Life maps in the browser.

It is based on Xash3D a game engine aiming to provide compatibility with Half-Life Engine.

It is currently based on an old JavaScript port (Xash3D-Emscripten). The intent is to rebase it on a newer WebAssembly build of Xash3D.

Using the library

• Load BrowserFS: <script type='text/javascript' src='browserfs.min.js'></script>
• Create a JS module: <script type="module" src='index.js'></script>
• In this index.js file:
  • load this module: import {init, start, fullscreen} from './lib/hl-engine.js';
  • Initialize the engine:

    init({
      canvas: document.getElementById('canvas'), // an existing <canvas> element where the game will be rendered
      location: 'lib', // URL path to the library and other files of this repo
      setStatus: (text) => { console.log(text); }, // Optional, a function to display status messages
    });

  • Start the game:
    You must pass either one .zip file containing the game files (a valve folder and optionally other mod folder). Or you must pass two .zip files, one with the content of the valve folder and with the content of the mod folder.

    start({
      // Game files as an ArrayBuffer of the zip file. 
      // Must contain a valve folder
      // See index.js for example of how to load from an <input> element
      zip: 
      // Alternatively, pass two zips: one including the inside of valve folder and one with the inside of the mod folder
      zipValve: // ArrayBuffer of a zip file of the inside of the valve folder.
      zipMod: // ArrayBuffer of a zip file of the inside of the valve folder.
      // Optional parameters
      mod: "", // the mod to load, for example "cstrike", if zipMod is passed, must match the mod name
      map: "", // optional the map to load, for example "de_dust2"
      args: ['-width', '1920', '-height', '1080'] // optional array of strings as launch paramters
    });

  • Go fullscreen

    fullscreen();