完成UI界面的绘制

绘制UI

接上文,在Order90Canvas下创建Image子物体,图片资源ui_fish_lv1,设置锚点(CountdownPanelImg同理),命名为LvPanelImg,创建Text子物体,边框宽高各50,

,重名为LvText,其他组件数值如下:

复制一个LvText,重命名LvNameText,调整位置宽度,文本内容为"大师",在LvPanelImg下创建slider子物体,删除Handle Slide Area,对background,Fill Area调整锚点,Slider的value值拉满。

点击Fill,调整Slider下子物体大小,至三个子物体大小相等,将Slider的value值调回0。将background背景换成ui_fish_encyclope,Fill的图片资源为ui_fish_lv2,在Slider下将Image组件做如下处理:

(由于背景图图片并不完全契合,将Fill Area与Background大小对齐),将Slider命名为expSlider,调整位置及大小。层级面板布局如图所示:

在Order90Canvas下创建Image子物体,图片资源为ui_fish_accoun,设置原生大小,置于整个背景左下角,命名为GoldPanelImg,创建Image子物体,图片资源为ui_fish_cupfinish5,调整位置及大小,命名为GoldIconImg,在GoldPanelImg下创建Text子物体,命名为GoldNumText,调整位置及大小,文本内容"$999999",Text组件数值如下:

在GoldPanelImg下创建一个Text子物体,命名为RewardTimerText,调整锚点,调整大小和位置,文本内容" 0 0",字体颜色白色(例如),调整效果如下所示。

整个层级面板布局及整个UI布置如图所示:

本栏目为网络课程学习笔记,仅供学习参考使用。

相关推荐
Liam_Lsc7 小时前
Unity 编辑器多开
unity·编辑器·游戏引擎
一个程序员(●—●)11 小时前
水波荡漾效果+渲染顺序+简单UI绘制
unity
@Unity打怪升级18 小时前
Unity 与虚幻引擎对比:两大游戏开发引擎的优劣分析
游戏·unity·ue5·游戏引擎·ue4·游戏程序·虚幻
夜若渊21 小时前
Unity优质教程分类汇总 【持续更新中】
unity·游戏引擎
__water1 天前
『网络游戏』GoLand服务器框架【01】
服务器·unity·go
Thomas_YXQ2 天前
Unity3D PostLateUpdate为何突然占用大量时间详解
开发语言·数码相机·游戏·unity·架构·unity3d
向宇it2 天前
【unity进阶知识1】最详细的单例模式的设计和应用,继承和不继承MonoBehaviour的单例模式,及泛型单例基类的编写
游戏·unity·单例模式·设计模式·游戏引擎·框架
Thomas_YXQ2 天前
Unity3D 中构建行为树插件详解
游戏·unity·架构·unity3d·游戏开发
vip4512 天前
游戏开发2025年最新版——八股文面试题(unity,虚幻,cocos都适用)
unity·虚幻·cocos2d