zoukankan      html  css  js  c++  java
  • 关于Unity中UI中的Mask组件、Text组件和布局

    一、Mask组件

    遮罩,Rect Mask矩形Mask(Rect Mask2D组件),图片Mask(Mask组件)(图片Mask的透明度不为0的部分显示子图片,为0的部分不显示子图片)

    Rect Mask矩形Mask:

    1.创建一个Canvas

    2.配置Canvas,上一章讲过

    3.在Canvas下面创建一个空子节点,取名Mask,专门用来做遮罩处理

    4.在Mask节点下面再创建一个UI的Image子节点,拖Sprite类型的贴纸到Image子节点中,记得点击Set Native Size

    5.给Mask节点加一个Rect Mask2D的组件,这时候Mask下面的孩子只能在Mask节点大小的矩形内可见,这就是Rect Mask

    图片Mask:

    1.创建一个Canvas

    2.配置Canvas,上一章讲过

    3.在Canvas下面创建一个Image类型的UI子节点,取名Image_Mask,专门用来做图片Mask处理

    4.把图片Mask图片拖进Image_Mask中,这种图片是中间一个灰色圆形,其他部分都是透明的。

    5.在Image_Mask节点下挂载一个Mask组件

    6.在Image_Mask节点再创建一个Image的UI子节点,把要显示的图片拖进去,这时候图像显示一个圆形的样子。

    7.虽然是个圆圆的头像,但是边缘有一点毛边,看起来不是很好看,可以在边缘再加一个框

    8.创建一个avator的空节点在Image_Mask节点上面,在avator节点下面创建一个Image子节点,把相框贴图拖进去。就显示一个完整的头像和框。

    二、布局

    1.创建一个Canvas

    2.配置Canvas,上一章讲过

    3..在Canvas下面创建一个空子节点叫做Layout

    4.在Layout节点下面创建许多的子Image的UI节点,依次把贴图拖进去。

    5.给Layout节点挂载Vertical Layout Group组件,这个组件可以使得Layout节点下面的子图片都垂直排放

    垂直:

    Vertical Layout Group组件属性:

    Spacing 10:每个图片之间的间距为10

    Padding :图片和各条边界的距离

    Child Alignment:子节点的排布位置,上下左右

    Child Force Expand:图片不会随着整体缩放而产生拉伸

    水平:

    Horizontal Layout Group组件

    垂直水平排列:

    Grid  Layout Group组件

    1.Cell Size:每个子节点的大小

    2.Spacing:每个子节点的间距

    3.Start Center:开始的位置,第一个元素的位置

    4.Start Axis:元素的主轴线

    5.Child Alignment:对齐方式

    6.Constraint:指定布局的行或列

    三、Text组件

    1.创建一个Canvas

    2.配置Canvas,上一章讲过

    3..在Canvas下面创建一个Text的UI节点

    4.Text节点的font可以拖进TTF字体文件

    Text组件属性:

    1.Text 显示的文本
    2.Font 使用的文字的字体;
    3.FontStyle: 文字字体样式;
    4.LineSpacing: 行间距;
    5.Alignment: 对齐方式;pi'pe6: Color: 字体的颜色;
    7.Horizontal Overflow水平溢出:有两个属性值,Wrap裁剪(按单词来裁剪的),Overflow显示全部
    8.Vertical 垂直溢出:Truncate裁剪,Overflow显示全部
    9.RichText 多格式文本: 把这段写在Text属性框中<color=blue></color>,<color=blue>hello world</color>里面的文字是蓝色的。
    10.Best Fit 最佳匹配方式

    使用脚本代码来修改Text,挂载在Canvas上面:

    Text txt;

    void Start(){

      this.txt=this.transform.Find("Text").GetComponent<Text>();

      this.txt.Text="Hello World";

      this.txt.fontStyle=FontStyle.Bold;

    }

    Unity的强大之处是可以在运行的时候修改属性,运行结束后会恢复。

  • 相关阅读:
    Flex 布局语法教程
    2017年总结的前端文章——border属性的多方位应用和实现自适应三角形
    html 里 checkbox里 只要选中就会自动添加checked=“checked”么?
    jQuery遍历DOM
    checkbox 全选操作
    ubuntu下安装jdk
    ubuntu下安装nodejs
    nodejs express route 的用法
    聊天室业务分析
    一般使用场景
  • 原文地址:https://www.cnblogs.com/HangZhe/p/6875317.html
Copyright © 2011-2022 走看看