Unity:如何将UI图片拉伸到画布的相对大小而不过度拉伸？

在Unity中，可以通过使用9宫格技术来将UI图片拉伸到画布的相对大小而不过度拉伸。9宫格是一种将图片分为9个部分的技术，其中四个角不会被拉伸，四个边会按比例拉伸，而中间的部分会平铺填充。

要实现这个效果，可以按照以下步骤进行操作：

将图片导入到Unity项目中，并将其设置为UI Image组件的Sprite属性。
在Inspector面板中，将Image组件的Image Type属性设置为"Simple"。
在Image组件的Inspector面板中，点击"Set Native Size"按钮，使图片显示为原始大小。
在Image组件的Inspector面板中，点击"Generate Sprite"按钮，生成一个新的Sprite。
在Sprite Editor中，将图片分割为9个部分，确保四个角不会被拉伸，四个边会按比例拉伸，而中间的部分会平铺填充。
在Image组件的Inspector面板中，将Image Type属性设置为"Sliced"。
调整Image组件的RectTransform组件，使其适应画布的相对大小。

通过以上步骤，可以将UI图片拉伸到画布的相对大小而不过度拉伸。这种技术通常用于创建可伸缩的UI元素，如按钮、面板等。

腾讯云相关产品和产品介绍链接地址：

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

unity3d-UGUI

内容 UGUI暂时没有Tween组件基础控件 Canavas(画布) 简介画布，绘制UI元素的载体，所有元素必须在Canavas之下。...属性 Render Mode(渲染方式) Screen Space-Overlay覆盖模式：UI元素将绘制在其他元素之前，且绘制过程独立于场景元素和摄像机设置，画布尺寸由屏幕大小和分辨率决定。...UI Scale Mode(UI缩放模式) Constant Pixel Size:像素大小始终不变，即一个100100的图片在任何分辨率下都占用100100的像素。...Scale With Screen Size：不关心图片的实际像素大小，而只关心Width及Height值，这个值如果是1000，那么100高度的图片在任何分辨率下都只占用屏幕1/10的尺寸（一般移动端会使用这种方式...Anchor锚点：UI元素的四个顶点与锚点的间距保持不变。锚点总是相对于父级，不能超越父物体范围。

2.8K3 0

UnityNGUI的使用

NGUI 做UI的框架,第三方插件基础组件简介 1.Widget相当于unity中的空物体 2.Anchor锚点(用于做UI自适应) 3.Panel画布 4.ScrollView可滑动区域...字体制作器 UI Root UIRoot用于缩放UI ScalingStyle缩放模式：来进行UI大小的自适应Flexible大小不变,Constrained进行大小自适应,ConstrainedOnMobiles...使用自适应可以在不同分辨率下,UI的相对大小保持不变. UICamera用于事件监测让带有这个组件的摄像机渲染出来的物体能够接受NGUI事件 EventMask：事件层遮罩。...:在有背景框需要拉伸的时候选择Sliced,Tiled将以原图片的大小填满整个Sprite,Filed可以实现技能冷却 2.Filp:来实现反转 3.Widget:中心点,Depth深度值越大能覆盖后面的...,Size图片大小,Aspect宽高比例. 4.Anchors:锚点选择Unified,如果我们的UI在某一个遍或者角,我们锚点不能设置4个方向,在中间的将锚点设置为中间 5.depth:深度值不能相同

2K1 0

UI图片纹理的压缩问题

因为Unity显示的是Texture大小，是实际运行时占用内存的大小，而png却是一种压缩显示格式；可以这样理解，png类似于zip格式，是一个压缩文件，只不过在运行时会自动解压解析罢了。...；缺点，Unity原生不支持Dithering抖动，需要自己做工具对图片做处理；对于需要放大、拉伸的图片，Dithering抖动的支持不好，会有非常明显的颗粒感。...image 而RGB16，是主要针对一些，不带透明通道，同时长宽又不是2的次方的图片；对于这些图片，使用RGB16可以降低一半的内存，但是效果会略逊于RGB32。　　...、卡牌、不会进行拉伸放大 RGBA16 1/2 ★★★ 有无需 UI、头像、卡牌，不带渐变，颜色不丰富，需要拉伸放大 RGB16+Dithering 1/2 ★★★★ 无无需 UI、头像、卡牌、不透明...、不会进行拉伸放大 RGB16 1/2 ★★★ 无无需 UI、头像、卡牌、不透明、不渐变，不会进行拉伸放大 RGB(ETC1) + Alpha(ETC1) 1/4 ★★★ 有需要二次方，长宽可不一样

