Unity打包Webgl中遇到的问题-北京尧图网络

最近项目需求,要用Unity打包成WebGL网页版,我在此简单说下遇到的坑!!!,本人用的是2018.3.0f2版本1.字体问题引擎自带的字体,打包之后,在网页上是显示不出来的,此时需要我们导入一个新字体样式即可解决2.材质问题如果在场景中或者脚本中使用了自定义的Shader,这时我们在打包之前,把这个Shader添加到Graphics设置中,如下图所示:3.UI布局问题个人建议:我们在做UI锚点选择时,尽量选择统一,不要出现一套UI界面上多个锚点定位的问题,要不然我们在自适应窗口化时,有的UI会重叠到一起,影响视觉效果4.输入不了中文问题打包后,我们会发现输入不了中文,What?,是不是很奔溃?不过在我的执着的小心脏面前,它屈服了.下面是我的解决办法:4.1第一步varWebGLInputField{//打开输入框ShowInputFieldDialog:function(defaultValue){try{defaultValuePointer_stringify(defaultValue);}catch(e){alert(e);return;}if(!document.getElementById(nativeInputDialog)){varelementdocument.createElement(div);// setup htmlvarhtmldiv idnativeInputDialog stylebackground:transparent; width:0%; height:0%; margin: 0; padding: 0; position: absolute; z-index:888;input idnativeInputDialogInput typetext styleborder: none; background: none; width:0; height:0;left: 0; top:0;color: white; outline: none; display: block; position: relative; font-size: 10px; /div;element.innerHTMLhtml;document.body.appendChild(element);varm_nativeInputDialogInputdocument.getElementById(nativeInputDialogInput);m_nativeInputDialogInput.onkeypressfunction(event){//点击回车键隐藏输入框if(event.keyCode13){document.getElementById(nativeInputDialog).style.displaynone;}};document.onmousemovefunction(event){eventevent||window.event;document.getElementById(nativeInputDialog).style.leftevent.clientXpx;document.getElementById(nativeInputDialog).style.topevent.clientY20px;}}varm_nativeInputDialogdocument.getElementById(nativeInputDialogInput);m_nativeInputDialog.valuedefaultValue;document.getElementById(nativeInputDialog).style.display;document.getElementById(nativeInputDialogInput).focus();},//隐藏输入框HideInputFieldDialog:function(){document.getElementById(nativeInputDialog).style.displaynone;},IsInputFieldDialogActive:function(){varnativeDialogdocument.getElementById(nativeInputDialog);if(!nativeDialog){returnfalse;}return(nativeDialog.style.display!none);},GetInputFieldValue:function(){varelemdocument.getElementById(nativeInputDialogInput);varreturnStrelem.value;varbufferSizelengthBytesUTF8(returnStr)1;varbuffer_malloc(bufferSize);stringToUTF8(returnStr,buffer,bufferSize);returnbuffer;},GetInputFieldCursortPosition:function(){vardialogdocument.getElementById(nativeInputDialogInput);varindexdialog.selectionStart;returnindex;},GetInputFieldCursortFocusPosition:function(){vardialogdocument.getElementById(nativeInputDialogInput);varindexdialog.selectionEnd;returnindex;},SetInputFieldCursortPosition:function(selectionStart,selectionEnd){varelemdocument.getElementById(nativeInputDialogInput);varvalelem.valuevarlenval.length// 超过文本长度直接返回if(lenselectionStart||lenselectionEnd)return;setTimeout(function(){elem.focus()if(elem.setSelectionRange){// 标准浏览器elem.setSelectionRange(selectionStart,selectionEnd);}},10)}};mergeInto(LibraryManager.library,WebGLInputField);以上代码以 .jslib 结尾保存,放到Plugins文件夹下4.2 第二步usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;usingUnityEngine.UI;usingUnityEngine.EventSystems;usingSystem.Runtime.InteropServices;usingSystem;publicclassWebGLInputField:InputField{#ifUNITY_WEBGL !UNITY_EDITOR[DllImport(__Internal)]//显示对话框privatestaticexternvoidShowInputFieldDialog(stringtext);[DllImport(__Internal)]//隐藏对话框privatestaticexternvoidHideInputFieldDialog();[DllImport(__Internal)]//对话框是否显示中privatestaticexternboolIsInputFieldDialogActive();[DllImport(__Internal)]//获取对话框的数据privatestaticexternstringGetInputFieldValue();[DllImport(__Internal)]//获取光标选中坐标起点点privatestaticexternintGetInputFieldCursortPosition();[DllImport(__Internal)]//获取光标选中坐标终点privatestaticexternintGetInputFieldCursortFocusPosition();[DllImport(__Internal)]//设置光标选择privatestaticexternvoidSetInputFieldCursortPosition(intselectionStart,intselectionEnd);privateboolcaptureAllKeyboardInput{get{returnWebGLInput.captureAllKeyboardInput;}set{WebGLInput.captureAllKeyboardInputvalue;}}privatefloattimer;privateCoroutineoverlayhtml;privateCoroutinesetposCoroutine;publicoverridevoidOnPointerClick(PointerEventDataeventData){base.OnPointerClick(eventData);captureAllKeyboardInputfalse;ShowInputFieldDialog(text);if(IsInputFieldDialogActive()overlayhtml!null){//更新光标if(setposCoroutine!null){SetSelection();}else{setposCoroutineStartCoroutine(DelySetPostion());}}else{//打开html端的输入框overlayhtmlStartCoroutine(this.OverlayHtmlCoroutine());}}privateIEnumeratorDelySetPostion(){captureAllKeyboardInputtrue;yieldreturnnull;SetSelection();captureAllKeyboardInputfalse;setposCoroutinenull;System.GC.Collect();}privateIEnumeratorOverlayHtmlCoroutine(){yieldreturnDelySetPostion();//设置选中对象为while(IsInputFieldDialogActive()isFocused){yieldreturnnull;vartextFromHtmlGetInputFieldValue();if(textFromHtml!this.text){this.texttextFromHtml;ForceLabelUpdate();yieldreturnnull;}if(!captureAllKeyboardInputsetposCoroutinenull!Input.GetMouseButton(0)){UpdateCaretPositions();yieldreturnnull;}}HideInputFieldDialog();EventSystem.current.SetSelectedGameObject(null);captureAllKeyboardInputtrue;overlayhtmlnull;System.GC.Collect();}/// summary/// 设置选中区域/// /summaryprivatevoidSetSelection(){varselectionStartselectionAnchorPositionselectionFocusPosition?selectionAnchorPosition:selectionFocusPosition;varselectionEndselectionAnchorPositionselectionFocusPosition?selectionAnchorPosition:selectionFocusPosition;SetInputFieldCursortPosition(selectionStart,selectionEnd);}/// summary/// 从html更新caretPosition/// /summaryprivatevoidUpdateCaretPositions(){varcposGetInputFieldCursortPosition();varfposGetInputFieldCursortFocusPosition();varchangedfalse;if(cpos!caretPosition){caretPositioncpos;changedtrue;}if(fpos!selectionFocusPosition){selectionFocusPositionfpos;changedtrue;}if(changed){ForceLabelUpdate();}}#endif//注意Time.timeScale 0 会无法更新信息//private void Update()//{// if(Input.GetMouseButtonDown(1) isFocused)// {// Debug.Log(caretPosition: caretPosition);//光标坐标// Debug.Log(currentSelectionState: currentSelectionState);//选中状态// Debug.Log(selectionAnchorPosition: selectionAnchorPosition);//选择起点// Debug.Log(selectionFocusPosition: selectionFocusPosition);//选择结束点// }//}}用这个脚本替换系统自带的 InputField 组件即可经过这两步以后,就可以实现输入中文了5.AB包问题相信我们在做资源更新时,会用到AB包,不过在打包成WebGL时,我们要注意了,就是我们在设置PlayerSettings时,Other Settings–Strip Engine Code 这个选项一定不要勾选,否则加载不出来资源.6.播放音频问题个人建议:使用系统自带的播放音频的组件去播放音频,不要使用一些文字转语音的插件,很多这类插件是不支持网页版的.7.模板个人建议:在我们发布webgl时,我们可以自定义自己喜欢的模板,发布的时候选择它,这样的话我们就不用每次发布完后,还要再去调整一遍样式,如下图所示至于具体的怎样去创建模板,我就不再一一讲解了,官网上有教程,需要的小伙伴可以出查看至此我把我这个项目中遇到的一些问题写出来,供大家参考,我们相互学习,共同进步.

Unity打包Webgl中遇到的问题

相关推荐

编码智能体使用指南：平衡开发效率与代码理解力

多平台音乐搜索、跨端同步与桌面歌词一次搞定：LX Music 桌面版实用指南

AI编码代理与Mermaid图渲染规范：CLI、AGENTS.md与CI自动化实践

更多资讯

启动报Port 8088 was already in use？先查是谁占的

担心文档上云？本地运行的办公AI才敢放心用

先能用，再好用：从烂尾复盘到两周上线，全栈项目的‘原型—快速迭代‘方法论

深度思考模式把 ARC-AGI-2 从 17.6% 拉到 45.1%：对照 Gemini 3 Pro 的三份能力评测，看‘会思考‘改写了哪些边界

1.c++入门篇

《江灯合声》：有可行的分框版，也仍可以选择连续鸣谢

今日更新

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？