当前位置:网站首页>Unity—UGUI control
Unity—UGUI control
2022-08-10 08:12:00 【small digital media member】
补上昨天的UGUI控件,It will be updated every two days in the future!until the end of the month~结尾有彩蛋呦!
每日一句:There is a view outside the window There are textbooks in hand There are dreams in the eyes There is a future in mind
目录
Table auto layout component Grid Layout Group
UGUI控件
图形用户界面Unity Graphical User Inteface
Canvas画布
绘制UI元素的载体,所有UI元素必须在Canvas之下
UI元素的绘制顺序依赖于层次面板中的顺序
属性
Render Mode渲染方式
·Screen Space-Overlay覆盖模式:UIElements will be drawn before other elements,And the drawing process is independent of scene elements and camera settings,画布尺寸由屏幕大小和分辨率决定
Pixel Perfect完美像素:若勾选,It will sharpen the screen display effect
Sort Order渲染顺序:在多个Canvas中,值越大,The more rendered to the top layer
(同一个Canvas内,Determined by the order of precedence)
·Screen Space-Camera摄像机模式:提供UI Camera,CanvasObjects are drawn in one with the camera,on a fixed distance plane,且绘制效果受摄像机参数的影响
Render Camera渲染摄像机
Plane Distance平面与摄像机的距离
Sorting Layer排序层:通过Edit—>Project Setting—>Tags and Layer调整Canvas渲染顺序
·World Space世界空间模式:Canvas rendering with world space,与场景中其他3D物体性质相同
需求:UI是UI,3D是3D
while creating a camera—UIcamera—(照)画布
UICamera渲染UI元素,MainCamera渲染主场景、3D物体
Multiple cameras in the same scene will have overlays——>调Depth值;
UICamera和主CameraAt the same time, the object is displayed in the interface——>需把Depthbig camera,Clear Flags改成Depth Only(仅深度:Blank parts are not rendered);
Because there are two cameras,An object screen will display two——>UICamera—Culling Mask(UI),UIThe camera only drawsUI元素,The main camera doesn't lookUI;
想让3D物体盖住UI,可以把3DThe object layer becomesUI
Rect Transform矩形变换
派生自Transform,在UGUIReplace the original transform component on the control,Indicates that one can accommodateUI元素的矩形
属性:
Pos:The position of the control's pivot point relative to its own anchor point
Anchor锚点:UI元素的4The distance between the vertex and the anchor point remains the same
锚点总是相对于父级,不能超越父物体范围
表示点—>PosX PosY Width Hight
表示拉伸—>Left Right Top Botton
Pivot轴心点:移动,旋转与缩放都围绕轴心点发生变化,0,0为左下顶点,1,1Divide the anchor point for the upper right vertex:The ratio of the screen changes,The picture also changed
(The background image is adaptive to size,Other pictures are generally position adaptive)
UIThere are also world coordinates(单位:米)this.transform.position
(When the canvas isOverlay时,Equivalent to screen coordinates(单位:像素))
API:
//Position relative to the parent object
//The current pivot point is relative to the parentUIposition of the pivot point(单位:meters or pixels)
this.transform.localPosition;
RectTransform rtf=GetComponent<RectTransform>();
或RectTransform rtf=this.transform as RectTransform;
//The position of the own pivot point relative to the anchor point(displayed in the compilerPos)
rtf.anchoredPosition3D;
//获取/设置锚点
rtf.anchorMin;
//获取UI宽度(只读)
rtf.rect.width;
//设置UI宽度/高度
rtf.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal,250);/Vertical
//When the anchor points are not separated,Numerical values can be understood as UI宽高;实际:Object size minus anchor point spacing
rtf.sizeDelta;
Button控件
Interactable 是否交互
Transition:
·Color Tint颜色过度
Highlighted Color高光颜色(光标移入时)
Pressed Color按压颜色
Selected Color Color after confirmation
Disabled Color Do not interact with colors
·Sprite Swap精灵切换 根据按钮状态,显示不同的图片
·Animation Auto Generate Animation自动生成动画
Text文本标签
富文本语法(Individual characters want to be displayed in different ways)Rich Test勾选
<b>粗体</b>
<i>斜体</i>
<size=14>字号</size>
<color=green>颜色</color>
Paragraph
Horizontal Overflow/vertical 水平溢出/垂直
Best FitSize property is ignored,Fits the text to the control's rectangle
(Fonts grow larger with text size、变小)
Image图片
属性:
Image Type贴图类型(Put the picture typeTexture Type:Sprite 2D and UI)
Simple 简单
Preserve Aspect 保持贴图原始比例
Set Native Size 将贴图设置为原始尺寸
Sliced 切割
Fill Center 填充中部区域,If canceled, the middle area is transparent
Tiled 平铺
保持图片原始尺寸,从左下角重复多次填充空白
Filled 填充
可以呈现出从空白到完整填充的过程
Fill Amount(Smooth increase and decrease effect)
Set Native SizeSet the image local size
Slider
属性:
Fill Rect填充矩形区域
Handle Rect 手柄矩形区域
Direction 手柄方向
Min/Max Value 最小/最大值
Whole Numbers 整数数值
Game blood bar production——>
Input Field输入框
属性:
·Line Type行类型
Single Line单行
Muti Line Submit多行文本,回车提交
Muti Line NewLine 多行文本,回车换行
Caret Blink Rate 光标闪烁速度
Selection Color 选择的字符颜色
做UI之前要:
Canvas—>Canvas Scaler(组件)下UI Scale Mode选择Scale With Screen Size(Based on screen size)
Reference Resolution(参考分辨率) X 768 Y 1024
Table auto layout component Grid Layout Group
可实操,可用代码——>
void Start()
{
for(int i=0;i<4;i++)
{
for(int j=0;j<4;j++)
{
GameObject go = new GameObject(i.ToString() + j.ToString());
go.AddComponent<Image>();//添加UI元素
go.transform.SetParent(this.transform,false);//指定父物体
//false:Created game object,The world position is not used
}
}
}
效果图:
边栏推荐
- VS2013-调试汇编代码-生成asm文件-结构体内存布局-函数参数压栈-调用约定
- Using the color picker
- Add spark related dependencies and packaging plugins (sixth bullet)
- 详解构建mock服务最方便的神器——Moco
- 2022-08-01 Advanced Network Engineering (23) Advanced VLAN Technology - VLAN Aggregation, MUX VLAN
- PLSQL学习第三天
- foreach遍历删除元素问题总结
- 941 · 滑动拼图
- Rust学习:6.1_复合类型之切片
- Solve the problem that the win10win7win8 system cannot find the specified module and cannot register the desert plug-in
猜你喜欢
随机推荐
自动化测试框架Pytest(一)——入门
iwemeta元宇宙:一个娃娃卖9999元,泡泡玛特认为一点也不贵
941 · 滑动拼图
Complex AB experiment
Power function Exponential function Logarithmic function
【Rust指南】使用Cargo工具高效创建Rust项目 | 理解Rust特别的输入输出语句
解决win10win7win8系统找不到指定的模块,注册不了大漠插件的问题
初使jest 单元测试
[In-depth study of 4G/5G/6G topic-56]: L3 signaling control-5-radio bearer management
PLSQL学习第三天
winget包管理器
时序动作定位 | ASM-Loc:弱监督时序动作定位的动作感知片段建模(CVPR 2022)
ATH10传感器读取温湿度
foreach遍历删除元素问题总结
WooCommerce installation and rest api usage
placeholder 1
颜色选择器的使用
Quickly enter the current date and time
AFNetworking概述和4.0的实践
In the SQL SERVER database, if the data of the table is added, deleted, or modified, will the index of the table be recorded in the ldf log?