1.5K3 0

国民游戏王者荣耀的真实地图开发之路

如果是 SurfaceView，基于 OPenGl 渲染的 3D 地图 sdk 就成了可选方案，但需要解决如何将 Unity 和 Native 两层渲染打通，这里会涉及到大量的改动以及接口封装，考虑到方案调研和研发的时间成本以及包大小的控制...框架大致如上，而如何将这一整套框架运转起来呢——数据驱动。...4.4 Android 点9图功能支持这个课题很有意思，如何将一张普通图片以点 9 的形式提供拉伸、缩放的能力？ Unity 里提供了大量的类似使用方式，只提供普通图和拉伸点，来实现拉伸效果。...通过以上代码达到的效果如下：如图所示，点9图是我们的目标效果，直接拉伸会造成图片虚缈，不符合要求。而通过以上开源代码得到的效果周边似乎少了一圈，虽然看上去没有任何拉伸变虚的问题，但也不符合要求。...这里我提一个问题：以上的方案解决了图片拉伸的问题，那如果该图片需要做压缩，该如何处理呢？

1K7 1

仿uc下部弹出菜单

，组长叫我和他考虑界面实现的可行性，我提出这种思路给他，他不采纳，觉得太烦了，他就自己弄，因为我们的项目是车载导航上的一个主控程序上的菜单，屏幕分辨率固定，所以用5张图片就ok了，所以到最后这个都不了了之了...发现没，UC的菜单箭头绝对是对准所点击按钮的，有人可能觉得用不同的图片就行了,对于一种机型可以这么做，android机型千千万，你要怎么配型，这是个很大的工作量，吃力不讨好啊。...如图所示，可以把菜单的背景分成3部分，这样用上面的3张.9图片根据不同大小进行拉伸组合就能得到想要的效果了。...Drawable后怎么把它拉伸到需要的大小并转化为bitmap呢，我查了资料（百度，google），自己总结使用了下面的一个方法，也可以看 dyh7077063的博客：http://dyh7077063....9图，所以拉伸图片不会失真,把drawable设置一个left、top点开始拉一个paramRect.right宽 //paramRect.bottom高的矩形区域，按我的理解就是弄了这个区域

1.5K8 0

详解LayaAir引擎游戏屏幕适配，及有效抗锯齿

这就是因为画布宽高达到物理分辨率才是真高清，拉伸会变模糊，比例不是相差太大的图片还好些，尤其是文字更为明显。...由于在这个模式下，舞台的宽高已经被缩放拉满全屏，所以。开发者完全可以通过相对布局属性（top和bottom），把背景拉到全屏以及按钮拉到屏幕相对位置显示。实现各个屏幕下都做到完美的全屏适配。...而且由于改变了画布的大小，在物理分辨率差异比较大的屏幕上，也不会因为设计分辨率小了而导致模糊，仍然是高清的。...[（图13-2）] 虽然说该模式，通过相对布局二次适配，也可以让被裁剪的按钮等回归到屏幕内容之中，但二次适配的方式要更加复杂。所以不推荐使用该模式。...3.4.2 相对布局 LayaAirIDE的UI组件中提供了基于父容器的相对布局属性，如top、bottom、left、right。我们可以把需要特别处理的按钮都统一放到一个容器组件中，例如box。

7.1K16 3

有效解决3D游戏边缘锯齿现象及全面理解LayaAir引擎游戏屏幕适配！

无论大还是小，要想全屏适配不被裁切，那就需要拉伸缩放，都会导致锯齿感的加剧，使得抗锯齿功能也无法完全抵消。所以，要解决这个问题，那我们就要让游戏画布一直处于物理分辨率的大小。...因为不使用视网膜画布模式，还想避免锯齿现象，移动端只能使用full模式，而full模式除了让画布和舞台采用了物理分辨率之外，并没有作任何适配，所以对于2D UI，全部需要开发者手工适配。...由于在这个模式下，舞台的宽高已经被缩放拉满全屏，所以。开发者完全可以通过相对布局属性（top和bottom），把背景拉到全屏以及按钮拉到屏幕相对位置显示。实现各个屏幕下都做到完美的全屏适配。...而且由于改变了画布的大小，在物理分辨率差异比较大的屏幕上，也不会因为设计分辨率小了而导致模糊，仍然是高清的。...3.4.2 相对布局 LayaAirIDE的UI组件中提供了基于父容器的相对布局属性，如top、bottom、left、right。我们可以把需要特别处理的按钮都统一放到一个容器组件中，例如box。

