Unity实战问题-WebGL问题集锦第二发_unity打包webgl后字体变模糊

承接上文：https://blog.csdn.net/qq_27489007/article/details/83654887

满怀希望的继续更新；

Q1：Text字体不清晰

第一种可能是图片拉伸的问题，Text控件长或宽被拉伸，导致单位面积像素点减少了（好像是称为像素密度），解决是对其scale进行成倍放大而不是对其拉伸

第二种 如果Canvas模式是一般相机模式(前两种)，把Canvas Scaler的Scale Factor适当调大，字体会变清晰；

还有就是Canvas是World模式， 可以把Canvas Scaler的Dynamic Pixels Per Unit适当调大，这样Text每单元的动态pixels会增大，这样vr中的3DText字体会变的清晰。

Q2：Text文字组件实现滑动变色，解决：添加Selectable组件就行

Q3：给UGUI精灵或按钮 添加自定义事件响应区域  参考地址https://blog.csdn.net/qq_38190993/article/details/69257990

所有UI都有Image组件，其中有RaycastTarget属性，勾选该属性为true则表示运行时UI精灵会响应相应交互事件，这套UGUI（包括NGUI）是通过射线检测实现的交互响应，那么我们可以通过添加可编辑碰撞器的方式，修改Image默认检测区域；

项目中我的按钮是这样的   如果你不做处理 默认是整张图片（即空白区域）都会响应，体验上是不太好的；

Unity给我们提供了自定义区域，就是 PolygonCollider2D组件

点击EditCollide会有小绿点出现让你编辑该多边形碰撞器（将区域设置有图片内容的区域）；

还有我们要删除button原有的Image组件，新建一个C#类且继承自Image，把这个C# 添加给button，设置图片即可

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class CustomBtnArea : Image {
    public override bool IsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
    {
        return GetComponent<PolygonCollider2D>().OverlapPoint(screenPoint);
    }
}

官方的Image原生方法是这样的

跑起来，只有圈出的区域才响应

Q4：鼠标滑过UI检测碰撞位置，来实现提示信息；注意：是UI(2D)内容的碰撞，当然3D的也有；

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class BtnTips : MonoBehaviour, IPointerExitHandler, IPointerEnterHandler
{
   
    public bool isShowTip;   //是否展示提示
    private string name;//物品名称
    public Font this_font;  //字体样式，方便显示中文
       void Start () {
        isShowTip = false;
       }
       
       void Update () {
       
       }
    //这段注释的 是 3D物体的检测
    //private void OnMouseEnter()
    //{
    //    Debug.Log("鼠标位置");
    //    isShowTip = true;
    //}
    //private void OnMouseExit()
    //{
    //    isShowTip = false;
    //}
    private void OnGUI()
    {
        if (isShowTip) {
            //Debug.Log("鼠标位置===");
            GUIStyle style1 = new GUIStyle();
            style1.fontSize = 20;
            style1.normal.textColor = Color.white;
            //style1.normal.textColor = new Color(0,0,0);  //可以自定义任何颜色
            style1.font = this_font;  //自定义字体样式
            GUI.Label(new Rect(Input.mousePosition.x, Screen.height - Input.mousePosition.y-20, 140, 60), name,style1);
        }
    }
    //下面是 2D  UI 内容的鼠标划入检测
    public void OnPointerExit(PointerEventData eventData)
    {
        isShowTip = false;
        name = "";
    }
    public void OnPointerEnter(PointerEventData eventData)
    {
        isShowTip = true;
        name = gameObject.transform.GetChild(0).GetComponent<Text>().text;
    }
}

Q5：在Q4过程中，代码中控制字体样式，字体颜色，使用GUIStyle

Q6： Button组件设置不可点击且变灰，发现单纯的颜色按钮是可以的，如果是Button是精灵的就不行，目前只能是恰当的时机替换精灵  如设置不可点击enabled=false的时候把精灵替换成灰色图；反之一样

Q7： 如果项目中Text组件多，且是中文，一个一个修改字体样式肯定劳神，  可一键替换字体样式资源，属于自定义编辑器的知识（EditorWindow）  注：过程中如果字体样式多样化 一定要注意，别全替换了；

using UnityEngine;
using System.Collections;
using UnityEditor;
using UnityEditor.SceneManagement;
using UnityEngine.UI;
 
public class ChangeFontWindow : EditorWindow
{
    [MenuItem("Tools/更换字体")]
    public static void Open()
    {
        EditorWindow.GetWindow(typeof(ChangeFontWindow));
    }
 
    Font toChange;
    static Font toChangeFont;
    FontStyle toFontStyle;
    static FontStyle toChangeFontStyle;
 
    void OnGUI()
    {
        toChange = (Font)EditorGUILayout.ObjectField(toChange, typeof(Font), true, GUILayout.MinWidth(100f));
        toChangeFont = toChange;
        toFontStyle = (FontStyle)EditorGUILayout.EnumPopup(toFontStyle, GUILayout.MinWidth(100f));
        toChangeFontStyle = toFontStyle;
        if (GUILayout.Button("更换"))
        {
            Change();
        }
    }
 
    public static void Change()
    {
        Transform canvas = GameObject.Find("Canvas").transform;
        if (!canvas)
        {
            Debug.Log("NO Canvas");
            return;
        }
        Transform[] tArray = canvas.GetComponentsInChildren<Transform>();
        for (int i = 0; i < tArray.Length; i++)
        {
            Text t = tArray[i].GetComponent<Text>();
            if (t)
            {
                //这个很重要，博主发现如果没有这个代码，unity是不会察觉到编辑器有改动的，自然设置完后直接切换场景改变是不被保存
                //的  如果不加这个代码  在做完更改后 自己随便手动修改下场景里物体的状态 在保存就好了 
                Undo.RecordObject(t, t.gameObject.name);
                t.font = toChangeFont;
                t.fontStyle = toChangeFontStyle;
                //相当于让他刷新下 不然unity显示界面还不知道自己的东西被换掉了  还会呆呆的显示之前的东西
                EditorUtility.SetDirty(t);
            }
        }  
        Debug.Log("Succed");  
    }
}

使用把这个c#放到你的项目中，最后在tool中打开     搞定！

暂时问题总结到这里！

---

关注我的微信公众号，随时都有技术，游戏，认知，职场/发展的优质文章推送！

微信扫一扫下方二维码即可关注：

如果文章对您有帮助，欢迎撩我：