Giters

immersivecognition / unity-experiment-framework

UXF - Framework for creating human behaviour experiments in Unity

Home Page:https://immersivecognition.github.io/unity-experiment-framework/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

WebGL Template for Unity 2020

vagechirkov opened this issue · comments

commented

Hi,

I am trying to build an experiment using the UXF WebGL template in Unity 2020.3.12f1 but it doesn't work. However, I can build the experiment using a build-in WebGL Unity template. As far as I understand from the Unity Manual, WebGL templates were changed significantly between versions 2019 and 2020. Are you planning to implement a WebGL template for the newer versions of Unity? In the 2019.4.11.f1 Unity version, WebGL template works perfectly!

Any suggestions would be helpful!

Valerii

commented

Can you say exactly what the issue is? I believe I tested this before, and did not have issues.

commented

I have tried to build and run UXF Example 2 (Unity 2020.3.12.f1).

Output in Browser:

image

Output WebGL folder:

image

index.html file:

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>%UNITY_WEB_NAME% | UXF WebGL Experiment</title>
    <link rel="stylesheet" href="./Template/style.css" />
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>

    <!-- AWS SDK required for DynamoDB -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.776.0.min.js"></script>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>

<body>
    <h1>%UNITY_WEB_NAME%</h1>

    <div class="centered" style="width: %UNITY_WIDTH%px;">
        <!-- Edit the description field in Unity WebGL Player Settings -->
        <p>%UNITY_CUSTOM_DESCRIPTION%</p>
    </div>

    <div class="centered" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px;">

        <!-- Unity content -->
        <div id="unity-container" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px;">
        </div>

        <!-- progress bar & load message -->
        <div id="loader" class="loader">
            <p>The experiment is loading...</p>
            <div class="progressbar">
                <div id="fill" class="fill" style="width: 0%;"></div>
            </div>
        </div>

        <!-- If you do not care about fullscreen, delete the below div -->
        <div id="fullscreen-message" style="display: none;">
            <div class="fullscreen-message-inner">
                <p>
                    You must run the experiment in Fullscreen. Please press the button below to play.
                </p>
                <p>
                    <button class="action" onclick="openFullscreen();">
                        <div class="text">
                            Fullscreen
                        </div>
                        <svg id="i-fullscreen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24" stroke-width="2" stroke="currentColor" fill="none" style="vertical-align:middle">
                            <path d="M3 11V3H11M21 3H29V11 M29 21V29H21 M11 29H3V21" />
                        </svg>
                    </button>
                </p>
            </div>
        </div>
    </div>

    <!-- Unity Container -->
    <p>Experiment developed with
        <a href="http://immersivecognition.com/unity-experiment-framework/">UXF</a>
    </p>

    <script>
        // Custom progressbar function
        function customProgress(unityInstance, progress) {
            // Change fill of the progress bar
            const fill = document.getElementById("fill");
            fill.style.width = progress * 100 + "%";

            // If loaded, remove loader
            if (progress === 1) {
                const loader = document.getElementById("loader");
                loader.remove();

                const fsMessage = document.getElementById("fullscreen-message");
                fsMessage.style.display = "block";
            }
        }

        // Unity Initialization
        var unityInstance = UnityLoader.instantiate(
            "unity-container",
            "%UNITY_WEBGL_BUILD_URL%", {
                onProgress: customProgress
            }
        );

        /* Get the element you want displayed in fullscreen mode */
        var elem = document.getElementById("unity-container");

        /* When the openFullscreen() function is executed, open the video in fullscreen.
        Note that we must include prefixes for different browsers, as they don't support the requestFullscreen method yet */
        function openFullscreen() {
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.webkitRequestFullscreen) { /* Safari */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE11 */
                elem.msRequestFullscreen();
            }
        }
    </script>

</body>

</html>
commented

I pushed an update (cd021b9) that should fix this. Let me know if you still have issues.

https://github.com/immersivecognition/unity-experiment-framework/releases/tag/2.2.3

commented

I pushed an update (cd021b9) that should fix this. Let me know if you still have issues.

https://github.com/immersivecognition/unity-experiment-framework/releases/tag/2.2.3

Everything works great! Thank you!!