2.3K1 0

Unity基础（24）-UGUI

Set Native Size：点击此按钮则 Image 组件的长宽自动与原图片长宽一致 Image Type（图片显示类型）： Simple（基本的）：图片整张全显示，不裁切，不叠加，根据边框大小会有拉伸...模式后，根据图片边框拉伸，图片的四个角会保持原状，而1和4部分会随着图片的横向拉伸而拉伸，2和3部分会随着图片的纵向拉伸而拉伸，图片的中间部分会拉伸5进行填充。...Tiled（平铺的）：若图片已经过裁切，则使用Tiled模式后，根据图片边框拉伸，图片的四个角会保持原状，而1和4部分会随着图片的横向拉伸而拉伸，2和3部分会随着图片的纵向拉伸而拉伸，图片的中间部分会用...若图片未裁切，则使用Tiled模式后，根据图片边框拉伸，图片保持原大小不做变化，只是用自身平铺填充。...1024*568，该项设置成4096，unity也只会使用它的原尺寸大小，改值的大小大于等于图片原尺寸，如果小于该纹理质量会有损失 5.Format 格式设置 Compressed 压缩格式，如果纹理没有透明通道

4.3K2 0

html背景图片拉伸解决办法

大家好，又见面了，我是你们的朋友全栈君。...html背景图片拉伸解决办法 body { background-size: 100% 100%; //关键代码，直接拉伸背景图 background-image...background-attachment: fixed;//此代码用于页面内容超出屏幕，右侧出现滚动条情况，使得滚动滚动条时背景锁定 } 需要注意的是： background-size...: 100% 100%; //关键代码，直接拉伸背景图如果你的页面内容超过一页，那么背景拉伸会拉很长不好看，建议使用 background-attachment: fixed; 作用是图片只拉伸到当前一页屏幕大小...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.5K1 0

hash哈希竞猜游戏模式系统开发技术源码丨hash哈希游戏开发逻辑程序方案

Image怎么绘制的　　Unity中渲染的物体都是由网格(Mesh)构成的，而网格的绘制单元是图元(点、线、三角面) 　　绘制信息都存储在Vertexhelper类中，除了顶点外，还包括法线、UV、颜色...Rebuild概念　　Canvas负责将子节点的UI元素的网格合并，并生成相应的渲染指令再发送到Unity的图形管道的过程。...，材质变化(大小，旋转以及文字变化、图片的修改) 　　优化　　主要目标，把Profile里Canvas.SendWillRenderCanv参数调小。...①Simple 4个顶点；　　②Sliced勾选FillCenter的顶点数是36个，不勾选是32个；　　③Tiled取决于Rectranform设置的大小和原图大小，铺开了N张图就是4*N个；　　...：设置最大文本大小　　public TextAnchor alignment：文本相对其RectTransform的定位。

1.7K2 0

Unity3d：UGUI源码，Rebuild优化

Image怎么绘制的 Unity中渲染的物体都是由网格(Mesh)构成的，而网格的绘制单元是图元(点、线、三角面) 绘制信息都存储在Vertexhelper类中，除了顶点外，还包括法线、UV、颜色、...Rebuild概念 Canvas负责将子节点的UI元素的网格合并，并生成相应的渲染指令再发送到Unity的图形管道的过程。...材质变化(大小，旋转以及文字变化、图片的修改) 优化主要目标，把Profile里Canvas.SendWillRenderCanv参数调小。...①Simple 4 个顶点； ②Sliced 勾选FillCenter的顶点数是 36 个，不勾选是 32 个； ③Tiled 取决于Rectranform 设置的大小和原图大小，铺开了 N 张图就是...TextAnchor alignment：文本相对其 RectTransform 的定位。

4983 0

Unity3D之UGUI基础--画布的三种模式

：电脑或者手机显示屏的2D空间，只有x轴和y轴覆盖模式：UI元素永远在3D元素的前面几个相关属性： Pixel Perfect：勾选后UI和屏幕像素对应，UI图片不会出现锯齿边缘 Sort Order...Unity为我们提供了Canvas Scaler组件用于控制画布中UI元素的统一缩放和像素密度的。缩放值影响Canvas上所有的元素，包括字体的size和image的borders。...（UI当中的一单元对应多少设计分辨率像素，最好跟图片设置一致，否则Image显示会与画布不匹配） Constant Physical Size: 通过调节 Canvas 物理大小来维持缩放不变。...这种说法可能比 Constant Pixel Size 更难以理解，实际上他们本质是一样的，只不过 Constant Pixel Size 通过逻辑像素大小调节来维持缩放，而 Constant Physical...这种模式从设计的意图来看，是为了在开发时使用物理单位而非像素单位，这只会让程序和美术的工作变得复杂，实际使用价值并不高。因为开发人员更关心设计的像素分辨率，他们需要绘制明确的像素大小的图片！

1.1K5 0

零基础入门 8： Canvas和EventSystem

Unity在之前的版本更新中，继GUI之后，又新生一套新的UI系统，即UGUI。 UGUI是新版Unity自带的原生UI系统，组件也在不断的增加扩展，基本的贴图，文本，按钮等还是可以用的。...---- Canvas：画布所以的UI对象，包括按钮，贴图等都是Canvas下的子对象，都将统一绘制到Canvas画布上。进行展示和使用。如下图，创建一个空场景，然后随便创建一个图片 ?...可以看到，当我们在空场景里创建一个image的时候，编辑器会自动创建一个Canvas，一个EventSystem以及创建的图片，所以创建的UI对象都是Canvas下的子项。...第一种overlay渲染模式，会把所有UI都渲染在摄像机之前，不受摄像机影响，并且随着分辨率的改变而自适应UI布局。...第二个Canvas Scaler UI Scale Mode，UI缩放模式有三种第一种Constant Pixel Size：按照像素大小进行缩放，像素比例则是按照下图里的数值进行设置。 ?

1.5K3 0

Unity性能调优手册8UI：Canvas，Layout，RaycastTarget，Mask，TextMeshPro，UI显示

变化是任何变化，如主动切换、移动或调整大小，从外观的大变化到第一眼看不出来的小变化。重建过程的成本很高，所以如果执行太多次，或者Canvas中的ui数量很大，性能就会受到不利影响。...相反，重构的成本可以通过将Canvas除以某种程度的UI内聚来降低。例如，如果您有动画的ui和不动画的ui，您可以通过将它们放在单独的控件下来最小化动画重建画布。...但是，您需要仔细考虑如何拆分它们，因为拆分画布将不适用于绘制批次。 Tips 当画布嵌套在画布下时，拆分画布也有效。如果子画布中包含的元素发生变化，则只会运行子画布的重建，而不会运行父画布。...然而，仔细观察，当子画布中的UI被SetActive切换到活动状态时，情况似乎是不同的。在这种情况下，如果在父Canvas中放置了大量的ui，似乎就会出现导致高负载的现象。...此外，如果需要将需求放置在相对于父元素的特定位置，即使父元素的大小发生了变化，也可以通过调整RectTransform锚点来实现。

3743 0

Unity-Optimizing Unity UI（UGUI优化）03 Fill-rate，Canvas and Input

UI的基本组成设计者创建UI通过给标准的背景和元素进行组合和分层来创建最终的UI。这是相对简单的，对迭代是友好的，但是由于Unity UI使用的透明渲染队列，这种是不建议使用的方式。...但是这种操作将增大项目图集的大小。一个实例情况：在我们创建一个商店的UI的时候，一个物品可能有比边框、背景和一些小图片来定义价格，名称和一些其他信息。...这些都取决于图标的大小、数量和可接受的填充率。这里有一些合并UI元素的缺点，特定的元素不能再次被使用，需要创建额外的美术资源。...这里的改变包括UI 对象的表现，精灵图片的渲染，transform的位置和大小，文本网格的文本。子物体顺序 Unity UI的构建是从后向前的，与对象在hierarchy中的顺序是一样。...如果可以在不导致排序或光线投射检测问题的情况下启用它，则应该使用它来降低光线投射层次结构遍历的成本。

2.4K3 0

【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )

GPU 进行渲染 , 从而减少了 CPU 向 GPU 传递的数据大小 ; 之前讲到过 , CPU 向 GPU 传递数据也是一个非常耗时的操作 , 因此该优化 , 也降低了组件渲染的时间 ; 透明组件摆放处理...: CPU 不传递这些组件到 GPU 中 , 但是在布局中仍然正常摆放 ; 2....自定义组件过度绘制问题描述 : 自定义控件 , 在自定义的 onDraw 方法中 , 绘制多张图片 , 如果图片之间产生重叠 , 重叠绘制的部分就出现了过度绘制 ; 2....实现上述图片 A 在 Canvas 画布上绘制部分图片方式 : ① 完整画布 : onDraw 函数中的 Canvas canvas 参数是完整的画布 ; ② 取出图片 A 绘制部分的 Canvas...(); // 剪切画布 canvas.clipRect(left, top, right, bottom); ③ 在剪切后的画布中绘制图片 A : 在剪切后的画布中 , 绘制图片 A , 注意绘制完成后

4.6K3 0

组合与自绘，我该选用何种方式自定义Widget？

下图是AppStore的升级项UI示意图，图里的每一项，都有应用Icon、名称、更新日期、更新简介、应用版本、应用大小以及更新/打开按钮。...可以看到，这里的UI元素还是相对较多的，现在我们希望将升级项UI封装成一个单独的控件，节省使用成本，以及后续的维护成本。 ?...在Flutter中，画布是Canvas，画笔则是Paint，而画成什么样子，则由定义了绘制逻辑的CustomPainter来控制。...不过，当视觉效果需要调整时，采用自绘的方案可能需要大量修改绘制代码，而组合方案则相对简单：只要布局拆分设计合理，可以通过更换子Widget类型来轻松搞定。...无论是组合还是自绘，在自定义UI时，有了目标视图整体印象后，我们首先需要考虑的事情是如何将它化繁为简，把视觉元素拆解细分，变成自己立即可以着手去实现的一个小控件，然后再思考如何将这些小控件串联起来。

