unity3D之UI

  • 一、canvas
    • 1.canvas介绍
    • 2.创建canvas
  • 二、RawImage和Image
    • 1.image介绍
    • 2.RawImage介绍
    • 3.创建
  • 三、text文本
    • 1.text介绍
    • 2.属性
    • 3.创建
  • 四、button
    • 1.button介绍
    • 2.创建
  • 五、场景切换
    • 1.添加脚本
    • 2.演示

一、canvas

1.canvas介绍

(1)Canvas属于Unity的UGUI,UGUI提供了强大的可视化编辑,大大提高了GUI的开发效率。
(2)Canvas是所有UI组件的父物体,也就是说每一个UI组件都必须在Canvas下,作为Canvas的子物体,当你创建一个UI控件时,如果在Hierarchy下没有Canvas组件的话,Unity会帮你自动创建一个Canvas,并将你的UI控件置于Canvas下,Unity也会自动创建EventSystem,这个对象用来确定诸如鼠标输入的事件,这对 UI 组件来说也至关重要,比如按钮、精灵图片、图片等等

2.创建canvas

(1)右键“层级”页面,选择UI–>画布,即canvas

(2)在“检查器”这里可以调整canvas尺寸、大小、位置的等等

二、RawImage和Image

1.image介绍

Image图片组件,是UGUI组件中常见的基础组件,主要用来显示图片效果。

其他的一些组件都会用到Image组件,比如说Button组件、Scrollbar组件、Dropdown组件、InputField组件、Panel组件、ScrollRect组件,其他的组件的子对象中也会用到Image组件。

2.RawImage介绍

(1)RawImage 组件是一个用来显示纹理的组件,常常跟Render Texture结合使用,用来映射相机的画面。或者用来截图显示等。
(2)与Image不同的地方在于,Image只能显示Sprite图片,而RawImage可以显示任何纹理贴图。
(3)在Unity的Hierarchy视图中选择“Create→UI→Raw Image”新建一个Raw Image组件。

3.创建

(1)首先创建一个pannel。在”层级”面板右键–>UI–>面板。在画布上做东西都在pannel上,所以需要创建一个pannel

(2)在pannel下创建image和rawImage
(3)在rawimage中导入图片做背景

(3)这里有一个UV Rect

(4)如果把W改为10,就会出现这样

(5)再改一下H就会宽度上变化

(6)调整W和H为1,然后点击下图Rect Tool(快捷键T)让图片铺满
(7)导入Image图片,这里需要添加Sprite (精灵图片)才可以。首先需要选中图片,在Inspector检查工具里选中texture type,下拉选项中选定sprite(2DandUI),就可以添加到Image了

(8)在网上自行下载按钮的图片,最好是背景为透明的那种

(9)然后将其转化为精灵图片
(10)转化完之后图片会显示一个小三角,说明转化成功

(11)如果图片有多个按钮需要点击Inspector里的Sprite Edit(需要先在菜单栏的windows里下载)

(12)打开资源管理器后,在Packages里找到2D Sprite点击安装,就可以用Sprite Edit了

然后对图片进行裁剪

三、text文本

1.text介绍

(1)Text文本,是为了向用户展示非交互式的文本信息。

2.属性

(1)Text 用于显示的文本
(2)Font 文本的字体
(3)Font Style 文本的样式(正常、加粗、斜线)
(4)Font Size 字体的大小
(5)Line Spacing 文本行之间的间距
(6)Rich Text 是否支持富文本,富文本是带有标记标签的文本,增强文本的显示效果
(7)Alignment 文本的水平和垂直对齐方式
(8)Align By Geometry 是否以当前所显示的文字中获得的最大长宽(而不是字体的长宽)进行对齐。
(9)Horizontal Overflow 文字横向溢出处理方式,可以选择Warp隐藏或者Overflow溢出
(10)Vertical Overflow 文本纵向溢出的处理方式,可以选择Truncate截断或者Overflow溢出
(11)Best Fit 忽略Font Size设置的文字大小,自适应改变文字大小以适应文本框的大小
(12)Color 文本的颜色
(13)Material 用来渲染文本的材质,可以通过设置材质,让文本拥有更加炫酷的效果。
(14)Raycast Target 是否可以被射线检测,通常情况下可以关闭,因为文本最好只用来显示。

3.创建

(1)在层级右键并在pannel下创建text选择UI–>Text

(2)需要注意的是,text默认字体不支持中文显示,需要在控制面板中导入。控制面板–>外观和个性化–>字体,然后选择一个中文字体,我这里选择黑体常规,然后直接拖入unity的assets。

(3)然后进入unity右键拖入的字体

(4)输入即可

四、button

1.button介绍

(1)Button是UGUI里面的一个交互UI组件。
也是在开发中经常遇到的一个组件。
通过点击完成一系列的操作:执行某些事件、动作、切换状态等。

2.创建

(1)在Unity的Hierarchy视图中点击“Create→UI→Button”创建一个Button组件:
(2)在button子项目text中输入“切换模式”并设置字体

(3)重点是On Click

(4)单击加号
(5)把text拖到这里


(6)右面功能选择string text

(7)在输入“登陆成功”即可

五、场景切换

1.添加脚本

(1) 添加登录退出场景切换(在属性面板下的onclick,指定点按钮时,对应的功能)
①代码:

①代码:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;public class Demo : MonoBehaviour
{public void Login(){SceneManager.LoadScene("1.FristClasses");}public void ExitGame(){Application.Quit();}}

(2)Button代码设置点击事件(实现点击让RawImage消失)
①代码:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class FunctionDisappear : MonoBehaviour
{private GameObject GetRawImage;void Start(){GetRawImage = GameObject.Find("RawImage");}// Update is called once per framevoid Update(){}void AddListenerToButtun(){GetComponent<Button>().onClick.AddListener(DisableRawImage);}void DisableRawImage(){GetRawImage.SetActive(false); }
}

2.演示

(1)场景如下所示

(2)随便下一个棋子。

(3)现在为单人模式,点击切换模式会切换到双人模式

unity3D之UI相关推荐

  1. unity3d 如何UI优化和减少DC(DrawCall)

    首先我们需要知道什么是DC也可以叫做DrawCall,DC就是每次Cpu传给Gpu的过程就是一个DC 这个时候就会有人问为啥要减少DC  减少DC能帮助我们什么, 1.为啥减少DC 就是减少CPU传给 ...

  2. Unity3D实现 UI图片拖拽旋转和拖拽移动

    拖拽UI旋转 using UnityEngine; using System.Collections; using UnityEngine.EventSystems; public class Rot ...

  3. Unity3D之UI设计

    UI程序设计 首先先说一下UI程序设计, 差不多是玩家打开一个游戏最先看到的东西, 差不多也是玩家最不在意的东西. 对开发者来说, 几乎每个游戏模块都与 UI 有联系, 处理不当 UI 就是恶梦. 宽 ...

  4. 【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦. 一.前言 ...

  5. Unity3d开发MOBA游戏类《王者荣耀》记录(起)

    最近在公司搬砖事情不多,因为最近在玩鹅厂游戏<王者荣耀>,是一款目前市场上最火爆的moba类手游,所以抽空想做一个类似的demo~本文纯灌水记录一下开发计划,客户端打算采用Unity3d, ...

  6. Unity3D+SignalR实现实时数据传输

    在前面的文章中写过如何搭建SignalR服务端和客户端,也写过如何将Unity3D应用嵌入到WPF中,问题是SignalR服务端和WPF客户端实时通信很简单,SignalR服务端怎么与Unity3D应 ...

  7. 视频教程-Unity3D实战入门之第三人称射击游戏(TPS)-Unity3D

    Unity3D实战入门之第三人称射击游戏(TPS) 6年程序开发经验,精通C/C++/C#编程. 曾担任过Unity3d游戏开发主程和Unity3d游戏开发讲师,熟悉Unity3d的UI系统.物理引擎 ...

  8. Unity3D实战入门之第三人称射击游戏(TPS)-伍晓波-专题视频课程

    Unity3D实战入门之第三人称射击游戏(TPS)-327人已学习 课程介绍         这是一套第三人称射击游戏开发的入门基础课程. 本课程以一款小型的第三人称射击游戏为案例,手把手教你如何搭建 ...

  9. Unity3D UGUI学习笔记

    本文主要记录的是:Unity3d中UI设计方面的知识,重点记录各UI组件的使用,属性设置. U3D的UI控件放在GameObject>UI目录下. 所有添加的控件都会放在Canvas目录下(下图 ...

最新文章

  1. 优化你的CPU来做深度学习
  2. NutzWk 5.2.4 发布,Java 微服务分布式开发框架
  3. 多元经验模态分解_【Applied Energy最新原创论文】一个基于多元搜索引擎数据的多尺度油价预测方法...
  4. mysql :The user specified ... does not exist 报错
  5. HTML基础(part6)--常用标签之列表
  6. mysql json 创建索引_MySQL · 最佳实践 · 如何索引JSON字段
  7. 学习使用Ansj分词工具(一)
  8. Python知识点入门笔记——特色数据类型(字典)
  9. SQL数据库基础练习题及答案
  10. Win7系统自带 计算器 详细使用方法
  11. 快递柜项目,面向对象
  12. 将视频的以flv格式转换mp4格式
  13. 项目管理 - 团队成员无法按期完成任务怎么办?
  14. android 说出密码,小米路由器微信好友认证功能实际体验
  15. 关于《小萝莉的猴神大叔》些许体会
  16. 微信机器人康小博来了!!!
  17. SCI分区方法---JCR期刊分区及其检索方法
  18. android图形框架之surfaceflinger分析(一)
  19. 题解报告:hdu 1570 A C
  20. Android微信新版全自动抢红包助手

热门文章

  1. SOAPUI 简单使用
  2. 《Android 3D游戏开发技术宝典——OpenGL ES 2.0》.(吴亚峰).[PDF]ckook
  3. excel表格怎么求和一行
  4. polyfill了解吗?
  5. MySQL 新增修改和删除
  6. php页转向,301页面转向 php
  7. redis写入mysql 使用redis做mysql缓存
  8. 开源linux_适用于Linux和开源迷的12本小说书
  9. 2021高考金华八中的成绩查询,2021年浙江金华中考成绩查询时间 金华中考成绩查询入口...
  10. 八、 数据库的数据查询