完成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布置如图所示:

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

相关推荐
郝学胜-神的一滴1 小时前
罗德里格斯旋转公式(Rodrigues‘ Rotation Formula)完整推导
c++·unity·godot·图形渲染·three.js·unreal
田鸡_8 小时前
Unity新输入系统(Input System)教学篇
unity·游戏引擎·游戏程序
EQ-雪梨蛋花汤8 小时前
【Unity笔记】Unity 音游模板与免费资源:高效构建节奏游戏开发全指南
笔记·unity·游戏引擎
星辰徐哥8 小时前
Unity基础:游戏对象的激活与隐藏:SetActive方法详解
游戏·unity·lucene
微莱羽墨8 小时前
零、0基础入门Unity 安装详细教程(2026最新版教程,安装Unity看这一篇就够了!)
unity·游戏引擎·unity安装
星辰徐哥8 小时前
Unity C#入门:变量的定义与访问权限(public/private)
unity·c#·lucene
nnsix9 小时前
Unity 刚体的 默认力、瞬时力 区别
unity·游戏引擎
nnsix9 小时前
Unity Sprite的 Generate Physics Shape 参数解释
unity·游戏引擎
魔士于安10 小时前
Unity完整小球迷宫项目
前端·unity·游戏引擎·贴图·模型
め.10 小时前
Unity协程的原理
unity·游戏引擎