1.8K2 0

Unity-Optimizing Unity UI（UGUI优化）04 UI Controls

这一章节专门针对UI Controls进行优化。大部分的UI Controls都对性能表现有一定的影响。 UI Text（UI文本） Unity内置的Text组件可以在UI显示格栅化的文本。...从性能分析来看，重要的是理解Unity UI为每个不同的大小、风格和字符维护一个字形在字体图集中。...将TextMeshProUGUI组件中的文本变动最小化并且将其发生变化的组件放置到专门的画布上，使画布重建效率达到最高。...这将减少批处理UI元素的数量，批处理成本仅随着画布内的CanvasRenderer数量增加，而不是随Rect Transforms的数量增加。...但是要避免全部重新计算，要实现一个与位置改变相关联的对象池，而不是与重置父节点或改变同级顺序相关的对象池。基于位置的滚动框对象池为了避免上述问题，直接通过改变UI元素的位置。

3.4K2 0

.9图片的那点事儿

核心要点：左上拉伸，右下内容使用系统自带draw9patch工具制作9图采用NinePatch图片做背景，可使背景随着内容的拉伸（缩小）而拉伸（缩小）。...那么如何将普通的PNG图片编辑为NinePatch图片呢， Android SDK/tools目录下提供了编辑器draw9patch.bat，双击即可打开。...在画布的上方和左方的边上画线指定缩放区域，勾选“Show patches”可显示画定的区域，绿色为固定大小区域，红色为缩放区域，文字会摆放在红色区域。...Zoom: 用来缩放左边编辑区域的大小 Patch scale: 用来缩放右边预览区域的大小 Show lock: 当鼠标在图片区域的时候显示不可编辑区域 Show patches: 在编辑区域显示图片拉伸的区域...如果完全消除该内容则图片拉伸后是没有变形的，也就是说，不管如何缩放图片显示都是良好的。

9992 0

显存优化：纹理压缩功能介绍与使用说明

因此，这些图片文件要先经过CPU解码成纹理格式，再传送到GPU进行使用。而纹理格式，自然就是可以被GPU直接读取并显示的格式。所以，一方面，避免CPU解码可以减少运算带来的性能压力。...在LayaAir Unity插件的纹理压缩功能里，无论是Android还是iOS选项，只要达到了转换条件，就会全部进行转换导出，比如某个纹理不能设计为2的幂次方，但是如果不处理，也会被转换导出，还会被拉伸...使用平台与 LayaAir Unity插件所不同的是，当选择Android平台，只会转换JPG图片，PNG图片哪怕是没有透明通道的，当前工具也不会进行转换。...尽管引擎与工具决定对图集的纹理转换进行支持，但仍然要了解以下问题： 1、纹理压缩是有损压缩，如果对UI质量要求比较高的，建议静态2D UI不转换纹理压缩格式。...3、图集默认是不按幂次方生成，iOS平台不仅宽高需要幂次方还要是宽高相等的正方形幂次方。而图集工具勾选限定2的幂次方生成的图集也不能保障肯定是正方形，这个要注意尺寸。

3.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云