UGUI创建物体

简介:

1.创建一个UI画布

直接新建场景,右键Hierarchy窗口,选择UI选项,点击列表中出现的Canvas(画布)选项

d39a36e231c67ae97b82f72dcd1d0295.png-wh_

点击之后出现两个物体


9aff029b0c1e1cd6ae374371609da22d.png-wh_

CanvasUI的画布,我们的UI图片都会在这下面渲染。

EventSystemUI的事件系统,很多新手都会选择遗忘掉这个组件,结果后来做了一个按钮出来不能点击,原因就是这个物体被误删了。 

2. 创建一个Image组件

Canvas上右键,选择UI选项中的Image选项


eacdec6071bea2df2893e515f3f1173a.png-wh_

一个默认的Image图片出现在了游戏框之中 


1598748e5e9291945357ffb141c2652f.png-wh_

注意:UI的图片只会在Canvas下才能看得见,这里我将Image移除了Cansvas,镜头内的图片消失了 


8369e09ddf53d7464ac93820f1047c76.png-wh_

2.0 RectTransform组件参数说明

UIRectTransform组件中涵盖了位置,旋转,缩放,锚点等等信息

 


d791f3fa919a56c1ebb5b6ad227d7c10.png-wh_

WidthHeight:一般UI里面放大和缩小图片的宽度和高度都是通过这里来控制的,而不是直接调整缩放值

Anchors:锚点位置,屏幕的宽高变化时要让UI依然能按照预想的正常显示,就需要通过锚点来定位。具体见后续文章中的屏幕自适应部分内容。

Pivot:中心点,该属性定义图片的中心点位置,(0.5,0.5)改好为图片中心。若我们想左右拉长一个横条,想让它只在右边增长,修改中心店位置(00.5),中心点位在最左边,调整Width就会只看到横条在右方向的长度变化。

2.1 Image组件的参数说明

Unity大多用于图片显示的UI组件都会有基础的Image组件


bcf8c7bdc2d7581d1b900cb4fd815106.png-wh_

SourceImage:该UI显示的图片资源,注意这里只能支持Sprite类型的图片,后面会介绍Sprite类型的图片怎么设置。

Color:修改该图片的颜色。

Material: Unity支持自定义图片材质来实现复杂的效果,不填的话默认只用unity已经设置好的UI材质效果。在游戏设计中几乎不会修改这里的内容。

RaycastTarget: 勾选该选项后,该UI将会响应射线点击,鼠标点击到这个UI物体的时候事件管理器知道我们点击了什么物体,这个参数会和Button组件配合,完成我们的点击操作。

 

3.创建一个UI图片

导入一张图片,选择TextureType的类型为Sprite2D and UI)后,点击Apply。这时Unity会修改图片为Sprite类型的图片,只有这种类型才能放入Image组件中。TextureType的其他参数会放在之后的UI图集知识点中说明。



6a7d0ded2241ae50bb031870524e0af3.png-wh_

直接将图片拖入ImageSourceImage中,图片便渲染出来了,此时图片采用的像素是100X100的像素,只用点击Image新出来的按钮就可以设置为图片本身的像素尺寸。


287a6937fd5c45da6db57e344406c5fe.png-wh_

4.创建一个Button按钮

右键选择UI中的Button选项


ec84a4d8abb376d83d7c784f2891190c.png-wh_

创建出来的Button只有ButtonText两个物体,Textunity的文字显示组件,Button的功能本身和Text没有任何关联,因此这里可以将Text删除掉(UnityTextbutton一起创建主要是因为按钮带文字更加常见)


1cb1667085b0fc2c42c0ad5e8260bac5.png-wh_

Button物体上只有两个组件,一个组件是之前介绍过的Image组件,一个是按钮功能相关的Button组件。我们导入一张新的图进入工程,改变图片格式成Sprite格式后拖到Image上,然后点击SetNativeSize按钮修改RectTransform中的宽度高度和原图片相同。


c8837c7562a60b61f6914e7e92f1bb07.png-wh_

按钮UI显示了出来,运行游戏,点击这个按钮会发现UI颜色会变化,说明按钮功能生效了。


5f4b46d1ca83bb4c449b31aaab04cdce.png-wh_

4.1 Button组件参数说明

 

Interactable:是否开启按钮交互,若取消则按钮会变成DisabledColor选择的颜色,此时按钮不会响应点击操作。


fc9f87e5d660776290ffc97912a7a2d6.png-wh_


TargetGraphicButton组件绑定的Image组件,注意如果该项为空按钮点击事件将会失效,同时是有按钮绑定的Image组件勾选了RaycastTarget参数才能有点击效果。

Transition:按钮的点击效果类型,unity自带了3种类型,分别为Color
Tint(颜色变化),Sprite Swap(图片切换),Animation (动画变化)。不同类型对应的Normal XXXHighlighted XXXPressed XXXDisabled XXX,分别为按钮不点击时效果、鼠标移动到按钮时效果、点击时效果和未激活时效果。

OnClick(): 点击事件,可以关联点击按钮后的行为至我们自己写的代码中。

 




本文转自 宁金峰 51CTO博客,原文链接:http://blog.51cto.com/13243523/1976110,如需转载请自行联系原作者
相关文章
【ThreeJs】(1)四大组件:场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
【ThreeJs】(1)四大组件:场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
391 0
【ThreeJs】(1)四大组件:场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
|
10天前
|
前端开发 图形学
unity UGUI跟随3D物体的坐标转换
在 Unity 中实现 UGUI 元素跟随 3D 物体,关键是将 3D 物体的世界坐标转换为屏幕或画布坐标。通过 Camera.WorldToScreenPoint 方法,可将 3D 物体位置映射到屏幕上,再更新 UGUI 元素的位置。代码示例展示了如何使用该方法,使 UGUI 图像跟随 3D 模型,并提供文字显示、图像和线条的显示/隐藏功能。
|
10天前
|
图形学
Unity 获取鼠标位置下的UGUI或3D物体
本文总结了两种检测方法,分别用于UGUI和3D物体的检测。第一种方法`GetOverUIobj`专门用于检测鼠标悬停的UGUI元素,通过`GraphicRaycaster`实现。第二种方法`GetOverWordGameObject`则同时适用于UI和3D物体检测,利用`PhysicsRaycaster`进行射线检测。两者均返回悬停对象或null。
unity3dUGUI空对象实现射线检测
using UnityEngine; using System.Collections; namespace UnityEngine.UI { public class Empty4Raycast : MaskableGraphic ...
2473 0
|
4月前
|
JavaScript
ThreeJs通过DragControls实现物体拖动
这篇文章详细讲解了如何在Three.js中使用DragControls实现3D物体的鼠标拖动功能。
154 1
ThreeJs通过DragControls实现物体拖动
|
6月前
|
图形学
小功能⭐️解决Unity无法对一个物体上的所有材质球进行更改
小功能⭐️解决Unity无法对一个物体上的所有材质球进行更改
|
前端开发 JavaScript
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
326 0
点击物体就变颜色,我也有了神笔了(Unity3D)
OnMouseOver(),OnMouseDown(),OnMouseUp(),这三个函数只对3D物体触发事件
UGUI系列-点击图片生成物体(Unity3D)
今天给大家分享一个如何点击图片生成物体的脚本,可以把这个脚本稍微封装一下,以后也可以方便使用。 主要试用与点击图片时候响应事件,具体用法还要大家多多摸索
|
图形学
Unity在UI界面上显示3D模型/物体,控制模型旋转
Unity3D物体在UI界面的显示 本文提供全流程,中文翻译。 Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) Chinar —...
5211 0

热门文章

最新文章