Unity 3D DevLog-WebGL

Unity3D WebGL开发问题汇总
—Neo He 2021/12/06
1.分辨率 IOS
Canvas Size 23881668
Canvas Scaler: 1.55
注意：Canvas Scaler从PC 19201080切换为IOS做适配时需要调整为1.55，如平台选择为IOS，则Canvas Scaler为1

当在嵌套容器中添加Unity WebGL页面时，需设置以下内容，如是原生浏览器，则无需设置(不明原理，测试所得)：

Resolution and Presentation
Default Canvas width: 1194
Default Canvas height: 834

2.移动端取消浏览器警告
将此脚本置于工程中Editor文件夹下即可

public class CancelMobileBrowserWarnning
{[PostProcessBuild]public static void OnPostProcessBuild(BuildTarget target, string targetPath){if (target != BuildTarget.WebGL) return;var path = Path.Combine(targetPath, "Build/UnityLoader.js");var text = File.ReadAllText(path);text = text.Replace("UnityLoader.SystemInfo.hasWebGL?UnityLoader.SystemInfo.mobile?", "t();/*UnityLoader.SystemInfo.hasWebGL?UnityLoader.SystemInfo.mobile?");text = text.Replace("e.popup(\"Your browser does not support WebGL\",[{text:\"OK\",callback:r}])", "e.popup(\"Your browser does not support WebGL\",[{text:\"OK\",callback:r}])*/");File.WriteAllText(path, text);}
}

以上文本是取消提醒相关代码，在某些WebTemplate中并非有相同文本结构，有修改时可能会导致错误，需手动检查，并重新修改通配符

2022/03/03 ADD

3.IOS WebGL Platform is UNITY_WebG

4.UI遮罩API相关

a.EventTrigger
public static bool isPointerOverUI；var trigger = GetComponent<EventTrigger>();if (trigger == null)trigger = gameObject.AddComponent<EventTrigger>();trigger.triggers = new List<EventTrigger.Entry>();EventTrigger.Entry enterEntry = new EventTrigger.Entry();enterEntry.eventID = EventTriggerType.PointerEnter;enterEntry.callback = new EventTrigger.TriggerEvent();UnityAction<BaseEventData> enterCallback = new UnityAction<BaseEventData>((data) =>{isPointerOverUI = true;});enterEntry.callback.AddListener(enterCallback);

为遮罩可能需添加的TriggerType有PointerEnter，PointerExit，PointerDown，PointerUp，PointerClick

b.EventSystem.current.IsPointerOverGameObject(Input.GetTouch(0).fingerId)
EventSystem.current.IsPointerOverGameObject()c.GraphicRaycaster.Raycast
public class UIRaycaster : MonoBehaviour
{List<RaycastResult> raycastResults = new List<RaycastResult>();void Update(){if (Input.touchCount > 0){GraphicRaycaster(Input.GetTouch(0).position);}}public EventSystem eventSystem;public GraphicRaycaster graphicRaycaster;public List<RaycastResult> GraphicRaycaster(Vector2 p_Positon){var pointer = new PointerEventData(eventSystem);pointer.position = p_Positon;raycastResults.Clear();graphicRaycaster.Raycast(pointer, raycastResults);return raycastResults;}
}

5.替换WebGL Template

官方文档相关：
https://docs.unity3d.com/cn/2019.4/Manual/webgl-templates.html
解决方案Git地址：
https://github.com/greggman/better-unity-webgl-template

需要调整index以下内容，以避免在加载完成，进入Unity场景后，加载ICON与进度条仍显示

index.htmlfunction UnityProgress(gameInstance, progress) {if (!gameInstance.Module) {return;}const loader = document.querySelector("#loader");if (!gameInstance.progress) {const progress = document.querySelector("#loader .progress");progress.style.display = "block";gameInstance.progress = progress.querySelector(".full");loader.querySelector(".spinner").style.display = "none";}gameInstance.progress.style.transform = `scaleX(${progress})`;if (progress === 1 && !gameInstance.removeTimeout) {gameInstance.removeTimeout = setTimeout(function() {loader.style.display = "none";}, 2000);}}

将倒数第3行中的2000修改为一个较小值(100以下)
注意：在最终部署的终端上，如果有缓存，可能会显示Unity默认的WebGL Template，需清理缓存。

2021/12/30
2020以下版本WebGL打包设置
1.测试记录

Player Setting->
|->Other Setting
Strip Engine Code* ☑
|->Publish Setting
Enable Exceptions: Explicitly Thrown Exceptions Only
Compression Format：Gzip
压缩比：Brotli>Gzip>Disable
Data Caching ☑

2022/03/03
2020以上版本WebGL打包设置
2020.3.21f1c1版本WebGL打包及Addressable Assets System使用
1.打包

