gdx-backend-bytecoder-example/index.html at main · squins/gdx-backend-bytecoder-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate"/>
    <title>Bytecoder LibGDX example application</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
</head>

<body id="body">
<script src="https://cdn.jsdelivr.net/npm/gl-matrix@3/gl-matrix.js"></script>
<script>

    var errorred = function (result) {
        console.log("Error occurred");
        console.log(result)
    }

    var instantiated = function (result) {
        bytecoder.init(result.instance);
        bytecoder.exports.initMemory(0);
        bytecoder.exports.bootstrap(0);
        bytecoder.initializeFileIO();
        var gcInterval = 200;
        var gcMaxObjectsPerRun = 30;
        var gcRunning = false;
        var runcounter = 0;
        setInterval(function() {
            if (!gcRunning) {
                gcRunning = true;
                var freed = bytecoder.exports.IncrementalGC(0, gcMaxObjectsPerRun);
                if (runcounter++ % 10 === 0) {
                    var freemem = bytecoder.exports.freeMem(0);
                    var epoch = bytecoder.exports.GCEpoch(0);
                    console.log(freemem + " bytes free memory after GC, epoch = " + epoch);
                }
                gcRunning = false;
            }
        }, gcInterval);
        bytecoder.exports.main(0);
    };
    function startApp(){
        canvas1.hidden = false
        WebAssembly.instantiateStreaming(fetch('main.wasm'), bytecoder.imports)
            .catch(errorred)
            .then(instantiated);
        document.getElementById("button-start").disabled = true
        document.getElementById("button-start").style.visibility = "hidden"
    }
</script>

<div id="app">
    <h1>Bytecoder LibGDX Kotlin sample app</h1>
    <h3>On this page we show a small demo of our project(
        <a href="https://github.com/squins/gdx-backend-bytecoder/" target="_blank">https://github.com/squins/gdx-backend-bytecoder/</a>)
    </h3>
    <div id="wrapper">
        <div id="left">
            <h1>Click the button to see the bytecoder-libgdx-kotlin example</h1>
            <button id="button-start" class="button" onclick="startApp()">Play sample bytecoder-libgdx</button>
        </div>
        <div id="right">
            <canvas id="canvas1" width="640" height="480" style="border: 2px solid green;"></canvas>
        </div>
    </div>
</div>
<script>
    let canvas1 = document.getElementById("canvas1");
    canvas1.hidden = true

    canvas1.audio = function(url) {
        console.log(`Play: ${url}`);
        return new Audio(url);
    }
    canvas1.mat4 = function() {
        return glMatrix.mat4;
    }
    canvas1.assetBaseUrl = function() {
        const href = window.location.href;
        const dir = href.substring(0, href.lastIndexOf('/')) + "/";
        return dir + "assets"
    }
</script>
</body>

</html>