2021-09-17

最近项目需求,要用Unity打包成WebGL网页版,我在此简单说下遇到的坑!!!,本人用的是2018.3.0f2版本
1.字体问题
引擎自带的字体,打包之后,在网页上是显示不出来的,此时需要我们导入一个新字体样式即可解决
2.材质问题
如果在场景中或者脚本中使用了自定义的Shader,这时我们在打包之前,把这个Shader添加到Graphics设置中,如下图所示:

3.UI布局问题
个人建议:我们在做UI锚点选择时,尽量选择统一,不要出现一套UI界面上多个锚点定位的问题,要不然我们在自适应窗口化时,有的UI会重叠到一起,影响视觉效果
4.输入不了中文问题
打包后,我们会发现输入不了中文,What?,是不是很奔溃?不过在我的执着的小心脏面前,它屈服了.
下面是我的解决办法:
4.1第一步

var WebGLInputField = {
	//打开输入框
  ShowInputFieldDialog:function(defaultValue){
  
      try {
          defaultValue = Pointer_stringify(defaultValue);
      } catch (e) {
		  alert(e);
		  return;
      }

      if(!document.getElementById("nativeInputDialog")) {
	      var element = document.createElement('div');
          // setup html
          var html = '<div id="nativeInputDialog" style="background:transparent; width:0%; height:0%; margin: 0; padding: 0; position: absolute; z-index:888;">' +
              '<input id="nativeInputDialogInput" type="text" style="border: none; background: none; width:0; height:0;left: 0; top:0;color: white; outline: none; display: block; position: relative; font-size: 10px; ">' +
              '</div>';
		  element.innerHTML = html;
		  document.body.appendChild(element);
		  
		  var m_nativeInputDialogInput = document.getElementById("nativeInputDialogInput");
		  m_nativeInputDialogInput.onkeypress  = function (event) {
			  //点击回车键，隐藏输入框
              if (event.keyCode == 13) {
				  document.getElementById("nativeInputDialog").style.display="none";
              }
          };
		  
		  document.onmousemove=function(event){
		     event = event||window.event;
			 document.getElementById("nativeInputDialog").style.left = event.clientX + 'px';
			 document.getElementById("nativeInputDialog").style.top = event.clientY + 20 + 'px';
		  }
      }
	  var m_nativeInputDialog = document.getElementById("nativeInputDialogInput");
	  m_nativeInputDialog.value = defaultValue;
	  document.getElementById("nativeInputDialog").style.display="";
      document.getElementById("nativeInputDialogInput").focus();
	  
  },
  //隐藏输入框
  HideInputFieldDialog :function(){
	 document.getElementById("nativeInputDialog").style.display="none";
  },
  IsInputFieldDialogActive:function(){
     var nativeDialog = document.getElementById("nativeInputDialog" );
     if(!nativeDialog ){
        return false;
     }
     return ( nativeDialog.style.display != 'none' );
  },
  GetInputFieldValue:function(){
    var elem = document.getElementById("nativeInputDialogInput");
    var returnStr = elem.value;
    var bufferSize = lengthBytesUTF8(returnStr) + 1;
    var buffer = _malloc(bufferSize);
    stringToUTF8(returnStr, buffer, bufferSize);
    return buffer;
  },
   GetInputFieldCursortPosition:function  () {
    var dialog = document.getElementById("nativeInputDialogInput");
    var index = dialog.selectionStart;
    return index;
  },
  GetInputFieldCursortFocusPosition:function  () {
    var dialog = document.getElementById("nativeInputDialogInput");
    var index = dialog.selectionEnd;
    return index;
  },
  SetInputFieldCursortPosition:function  (selectionStart,selectionEnd) {
    var elem = document.getElementById("nativeInputDialogInput");
    var val = elem.value
    var len = val.length
 
    // 超过文本长度直接返回
    if (len < selectionStart || len < selectionEnd) return;
	
    setTimeout(function() {
        elem.focus()
        if (elem.setSelectionRange) { // 标准浏览器
			elem.setSelectionRange(selectionStart, selectionEnd); 
        } 
    }, 10)
}
	 
};
mergeInto(LibraryManager.library , WebGLInputField );

