Download

Update GameX.html.template

Development Discussion HTML5 Development
#1

I’m working on what I believe may be a more suitable approach for incorporating UE builds into existing web architectures. First, I’m trying to remove any reference to any HTML UI other than a Canvas element, and rather establish an interface between the two platforms (HTML <-> UEWebGL):



<!DOCTYPE html>
<html lang="en">
<head>
    <title>vsk</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="loadGameContent()">
    <div>
        <canvas id="uecanvas" oncontextmenu="event.preventDefault()" style="display:none;"></canvas>
    </div>
    <script src="vskGameInterface.js"></script>
</body>
</html>

Then access the canvas element with the vskGameInterface.js:



var ueCanvasID = 'uecanvas';
:
Module'canvas'] = document.getElementById(ueCanvasID);

An interface could be developed for setting what the canvas element is, or the requirement (as used above) is that the DOM ID is uecanvas.

The above HTML is not something UE build would provide, but could for simple testing. The important part is that (obviously) a canvas element would have to be present on the page, and that any communication between web-developer and the UE game would be completely through javascript. The idea is that users could add the canvas element, load the needed game interface code without having any existing CSS or other content affected by it.

After separating the code, I’m running into an error:



WebAssembly instantiation failed: TypeError: Unable to get property 'current' of underfined or null reference

The error appears to be due to that the then is null.

Anyway, I’m hoping whoever is maintaining the HTML code now sends me a PM so that I can go into more details.

#2

I was able to remove almost all from the HTML page with the exception of the FullScreen button:



<!DOCTYPE html>
<html lang="en">
<head>
    <title>vsk</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

    <style>
        .outer {
            width: 800px;
            height: 700px;
            text-align: center;
            margin: auto;
            position: relative;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <canvas id="canvas" oncontextmenu="event.preventDefault()" width="800" height="600"></canvas>
        <button id="fullscreen_request" type="button">FullScreen</button>
    </div>
    <script src="vskGameInterface.js"></script>
</body>
</html>
#3

I’m making progress. Using Sails.js with UE4 HTML5: