【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

这篇具有很好参考价值的文章主要介绍了【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

转载请注明出处:🔗https://blog.csdn.net/weixin_44013533/article/details/130808689

本篇基本是大纲性质,参考价值不大,只有最后一小节“利用render Texture实现小地图功能”花了点时间,可以看看,不过也用到了上面的canvas、UI image等知识、以及input等脚本功能,也算一个小练手吧

倒是csdn一个插图小技巧运用得炉火纯青了:图片链接后加入# =50%x可以按百分比控制图片显示大小,注意等号前一定要空一格,还可以添加布局如#pic_center =40%x

![在这里插入图片描述](https://img-blog.csdnimg.cn/1cc73da871fc40e38e457f184306afc6.png#pic_left =40%x)

全文主要参考:

  • 官方手册 Unity UI
  • 【客学院】Unity3D入门教学 + 附c#编程基础

一 Canvas

【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

1.1 三种Render Space渲染空间 screen

【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

1.2 canvas scaler画布缩放器

画布缩放器组件用于控制画布中 UI 元素的整体缩放和像素密度。此缩放会影响画布下的所有内容,包括字体大小和图像边框。
参见官网手册

1.3sprite

sprite editor
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

sprite mode:single,multiple(做图形组合,逐帧动画)
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

1.4 sprite packer

packing tag

1.5 unity目录

package、asset

参考:
官方手册 Unity 的 Package Manager
浅谈Assets——Unity资源映射

1.6 RuleTile Tilemap

  • 报错:2d Game Kit The type ‘RuleTile’ exists in both Assembly-CSharp, and Unity.2D.Tilemap.Extras
    还是通过改类名完成的 参考Unity 导入项目报错

1.7 sprite packer

【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
Sprite Packer 已弃用
请注意 Sprite Packer 在 Unity 2020.1 和更新版本中已弃用,并且将不再作为精灵打包模式的可用选项。现有已使用 Sprite Packer 的项目仍然可以继续使用它,但是在 2020.1 以后创建的任何新项目在打包纹理时将默认使用 Sprite Atlas 系统。
官方手册

右键project>asset>2d>sprite atlas
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

sprite atlas使用目的就是减少draw call调用,提高运行效率
以后还会使用动态加载sprite,用到project assets 中resource目录?(结合prefeb?)

packing tag不知道怎么用

1.8 sorting layer

【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
这几个layer区别是啥
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
注意canvas 的render mode:overlay直接覆盖,它本身也有sort order但是是独立的分层方式。

Order in Layer顾名思义,就是Sorting Layer的内部排序,这样配合Sorting Layer就是两级的排序,可以解决大部分情况的渲染顺序需求。
小结: 渲染排序级别:Camera的Depth > Canvas的Sorting Layer > Canvas的Order in Layer
Unity中SortingLayer、Order in Layer和RenderQueue的讲解

二 rect transform

参考官方手册:矩形变换

2.1 pivot 中轴 中心点

【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
注意Rect transform和transform的区别,只有在canvas上的image
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

2.2 anchor 锚点

快捷键:
ctrl+anchor 平移四个anchor
shift+anchor 等比例缩放对象
ctrl+shift+anchor 平移对象和anchor
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

2.3 uGUI源代码

uGUI源代码github

三 EventSystem

官方APIEventSystem
2019有这个api,2021不知道放哪个位置了。
官方手册

在eventSystem中,inspector底部有这个信息框,显示鼠标等事件
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

3.1 event组件

  • Event System事件系统管理器
  • Standalone Input Module标准接收器
  • Touch Input Module触屏接收器
  • Event Trigger事件触发器
  • Graphic Ray caster界面组件的射线检测
  • Physic/ Physic2 D Raycaster场景物体的射线检测

3.2 TextMeshPro

【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

3.3 Event Trigger事件触发的介绍与使用

【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
!!!!学习C#的委托和事件机制
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

3.4 Event Trigger事件触发的介绍与使用——事件接口类型

【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

四 UI组件分类

可交互组件(继承Selectable类)和可视组件
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

4.1 Image

图像 (Image)

前提:sprite需要将导入的图片Type改为Sprite类型才能被UI使用
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
UI-Image有四种类型
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

  • Simple 原始图片
  • Sliced 切割图片
  • Tiled 平铺图片
  • Filled 填充图片

其中:
preserve aspect:外观保护,等比缩放
set Native Size:

4.1.1sprite editor

【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

4.1.2 slice类型

进入sprite editor拖动绿条纹,改变border边框大小
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
可以看到sliced类型,拉伸时边框不会变形,这种类型图片拉伸效果就比simple的好看

参考 Image.Type.Sliced

【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】
fill center :是否显示中间的切片

4.1.3 Tiled

显示切开的 Sprite,并将其可调大小的部分平铺而非拉伸。

平铺图像的行为方式与 Sliced 图像相似,区别在于将图像的可调大小部分重复而非拉伸。对于拉伸时外观不理想的精细 UI 图形,此功能很有用。

4.1.4 Filled

填充图像将显示 Sprite 的一部分,RectTransform 的其余部分保持透明。
例如,可将其用来显示圆形或线形状态信息,如技能cd、血条和进度条等。
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

详细内容还是参考其他博客或官方手册吧,这里只是简单过一下
Unity技巧 #5 – 圖像 Image
官方手册 9 切片精灵

4.2 raw Image

raw Image控件向用户显示非交互式图像。此图像可用于装饰或图标之类的用途,还可以从脚本更改图像以便反映其他控件的更改。该控件类似于图像 (Image) 控件,但为动画化图像和准确填充控件矩形提供了更多选项。但是,图像控件要求其纹理为精灵,而原始图像可以接受任何纹理。

用途:

  1. 网络加载图片(动态加载)
  2. 播放视频或者动态图(两种特殊纹理:Render Texture、Movie Texture)
4.2.1 render texture

渲染纹理是一种 Unity 在运行时创建和更新的纹理。要使用渲染纹理,请使用 Assets > Create > Render Texture 创建一个新的渲染纹理,并将其分配给 Camera 组件中的 Target Texture。然后,即可像使用常规纹理一样在材质中使用渲染纹理。

官方手册 渲染纹理

4.2.2 利用render Texture实现小地图功能

目标:实现小地图追踪人物移动,按M键切换小地图高度

使用的是官方第三人称demo,参照下面的参考链接创建顶部摄像头、创建Render Texture并绑定到这个摄像头的target Texture,再用UI raw Image展现这个Render Texture,即可实现。

我在这基础上,添加了摄像机跟随和按“M”键切换顶部摄像机高度的功能,详细参见下面代码。
【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】

public class MiniMap : MonoBehaviour
{
    public GameObject gameObject; //这个gameObject绑定到机器人

    // Update is called once per frame
    void Update()
    {
        var position = gameObject.transform.position;
        float newHeight= this.transform.position.y;
        if (Input.GetKeyDown(KeyCode.M))
        {
            newHeight = this.transform.position.y > 15 ? 10f : 30f;
        }
        
        this.transform.position = new Vector3(position.x, newHeight,
            position.z);
    }
    
}

参考: 教你3个步骤实现Unity小地图(知识点:RenderTexture、Mask、shader)

五 总结

初步过了下uGUI,先前小地图也曾提过多次,这次花了点时间实现了下,还是有成就感的。
接下来进入动画、纹理、特效、镜头等学习。文章来源地址https://www.toymoban.com/news/detail-475171.html

到了这里,关于【学习笔记】Unity基础(七)【uGUI基础、利用render Texture实现小地图功能】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Unity基础】ugui画布篇(个人学习)

    ui是必学的东西,这里主要学习ugui的常用控件,而学习必须要养成查看源码的好习惯。。。。 知识参考:https://docs.unity3d.com/cn/2021.3/Manual/ 提前说明,这是个人学习笔记,不是教程。 Canvas故名思意就是UI的画板,主要是控制UI的绘制的。在unity的ugui中,所有UI都必须是Canvas的子物

    2023年04月08日
    浏览(25)
  • Unity利用UGUI RawImage组件制作转场动画

    最近接到了一个unity全景图的小项目,由于在不同的场景之间转场时直接转会太过生硬,因此要求有个Alpha转场的动画。于是想到两种可行的方案: 一、UGUI方案 用UGUI显示当前屏幕纹理,然后进行场景切换,切换好之后,在把UGUI隐掉。这种方案适合任何场景的切换。 先看效果

    2024年02月05日
    浏览(30)
  • 【unity shader】水体渲染基础-基于texture distortion的流体流动材质

    当液体静止时,它在视觉上与固体没有太大区别。 但大多数时候,我们的性能不一定支持去实现特别复杂的水物理模拟, 需要的只是在常规的静态材料的表面上让其运动起来。我们可以对网格的 UV 坐标实现动态变化,从而让表面的纹理效果实现变形的动态变化。 1.1. uv实时

    2024年02月03日
    浏览(44)
  • 用Unity3D制作FPS游戏的学习笔记————人物移动、利用鼠标实现视角转动和人物跳跃(含人物悬空不掉落修复)

    前言: 这是我第一次发布文章,此文章仅供参考,我也是刚学习接触untiy,在制作项目的过程中将有用的写下来记一记,以便自己之后能回头看看,各位大佬轻点喷,若有错误请麻烦积极提谢谢各位。该文章参考自B站UP主蔡先森_rm-rf发布的 【第一人称射击游戏教程2.0【已完结

    2024年04月27日
    浏览(41)
  • Unity UGUI1——基础组件概述

    ​ UGUI 是 Unity 引擎内自带的 UI 系统,官方称之为:Unity UI ​ 是目前 Unity 商业游戏开发中使用最广泛的 UI 系统开发解决方案 ​ 它是基于 Unity 游戏对象的 UI 系统,只能用来做游戏 UI 功能 ​ 不能用于开发 Unity 编辑器中内置的用户界面 ​ Unity 最初版本 ~ Unity4.6 版本: ​

    2024年02月10日
    浏览(31)
  • Unity UGUI3——三大基础控件

    ​ Image 是图像组件,是 UGUI 中用于显示精灵图片的关键组件 ​ 除了背景图等大图,一般都使用 Image 来显示 UI 中的图片元素 Source Image:图片来源 图片类型必须是“精灵 Sprite”类型 Color:图像的颜色 Matreial:图像的材质 一般不修改,会使用 UI 的默认材质 Raycast Target:是否

    2024年02月09日
    浏览(43)
  • Unity Render Streaming使用方法,WebRTC的基础搭建使用

    Unity渲染流包含构建在Unity Render Streaming之上的公共 API 和项目示例。可以使用Unity Render Streaming包快速开发一个点对点的流媒体解决方案。 该软件包提供的功能包括视频流、音频流和操作控制。 Render Streaming所需环境:WebRTC,nodejs, 我们先安装WebRTC 参考链接:Install package | W

    2024年02月15日
    浏览(26)
  • Unity UGUI的PhysicsRaycaster (物理射相当于利用泛型函数保存了类型信息线检测)组件的介绍及使用

    这是在Datadog公司任职的Kevin Gosse大佬使用C#编写.NET分析器的系列文章之一,在国内只有很少很少的人了解和研究.NET分析器,它常被用于APM(应用性能诊断)、IDE、诊断工具中,比如Datadog的APM,Visual Studio的分析器以及Rider和Reshaper等等。之前只能使用C++编写,自从.NET NativeAOT发

    2024年01月22日
    浏览(46)
  • Unity技术手册-UGUI零基础详细教程-Canvas详解

    点击跳转专栏=Unity3D特效百例 点击跳转专栏=案例项目实战源码 点击跳转专栏=游戏脚本-辅助自动化 点击跳转专栏=Android控件全解手册 点击跳转专栏=Scratch编程案例 点击跳转=软考全系列 点击跳转=蓝桥系列 专注于 Android/Unity 和各种游戏开发技巧,以及 各种资源分享 (网站、

    2024年02月08日
    浏览(32)
  • Unity技术手册-UGUI零基础详细教程-Image图片

    往期文章分享 点击跳转=《导航贴》- Unity手册,系统实战学习 点击跳转=《导航贴》- Android手册,重温移动开发 本文约3千字,新手阅读需要7分钟,复习需要2分钟 【 收藏随时查阅不再迷路 】 众所周知,人生是一个漫长的流程,不断 克服困难 ,不断反思前进的过程。在这个

    2023年04月09日
    浏览(22)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包