Unity SpriteRender和Image的区别

最新推荐文章于 2024-05-15 23:40:49 发布
最新推荐文章于 2024-05-15 23:40:49 发布
阅读量2.4k 收藏 8
点赞数 4
分类专栏： Unity Unity引擎 文章标签： unity 游戏开发 2d游戏 游戏引擎 c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l783929897/article/details/118257259
版权

Image组件

渲染
  • 基于CanvasRender和Image组件进行渲染
  • 默认材质渲染队列为Transparent Geometry，开启模板测试，渲染顺序是基于Canvas的Order In Layer层级，由Canvas逻辑进行管理
  • 默认的渲染网格为正方形，更多的片元着色器操作
  • 可以实现基于图集打包和网格数据合并，在此Canvas下实现渲染批处理
交互
检测逻辑
  • 根据Unity层级面板顺序把Image组件加入队列，通过UGUI的EventSystem的Update来每帧遍历所有Canvas下需要检测的对象。通过Image组件的IsRaycastLocationValid方法来检测是否能穿透点击区域，中间的测试包含渲染图片的Alpha值，以及距形区域的交点测试。可以通过开关组件上的Raycast Target选项来控制是否需要响应对应的检测逻辑。
事件响应
  • 可以通过挂载UGUI自身继承IEventSystemHandler接口的组件，对相应组件添加事件来实现事件逻辑的响应，如Button,Toggle
使用

通常应用于UI界面，由于是UGUI自身的组件，提供了更多UI组件交互支持，而且Image组件统一交由Canvas进行管理，渲染顺序可以通过Unity检视面板层级直接看到，方便开发。完美的UI自适应方案，可以通过Canvas Scaler来实现渲染分辨率大小的自适应，以及基于RectTransform锚点位置来控制Image组件渲染网格的大小和位置。还有交互逻辑是通过二维的交点测试，性能更加优化。

总结

  • 完美适配UI界面的开发，当然，因为他就是UGUI的组件。 = =。

SpriteRender组件

渲染
  • 基于SpriteRender组件进行渲染
  • 默认材质渲染队列为Transparent Geometry，渲染顺序由所在渲染队列以及组件面板上的Order In Layer层级进行管理，如果在同一层级，则通过和摄像机的距离也就是Z轴顺序进行渲染
  • 默认的渲染网格根据图片透明通道，无像素着色的地方会被裁切掉，形成不规则网格，更多的顶点着色器操作
  • 可以实现基于图集打包和网格数据合并实现渲染批处理
交互
检测逻辑
  • 为GameObject挂载BoxCollider2D，通过Unity自身的射线进行逻辑检测
事件响应
  • 通过给GameObject挂载BoxCollider2D,实现MonoBehaviour上的方法来实现响应逻辑，如OnMouseDown。当然这样的方式大概不够优雅，我们可以通过编写一个实现所有MonoBehaviour事件方法的EventListener类再挂载到GameObject上为相应的脚本添加事件
使用

因为Mesh不会根据UI自适应进行拉伸，但是可以通过其Z轴来改变渲染顺序，通常应用于平面特效和3D场景中的平面物体。在UI画面中可以通过控制Order In Layer层级来控制渲染的层级，基于其默认的渲染队列，可以很好的和UI的层级区分开。在3D场景中，在和3D物体同一个渲染队列的情况下，可以很好的通过动画控制Z轴来实现与3D物体的遮挡关系。因为是Sprite所以可以实现基于图集和网格合并的批处理

总结

除了UI画面哪都好用，当然在你需要其自建网格和批处理渲染的情况下。

