Cargador WebGL para juegos de Unity de jardín de infantes

Abrir en el editor Publica tu código

Cargador WebGL para juegos de Unity de jardín de infantes

Recomendado

14 December 2024

Un código de ab_andybv

7 December 2024

Un código de efficientlogic648

20 February 2026

Cargador de cubos de imágenes 3D

HTML

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

<head>
    <base href="https://cdn.jsdelivr.net/gh/genizy/web-port@main/kindergarten/1/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>gn-math.github.io | Kindergarten</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }
        
        #unity-container {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="loading-text" style="color: black; font-family: cursive; font-size: 48px; text-align: center; margin-top: 20px;">LOADING...</div>
    <div id="unity-container" class="unity-desktop" hidden>
        <canvas id="unity-canvas" tabindex="-1"></canvas>
        <div id="unity-loading-bar">
            <div id="unity-logo"></div>
            <div id="unity-progress-bar-empty">
                <div id="unity-progress-bar-full"></div>
            </div>
        </div>
        <div id="unity-warning"> </div>
    </div>
    <script>
        var container = document.querySelector("#unity-container");
        var canvas = document.querySelector("#unity-canvas");
        var loadingBar = document.querySelector("#unity-loading-bar");
        var progressBarFull = document.querySelector("#unity-progress-bar-full");
        var fullscreenButton = document.querySelector("#unity-fullscreen-button");
        var warningBanner = document.querySelector("#unity-warning");

function unityShowBanner(msg, type) {

}

function mergeFiles(fileParts) {
            return new Promise((resolve, reject) => {
                let buffers = [];

function fetchPart(index) {
                    if (index >= fileParts.length) {
                        let mergedBlob = new Blob(buffers);
                        let mergedFileUrl = URL.createObjectURL(mergedBlob);
                        resolve(mergedFileUrl);
                        return;
                    }
                    fetch(fileParts[index]).then((response) => response.arrayBuffer()).then((data) => {
                        buffers.push(data);
                        fetchPart(index + 1);
                    }).catch(reject);
                }
                fetchPart(0);
            });
        }

function getParts(file, start, end) {
            let parts = [];
            for (let i = start; i <= end; i++) {
                parts.push(file + ".part" + i);
            }
            return parts;
        }
        Promise.all([
            mergeFiles(getParts("Build/Build.wasm", 1, 3))
        ]).then(([wasmUrl]) => {
            container.hidden = false;
            var buildUrl = "Build";
            var loaderUrl = buildUrl + "/Build.loader.js";
            var config = {
                dataUrl: buildUrl + '/Build.data',
                frameworkUrl: buildUrl + "/Build.framework.js",
                codeUrl: wasmUrl,
                streamingAssetsUrl: "StreamingAssets",
                companyName: "SmashGames",
                productName: "Kindergarten",
                productVersion: "2.04",
                showBanner: unityShowBanner,
            };
            if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
                var meta = document.createElement('meta');
                meta.name = 'viewport';
                meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
                document.getElementsByTagName('head')[0].appendChild(meta);
                container.className = "unity-mobile";
                canvas.className = "unity-mobile";
            } else {
                function resizeCanvas() {
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                    canvas.style.width = window.innerWidth + "px";
                    canvas.style.height = window.innerHeight + "px";
                }
                resizeCanvas();
                window.addEventListener('resize', resizeCanvas);
            }
            loadingBar.style.display = "block";
            var script = document.createElement("script");
            script.src = loaderUrl;
            script.onload = () => {
                createUnityInstance(canvas, config, (progress) => {
                    progressBarFull.style.width = 100 * progress + "%";
                }).then((unityInstance) => {
                    loadingBar.style.display = "none";
                    document.querySelector("#loading-text").remove();
                }).catch((message) => {
                    alert(message);
                });
            };
            document.body.appendChild(script);
        });
    </script>
</body>

</html>

CSS

JS