FPS: {metricsInfo.fps}
+``` + +## Example Usage + +A basic implementation could look something like this. In the following example we'll display the FPS (frames per second) of the Unity application. + +```jsx showLineNumbers title="App.jsx" +import React, { Fragment } from "react"; +import { Unity, useUnityContext, useUnityMetricsInfo } from "react-unity-webgl"; + +function App() { + const { unityProvider, getMetricsInfo } = useUnityContext({ + loaderUrl: "build/myunityapp.loader.js", + dataUrl: "build/myunityapp.data", + frameworkUrl: "build/myunityapp.framework.js", + codeUrl: "build/myunityapp.wasm", + }); + + const { fps } = useUnityMetricsInfo(getMetricsInfo, { + interval: 1000 / 60, + }); + + return ( +FPS: {fps}
+FPS: {fps}
+Loading... ({loadingPercentage}%)
+{`Game Over ${userName}! You've scored ${score} points.`}
+ )} +Loading...
; +} +returnApplication Loaded!
; +``` + +:::tip +Display some kind of overlay over your Unity Application while it's loading to prevent the user from interacting with the Unity Application before it's completely ready. And use the [loading progression stateful value](/docs/9.x.x/api/loading-progression) to display a loading bar. +::: + +## Example Usage + +A basic implementation could look something like this. In the following example we'll hide the Unity Application while it's being loaded to prevent the user from interacting with the Unity Application before it's completely ready. + +```jsx showLineNumbers title="App.jsx" +import React from "react"; +import { Unity, useUnityContext } from "react-unity-webgl"; + +function App() { + const { unityProvider, isLoaded } = useUnityContext({ + loaderUrl: "build/myunityapp.loader.js", + dataUrl: "build/myunityapp.data", + frameworkUrl: "build/myunityapp.framework.js", + codeUrl: "build/myunityapp.wasm", + }); + + return ( +Loading {loadingProgression}...
+``` + +You're not limited by just showing the percentage of the loading progression, you can for example also use it's value to display a loading bar. The posibilities are endless! + +```jsx showLineNumbers title="Example: Using the loading progression value" + +``` + +:::tip +If you want to do something based on when the Unity Application has finished loading, you can use the [is loaded stateful value](/docs/9.x.x/api/is-loaded) rather than checking whether the loading progression's value is 1. +::: + +## Example Usage + +A basic implementation could look something like this. In the following example we'll track the loading progression and display a text which shows the loading progression as a percentage. + +```jsx showLineNumbers title="App.jsx" +import React from "react"; +import { Unity, useUnityContext } from "react-unity-webgl"; + +function App() { + const { unityProvider, loadingProgression } = useUnityContext({ + loaderUrl: "build/myunityapp.loader.js", + dataUrl: "build/myunityapp.data", + frameworkUrl: "build/myunityapp.framework.js", + codeUrl: "build/myunityapp.wasm", + }); + + return ( +Loading Application... {Math.round(loadingProgression * 100)}%
+{isLoaded ? "YES" : "NO"}
{initialisationError?.message || "NONE"}
+ Error: {initialisationError?.message ?? "NONE"}
{Math.round(fps ?? -1)} FPS
{consoleEntries.map((entry, index) => (