Question 73380 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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";
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search