Skip to content

Unity loading percentage is behaving strangely #473

Description

@freithmaier

Please avoid duplicates

Language and Compiler

TypeScript's built-in Compiler

What environment are you using?

Local Development Server

When does your problem occur?

While the Unity App is loading

What does your problem relate to?

The problem seems Unity related

React-Unity-WebGL Version

9.2.1

React Version

18.2.0

Unity Version

2021.3.16f1

What happened?

I want to create a loading bar that goes from 0 to 100 percent. Unfortunately, it loads from 0 to 36 percent, then jumps to 90 percent and loads the game.

I already found a workaround for the problem. Unfortunately, this still doesn't satisfy me.

In addition I also logged and append the the loading percentages.

console.log

Reproducible test case

simplefied code of my problem:

import { Unity, useUnityContext } from "react-unity-webgl";

export default function Frame() {
  const framewidth = 1920; // fullhd
  const dataUrl = "files.company.de"; // here is some code to fetch my files from a file server

  const { unityProvider, isLoaded, loadingProgression } = useUnityContext({
    loaderUrl: `${dataUrl}.loader.js`,
    dataUrl: `${dataUrl}.data.br`,
    frameworkUrl: `${dataUrl}.framework.js.br`,
    codeUrl: `${dataUrl}.wasm.br`,
  });

  return (
    <>
      {isLoaded ? null : (
        <div className="border-2">
          <div
            className="bg-black"
            style={{
              width: Math.round(loadingProgression * 100) + "%",
            }}
          />
        </div>
      )}
      <Unity
        unityProvider={unityProvider}
        matchWebGLToCanvasSize={true}
        style={{
          width: framewidth,
          height: framewidth * 0.5625,
        }}
      />
    </>
  );
}

my workaround for calculation the percentage:

(loadingProgression < 0.4 ? loadingProgression * 2.5 : 1) * 100

Would you be interested in contributing a fix?

  • yes, I would like to contribute a fix

Metadata

Metadata

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions