Unity基础-UGUI

Canvas

渲染顺序

遵循刷油漆规则(画家算法)

依次由Render CameraDepth值、Sorting Layer先后顺序、Order in Layer值决定

canvas有三种渲染方式

1.screen space-overlay :理解为在屏幕上贴一层膜,在一切物体之上

2.screen space-camera:附着在camera上

3.world space:相当于一个GameObject 可被遮挡

射线检测

GraphicRaycaster

必须添加在Canvas上,因为它依赖Canvas。UI元素必须具有继承自Graphic的组件,也就是可视的UI元素

Ignore Reversed Graphics —— 忽略反方向的图形,图形面向前方时才参与射线检测

Blocking Objects —— 屏蔽对象不参与射线检测(渲染模式不为ScreenSpaceOverlay时起作用)

1.None-不屏蔽;

Two D-屏蔽2D物理对象(具有2D碰撞体);

Three D-屏蔽3D物理对象(具有3D碰撞体);

2.All-屏蔽所有

Blocking Mask——屏蔽层Layer(渲染模式不为ScreenSpaceOverlay,且Blocking Objects不为Node时起作用)

PhysicsRaycaster、Physics2DRaycaster

建议不要用在ScreenSpaceOverlay模式的Canvas上

必须添加在具有Camera组件上,因为这两个依赖Camera

建议Camera不要和Canvas在同一物体上

PhysicsRaycaster——只对3D物理对象产生影响,Camera的Projection尽量选择Perspective(透视)模式

Physics2DRaycaster——只对2D物理对象产生影响,Camera的Projection尽量选择Orthographic(正交)模式

EventMask——射线作用层,可以用来做事件屏蔽。

CanvasGroup

它不仅可以管理Canvas,还可以控制Canvas内的UI元素

Alpha——统一控制自身及没有忽略的子物体透明度

Interactable——统一控制自身及没有忽略子物体,继承自Selectable组件是否可交互

Blocks Raycasts——统一控制自身及没有忽略子物体是否可以封锁事件的射线。这意味着我们可以自由控制事件射线是否可以穿透UI元素

Ignore Parent Groups——忽略父物体对自己以及子物体的影响

注意:屏蔽按钮事件不推荐采用 添加灰色蒙蔽panel的方式,会增加Draw Call

Image

Source Image(图像源):纹理格式为Sprite(2D and UI)的图片资源(导入图片后选择Texture Type为Sprite(2D and UI))。

Color(颜色):图片叠加的颜色。

Material(材质):图片叠加的材质。

Raycast Target(射线投射目标):是否作为射线投射目标,关闭之后忽略UGUI的射线检测。

Image Type(图片显示类型):

Simple(基本的):图片整张全显示,不裁切,不叠加,根据边框大小会有拉伸。

Sliced(切片的):图片切片显示,在Project页面选中图片,切换为Sprite(2D and UI)模式后,点击Sprite Editor进入图片裁切模式,将图片裁切为上图的形状,使用Sliced模式后,根据图片边框拉伸,图片的四个角会保持原状,而1和4部分会随着图片的横向拉伸而拉伸,2和3部分会随着图片的纵向拉伸而拉伸,图片的中间部分会拉伸5进行填充。

Fill Center(填充中心):是否填充九宫格中心区域。

Tiled(平铺的):若图片已经过裁切,则使用Tiled模式后,根据图片边框拉伸,图片的四个角会保持原状,而1和4部分会随着图片的横向拉伸而拉伸,2和3部分会随着图片的纵向拉伸而拉伸,图片的中间部分会用5进行平铺填充。若图片未裁切,则使用Tiled模式后,根据图片边框拉伸,图片保持原大小不做变化,只是用自身平铺填充。

Filled(填充的):根据填充方式、填充起点、填充比例决定图片显示哪一部分。

Fill Method(填充方式):分为水平、垂直、90度圆、180度圆、360度圆。

Fill Origin(填充起点):根据填充方式不同有所变化。

Fill Amount(填充比例):0是完全不显示,1是完全显示。

Preserve Aspect(锁定比例):针对Simple模式,勾选之后,无论图片的外形放大还是缩小,都会一直保持初始的长宽比例。

Raw Image

Textture:指定要显示的图片,注意:图片类型可以是任何类型

Color:设置图片的主颜色

Material:设定Image控件的渲染材质

Raycast Target:决定是否可接收射线碰撞事件检测(取消勾选不会挡住下层UI事件)

UV Rect:可以让图片的一部分显示在RawImage组件中,x、y属性用于控制UV左右、上下偏移,W、H用于控制UV的重复次数。

Text

Text:显示的文本

Font:字体

FontStyle:样式

LineSpacing:行间距,单位是行高

Rich Text:是否支持HTML标签。支持b、i、size、color等标签。

Alignment:对齐方式

Horizontal Overflow:水平方向溢出模式,默认是Wrap即允许自动换行,Overflow模式即直接溢出,不换行。

Vertical Overflow:垂直方向溢出模式,Turncate截断模式。

Best Fit:控件大小一定的前提下字体的自适应:

Min Size:即字体最小能小到多少,配合Best fit使用。

Max Size:即字体最大能大到多少,配合Best fit使用。

color:改变颜色

Button

Interactable(是否可用):勾选,按钮可用,取消勾选,按钮不可用,并进入Disabled状态。

Transition(过渡方式):按钮在状态改变时自身的过渡方式:

Color Tint(颜色改变)

Normal Color(默认颜色):初始状态的颜色。

Highlighted Color(高亮颜色):选中状态或是鼠标靠近会进入高亮状态。

Pressed Color(按下颜色):鼠标点击或是按钮处于选中状态时按下enter键。

Disabled Color(禁用颜色):禁用时颜色。

Color Multiplier(颜色切换系数):颜色切换速度,越大则颜色在几种状态间变化速度越快。

Fade Duration(衰落延时):颜色变化的延时时间,越大则变化越不明显。

Sprite Swap(图片切换)

Highlighted Sprite(高亮图片):选中状态或是鼠标靠近会进入高亮状态。

Pressed Sprite(按下图片):鼠标点击或是按钮处于选中状态时按下enter键。

Disabled Sprite(禁用图片):禁用时图片。

Animation(执行动画)(后面有详细介绍)

Normal Trigger(默认触发器):默认状态触发。

Highlighted Trigger(高亮触发器):选中状态或是鼠标靠近会进入高亮状态。

Pressed Trigger(按下触发器):鼠标点击或是按钮处于选中状态时按下enter键。

Disabled Trigger(禁用触发器):禁用时触发。

Target Graphic(过渡效果作用目标):可以是任一Graphic对象。

Auto Generate Animatior(自动生成动画控制器):

点击此按钮,会自动生成一个包含了以上四种状态以及四种动画的animatior,然后选中此按钮,ctrl+6进入动画编辑界面,分别对以上四种动画进行调动就可以了。

OnClick():按钮点击事件触发集合。

Slider

Background

代表了进度条的底色,其实质是处于Sliced模式下的UGUI Image,因为只有Sliced模式才能保证进度条两端的弧度。当Slider的值为0时,呈现的全是Background的颜色。

Fill Area代表Slider值不为0时、非0部分的颜色。

Fill Area其实是个空的UGUI物体,之所以强调它是UGUI,是因为它有Rect Transform,并且其由Rect Transform确定的范围将是进度条可以活动的最大范围。

Fill作为Fill Area的子物体才是这部分的实质,同样是Sliced模式下的UGUI Image。

Handle Slide Area代表了Slider上的进度钮。

和Fill Area一样,Handle Slide Area本身也只是确定范围的UGUI空物体。

Handle作为其子物体,是一个Simple模式下的UGUI Image。

Slider组件

Interactable:是否允许Slider交互的bool变量

Transition:和UGUI Button部分是一样的,大家可以往前几讲翻一翻;但这里的区别在于Target Graphic设成了Handle,也就是说这是针对进度钮的、不同条件下的颜色光照。

Navigation:和UGUI Button中的用法相同。Slider和Button之间可以向相互“导航。”被Navigation当下选中的Slider或者Button会处于Highlighted-高亮状态。

Fill Rect:该进度条的已填充部分所绑定的Rect组件。能拖进这里的必须要有Rect Transform,即UGUI物体。

Handle Rect:该进度条的进度钮。

说明了Fill 和Handle都不是绝对的,大家可以试着互换一下二者;笔者不敢试,太邪恶了。

Direction:Slider的演进方向,默认是(Left To Right)从左往右刷满,还可以选的有:Right to Left(从右往左)、Bottom To Top(从底至顶)、Top To Bottom(从顶到底)

Min/Max Value:设定进度条数值的极限值,默认最小为0,最大为1,支持Float类型。

Whole Numbers:勾选之后,Slider的Value值只能取整数,通常用于Max Value > 1的情况。

Value:Slider的当前值。

On Value Changed()

Toggle

Transitioin:和Button组件一样请自行翻看

Is On(选中状态):此Toggle的选中状态,设置或返回为一个bool。

Toggle Transition(切换过渡):None为无切换过渡,Fade为切换时Graphic所指目标渐隐渐显。

Group(所属组合):这里指向一个带有Toggle Group组件的任意目标,将此Toggle加入该组合,之后此Toggle便会处于该组合的控制下,同一组合内只能有一个Toggle可处于选中状态,即便是初始时将所有Toggle都开启Is On,之后的选择也会自动保持单一模式。

On Value Changed(状态改变触发消息):当此Toggle选中状态改变时,触发一次此消息。

Toggle Group组件

带有此组件的物体,可以同时管理多个Toggle,将需要被管理的Toggle的Group参数指向此Toggle Group便可。

Allow Switch Off(是否允许关闭):Toggle Group组默认有且仅有一个Toggle可处于选中状态(其管辖的所有Toggle中),如果勾选此属性,则Toggle Group组的所有Toggle都可同时处于未选中状态。

InputField

Text Component(文本组件):此输入域的文本显示组件,任何带有Text组件的物体。

Text(文本):此输入域的初始值。

Character Limit(字符数量限制):限定此输入域最大输入的字符数,0为不限制。

Content Type(内容类型):限定此输入域的内容类型,包括数字、密码等,常用的类型如下:

Standard(标准类型):什么字符都能输入,只要是当前字体支持的。

Autocorrected:自动修正

Integer Number(整数类型):只能输入一个整数。

Decimal Number(十进制数):能输入整数或小数。

Alpha Numeric(文字和数字):能输入数字和字母。

Name(姓名类型):能输入英文及其他文字,当输入英文时自动姓名化(首字母大写)。

Email Address:邮箱

Password(密码类型):输入字符和数字,并显示为星号。

Pin(密码类型):只能输入数字,并显示星号

Custom:定制的

Line Type(换行方式):当输入的内容超过输入域边界时:

single Line(单一行):超过边界也不换行,继续延伸此行,输入域中的内容只有一行;

multi Line Submit(多行):超过边界则换行,输入域中内容有多行;

multi Line Newline(多行):超过边界则新建换行,输入域中内容有多行。

Placeholder(位置标示):此输入域的输入位控制符,任何带有Text组件的物体。

注意:Placeholder对应的Text也为此输入框的提示语显示:(例如Enter text...为提示语,当输入框内容为空时,提示语可见,内容不为空时,提示语不可见)

Caret blink rate(光标闪烁速度):标示输入光标的闪烁速度。

Hide mobile input(手机端隐藏输入):这个没测试过有什么效果。

On Value Changed:值改变时触发消息。

End Edit:结束编辑时触发消息。

ScrollView

Content:滑动内容区。

Horizontal:代表水平方向滚动,vertical代表竖直方向。

MovementType: ScrollView的滑动模式

Unristricted:不限制

Elastic:有弹性

Clamped:限制的,无弹性

Inertia: 鼠标放下后还可以动一点点。

Deceleration Rate:惯性速率。

scrollbar:可以根据需要的自定义,也可以不要。

Spacing:是间距。这里我做了一个单列纵滚动条,所以只用考虑y轴间距。

Layout布局管理器

Grid Layout Group: 横竖布局

Padding  ——  间隔

CellSize  ——  子物体大小

Spacing  ——  子物体之间的间隔

Start Corner  ——  子物体排列的角度

Start Axis      ——  子物体排列方向

Child Alignment  —— 子物体整体位于什么方位

Constraint  约束  ——  Flexible灵活的( 按照父物体长宽自动横竖行 )    Fixed Column Count  指定列数      Fixed Row Count 指定行数

Horizontal(Vertical) Layout Group横(竖)向布局

child force expand  ——  是否强制拉伸长宽到父物体大小,

