Unity实用技能-UI进度条

实用技能系列

  1. Unity实用技能-UI滑动条技能总结
  2. Unity实用技能-UI规范总结
  3. Unity实用技能-协作规范总结
  4. Unity实用技能-UI与粒子效果总结
  5. Unity实用技能-UI定位总结
  6. Unity实用技能-背景自适应文本

文章目录


前言

这段时间接触了进度条内容,总结一下


进度条主要包含哪些内容?

  1. 进度条框架
  2. 背景图尺寸自适应
  3. 随机背景图片替换
  4. 进度条加载

进度条框架是怎样的?

  1. 包括业务部分和数据部分,两者各自有一个基类,针对PVP和PVE各自继承基类扩展
  2. 还有类似管理器的部分,支持对继承的类进行预加载等管理
  3. 业务基类支持统一的进度条提示文本,以及进度条加载。如下图鸣潮的加载提示和进度条

背景图尺寸如何自适应?

问题的背景是美术统一出了一个1624x750尺寸的加载图,但加载图本身无法用九宫格拉伸,直接使用Unity的这个锚点导致不同分辨率下加载图会被压缩,也就是没有保持图片比例,表现上不好看

  1. 思路上比较简单,就是锚点居中,然后用代码来改变图片尺寸

  2. 代码中具体做法就是获取画布的尺寸,然后用画布尺寸的对应宽和高分别除以图片标准尺寸的宽和高,如1624x750;得到的宽和高两个比值进行比较,得到比值较大的,以此为标准,用图片标准尺寸的宽和高分别与这个比值相乘来放大图片即可


随机背景图片如何替换?

美术出了很多张同尺寸的背景图,需要给进度条的大背景换图

  1. 首先在我司的项目中,直接换图会导致图片加载慢半拍,所以实际换图需要利用好预加载,实际上加载的View对象也是在游戏过程中不删除的,也就是一直在内存中
  2. 直接做法就是在登陆时预加载所有的备选图片,这样任选一张图片来替换背景都可以立刻替换
  3. 但项目中在登陆时预加载的图片不会一直存在于游戏过程中,所以最终采用的是用两个Image对象分别交替加载背景图完成需求
  4. 对于这些图片资源,显然其数量可以通过策划配置来得到

进度条如何加载?

  1. 基本思路就是通过协议事件来更实时更新进度条数值,总计3个,即开始、更新过程、结束事件
  2. 大部分的更新进度条都在更新过程,开始和结束主要是为了保证临界值表现正确

总结

目前遇到的格式化问题就是这样,之后有新的格式化问题也会继续在这里补充

相关推荐
修炼前端秘籍的小帅3 天前
Stitch——Google热门的免费AI UI设计工具
前端·人工智能·ui
王码码20353 天前
Flutter for OpenHarmony:socket_io_client 实时通信的事实标准(Node.js 后端的最佳拍档) 深度解析与鸿蒙适配指南
android·flutter·ui·华为·node.js·harmonyos
爱搞虚幻的阿恺3 天前
Niagara粒子系统-超炫酷的闪电特效(加餐 纸牌螺旋上升效果)
游戏·游戏引擎
_Li.3 天前
Simulink - 6DOF (Euler Angles)
人工智能·算法·机器学习·游戏引擎·cocos2d
weixin_424294673 天前
Unity 调用Steamworks API 的 SteamUserStats.RequestCurrentStats()报错
unity·游戏引擎·steamwork
HoFunGames3 天前
Unity小地图,Easy Minimap System MT-GPS插件
unity·游戏引擎
2501_921930833 天前
Flutter for OpenHarmony:第三方库实战 chewie 视频播放器UI组件详解
flutter·ui
wy3258643644 天前
Unity 新输入系统InputSystem(基本操作)
unity·c#·游戏引擎
WarPigs4 天前
着色器multi_compile笔记
unity·着色器
梵得儿SHI4 天前
Vue3 生态工具实战宝典:UI 组件库 + 表单验证全解析(Element Plus/Ant Design Vue/VeeValidate)
前端·vue.js·ui·elementplus·vue性能优化·antdesignvue·表单验证方案