Player Setting->
Other Setting->
Rendering->Color Space ->Linear
Auto Graphics API □(未勾选状态将出现Graphics APIs选项)
以上文本是取消提醒相关代码，在某些WebTemplate中并非有相同文本结构，有修改时可能会导致错误，需手动检查，并重新修改通配符

2.Addressable Assets System
API
使用泛型异步加载方式进行资源加载

Addressables.LoadAssetsAsync<T>()

不建议在部署中使用Resources加载资源，尤其是WebGL和移动平台

在MINE中新增.bundle词条

web.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration><system.webServer><staticContent><mimeMap fileExtension=".unity3d" mimeType="application/binary" /><mimeMap fileExtension=".bundle"      mimeType="application/binary" /><mimeMap fileExtension=".unityweb" mimeType="application/binary" /></staticContent><directoryBrowse enabled="true" /></system.webServer>
</configuration>

web.config放在包体根目录下

4.中文字体缺失，下载后缀名为ttf的字体进行替换
选择需要替换字体的text组件的父结点，使用以下脚本可快速替换字体，也可以修改通配符，从而修改替换策略

using System.Text.RegularExpressions;
using UnityEditor;
using UnityEngine;
using UnityEngine.UI;
public class ChangeChineseFont : Editor
{static string fontPath = "Assets/Fonts/fontName.ttf";static string chinese = @"[\u4e00-\u9fa5]";[MenuItem("[Unity2016-2022-Neo]/Change Chinese Font")]static void Main(){var selection = Selection.activeTransform;if (selection != null){var texts = selection.GetComponentsInChildren<Text>(true);for (int i = 0; i < texts.Length; i++){if (Regex.IsMatch(texts[i].text, chinese))texts[i].font = AssetDatabase.LoadAssetAtPath<Font>(fontPath);}}}
}

5.遗留问题
动态加载光照贴图会变暗，shader中有一个参数设置有问题，暂未找到是那个参数

Unity 3D DevLog-WebGL相关推荐

Unity 3D模型展示之webGL平台展现
在之前的项目基础上我们已经打包后在PC端进行展示了.这篇文章主要介绍在切换到webGL上时效果展示不出来需要进行调整,特此记录一下. 1.平台切换选择WebGL平台切换,没有的可以进行安装,安装之后 ...
Unity导出的WebGL、网页前端、服务端以及硬件四级交互结构的实现（简单3d建模网页端物联网）
本文代码基于一个智慧楼宇项目: 前提:(Unity应该使用尽量最新的版本,2020年的应该就行,2019年的未知',2018年的好像就不行了) 模式简介: 1.服务端处理楼宇发送的信息,把处理过的信息 ...
unity 3d游戏开发_使用Unity 5开发3D游戏
unity 3d游戏开发 If there's one thing cooler than playing games, it's building games. 如果有比玩游戏更酷的一件事,那就是构 ...
VR这么火，你选UE4还是Unity 3D?
在虚拟现实大热的今天,开发者界也出现了"甜豆花"与"咸豆花"之争.在游戏开发者制作游戏时,面对都是免费.都支持各大平台的UE4和Unity 3D,选择何种游戏引 ...
VR这么火，你选UE4还是Unity 3D? 1
在虚拟现实大热的今天,开发者界也出现了"甜豆花"与"咸豆花"之争.在游戏开发者制作游戏时,面对都是免费.都支持各大平台的UE4和Unity 3D,选择何种游戏引 ...
Unity 3D学习视觉脚本无需编码即可创建高级游戏
在本课程中,您将学习如何在Unity中使用可视化脚本(以前称为Bolt)以及如何在不编写一行代码的情况下创建自己的高级游戏所需的一切.本课程将教你如何掌握可视化脚本,即使你以前没有任何关于unity或 ...
Unity三维游戏开发C#编程大师班 Masterclass In C# Programing Unity 3D Game Development FPS
本课程采用现代游戏开发(Unity 2021)的最新内容和最新技术学习任何东西的最好方法是以一种真正有趣的方式去做,这就是这门课程的来源.如果你想了解你看到的这些不可思议的游戏是如何制作的,没有比这 ...
Unity 3D为策略游戏创建地图学习教程
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:30节课(7h 42m) |大小:5 GB 含项目文 ...
Unity 3D游戏代码编程学习教程 Full Guide To Unity 3D C#: Learn To Code Making 3D Games
Unity 3D游戏代码编程学习教程 Full Guide To Unity 3D & C#: Learn To Code Making 3D Games Full Guide To Unit ...
聊聊在博客园写博客的这两年《Unity 3D脚本编程:使用C#语言开发跨平台游戏》正式出版...
版本状态: 2016.9 第一次印刷 (2016.11 输出到台湾) 2017.1 第二次印刷 2017.5 第三次印刷 2017.5 电子书上线:Unity 3D脚本编程--使用C#语言开发跨平台游 ...

Unity 3D DevLog-WebGL

Unity 3D DevLog-WebGL相关推荐

最新文章

热门文章