unity学习53:UI的子容器:面板panel

目录

[1 UI的最底层容器:canvas](#1 UI的最底层容器:canvas)

[1.1 UI的最底层容器:canvas](#1.1 UI的最底层容器:canvas)

[1.2 UI的合理结构](#1.2 UI的合理结构)

[2 UI的子容器:面板panel](#2 UI的子容器:面板panel)

[2.1 创建panel](#2.1 创建panel)

[2.2 面板的本质: image ,就是一个透明的图片,1个空容器](#2.2 面板的本质: image ,就是一个透明的图片,1个空容器)

[3 面板的属性](#3 面板的属性)

[4 面板的使用](#4 面板的使用)

[4.1 比如左上角加1个panel](#4.1 比如左上角加1个panel)

[4.2 然后其他 image都放在这个panel里](#4.2 然后其他 image都放在这个panel里)

[4.3 查看效果](#4.3 查看效果)

[4.4 测试缩放](#4.4 测试缩放)


1 UI的最底层容器:canvas

1.1 UI的最底层容器:canvas

  • UI的父物体最底层就是canvas
  • 可以多张canvas

1.2 UI的合理结构

canvas-----panel1 -----各种控件

----panel2-----各种控件

。。。。。

2 UI的子容器:面板panel

2.1 创建panel

  • 面板panel: UI的子容器
  • 更方便做某个子区域,小范围的,协同适配!

2.2 面板的本质: image ,就是一个透明的图片,1个空容器

  • 可以看到面板下挂的就是一个 image的component
  • 并且,可以把image 给灰掉

3 面板的属性

4 面板的使用

4.1 比如左上角加1个panel

  • 比如左上角加1个panel
  • 把panel的锚点,挂在父物体(canvas)的左上角

4.2 然后其他 image都放在这个panel里

  • 然后其他 image都放在这个panel里
  • 这些image都属于这个panel了,是panel的子物体
  • 这样就只需要关心,父物体panel的适配了。不要单独调整每个图片的适配了

4.3 查看效果

  • 虽然可以直接拖动图片过去,不设置父子物体效果,但是缩放时,效果不完全一样

4.4 测试缩放

  • 下面是把游戏game窗口放大,缩小,UI适配很好
相关推荐
EQ-雪梨蛋花汤4 小时前
【Part 3 Unity VR眼镜端播放器开发与优化】第四节|高分辨率VR全景视频播放性能优化
unity·音视频·vr
与火星的孩子对话8 小时前
Unity进阶课程【六】Android、ios、Pad 终端设备打包局域网IP调试、USB调试、性能检测、控制台打印日志等、C#
android·unity·ios·c#·ip
幻世界9 小时前
【Unity智能模型系列】Unity + MediaPipe + Sentis + ArcFace模型:构建高效人脸识别比对系统
unity·游戏引擎
死也不注释1 天前
【Unity 编辑器工具开发:GUILayout 与 EditorGUILayout 对比分析】
unity·编辑器·游戏引擎
小赖同学啊1 天前
物联网中的Unity/Unreal引擎集成:数字孪生与可视化控制
物联网·unity·游戏引擎
Zlzxzw2 天前
使用unity创建项目,进行动画制作
unity·游戏引擎
X_StarX2 天前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
九班长2 天前
Golang服务端处理Unity 3D游戏地图与碰撞的详细实现
3d·unity·golang
ysn111112 天前
NGUI实现反向定位到层级面板结点
unity
Thomas_YXQ2 天前
Unity3D DOTS场景流式加载技术
java·开发语言·unity