Skip to content
Prototype of a WebGL GOKZ recording player.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fixed #21 Dec 9, 2017
LICENSE Update Nov 9, 2017

GOKZ Replay Viewer

Prototype of a WebGL GOKZ recording player.

Try it out!


Export Maps

First you'll need to use SourceUtils to export a bunch of maps, and host them on a web server.

Copy Resources

Your web page will need the images, js and styles folders from this repo.

Setup Web Page

Make sure you include these references in your web page:

<!-->Needed for decompressing map content</-->
<script src=""></script>
<script src=""></script>

<!-->Map / replay viewer scripts</-->
<script src="js/facepunch.webgame.js"></script>
<script src="js/sourceutils.js"></script>
<script src="js/replayviewer.js"></script>

<!-->Map / replay viewer styles</-->
<link type="text/css" rel="stylesheet" href="styles/mapviewer.css" />
<link type="text/css" rel="stylesheet" href="styles/replayviewer.css" />

Then in the body of your page add a div that will host the canvas:

<div id="example-viewer" style="width: 1024px;height: 768px;"></div>

Finally, use this JavaScript to create the viewer when the page loads:

var viewer;
window.onload = function() {
    // Create a replay viewer canvas inside the #example-viewer div
    viewer = new Gokz.ReplayViewer(document.getElementById("example-viewer"));

    // Show FPS and frame time
    viewer.showDebugPanel = true;

    // Start playing immediately when the replay is loaded
    viewer.isPlaying = true;

    // Set the URL to look for maps exported using
    // The example below will make the app look for de_dust2 at
    viewer.mapBaseUrl = "";

    // Start downloading a replay

    // Attach an event handler to when a replay file is loaded
    viewer.replayLoaded.addListener(function(replay) {
        console.log("Replay is on map: " + replay.mapName + ", ran by: " + replay.playerName);

    // Attach an event handler to when the current tick changes
    viewer.tickChanged.addListener(function(tickData) {
        if ((tickData.buttons & Gokz.Button.Jump) !== 0) {
            console.log("Jump is pressed on tick: " + tickData.tick);

    // Start the main loop
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.