以上代码以 .jslib 结尾保存,放到Plugins文件夹下
4.2 第二步

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Runtime.InteropServices;
using System;

public class WebGLInputField : InputField
{
#if UNITY_WEBGL && !UNITY_EDITOR
    [DllImport("__Internal")]//显示对话框
    private static extern void ShowInputFieldDialog(string text);
    [DllImport("__Internal")]//隐藏对话框
    private static extern void HideInputFieldDialog();
    [DllImport("__Internal")]//对话框是否显示中
    private static extern bool IsInputFieldDialogActive();
    [DllImport("__Internal")]//获取对话框的数据
    private static extern string GetInputFieldValue();
    [DllImport("__Internal")]//获取光标选中坐标（起点点）
    private static extern int GetInputFieldCursortPosition();
    [DllImport("__Internal")]//获取光标选中坐标（终点）
    private static extern int GetInputFieldCursortFocusPosition();
    [DllImport("__Internal")]//设置光标选择
    private static extern void SetInputFieldCursortPosition(int selectionStart, int selectionEnd);
    private bool captureAllKeyboardInput
    {
        get
        {
            return WebGLInput.captureAllKeyboardInput;
        }
        set
        {
            WebGLInput.captureAllKeyboardInput = value;
        }
    }
    private float timer;
    private Coroutine overlayhtml;
    private Coroutine setposCoroutine;

    public override void OnPointerClick(PointerEventData eventData)
    {
        base.OnPointerClick(eventData);

        captureAllKeyboardInput = false;

        ShowInputFieldDialog(text);

        if (IsInputFieldDialogActive() && overlayhtml != null)
        {
            //更新光标
            if(setposCoroutine != null)
            {
                SetSelection();
            }
            else
            {
                setposCoroutine = StartCoroutine(DelySetPostion());
            }
        }
        else
        {
            //打开html端的输入框
            overlayhtml = StartCoroutine(this.OverlayHtmlCoroutine());
        }
    }

    private IEnumerator DelySetPostion()
    {
        captureAllKeyboardInput = true;
        yield return null;
        SetSelection();
        captureAllKeyboardInput = false;
        setposCoroutine = null;
        System.GC.Collect();
    }

    private IEnumerator OverlayHtmlCoroutine()
    {
        yield return DelySetPostion();
        //设置选中对象为
        while (IsInputFieldDialogActive() && isFocused)
        {
            yield return null;
            var textFromHtml = GetInputFieldValue();
            if (textFromHtml != this.text)
            {
                this.text = textFromHtml;
                ForceLabelUpdate();
                yield return null;
            }

            if (!captureAllKeyboardInput && setposCoroutine == null && !Input.GetMouseButton(0))
            {
                UpdateCaretPositions();
                yield return null;
            }
        }
        HideInputFieldDialog();
        EventSystem.current.SetSelectedGameObject(null);
        captureAllKeyboardInput = true;
        overlayhtml = null;
        System.GC.Collect();
    }

    /// <summary>
    /// 设置选中区域
    /// </summary>
    private void SetSelection()
    {
        var selectionStart = selectionAnchorPosition < selectionFocusPosition ? selectionAnchorPosition : selectionFocusPosition;
        var selectionEnd = selectionAnchorPosition > selectionFocusPosition ? selectionAnchorPosition : selectionFocusPosition;
        SetInputFieldCursortPosition(selectionStart, selectionEnd);
    }

    /// <summary>
    /// 从html更新caretPosition
    /// </summary>
    private void UpdateCaretPositions()
    {
        var cpos = GetInputFieldCursortPosition();
        var fpos = GetInputFieldCursortFocusPosition();
        var changed = false;
        if (cpos != caretPosition)
        {
            caretPosition = cpos;
            changed = true;
        }
        if (fpos != selectionFocusPosition)
        {
            selectionFocusPosition = fpos;
            changed = true;
        }

        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时,我们可以自定义自己喜欢的模板,发布的时候选择它,这样的话我们就不用每次发布完后,还要再去调整一遍样式,如下图所示

至于具体的怎样去创建模板,我就不再一一讲解了,官网上有教程,需要的小伙伴可以出查看

至此 我把我这个项目中遇到的一些问题写出来,供大家参考,我们相互学习,共同进步.