书签 分享 收藏 举报 版权申诉 / 28
上传文档赚钱

类型Unity-3D增强现实开发实战第4章-Unity3D-的用户界面基础课件.ppt

  • 上传人(卖家):三亚风情
  • 文档编号:3371112
  • 上传时间:2022-08-24
  • 格式:PPT
  • 页数:28
  • 大小:1.58MB
  • 【下载声明】
    1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
    2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
    3. 本页资料《Unity-3D增强现实开发实战第4章-Unity3D-的用户界面基础课件.ppt》由用户(三亚风情)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
    4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
    5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
    配套讲稿:

    如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制:

    部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词:
    Unity 增强 现实 开发 实战 Unity3D 用户界面 基础 课件
    资源描述:

    1、第第4 4章章 Unity3D Unity3D 的用户界面基础的用户界面基础知识目标能力目标任务引入2022年8月9日第1页知识目标知识目标了解了解 Canvas 对象对象了解了解 UGUI 图形用户界面图形用户界面 了解了解 UGUI 控件控件2022年8月9日第2页掌握掌握 Unity3D Unity3D 的视图功能的视图功能掌握掌握 Transform Transform 和和 Rect Transform Rect Transform 组件组件掌握掌握 UGUI UGUI 基本控件的应用基本控件的应用2022年8月9日第3页l软件的用户图形界面是认识和使用软件的基础,Unity3D 软

    2、件具有强大的UGUI用户界面。与传统的GUI相比,它具有使用灵活、界面美观、支持个性化定制等特点,并且还支持多语言本地化;l本章主要介绍Unity3D软件的用户界面,特别是UGUI 的控件使用方法,与大家一起敲开UGUI开发的大门。2022年8月9日第4页4.1 Unity UGUI 简介 GUI(Graphic User Interface)图形用户界面是一种通图形方式显示的用户操作界面;NGUI 是一个老牌的 Unity UI 插件解决方案,NGUI 是严格遵循 KISS(Keep It Simple,Stupid.)原则并采用 C#语言编写的 Unity 插件,提供强大的 UI 系统和时

    3、间通知框架。在 Unity4.6 以后,Unity 推出了新的 UGUI,包括后面的 Unity5.x都采用了这一新的系统。2022年8月9日第5页4.2 Canvas 和 Rect Transform 2022年8月9日第6页Canvas(画布)是 UGUI 最基本的部分,所有的 UGUI 对象都依赖于 Canvas,Canvas 是所有 UI 对象的根元素。图 4-1 新建一个场景并保存图 4-2 新建并保存一个名为 Canvas 的场景2022年8月9日命名为 Canvas,保存在 Assets/Scenes 目录下。第7页选择 Game Object 菜单下的 UI-Canvas,在

    4、Scene 视图中单击 2D 按钮切换为平面视图。图 4-3 切换为 2D 视图2022年8月9日第8页双击 Hierarchy 视图下的 Canvas,使画布居中显示。选中 Canvas 后观察Inspector 面板。图 4-4 Canvas 组件的属性面板2022年8月9日第9页可以看到 Canvas 在场景中是一个矩形,在 Scene 视图中选中 Canvas 可以看到矩形周围有四个点表示可以拖动。图 4-5 Canvas 的渲染2022年8月9日Canvas 组件的第一个属性为 Render Mode(渲染模式),它的值为 Screen Space Overlay,表示画布的大小是由

    5、屏幕尺寸决定的,运行时画布将充满整个屏幕,并且当设备的分辨率变化时,Canvas 的大小也会相应变化。如果把 Render Mode 调整为 World Space,就会发现 Canvas 的大小可调了。但 Screen Space-Overlay 是比较常用的渲染模式,所以还是将 Render Mode设置为 Screen Space-Overlay。第10页通常情况下UI 由设计师给出。UI 图的分辨率是固定的,如果设备的分辨率不一样,可能会导致 UI 错乱、重叠等问题。图 4-6 canvas 的缩放2022年8月9日在 Canvas Scaler 组件中,将 UI Scale Mode

    6、 调整为 Scale With Screen Size。Reference Resolution 调整为UI 图的分辨率,如 1366 像素 x768,Screen Match Mode 设置为 Expand,如图 4-6所示第11页2022年8月9日 Rect Transform 是一种用于所有 UI 元素的新 Transform 组件;Rect Transform 拥有常规的 Transform 组件位置、旋转和缩放,也具有宽度和高度用于指定矩形的尺寸;Rect Transform 有 Anchors(锚点)和 Pivot(中心点)的概念,旋转和缩放将围绕 Pivot 中心点发生变化;锚点

    7、在场景视图中显示为 4 个小三角形手柄,如果一个 Rect Transform 的父项也是一个 Rect Transform,那么可以将子 Rect Transform锚定到父 Rect Transform 上。第12页2022年8月9日如果 UI 元素锚定到父中心,元素保持与中心的固定偏移;如果 UI 元素锚定到父级右下角,元素保持与右下角固定偏移;在 Inspector 中,可以在 Rect Transform 组件的左上角找到 Anchor Presets 按钮,从这里可以快速选择一些最常见的锚定选项。可以将 UI 元素锚定到父项的边或中间,或者与父大小一起展开,水平和垂直锚定是独立的。

    8、图 4-7 预设的中心点第13页2022年8月9日第14页4.3 EventSyste在创建 Canvas 的时候,在 Hierarchy 视图中会自动添加一个 EventSystem。图 4-8 EventSystem(事件系统)2022年8月9日EventSystem 的 Inspector 面板中有两个重要的组件,第一个是 Event System,第二个是 Standalone Input Module。图 4-9 EventSystem 的属性面板Event System(事件系统)是用来操作输入、射线以及发送事件的。事件系统的责任就是在一个 Unity 场景中处理事件。一 个 场

    9、景 中 只 能 有 一 个EventSystem。Standalone Input Module 组件是系统提供的标准输入模块,继承自 Base Input Module。Base Input Module 是一个基类模块,负责发送输入事件(单击、拖曳、选中等)到具体对象。第15页2022年8月9日4.4 UGUI 控件的简单介绍创建一个文本,在 Hierarchy视图中的 Canvas,选择 UI-text。图 4-10 UI Text(文本组件)第16页2022年8月9日在 Hierarchy 视图中的 Canvas 下出现了名为 Text 的子物体,如图 4-11。查看 Text 的 I

    10、nspector 面板,可以看到里面有一个 Text 组件,如图 4-12。图 4-11 Text(文本对象)图 4-12 Text(文本组件)第17页2022年8月9日第一个属性为 Text,如图 4-13 所示通过修改其中的值就可以修改文本的内容。Character 属性段中可以修改字体格式,Paragraph 中可以设置段落格式,如图 4-14 所示。图 4-13 在 Text 组件中定义文本样式图 4-14 文本在 Canvas 上的效果第18页2022年8月9日通过 Image 组件来创建一个图片。右键 Hierarchy 视图中的 Canvas,选择 UI-Image。创建完成以后

    11、为一个白色矩形,这个矩形为图片的容器,决定了图片的大小和位置。图片的内容需要在 Inspector 面板中的 Source Image 中填写。图 4-15 Image 第19页2022年8月9日在项目中导入一张图片,如图4-16 所示。选中图片,在 Inspector 界面中将 Texture Type 修改为 Sprite(2D and UI),然后单击 Apply,如图 4-17。图 4-16 导入图片图 4-17 编辑图片的贴图类型第20页2022年8月9日再次选中 Hierarchy 视图中的 Image,在 Inspector 中单击 Source Image 后的圆圈,选择刚导入

    12、的图片资源,如图 4-18 所示。图 4-18 将贴图应用到 Image 组件中第21页2022年8月9日调整Image 的尺寸在图 4-18 的左下角导入的图片上提示中,可以看到原图片的大小为 535 像素 x300 像素,因此将 Image 容器图片的宽高也调节为同样大小,如图4-19 所示。图 4-19 设置 Image 对象的宽高第22页2022年8月9日 右键 Hierarchy 视图中的 Canvas,选择 UI-Button。可以看到在 Hierarchy 下的 button 中还有一个 Text 子物体。图 4-20 Hierarchy 层级关系和 Button 下的 Text

    13、 子物体第23页2022年8月9日Image 组件用来修改 Button 的贴图,Button 组件用来调节按钮动画和按钮事件。Interactable 控制按钮是否可用;transition 控制按钮的过渡方式;Color Tint 是颜色变化;Sprite Swap 是贴图变化;Animation 是动画过渡。On Click()为单击事件。图 4-22 Button 组件的各项设置在 Scene 中让 Image 的中心和 Button 的中心对齐,如图 4-23 所示。图 4-23 中心对齐第24页2022年8月9日在Image的Inspector界面中将Image无效化,如图 4-2

    14、4 中所示。图 4-24 设置一个对象为非活跃状态选择 Button,单击 On Click()下的“+”号,如图 4-25 所示。图 4-25 添加事件处理函数第25页2022年8月9日如 4-26 中单击 Game Object 右侧的圆圈,选择 Image。图 4-26 选择操作对象第26页2022年8月9日选择 Function 为 Game Object-SetActive(bool),如图 4-27。图 4-27 选择设置活跃性的方法单击新产生的方框,如图 4-28。图 4-28 设置参数为 True第27页2022年8月9日4.5 本章小结本章小结 图 4-29 本章知识结构第28页

    展开阅读全文
    提示  163文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:Unity-3D增强现实开发实战第4章-Unity3D-的用户界面基础课件.ppt
    链接地址:https://www.163wenku.com/p-3371112.html

    Copyright@ 2017-2037 Www.163WenKu.Com  网站版权所有  |  资源地图   
    IPC备案号:蜀ICP备2021032737号  | 川公网安备 51099002000191号


    侵权投诉QQ:3464097650  资料上传QQ:3464097650
       


    【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。

    163文库