分段经验条制作

一.UI制作

1.调整Canvas的参数

2.新建屏幕大小与References Resolution对应。

3.创建空物体，命名为Buttom_UI

4.制作经验标识图片

5.制作经验背景图片
6.在背景图片下创建空物体item_list，并添加GridLayoutGroup组件。

7.在item_list下创建经验条，并复制九份。注意要改成fill模式

8.调整GridLayoutGroup组件的参数。

二.添加脚本

现在的分段经验条只能在标准模式下适配，一旦屏幕大小出现变化就会出现拉伸变形。所以我们需要动态的改变GridLayoutGroup组件的cellSize.x属性，以达到自适应的效果。

通过观察，我们发现我们只需要用 （屏幕宽度-图片上的红色地方)/10就可以得到每个分段经验条的尺寸。

（1）计算红色部分

1的大小为58

2的大小为10

3.的大小为16

4-12:查看GridLayoutGroup的Spacing.x属性（10*9）

然后一共加起来就是58+10+16+10*9=174.
（2）写脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class MainCityWnd : WinBase {



    public Transform expPrgTrans;//item_list


    public void Start()
    {
        RefreshUI();
    }
//1.经验条自适应
    private void RefreshUI()
    {
    
        GridLayoutGroup gridLayoutGroup = expPrgTrans.GetComponent<GridLayoutGroup>();

        //由于我们的Canvas选择的是Scale with Screen Size,且Match为1，也就是UI受高度影响到大
        //所以屏幕的实际宽度= 获取到的宽度*缩放
        float globalRate = 1.0F * Constants.ScreenStandardHight / Screen.height;
        float Screenwidth = Screen.width * globalRate;
        float width = (Screenwidth - 174) /10;
        gridLayoutGroup.cellSize = new Vector2(width, 7);
    }
//经验条填充
private void ExpUpate()
    {
        PlayData pd = GameRoot.Instance.Playedata;

        int expPrgVal;//（当前经验/升级经验）*100
        int index = expPrgVal / 10;
        for (int i = 0; i < expPrgTrans.childCount; i++)
        {
            Image image = expPrgTrans.GetChild(i).GetComponent<Image>();
            if (i < index)
            {
                image.fillAmount = 1;
            }
            else if (i == index)
            {
                image.fillAmount = (expPrgVal % 10) * 0.1f;
            }
            else
            { image.fillAmount = 0; }
        }
    }
 
}