您的位置:首页 > 房产 > 家装 > Unity实现经验条动态自适应

Unity实现经验条动态自适应

2024/10/6 16:31:17 来源:https://blog.csdn.net/qq_41884036/article/details/141396430  浏览:    关键词:Unity实现经验条动态自适应

在游戏开发中,经验有用到分段式经验条的情况,但是这种分段式分辨率仅仅靠Unity自带的锚点或者以宽,或者高,或者Expand模式等,无法做到完美适配,因此就需要通过代码根据窗口不同的分辨率计算得到比例,然后动态赋值进行自适应。

正常的经验条在正常屏幕比例下的显示情况
在这里插入图片描述

当我宽度进行拉伸时,发现背景和经验条就不适配了
在这里插入图片描述

当我以高度进行拉伸时,也是如此,因此我们就需要通过代码进行动态适配

在这里插入图片描述

这是Unity中按照标准自定义分辨率显示的经验条,是通过Grid Layout Group组件下设置了10张同样的图片,将图片的Image Type改为Filled,利用Fill Amount属性对每格经验条的比例进行显示,这里的Cell Size也是根据整个画布的长度,以及每个Item之间的间隙,计算出来的,我的Canvas分辨率是1334 * 768,因此Canvas的长度是1334,Exp的图标的Width是76,经验条的背景的小间隙的左边是8,右边是10,每个Item的间隙是10,我们10个Item,就意味着有9个间隙,因此1334- (8+10+76 + 9 x 10) = 1150, 由于有10个Item,因此每个Item的长度就是115,因此这个Cell Size就是115
在这里插入图片描述
在写代码进行动态适配之前,我们还需要对Canvas做一个基础设置,就是我们以高进行拉伸以自适应宽度,如果你想以宽进行拉伸自适应也是可以的
在这里插入图片描述

我们首先得到是当前Canvas的高度 / 当前实际屏幕高度,得到当前画布和真实屏幕高度的比值,通过这个比值计算出当前屏幕的宽度,接下来我们要计算每个经验格子的宽度,于是就将我们根据动态计算的出来的 (当前屏幕宽度- 184)/ 10 = 单个格子经验条的宽度,这个184其实就是上面说的(8+10+76 + 9 x 10)就是这些间隙,得到之后,将格子背景,和格子本身的Grid Layout Group的Width进行赋值,便可以实现动态自适应。

/// <summary>/// 经验条根据Canvas以Height拉伸进行自适应宽度/// </summary>private void AutoAdaptExp(){float rate = 1.0f * Consts.ScreenHeight / Screen.height;float screenWidth = Screen.width * rate;float width = (screenWidth - 184) / 10;mItemGridGroup.cellSize = new Vector2(width, 7);mBGGridGroup.cellSize = new Vector2(width, 7);}private void Update(){if (Time.frameCount % 10 == 0){AutoAdaptExp();}}

测试结果,以高度进行拉伸,完美适配
在这里插入图片描述
以宽度进行拉伸,也是完美适配
在这里插入图片描述

适配完成后,就简单说下如何根据经验赋值,通常来说就是通过当前经验和当前等级所需经验的比值得到Index,小于Index也就是代表index是满的经验,大于Index说明这个经验值不足,唯一需要计算的就是等于Index的情况,通过取余得到当前格子的经验,与整个格子经验的比值就得得到当前Image的fillAmount,下面贴出代码

        private void RefreshUI(){PlayerData pd = LoginScene.Instance.PlayerData;AutoAdaptExp();Image[] itemImgs = mItemGridGroup.GetComponentsInChildren<Image>();int exp = (int)(1.0f * PECommon.GetExpUpByLv(pd.lv) / 100) * 100 / itemImgs.Length;int index = pd.exp / exp;for (int i = 0; i < itemImgs.Length; i++){Image img = itemImgs[i];if (i < index){img.fillAmount = 1;}else if (i == index){float a = (pd.exp % (exp * index * 1.0f)) / exp;img.fillAmount = (pd.exp % (exp * index * 1.0f)) / exp;}else{img.fillAmount = 0;}}}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com