Unity UI 系统--Canvas
azurecell的专栏
01-10 2217
Canvas是所有UI 元素的容器,  是一个带有Canvas组件的GameObject,所以UI元素都必须是一个Canvas的子节点。否则无法渲染，如果有过NGUI使用经验的同学可以类比NGUI中的Panel，而Canvas下面的每个元素上都有一个Canvas Render可以类比NGUI上的DrawCall,这个Canvas Render稍后再说 当你创建一个UI元素时，例如一个Imag
【零基础入门unity游戏开发——2D篇】SpriteRenderer精灵渲染器组件
最新发布
向宇
03-31 1046
【零基础入门unity游戏开发——通用篇】SpriteRenderer精灵渲染器组件
Unity2D:Sprite和Image的区别
热门推荐
a435931517的专栏
11-27 3万+
Sprite和Image区别 面试的时候被问到Sprite和Image的区别，我当时就感觉这有什么区别呢？ 后来查了下资料，还是自己无知啊！ 下面就具体的区别做个笔记 Image 和Sprite 区别 下图是一个Sprite 在Unity中可以在Hirerarchy层右键->2D Object里找到Sprite，那么他们的属性面板有什么区别呢？如下图所示： 渲染上： Image 通过U...
Unity SpriteRender 和Image的区别
冰块药丸的博客
12-11 1万+
1. 首先，spriterender是sprite显示图片需要的组件，通常来说sprite应该是transfrom，也就是世界坐标，而image被归类为UI组件，使用的是recttransfrom，使用UI坐标。 2.spriterender（以下简称sr）控制大小是使用scale，也可以将sr的DrawMode改为Sliced，修改其width和height调整大小。而image除了可以用
SpriteRenderer和Image组件的区别
汤圆一碗的博客
08-24 2020
SpriteRenderer和Image组件的区别
UGUI中Image和Sprite Renderer的区别
linxinfa的专栏
04-07 5042
Image是再2D空间上渲染，附加的组件是Rect Transform Image作为画布的子元素，由Canvas Renderer组件渲染，因为附加由Rect Transform组件，所以可以通过Width/Height属性进行像素单位的调整，还可以通过Scale组件调整比例。 2D精灵是通过Sprite Renderer组件在3D空间上渲染，附加的组件是一般的Transform，可以通过Sca...
[Unity] Unity Sprites：SpriteRenderer 与 CanvasRenderer（UI 图像）
unity尧明的博客
10-24 6511
下次你在使用sprite时，请考虑以下问题。如果你只有几个sprite，使用你喜欢的任何东西。如果你有成百上千的精灵，请重读本帖。使用 profiler 和 frame debugger 来了解正在发生的事情。避免使用透明度。如果你的预算允许，可以尝试用不透明的替代品来取代精灵。避免在屏幕上渲染大的sprite，因为会发生更多的overdraw。你可以在场景视图中通过选择 overdraw 作为渲染模式来轻松检查 overdraw 问题。这对粒子系统至关重要。
Unity SpriteRender 实现Fill效果
正经的时候都在打游戏
12-06 7958
之前自己写过一个Sprite2D实现Fill的效果的Shader。结果写的很烂自己也不是很满意，今天偶然发现原来这件事，Unity已经替我们做好了，真是太囧了。 方法： 【1】新建一个SpriteRenderer，直接将一个Sprite拖进场景里就能实现这步 【2】新建一个Material 【3】将默认的Shader替换成Sprities/Fill这个Unity内建Shader
Unity 2D SpriteRenderer filled Shader实现
略懂PS的呆毛王的博客
07-01 2275
2D图片SpriteRenderer支持类似UGUI的Image Filled填充功能
Unity Render入门
不断努力向上攀登的路，比站在顶峰更加让人热血沸腾！
05-15 765
在unity中渲染相关的组件是和关联的，比如我们常见的3D模型中的MeshRender，UI中的RenderCanvas等都是和Render相关联的，相信在unity的学习过程中，一定看到过非常多和Render相关的内容，那让我们学习一下这部分把。Unity组件入门篇总目录----------
Unity 使用SpriteRenderer和TextMeshPro制作血条
cuijiahao的专栏
12-18 3023
在UGUI模式下可以用Image的填充来制作血条，但是Image和Text放在一起会增加渲染批次，所以想了一个办法是在场景里用Sprite和3dTextMeshPro来制作血条，这样可以减少渲染批次，具体方法如下 1、场景里创建一个血条的底板 2、创建血条，DrawMode设置为Sliced 3、血条的图片设置为左对齐 4、创建3dTextMeshPro 5、导入一个ttf字体，创建TextMeshPro字体 6、将刚才创建的字体拖到fontasset下 ...
unity3D如何实现2D sprite，3D物品和UI图片的拖拽效果
helloxiaohetx的博客
05-06 3716
【Unity学习笔记】 （一）如何实现2d sprite和3D物品的拖拽效果 1.调节camera >- Projection到Orthographic模式 Unity camera projection有两种模式： 第一种是perspective：透视，多用于3D，遵循近大远小的透视原理 第二种是orthographic：平视，多用于2D，可以通过调节size来改变大小，（ps：1920*1080的size是5.4） 而且orthographic的屏幕坐标系和鼠标坐标系可以直接..
Unity2D：Sprite和UI Image的区别
宁静致远
01-05 2万+
http://blog.u3dgames.cn/unity/2016-07/Unity-Sprite-VS-Image.html Unity3D最初是一个3D游戏引擎，而从4.3开始，系统加入了Sprite组件，Unity也终于有了2D游戏开发的官方解决方案。4.6更是增加了新的UI系统uGUI，使得使用Unity开发2D游戏效率非常高。 那么对于从事2D游戏开发的同学来说，想必都
学习在于折腾之Unity的sprite和image
leanerU的博客
10-09 2447
  今天在测试某一些功能的时候，明白了一些sprite和image的区别，以及苦恼了一阵子的关于图片替换的问题。 在Unity中，将图片直接拖入Scene界面中，Unity会自动给予图片一个Sprite组件，将它默认为精灵（我的理解是用作2D的图片，不过似乎3D中也可用，暂时不明。） 当有了sprite组件，位置就以transform而不是Rect transfrom，这时候是以游戏界面而不...
