[unity] problems encountered in packaging webgl project and their solutions

Unity Precautions for packaging in

Switch platform to WebGL platform

Ensure that after the platform switch, the project can Unity Run in .

Set up Player Setting

Resolution preset

Other Settings

Uncheck the Strip Engine Code, This option identifies the officer ⽅⽂ This is how the file describes it " If selected ,unity It will split the items by default ⽬ Will not make ⽤ The components of ", in other words , If your item ⽬ There is no ⾳ Frequency function ,unity This part of the code will be removed during encapsulation to reduce ⼤⼩. It is better to uncheck .

Release settings

Disable compression , The suffix of the file data packaged in this way is .data.

Make sure the project path is not in Chinese

The hard disk drive letter should also be in English , Then you can click Build Packed .

choice Assets Sibling directory packaging

Click on Build After packing , You will be prompted to select the package storage path after packaging .
In the project Assets Create a new directory in the same category Pak Folder , It is used to store the packed bags .

After packaging, deploy the project to IIS Publish on

install IIS And add a website

Install... On this machine IIS（Internet Information Services）, After opening, right-click this computer to add a website , And add the storage location of the package just packaged .

Add... To the server MIME Type Mapping and cross domain access

add to MIME Type mapping

Because the package has the suffix .data The file of , The server cannot resolve what type it is . therefore , Need to be in IIS Add MIME type .

Double click to find add in the upper right corner .

by .data File to add MIME The type is multipart/form-data.

At this time ,IIS Will automatically write a web.config file .

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".data" mimeType="multipart/form-data" />
        </staticContent>
    </system.webServer>
</configuration>

Add cross domain access

What is cross-domain ？
Only when the agreement 、 port 、 The domain name is the same as that of the page , The two pages have the same source . As long as the agreement name of the website protocol、 host host、 Port number port Any one of the three is different , The data request and transmission between websites constitute a cross domain call , Will be limited by the same source strategy .
terms of settlement ：
Add cross domain access .
find HTTP Double click... After the response header .

alike , Click add in the upper right corner , Add the following .

// name                             value 
Access-Control-Allow-Origin      *
Access-Control-Allow-Methods     GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers     Content-Type

The same is IIS Automatically in web.config Add corresponding settings to the file .

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".data" mimeType="multipart/form-data" />
        </staticContent>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="Content-Type" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Try to visit html Website

Select the Pak Folder , Look on the right to browse *:80(http) Options , Can access html The web site .

Access problems

The visit was not so smooth , There are some problems , Press F12 Key check Console To see what caused the loading problem .

Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico

The browser cannot find favicon.ico file , You need to manually create a new one under the root directory .

Range Out Of Bounds

Unity The resource in is too large , Cause memory overflow .
because 2020 Version of Unity stay Player Settings Settings... Not found in Memory Size The place of .
So in Assets Create a new folder Editor Folder , New one SetMemorySize Scripts are used to manually set... In the menu bar MemorySize And get the current MemorySize：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SetMemorySize : UnityEditor.Editor
{
    
    [UnityEditor.MenuItem("WebGLPak/Set Size")]
    public static void SetSize()
    {
    
        UnityEditor.PlayerSettings.WebGL.memorySize = 2 * 1024 * 1024 * 1000;
    }

    [UnityEditor.MenuItem("WebGLPak/Get Size")]
    public static void GetSize()
    {
    
        Debug.LogError(UnityEditor.PlayerSettings.WebGL.memorySize);
    }
}

Don't display Chinese Fonts

because unity The default is Arial, Result in packaging into webgl Chinese is not displayed .
Need to be on the computer C Under the plate , Path is C:\Windows\Fonts Import a file in the format .ttf Chinese font , take Arial Replace the font with the imported Chinese font .

Browser does not support WebGL

You need to add a space after the target in the properties of the browser shortcut and add a startup item ：

-enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files