UGUI 切片(九宫格)的具体使用

最新推荐文章于 2024-08-03 17:11:49 发布
最新推荐文章于 2024-08-03 17:11:49 发布
阅读量8.6k 收藏 6
点赞数 3
分类专栏： UGUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15267341/article/details/80805706
版权

下面这张图是原始大小尺寸，没有做切片处理


------------------------------------------------------

如果把这幅图横向宽度值加大，就会发现这幅图的左右边缘部分进行了拉伸变形（虚化）



--------------------------------------------------------


解决办法是，对这张图进行切片处理，在Project面板中选中图片，然后在监视器面板中，点击Sprite Editor打开编辑器，进行切片编辑




------------------------------------------------------------------

如下图的切片：


----------------------------------------------------------------------

下面这幅图进行了切片处理，在横向宽度变大时，图的左右边缘就没有进行明显的拉伸变形或虚化



-----------------------------------------------------------------------

切片（九宫格）原理剖析：



FR：海涛高软（hunk Xu) QQ技术交流群：386476712

海涛高软
关注
专栏目录
【Unity-UGUI组件拓展】| Image 组件拓展，支持FIlled和Slice功能并存
努力前行，总会成为自己心中的那道光
09-18 818
关于Image组件的使用，前面已经有文章介绍过，这里不再赘述： 【Unity-UGUI控件全面解析】| Image 图片组件详解 项目中经常会用到进度条这个需求，而进度条一般都是由Image组件组成。在使用进度条时，有时会出现表现效果比较差的情况，如下面所示。
unity UGUI 九宫格 拉伸
qq_37524903的博客
11-09 2913
1.sprite Mode :选择 Multiple ，点击 Apply，如下图： 2.点击 sprite Editor,调节合适的值即可。 3. 修改Image的 ImageType 选项： Simple
ugui 九宫格和图片切割
weixin_30561425的博客
01-12 1426
很多时候美术给的背景图很小，需要程序进行放大（但要保持边角不模糊），这时候九宫格就有用了~~~ 例如下图放大10倍，如果不用九宫格图会变得很模糊(你可以试下吧transform 的scale都设为10，效果太美。。。。。) 不扯淡了，开搞 一、九宫格九宫格的主要目的是处理图片拉伸效果，我们知道图片一旦被拉伸，它就会出现形变、模糊等问题，但是，有的图片它的某一些部分又是允许被拉...
【Unity UGUI】Image Mesh自定义操作
最新发布
Unity打怪升级
08-03 281
Unity UI中的`Image`组件能够在画布下绘制纹理，它基本上有四种类型：简单（Simple）、切片（Sliced）、平铺（Tiled）、填充（Filled），这些类型提供了多样化的纹理绘制操作。但是，这还不够！在深入研究了这四种绘制类型的源代码实现后，我发现了一种自定义图像的方法。
Unity-ugui之扩展Image组件Filled模式支持九宫格
CrisFu的博客
08-26 3830
开发过程有个很常见的需求：进度条的进度变化是裁剪的方式显示。很好实现，Image的IamgeType选择Filled模式即可。但是呢，Filled模式不支持九宫格，即我们进度条显示要多长，就需要出多长的资源，这样子就会导致资源量很大。 本文主要是让Filled模式支持九宫格。......
UGUI 九宫格的使用
末零 的博客
08-15 2250
为了节省图片资源，以及不同大小的适用，可以使用九宫格进行编辑。 这里是一个按钮的UI，当然此处UI不应该做成这样，中间部分不需要： 接下来对sprite进行编辑，打开Sprite Editor： 然后修改Border，可以直接拖动绿点，修改完后Apply： 将Image Type改为Sliced，勾选FillCenter： 效果： ...
UGUI Image 九宫格
cuijiahao的专栏
01-19 766
双击图片找到图集 编辑图集 绿色区域为九宫格区域 设置图片的类型
unity3d UGUI九宫格纹理拉伸的使用
热门推荐
RainsSoft
01-07 5万+
本篇文章我们来学习下在unity new ui即UGUI九宫格纹理拉伸的使用，不论是游戏中的UI，还是应用中的UI，纹理九宫格拉伸都是必不可少的，因为采用这种拉伸方式，可以最大化的节省纹理资源，任意缩放图片还能保持一个不错的效果，因此在手游和app中用的较多。我们先学习下九宫格拉伸的原理先，如下图所示！ 1.原理 把纹理用4条线分割成9部分（如上图），通过观察可以发现，5是最规则的形状（矩
UGUI sprite editor九宫切图用法
Peter的博客
04-26 3354
UGUI九宫格纹理拉伸的使用，不论是游戏中的UI，还是应用中的UI，纹理九宫格拉伸都是必不可少的，因为采用这种拉伸方式，可以最大化的节省纹理资源，任意缩放图片还能保持一个不错的效果，因此在手游和app中用的较多。一般有两种用法： 一、基本用法：四角保持不变，只拉伸中心区 （常用于一些纯色背景组件的拉伸填充） unity3d UGUI九宫格纹理拉伸的使用_Rains卍Soft的博客-CSDN博客_unity 九宫格 二、另类用法：中心区不变，只拉伸四边（常用大背景图保持中心图形不变形，而周...
Unity 基于UGUI的逆向九宫格图片
yyf1990cs的博客
08-28 988
拉伸的时候四周的切片被拉伸，中央的图片保持不变。 可以用于某些UI处理或者图片镂空处理。 基于Unity2018.4的Image源码。 新建一个类，假设叫ScaleImage，复制所有Image的源码，修改掉报错之后，将Image的“GenerateSlicedSprite”类做如下修改： private void GenerateSlicedSprite(VertexHelper toFill) { if (!this.hasBorder) { this.GenerateSim
【Unity-UGUI控件全面解析】| Image 图片组件详解
努力前行，总会成为自己心中的那道光
04-30 2万+
Image是图片组件，是UGUI组件中常见的基础组件，主要用来显示图片效果。 还有其他的一些组件都会用到Image组件，比如Button组件、Dropdown组件、InputField组件等。 在这里介绍完Image，后面其他组件中用到Image的地方就不多做介绍了~ 在Unity的Hierarchy视图中选择 Create→UI→Image 创建Image组件。
Unity UGUI 九宫格屏幕适配
01-05
Unity UGUI 九宫格屏幕适配
UGUI-- Image图像控件
Go_Accepted的博客
04-19 1280
1、Image是什么 Image是图像控件，是UGUI中用于显示精灵图片的关键组件，除了背景等大图，一般都是用Image来显示UI中的图片元素 2、Image参数 （1）Source Image：图片来源（图片类型必须是精灵Sprite类型） 如果在Canvas中存在多个Image，越往后（位置在下面）的Image的渲染次序越靠后，即显示越靠前 （2）Color：图像的颜色 （3）Material：图像的材质（一般不修改，会使用UI的默认材质） （4）Raycast Target：是否作.
Unity UGUI Image 实现技能冷却效果
W__YH的博客
06-14 833
实现技能冷却效果
ugui自带的切图方法
丶博Liang 的博客
11-19 1987
ugui自带的切图方法 首先选中图片 格式转换为sprite 点击Apply 然后按下面步骤操作 1.sprite mode 切换为multple格式 2.点击apply 3.点击Editor进入图片编辑界面 进入图片编辑界面 按照以下步骤操作即可自动切割完毕 1.点击Slice 2.点击下面对话框中的Slice完成切割 然后退出编辑面板 点击Apply 切割完毕 ...
UGUI - 制作九宫贴图
.
08-20 3212
UGUI - 制作九宫贴图 应用场景- 按钮，防止拉伸变形 1、单击资源图单击资源后，在 inspector 面板中点击 sprite editor 编辑资源 2、编辑资源拖动四条线编辑九宫图，然后 apply 应用 3、创建image创建image，修改图片类型为sliced，就可以随意拉伸了
Unity学习笔记——UI九宫格的原理
m0_52058484的博客
02-16 2928
UI九宫格的深入理解
UGUI基础学习笔记---第三部分
YYHYJX的博客
10-29 159
1.创建文本的时候，为了更加的真实，可以试着添加Shadow组件。 2.Image模拟滑动条注意事项 （1.）一个背景，一个黑色的，一个绿色的。 （2.）父类Image添加Slider组件，Fill Rect属性换成绿色的背景。（变化之后，大小会改变，这时手动改过来即可） （3.）调整绿色背景Image的属性 其中Image Type属性更改为Filled Fill Method 属性调整为，Horizontal（水平方向上） 3.Image组件Sliced属性 （1...
【Unity】UI九宫格
张不无的博客
03-21 2110
9宫格
unity UI九宫格
08-21
UI九宫格是一种在制作UI界面中常用的技术，它以是否发生形变为基准。九宫格可以帮助我们在UI设计中应对不同尺寸的屏幕，同时最大程度地节省纹理资源。在Unity中的UI（UGUI）中，九宫格纹理拉伸是一种常见的使用方式，不论是游戏还是应用中的UI都可以使用九宫格纹理拉伸。通过九宫格拉伸，我们可以任意缩放图片而保持良好的显示效果。九宫格的顺序是固定的，左边在九宫格中对应的位置是4，右边是5。因此，在对UI进行水平拉伸时，只会改变位置5的形变；而在垂直拉伸时，位置4和5都会发生形变。通过理解九宫格的原理和使用方法，我们可以更好地应对UI的变化。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Unity学习笔记——UI九宫格的原理](https://blog.csdn.net/m0_52058484/article/details/129057073)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [unity3d UGUI九宫格纹理拉伸的使用](https://blog.csdn.net/andyhebear/article/details/50476802)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值