The JavaScript interface in Unity Web builds provides useful functions and variables you can use to configure your web applications. You can call these functions in your JavaScript library code (.jslib files).
Use the unityShowBanner()
function to display a message banner, or override the function to customize it for your own purposes.
Parameter | Description |
---|---|
msg |
The message you want to display. |
type |
The type of message you want to display. For example:
|
The following code from the default WebGLA JavaScript API that renders 2D and 3D graphics in a web browser. The Unity Web build option allows Unity to publish content as JavaScript programs which use HTML5 technologies and the WebGL rendering API to run Unity content in a web browser. More info
See in Glossary template sets the appearance of the error and warning banners. In your custom template, you can override this function to create your own banner types, or customize the way non-critical warnings and error messages display.
function unityShowBanner(msg, type) {
var warningBanner = document.querySelector("#unity-warning");
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function() {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
You can call the function in your .jslib file. The following banner permanently displays The message you want to show as an error message:
unityShowBanner('The message you want to show', 'error');
Use webglContextAttributes
to customize the creation attributes that the WebGL context is initialized with. You can only change the following attributes:
powerPreference
premultipliedAlpha
preserveDrawingBuffer
These options only apply when you use the WebGL rendering API. If you use the WebGPU rendering API, the webglContextAttributes
field is ignored.
To change these attributes, change the configuration object in a custom WebGL template. For example:
script.onload = () => {
config['webglContextAttributes'] = {
powerPreference: 'high-performance',
premultipliedAlpha: false,
preserveDrawingBuffer: true,
};
createUnityInstance(canvas, config, (progress) => {
The powerPreference
attribute has the following options:
Option | Description |
---|---|
default | Let the user agent decide which GPU configuration is most suitable. This is the default value. |
high-performance | Prioritizes rendering performance over power consumption. |
low-power | Prioritizes power saving over rendering performance. |
For more information about each attribute, refer to the Mozilla documentation on HTMLCanvasElement: getContext().
For information about Unity WebGL graphics, refer to WebGL graphics.
If you need to host your streaming assets on a different CDN, you can adjust the streamingAssetsUrl
property on the createUnityInstance()
configuration object to point to the full URL where your streaming assets are.
var buildUrl = "Build";
var config = {
dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
#endif
streamingAssetsUrl: "https://mygameserver.com/StreamingAssets/", // Add this line to override the default streaming assets location
companyName: "{{{ COMPANY_NAME }}}",
productName: "{{{ PRODUCT_NAME }}}",
productVersion: "{{{ PRODUCT_VERSION }}}",
};
Use the cacheControl()
function to control which URLs are cached in the UnityCache
. The function accepts the URL as a parameter and returns either must-revalidate
, immutable
, or no-store
. You can also override the function for your own purposes.
For a code example and more information, refer to Cache behavior in Web.
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.