单是一个布局组件很难实现想要的效果,还可以再添加一个Content Size Fitter 组件配合使用(只是用来过滤尺寸,没有设置的选项默认为0处理,比如选择Min  Width  ,但是子物体上没有设置过Min  Width  ,那么它就没有宽度)。

Content Size Fitter  内容大小过滤 组件

Horizontal Fit    ——  子物体横向适配(Unconstrained 不受约束  Preferred Size  首选尺寸  Min Size 最小尺寸)

Vertical Fit        ——  子物体竖向适配

Layout Element布局元素 组件  ( 子物体上需要添加 )

Min  Width        ——  最小宽度( 不受父物体宽度影响 )

Min  Height      ——  最小高度

Preferred Width  ——  首选宽度( 最大不能超过父物体宽度 )

Preferred Height ——  首选高度

Flexible Width    ——  灵活宽度 ( 只有0和大于0两种  大于0的话会自动补全宽度)

Flexible Height ——  灵活高度

注:横竖布局下的子物体大小是统一的,不能单独设置大小。没有单个横竖布局灵活,但是设置简单一些。

Content Size Fitter内容大小过滤 组件

一般和Layout Group配合使用  用法刚才已经写过了,再写一次加深印象。

Aspect Ratio Fitter宽高比过滤  组件

Aspect Mode  ——  宽高比模式 ( Width Controls Height 宽控制高(高度不可修改)  Height Controls Width 高控制宽    Fit In Parent 宽或高和父物体一样,另一个小于父物体  Envelope Parent 宽或高和父物体一样,另一个包围父物体 )

Aspect Ratio  ——  宽高比例

UIcontroller

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

public delegate void IntDelegate(int value);

public class UIcontroller : MonoBehaviour {

    public Text maxScore;

    public Text score;

    public GameObject panel;

    public Button startBtn;

    public static IntDelegate ScoreChange;

    public static IntDelegate OverHander;

    public static IntDelegate maxSetScore;

    private const string prefsScore = "MaxScore";

    public static bool GameStart = false; 


    private void Awake()

    {

        ScoreChange += SetScore;

        OverHander += GameOver;

        maxSetScore += SetMaxScore;

    }

    private void OnDestroy()

    {

        ScoreChange -= SetScore;

        OverHander -= GameOver;

        maxSetScore -= SetMaxScore;

    }

    void Start () {

        startBtn.onClick.AddListener(OnStartClick);

        maxScore.text = "最高分数:" + PlayerPrefs.GetInt("MaxScore");


    }

    public void SetScore(int value)

    {

        score.text = "分数:" + value;

    }

    public void SetMaxScore(int value)

    {

        int max = PlayerPrefs.GetInt("MaxScore");

        if (max < value)

        {

            max = value;

            PlayerPrefs.SetInt("MaxScore", max);

            PlayerPrefs.Save();

        }     

    }

    public void GameOver(int score)

    {


        panel.SetActive(true);

        Time.timeScale = 0;


    }

    public void OnStartClick()

    {


        GameStart = false;

        Time.timeScale = 1;

        Application.LoadLevel(0);

        Enemy.ScoreEnemy(0);


    }


}

UIManager

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

public delegate void IntDelgate(int value);

public class UIManager : MonoBehaviour {

    public Text ScoreText;

    public GameObject deadPanel;

    public Text maxScore;

    public Text curScore;

    public Button restartBtn;

    public static IntDelgate ScoreChange;

    public static IntDelgate OverHandler;

    private const string prefsStr = "MaxScorePrefs";

    public static bool GameStart=false;

    private void Awake()

    {

        ScoreChange += SetSocore;

        OverHandler += GameOver;

    }

    private void OnDestroy()

    {

        ScoreChange -= SetSocore;

        OverHandler -= GameOver;

    }

    void Start () {

        restartBtn.onClick.AddListener(OnReStartClick);

    }

    public void SetSocore(int score)

    {

        ScoreText.text = "本局得分:" + score;

    }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,158评论 4 370
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,600评论 1 307
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,785评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,655评论 0 220
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,075评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,002评论 1 225
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,146评论 2 318
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,918评论 0 211
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,671评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,838评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,318评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,636评论 3 263
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,343评论 3 244
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,187评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,982评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,126评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,934评论 2 279