The following details will be shared with everyone Unity 在 WebGL平台的发布方法, 如何去除unity的Logo和加载界面, WebGL与网络端通信, and 如何在本地运行html.
table of Contents
1. How to release Unity on the WebGL platform
1. As shown in the figure below, select the webgl platform, click to download and install
if it is not installed, as shown in the figure after installation.
Select the scene that needs to be packaged. If there is no special requirement, you can directly click Build to package the project. The following three files will be generated and the release is successful.
If you want to run it directly to see the effect, you can choose Build And Run, and the web page will be automatically opened to run this project at the end of packaging.
Or install the Firefox browser, double-click the html file generated by the package to run the project.
.
2. How to remove unity logo, loading interface, progress bar
The packaging steps are briefly mentioned above, but you will find that the loading interface has a unity progress bar and Logo when it starts running.
How to remove it?
First of all, of course, you have to have a paid account, or emmm, and you don’t have the right to turn off these things.
1. Remove the Logo
As shown in the figure below, close Splash Image and remove the Made with Unity splash screen to close the Logo.
(In File->Build Settings->Player Settings->Splash Image->Show Splash Screen)
2. Remove the progress bar of the loading interface
Query WebGL Template in the official Unity documentation (https://docs.unity3d.com/Manual/webgl-templates.html) and find this topic
According to the document example, we have two ways to remove or customize the loading bar:
- Directly modify the default template default or minimal (not recommended)
According to the documentation, both built-in Unity templates can be found in the Unity installation path. Here we select the default template default and open the folder
Next enter the TemplateData folder and find the UnityProgress.js file
The onProgress method of this file defines the entire progress bar, including the generation of the Logo, the generation of the progress bar, the progress of the progress bar, etc. Here we can modify the progress bar to the style we need, if we simply want to remove it, change the method Just delete all the content in the body {…}.
Modifying the template that comes with the system through this method will affect every project released in the future, so this method is not recommended.
- Customize a WebGL Template
Unity provides a way to customize WebGL templates, the steps are as follows:
(1) Create a new folder WebGLTemplates under the Assets folder
(2) Create a subfolder MyTemplate under the WebGLTemplates folder, this folder saves the content of our customized template, the folder name can be free
(3) Then create an index.html file in the MyTemplate folder, then you can see our customized template in File->Build Settings->Player Settings->Resolution and Presentation
(4) According to the official document, edit index.html file
In fact, it is more convenient that we can directly copy the contents of the default folder in the first method here, and then modify it according to the first method, and finally select this template when publishing.
Three, WebGL and network side communication
Please refer to this blog about how to transfer data between WebGL and the network: https://blog.csdn.net/york_new/article/details/78984678 The
following is my modified html file, which can be used for reference:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Test</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/WebGl.json", {
onProgress: UnityProgress });
</script>
</head>
<body>
<div class="webgl-content" style="width: 100%;">
<div id="unityContainer" style="width:100%"></div>
</div>
//---------------------打包后手动增加部分
<script>
window.addEventListener('message', (e) => {
console.log(unityInstance);
// A3 紧急
// A4 气体
// A5 恢复
let {
type } = e.data;
console.log(type, 'type');
if (type === 'dispatchSize') {
const {
width, height } = e.data;
const dom = document.querySelector('#unityContainer');
dom.style.height = height + 'px';
} else if (type === 'A3') {
console.log('监听到紧急事件')
unityInstance.SendMessage('Camera', 'TestMethod', 'true');
} else if (type === 'A5') {
unityInstance.SendMessage('Camera', 'TestMethod', 'false');
console.log('监听到恢复事件')
}
}, false);
</script>
//---------------------打包后手动增加部分
</body>
</html>
Fourth, how to run html locally
If you want to run it directly to see the effect, there are several methods I know:
1. Choose Build And Run when packaging, and the webpage will be automatically opened to run this project when packaging is finished.
2. Install the Firefox browser, double-click the html file generated by the package to run the project.
3. Normally, it runs on the server.
4. Download a netbox2 and set up a local server.
For this method, please refer to this blog: https://blog.csdn.net/blastblade/article/details/81170020