When developing a Unity project for the web (specifically using WebGL), one of the most important aspects of ensuring a smooth experience is controlling the resolution of your game. The resolution can affect both the visual quality and performance, making it crucial to adjust the canvas resolution to fit your target audience’s needs.

In this article, we’ll go over how to change the web resolution for Unity WebGL builds, offering a guide on configuring both the internal resolution in Unity and the WebGL canvas that will render the game.

1. What Is WebGL Resolution in Unity?

When you build a Unity project for the Web using WebGL, the game is displayed on an HTML5 <canvas> element in the browser. The resolution of this canvas determines how your game is rendered on the player’s screen. WebGL resolution refers to two main components:

1. Internal Unity Resolution: This is the resolution at which Unity renders the game world internally. It’s controlled by Unity’s settings.
2. WebGL Canvas Resolution: This is the resolution of the <canvas> element in the HTML file generated by Unity when building for WebGL. This resolution determines the actual size of the game in the browser.

Adjusting both the internal resolution and the WebGL canvas resolution helps optimize the game’s visual quality and performance across different devices.

2. Change the Web Resolution in Unity

Step 1: Open Project Settings

1. Open your Unity project.
2. Go to File > Project Settings and select WebGL as your platform.
3. Click Project Settings to open the WebGL-specific settings.

Below is an image of the Project Settings page. Highlighted is the settings to change the web resolution in Unity.

Step 2: Adjust the Resolution Settings

In the Player Settings, navigate to the Resolution and Presentation section under the WebGL settings. This section includes key settings for adjusting the WebGL resolution.

1. Default Screen Width & Height:
   • These settings control the initial resolution when the WebGL build starts. Unity will set the game window to the width and height specified here.
   • Set Default Screen Width and Default Screen Height based on your target resolution. For example, if you want the game to load at 1280×720, input these values.
2. Aspect Ratio:
   • The Aspect Ratio option ensures that the aspect ratio remains fixed while resizing. If you want to maintain a specific aspect ratio for your game (e.g., 16:9), enable Fixed Aspect Ratio and set the width and height.
   • This is especially useful for games where the visual design is tightly bound to a specific aspect ratio, preventing stretching or distortion when resized.
3. Resizable Window:
   • If you enable Resizable Window, the game canvas will automatically adjust when the user resizes the browser window. If you prefer a fixed canvas size, disable this option.
   • This is useful for creating responsive designs, allowing the game to adapt to different screen sizes while maintaining a consistent user experience.

3. Handling Unity UI Scaling

Unity’s Canvas Scaler component controls how UI elements scale with screen resolution changes. This is essential when designing games for multiple screen sizes and ensuring that UI elements look consistent across devices.

1. Canvas Scaler Settings:
   • Select your Canvas GameObject in the Unity hierarchy.
   • In the Canvas Scaler component, you can choose between different scaling modes:
     • Constant Pixel Size: The UI elements will stay the same size regardless of screen resolution. This can cause elements to appear too small on larger screens.
     • Scale with Screen Size: This allows you to set a reference resolution (e.g., 1920×1080) and scales the UI based on the screen size. It’s recommended for most projects as it adapts the UI to fit different screen sizes and resolutions.
     • Constant Physical Size: UI elements are scaled based on a physical size (in inches or millimeters). This is useful for projects that need precise control over how the UI appears on various physical devices.
2. Reference Resolution:
   • In Scale with Screen Size mode, set a reference resolution that you want your UI to be designed around. For instance, you might design the UI at a resolution of 1920×1080, and Unity will scale the UI elements proportionally on devices with different screen sizes.

4. WebGL Canvas Resolution via JavaScript

While Unity gives you the ability to set the initial canvas resolution in the Player Settings, you may want to dynamically adjust the resolution during runtime, especially when the player resizes the browser window.

For this, you can modify the WebGL canvas resolution directly using JavaScript in the HTML template generated by Unity. Unity allows you to access and resize the WebGL canvas element after the game has loaded.

1. Edit the HTML Template:
   • Unity generates an HTML file that includes the canvas element (<canvas id="unity-canvas">). You can customize this HTML template to suit your needs.
2. Resize Canvas with JavaScript: You can add JavaScript to dynamically resize the canvas based on the player’s window size. Here’s an example of how to do this:javascriptCopyvar canvas = document.getElementById("unity-canvas"); // Resize the canvas based on the browser window's size function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } // Call resizeCanvas on page load and when the window is resized window.addEventListener('load', resizeCanvas); window.addEventListener('resize', resizeCanvas);
3. Maintaining Aspect Ratio: If you want to keep the aspect ratio fixed while resizing, you can modify the resizeCanvas() function to respect a specific ratio:javascriptCopyfunction resizeCanvas() { var aspectRatio = 16 / 9; // Desired aspect ratio (e.g., 16:9) // Calculate the new width and height based on the aspect ratio var width = window.innerWidth; var height = width / aspectRatio; if (height > window.innerHeight) { height = window.innerHeight; width = height * aspectRatio; } canvas.width = width; canvas.height = height; }

This JavaScript code allows you to adjust the canvas size while maintaining a consistent aspect ratio across different devices.

5. Testing and Optimization

After adjusting the resolution settings, it’s important to test your Unity WebGL build to ensure that the game looks and performs as expected across various screen sizes and devices.

1. Test Across Devices:
   • Use different screen resolutions (e.g., mobile devices, tablets, and desktops) to ensure that the UI scales correctly.
   • Check for any visual issues such as UI stretching, black bars, or performance problems when resizing the window.
2. Performance Optimization:
   • Keep in mind that higher resolutions require more GPU and CPU resources. If your game is running on lower-end devices, consider reducing the default canvas resolution or implementing dynamic resolution scaling.
   • You can also use Unity’s Quality Settings to adjust graphical features (like shadows, textures, and effects) based on the player’s device capabilities.

Conclusion

Changing the web resolution for Unity WebGL projects involves adjusting both Unity’s internal settings and the HTML5 canvas that renders the game in the browser. By configuring the resolution settings in the Player Settings, using the Canvas Scaler for UI elements, and customizing the WebGL canvas size with JavaScript, you can create a responsive and optimized experience for players across various devices.

By considering the needs of your target audience and testing across multiple platforms, you can ensure that your Unity WebGL game looks great and performs smoothly.