Unity WebGl 初学及碰到的问题记录
温馨提示：这篇文章已超过388天没有更新，请注意相关的内容是否还可用！
使用的是2022.1.10版本的Unity
一、首先是Project Settings中的配置如下，可以解决一开始的报错，注意：PWA模板在2020版本中是没有的。
二、网页在浏览器中显示时，想要全屏，可以使用PWA模板，但是会有下拉条的出现，需要在导出后，在TemplateData文件中，找到style.css，打开后，在最下方输入下方的代码，即可全屏。
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
.webgl-content{width: 100%; height: 100%;}
.unityContainer{width: 100%; height: 100%;}
如图所示
三、在浏览器中显示时，标题上前面会显示“Unity WebGL Player | ”，在导出的文件中找到index.html，如下图，删掉即可。
四、要修改LOGO，可以在模板中路径的TemplateData文件夹中修改，模板路径为XX版本\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates。替换就行。或者导出后进行修改。
五、正常情况下在Input Field控件中，无法切换中文输入法，可下载“WebGLSupport.unitypackage”，把WebGLInput脚本拖到 Input Field 上即可。
Release Release · kou-yeung/WebGLInput · GitHub
六、WebGl中无法使用 System.Net.Http;、System.Threading.Tasks;，其它的还在研究中。
七、WebGl中无法使用DLL，还在找方法中。
八、WebGl无法直接打开浏览本地文件的窗口，先在Unity中创建如下脚本
using UnityEngine;
using UnityEngine.UI;
using TMPro;
public class FileOpener : MonoBehaviour
{
public TMP_InputField urlInputField;
private void Start()
{
}
public void OpenFile()
{
// 调用JavaScript函数打开文件选择窗口
Application.ExternalCall("OpenFile");
}
// 从JavaScript获取文件信息
public void GetFileInfo(string fileInfo)
{
urlInputField.text = fileInfo;
Debug.Log("Selected file: " + fileInfo);
}
}
并且绑定在GameManager物体中
在Button按钮中绑定OpenFile。
随后在块中，找到这个位置
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
改成如下代码，其中GameManager为脚本绑定的物体。
需要注意的是file无法获取到路径，只能获取到名称、大小和类型。
loadingBar.style.display = "block";
var myGameInstance = null;
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
myGameInstance = unityInstance;
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
// JavaScript代码
function OpenFile() {
var fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.addEventListener("change", function(event) {
var file = event.target.files[0]; // 只处理第一个被选择的文件
var fileInfo = {
name: file.name,
size: file.size,
type: file.type,
};
// 将文件信息传递给Unity
myGameInstance.SendMessage("GameManager", "GetFileInfo", JSON.stringify(fileInfo));
});
fileInput.click();
}
网上有些是下面这种的，但是UnityLoader缺少unityloader.js，webgl.json也没有描述是什么文件，就不知道怎么用了，不过新版好像已经不用UnityLoader了。
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Webgl.json",
//发送给unity
gameInstance.SendMessage("TestObj", "GetBase64", s);
九、如果要去掉Web打开时的进度条，去掉下面两张图上红框中的代码就行。
十、正在研究怎么上传文件到阿里云的OSS上，参考链接如下，有结果的可以交流下
如何进行服务端签名直传_对象存储(OSS)-阿里云帮助中心
十一、获取今日天气
可使用高德的免费天气查询API，如何开通并获取key，请参考下方链接
Unity 接入天气系统_unity天气系统-CSDN博客
具体实现方法及解析方法如下：
using System.Collections;
using UnityEngine;
using UnityEngine.Networking;
using System.Collections.Generic;
public class GetWeather : MonoBehaviour
{
public void Awake()
{
StartCoroutine(GetFutureWeatherInfoNew());
}
#region 输入城市，获取今日天气
///
/// API接口文档：https://lbs.amap.com/api/webservice/guide/api/weatherinfo
///
IEnumerator GetFutureWeatherInfoNew()
{
var publicIpReq = new UnityWebRequest($"https://restapi.amap.com/v3/weather/weatherInfo?city=citykey&key=api_key&extensions=base&output=JSON", UnityWebRequest.kHttpVerbGET);
publicIpReq.downloadHandler = new DownloadHandlerBuffer();
yield return publicIpReq.SendWebRequest();
if (!string.IsNullOrEmpty(publicIpReq.error))
{
Debug.Log($"获取今日天气失败：{publicIpReq.error}");
yield break;
}
var info = publicIpReq.downloadHandler.text;
Debug.Log(info);
//json解析
var resData = JsonUtility.FromJson(info);
Debug.Log($"weather:{resData.lives[0].weather}|temperature:{resData.lives[0].temperature}|winddirection:{resData.lives[0].winddirection}");
}
#region 用于接收天气返回值json的反序列化数据
[System.Serializable]
public class FutureWeatherData
{
public int status;
public int count;
public string info;
public int infocode;
public List lives;
}
[System.Serializable]
public class FutureData
{
public string province;
public string city;
public string adcode;
public string weather;
public string temperature;
public string winddirection;
public string windpower;
public string humidity;
public string reporttime;
public string temperature_float;
public string humidity_float;
}
#endregion
#endregion
}
代码中的city=citykey&key=api_key，需要自行填写，city为城市编码，可在下面链接中下载查询。
https://a.amap.com/lbs/static/code_resource/AMap_adcode_citycode.zip
如果要获取预报信息，extensions中的base改成all。
持续更新中。。。。。。