Unity中Sprite和UI Image的区别
coffeecato的个人博客
11-14 2万+
coffeecato写在前面： 本文确实不错，作者用以说明自动生成网格的示图非常具有代表性，从drawcall的生成过程分析性能开销的重点，引出了overdraw和达到GPU像素填充率限制的原因，从中也可以看出作者对这个主题的理解颇有深度。查看作者的个人自述，居然是个2012年毕业的小伙子，后生可畏啊！翻译本文对自己也是个考验。 英文水平捉急，如果错误请多多指正。原文：UNITY SPRITES
unity---spriteRender进度条
学海无涯
12-02 1579
1.create---shader Shader "Custom/SpriteFill" { Properties { _MainColor("Color",Color) = (1,0,0,1) [PerRendererData] _MainTex("Base (RGB) Trans (A)", 2D) = "white" {} _Angle("Angle",Range(0,360)) = 360 } SubSh...
在Unity的UGUI系统里使用Renderer的显示层级研究 (三) Canvas与Renderer混合显示的测试
fjjaylz的博客
03-16 5501
文章目录1. WorldSpace与三维物体的混合显示2. ScreenSpace-Overlay与三维物体的混合显示2.ScreenSpace-Camera与三维物体的混合显示 在第二节测试了Canvas的sortingOrder的功能，使用上基本与三维物体无异，但是在与三维物体混合显示的时候这个sortingOrder相互之间是否存在关系？ 这一节就来测试一下。 在第一节我做出了一个推论：三维...
Unity2d组件 Sprite Renderer
云淡风轻
08-27 2万+
一、问题今天在研究Unity官方案例2D Roguelike时，遇到了一个问题： 在生成地板(Floor)和四周的围墙(OuterWall)后，再创建障碍物(Wall)，则障碍物在地板的下面无法显示。 二、解决方案在地板和障碍物的Prefab时，用到了Sprite Renderer组件。需要添加Sorting Layers , Floors和Items。 然后在地板(Floor)的Pref
Unity 根据Sprite 宽高比设置Image 尺寸
2301_79311694的博客
03-19 554
【代码】Unity 根据Sprite 宽高比设置Image 尺寸。
unity sprite 的遮挡关系
03-21
<think>好的，用户想了解Unity中Sprite的遮挡关系及如何处理，特别是设置层级或排序规则。我需要先回忆相关的Unity知识，并结合提供的引用内容来组织回答。 首先，根据引用[1]和[2]，SpriteRenderer的Sorting Layer和Order in Layer是关键属性。Sorting Layer用于不同层的渲染顺序，而Order in Layer调整同一层内的顺序。需要解释这两个属性的作用，并给出设置方法。例如，Sorting Layer可以创建不同的层级，如Background、Characters等，层级高的覆盖层级低的。Order in Layer数值越大，渲染越靠后，显示在上层。 接下来，引用[4]提到Transparency Sort Mode设置，通过坐标轴控制遮挡。例如，Y轴设为1时，下方物体遮挡上方物体，适合2D游戏的纵深效果。这部分需要详细说明如何在Project Settings中调整，并举例说明应用场景。 然后，引用[3]中提到SpriteRender和Image的区别，以及Z轴的使用。虽然在2D中通常用Sorting Layer和Order，但3D场景中可能需要调整Z轴来影响渲染顺序。需要说明在3D混合场景中的注意事项，避免混淆。 用户可能需要实际操作的步骤，比如在Inspector中设置Sorting Layer和Order in Layer，或者通过脚本动态调整。例如，当角色移动时，动态修改Order in Layer，以实现正确的遮挡效果。这部分可以结合代码示例，说明如何获取组件并修改属性。 还需要注意常见问题，比如层内顺序冲突或坐标轴设置错误。例如，如果Transparency Sort Mode设置不当，可能导致遮挡不符合预期，需要检查Graphics设置。 最后，总结处理遮挡的几种方法，并强调根据项目类型选择合适的方式。比如纯2D游戏使用Sorting Layer和Order，而2.5D可能需要结合坐标轴调整。 生成的相关问题需要涵盖性能优化、与其他组件交互、混合场景处理等，帮助用户进一步学习。</think>在Unity中，Sprite的遮挡关系主要通过**渲染层级控制**和**坐标轴深度判断**两种方式实现。以下是具体设置方法及规则： --- ### 一、基础层级控制 1. **Sorting Layer** - 用于定义不同层级的渲染顺序，层级越靠后的Sorting Layer会覆盖前面的层级。 - 设置步骤：`Sprite Renderer组件 → Sorting Layer → 新建或选择现有层级` - 示例： ```plaintext [Sorting Layer顺序] Background (0) → Midground (1) → Foreground (2) ``` *层级高的Foreground会遮挡Midground和Background*[^2]。 2. **Order in Layer** - 在同一Sorting Layer中，数值越大的Sprite渲染越靠后，显示在上层。 - 设置步骤：`Sprite Renderer组件 → Order in Layer → 输入整数值` - 示例： $$ \text{Order in Layer值: 0 (下层) → 1 → 2 (上层)} $$ --- ### 二、坐标轴深度控制（适用于2.5D场景） 通过**Transparency Sort Mode**调整遮挡关系： 1. 设置路径：`Edit → Project Settings → Graphics → Transparency Sort Mode → Custom Axis` 2. 修改坐标轴参数（如Y轴为1）： - 物体会根据Y坐标值判断遮挡，**数值小的物体（靠下）会覆盖数值大的物体（靠上）**[^4]。 - 公式化逻辑： $$ \text{遮挡优先级} = \text{坐标轴值} \times (-1) $$ --- ### 三、混合场景的注意事项 - **3D与2D混合时**： 使用Z轴控制渲染顺序（需确保物体在同一个Sorting Layer），例如靠近摄像机的物体Z值更小，显示在上层[^3]。 - **动态调整**： 可通过代码实时修改`Order in Layer`实现移动时的遮挡变化： ```csharp // 角色移动时动态调整层级 void Update() { SpriteRenderer renderer = GetComponent<SpriteRenderer>(); renderer.sortingOrder = (int)(transform.position.y * -10); // Y轴越大层级越高 } ``` --- ### 四、常见问题排查 | 现象 | 解决方案 | |---------------------|----------------------------| | 遮挡关系与预期相反 | 检查Sorting Layer顺序和Order in Layer数值[^1] | | 坐标轴设置无效 | 确认`Transparency Sort Mode`已设为Custom Axis | ---
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值