Loading Screen and Quitting game?

[dharry1968]

Would you mind helping me with 2 questions?

1. When my game loads, there is no loading screen, it’s just a grey window and then after a while the game starts. Do you know what might cause that?

2. When I exit the game by calling Application.Quit(), the game quits as it should but just sits on a blank page… do you know how to have it go back to my site home page or something?

Regards,
Dean

[Rickleung]

1. did you use the default unity logo from the player setting inside unity.?
2. I think you can create a button and pass a function from c # to javascript and tell it to load a certain web page.

P.S. Would you mind to share your template....? I having problems when trying to implement react into my webgl build project.....I am confused whethere I should put the

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

inside my index.html or I should create a new js file?? Thanks....

Rick

[dharry1968]

Hi Rick,

1. Yes, I havn't changed any files or loading screens at all... if I call it outside of React it shows the loading page, just not from inside React.
2. That's a good idea, didn't think of that :) i'll give that a go...

I have a index.js in the game branch folder that contains this:

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

export default function App() {
let unityContent = new UnityContent(
"../static/unity/Build/Builds.json",
"../static/unity/Build/UnityLoader.js"
);
return (

);
}

Cheers
Dean

[jeffreylanters]

Hi Dean! Thanks for opening this discussion. I'm afraid you're misunderstanding the purpose of this module and the use of React.

The React Unity WebGL module is meant to implement your Unity Build into your React Application so you can create your own interface and everything around it. I think you're confusing it with the Templating-Tool Unity has added to their Build-Pipeline. If you want a pre-game loading screen, you have to build one yourself using React, as the loading screen you're referring to is not included in your Unity Build, but is living inside of the HTML which Unity's Templating-Tool has created.

It's simply not the purpose of a module like this to serve things such as a loading screen, but instead to serve you - the developer - the tools needed to create one yourself. For more information about building a loading screen, please see this section in the Wiki for further details. A basic example would look something like:

this.unityContext.on("progress", progression => {
  this.setState({ percent: progression * 100 });
});
...
<div>
  <div>{`Loading... ${percent}%...`}</div>
  <Unity unityContext={this.unityContext} />
</div>

The same goes for your second point, when you have quitted your application, it is up to you - the developer - to act on this. All Quiting the Application does is freeing up memory for your browser. You can add behaviour by adding an event listener to the Quit event. Please see this section in the Wiki for further details. A basic example would look something like:

this.unityContext.on("quitted", () => {
  window.location.href = "...";
});

I hope this clears up some of your questions. Best of luck with your project, and stay safe! If you're having any other questions feel free to reply on this thread.

[dharry1968]

Thanks Jeffrey, i'll deffintley jump on a React course to get a better understanding of it... just tried to run that inj quickly but i'm getting some issue about a theme, i'll take another look tomorrow.

I am calling Application.Quit from Unity but it's not firing, i'll take another look at that tomorrow as well :)

[dharry1968]

Hi Jeffrey, ok, I have been on and off this all day but still can't get it to show the loading spinner... at the moment I have the following:

export class App extends React.Component {
constructor() {
this.state = {
progression: 0,
isloaded: false
};

    this.unityContent = new UnityContent(
        "../static/unity/Build/Builds.json",
        "../static/unity/Build/UnityLoader.js"
    );

    this.unityContent.on("quitted", () => {
        console.log("Quitting Now");
        window.location.href = "https://darkgalaxies.io";
    });

    this.unityContent.on("progress", progression => {
        console.log("Loading Progress...");
        this.setState({ progression: progression });
    });

    this.unityContent.on("loaded", progression => {
        this.setState({ isloaded: true });
    });

    return (
        <div>
            <div><Unity unityContent={unityContent} /></div>
            {this.state.isloaded == false && <div>
                <div style={{ position: 'relative', width: 200, height: 200 }}>
                    <Loading animate full />
                </div>
            </div>}
        </div>
    );
}

}

but I keep on getting the error: Cannot read property 'getInitialProps' of undefined

I think I understand that this is coming from Next.js but not quite sure why it is telling me that. What have I missed?

[jeffreylanters]

Hi Dean! I have never used NextJS before. I'm not quitte sure where this error is coming from. Can you try figuring out which component or module throws this error? Maybe by looking at the stack trace, or otherwise slowly stripping your component down. Thanks!

[jeffreylanters]

Hi Dean! How are you doing? Did you manage to get your project working, or need some more help? -- I wish you a Happy new-year!

[dharry1968]

Hi Jeffrey, happy new year!!

Actually, no I havn't as yet... I did try and got stuck and then was caught up in other things. I would love some help if it's on offer! That would be fantastic.

There are 3 things I am stuck on...

1. The loading screen
2. Redirect after quit
3. Passing in parameters from React at game start

Regards,
Dean