CODEWITHSUNDEEP
javascriptreactjsunity-game-enginewebgl
Yvonne Cr.
Yvonne Cr.

Reputation: 21

Change Unity Resolution in WebGL React Component while keeping the Window Size the same

my webgl unity application is embedded into my js/html website with a react component, with the Unity screen set to the width of the browser window.

the dev of the application calls a function to change the screen resolution at the start, but that at the same time also changes the size of the game screen, so that after loading the window is too small and then only snaps back when dragging out the sides of my browser window.

how does one change the resolution inside the unity application while keeping the size of the react component the same?

that's the code:

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

function App() {
  const { unityProvider } = useUnityContext({  
    loaderUrl: "Build/Build.loader.js",
    dataUrl: "Build/Build.data",
    frameworkUrl: "Build/Build.framework.js",
    codeUrl: "Build/Build.wasm",
    matchWebGLToCanvasSize: true,
    streamingAssetsUrl: "StreamingAssets",
  });

  return <Unity 
    unityProvider={unityProvider}
    style={{
      width: '100vw',
      height: '56.25vw',
      }}
    />;
} 

export default App;

I tried setting matchWebGLToCanvasSize to false, which according to the dev should work, but it does not.

Upvotes: 2

Views: 1476

Answers (2)

stazik
stazik

Reputation: 313

WebGL build contains 2 independent "screen" sizes:

  • Render buffer size, which defines the frame size to Unity render.
  • Canvas size, which determines the size of the screen output in a browser.

Value matchWebGLToCanvasSize: true establishes a one-to-one correspondence between these parameters (be careful, in older Unity versions this parameter is missing or may not work correctly).

To change the sizes, you need to subscribe to the resize event of the component in which your canvas is located. For example:

window.addEventListener("resize", resize);

To resize the frame:

function resizeFramebuffer() {
    var canvas = document.querySelector("#unity-canvas");
    var [width, height] = getRenderBufferSize(window.innerWidth, window.innerHeight);
    canvas.width = width;
    canvas.height = height;
}

To resize the screen:

function resizeCanvas() {
    var canvas = document.querySelector("#unity-canvas");
    var [width, height] = getSize(window.innerWidth, window.innerHeight);
    canvas.style.width = width + "px";
    canvas.style.height = height + "px";
}

Upvotes: 0

Carlos sinsors
Carlos sinsors

Reputation: 1

Because it is Soo imbtop and when we go to last voit in arrey you can amblow your app. If you are sure its well run after you word and if dey hotrew before that

Upvotes: 0

Related Questions