UG4L11——分辨率自适应

本章代码关键字

1
gObject.MakeFullScreen()    //将组件大小填满屏幕

FairyGUI中的分辨率自适应

FairyGUI为手游开发提供了自动适应各种设备分辨率的UI适配策略
这意味着开发者只需要制作一套UI，就可以适配所有分辨率的设备

分辨率自适应具体步骤

  1. 制作UI时使用一套设计分辨率（以最大的全屏UI界面的大小为标准），比如：1136*640​、1280*720​、1920*1080​等等

    如何确定设计分辨率：

    设计分辨率的确定主要按宽高比例设计 一般考虑市面上主流设备的分辨率比例，比如 16:9​、19.5:9​ 等等
    目前iphone主流机型分辨率比例为 19.5:9​（2436*1125​） 建议采用该比例设计 （选择较大比值）
    采用该比例不是说就用2436*1125​来做，因为分辨率越大，意味着图片越大，那么在使用时所占的内存就大
    你可以根据自己游戏的实际情况来进行设计 比如 1950*900​ 也是 19.5:9​
    但是分辨率明显就小了，内存也就小了，当这个UI真正在2436*1125​的屏幕上显示时，FairyGUI会自动帮助我们把这个图片进行放大处理
    只要差距不是太大，呈现出的画面是完全可以接受的

  2. 在Unity中通过代码或者UIContentScaler​组件设置 全局缩放方式 和 设计分辨率

    ​image​

    • Screen Match Mode 适配模式

      1. ​MatchWidthOrHeight​ 取宽和高比例较小的进行缩放

        例如，设计分辨率是960*640​，设备分辨率是1280*720​
        那么可以得到宽边的比例是1280/960=1.33​，
        高边的比例是720/640=1.125​
        最后取较小的1.125​作为全局缩放系数
        这种缩放方式保证内容缩放后始终在屏幕内，
        可能会留边，但不会超出屏幕看不到

      2. ​MatchWidth​ 固定取宽的比例进行缩放（竖屏游戏建议使用）
        高边可能超出屏幕（关联系统会保证控件不会超出屏幕）

      3. ​MatchHeight​ 固定取高的比例进行缩放（横屏游戏建议使用）
        宽边可能超出屏幕（关联系统会保证控件不会超出屏幕）

    该控件只需要在启动游戏时挂载并设置即可，或者不使用该脚本直接通过GRoot.inst.SetContentScaleFactor()​去设置这些值

  3. 在FGUI中拼凑UI时，设定每个元件的关联系统对齐方式

    ​image​

  4. 对于全屏UI组件，可通过gObject.MakeFullScreen()​和gObject.AddRelation()​将组件大小填满屏幕

    当设计分辨率的宽高比与实际屏幕宽高比对不上时需要调用gObject.MakeFullScreen()​（gObject​是要设置控件分辨率自适应的组件）
    让UI组件下的控件根据实际屏幕的宽高比结合关联系统进行分辨率自适应

    以横向屏幕游戏，设计分辨率为1365*768​的面板组件举例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    void Start()
    {
        UIPackage.AddPackage("UI/teach");
        GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);
        teachBinder.BindAll();
        RelationPanel panel = RelationPanel.CreateInstance();
        panel.MakeFullScreen();            //当屏幕大小会发生变化时，就需要执行该方法
        GRoot.inst.AddChild(panel);
    }

    当比例正好时：

    ​image​

    当宽边较窄时（可见，未设置关联系统的控件超出了屏幕）：

    ​image​

    如果屏幕大小会发生变化，需要给组件加上关联设置gObject.AddRelation()​
    该方法需要在显示面板后调用，因为显示面板后GRoot​才是面板的父对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    void Start()
    {
        UIPackage.AddPackage("UI/teach");
        GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);
        teachBinder.BindAll();
        RelationPanel panel = RelationPanel.CreateInstance();
        panel.MakeFullScreen();
        GRoot.inst.AddChild(panel);
        //为面板设置应该相对于GRoot或者说屏幕宽高关联，使得即使屏幕变化控件依然可以分辨率自适应
        panel.AddRelation(GRoot.inst, RelationType.Size);
    }

    ​image​

    ​image​

    ​image​

‍