Unity UGUI Raw Image中文详解-Chinar

15 篇文章 14 订阅

Chinar blog www.chinar.xin

Unity UGUI 完整系列教程 (Chinar中文图解)

Unity UGUI-Raw Image 组件


本文提供全流程,中文翻译。

Chinar 的初衷是将一种简单的生活方式带给世人

使有限时间 具备无限可能

Chinar —— 心分享、心创新!

助力快速掌握 Unity UGUI Raw Image组件的使用

为新手节省宝贵的时间,避免采坑!

Chinar 教程效果:
在这里插入图片描述
在这里插入图片描述



全文高清图片,点击即可放大观看 (很多人竟然不知道)


1

Presentation —— 介绍


  • Raw Image 组件是一个显示纹理贴图的组件,常用于与 RenderTexture 结合使用,映射相机画面
    Image 组件的区别是:

  • Image 显示Sprite 精灵图片;
  • Raw Image 可以显示任何纹理贴图。( 如:Texture 、Render Texture )

在这里插入图片描述

1.1 Attribute —— 属性


创建一个 Raw Image 组件看一下它的属性:

在Unity的 Hierarchy 面板上右键–>UI–>Raw Image
举个例子
在这里插入图片描述
选中我们创建的Raw Image对象

在这里插入图片描述
下面看一下每个属性的详细功能

属性功能
Texture用于显示的纹理贴图的引用
Color图片的颜色
Material渲染图像的材质
Raycast Target能否接收到射线检测
UV Rect控制 UI 矩形内的图像偏移和大小

1.2 Texture Import Setting —— 图片导入设置


为了在 Raw Image 组件上使用我们想要的纹理贴图,我们来导入一张图片到项目中

  • Image 不同的是 Raw Image可显示的是 Texture 类型
  • 刚导入的图片(也就是 Texture)默认是Default,所以无需设置,即可将图片添加到 Raw Image 组件上

举个例子
这是一张导入后未经处理的图片
在这里插入图片描述 在这里插入图片描述
可以直接拖拽到 Raw Image 组件的 Texture
在这里插入图片描述


2

Use —— 使用相机映射

为了便于理解,我们来看几个 Raw Image 的常用案例

2.1 Map the picture of a camera —— 映射一个相机的画面

原理:在 Raw Image 对象上面显示指定相机所拍摄到的画面

  • 第一步:创建一个 Raw Image 对象
  • 第二步:在 Project 资源管理面板 右键创建一个 Render Texture 渲染纹理

举个例子在这里插入图片描述

  • 第三步:选择想要映射的 Camera
  • 将创建的 Render Texture 分别添加引用,到我们所需要映射的 CameraRaw Image 组件中

在这里插入图片描述

使用效果:
在这里插入图片描述


2.2 Play video —— 播放视频


我们可以使用 Raw Image 组件实现视频的播放

  • 第一步:创建我们的 Raw Image 对象,创建 Render Texture
  • 第二步:在 Raw Image 对象上添加 Video Player 组件
  • 第三步:导入视频文件并添加到组件响应位置
  • 第四步:将 Render Texture 添加到 Raw ImageVideo Player 组件上

举个例子
在这里插入图片描述

然后运行Unity 即可播放视频

在这里插入图片描述

至此:您已完美征服了 UGUI - Raw Image

其他组件请继续学习,贴心的 Chinar 为您准备了 UGUI 全套教程


Unity UGUI 完整系列教程 (Chinar中文图解)


支持

May Be —— 开发者,总有一天要做的事!


拥有自己的服务器,无需再找攻略

Chinar 提供一站式《零》基础教程

使有限时间 具备无限可能!

先点击领取 —— 阿里全产品优惠券 (享受最低优惠)


Chinar 免费服务器、建站教程全攻略!( Chinar Blog )


Chinar

END

本博客为非营利性个人原创,除部分有明确署名的作品外,所刊登的所有作品的著作权均为本人所拥有,本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的,请及时和本博主进行联系,留言,Email: ichinar@icloud.com

对于经本博主明确授权和许可使用文章及内容的,使用时请注明文章或内容出处并注明网址

  • 14
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值