Unity UGUI 九宫格

最新推荐文章于 2026-01-28 22:55:53 发布
原创 最新推荐文章于 2026-01-28 22:55:53 发布 · 2.4k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍如何将图片转换为Sprite格式并编辑九宫格，包括设置Image组件为sliced模式及通过绿色顶点进行拉伸的方法。

九宫格的两个条件

1.转成Sprite格式


2.编辑九宫格



自定义九宫格完成后需要保存


3.Image组件设置为sliced模式


根据绿色顶点拉伸自定义九宫格



下面是效果图



C#课程设计—基于Unity的九宫格拼图游戏.zip
07-04
C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目。C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目。C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目C#课程设计—基于Unity的九宫格拼图游戏。已获通过的高分项目 ，
Unity UGUI 九宫格屏幕适配
01-05
Unity UGUI 九宫格屏幕适配
unity3d UGUI九宫格纹理拉伸的使用
热门推荐
RainsSoft
01-07 5万+
本篇文章我们来学习下在unity new ui即UGUI九宫格纹理拉伸的使用，不论是游戏中的UI，还是应用中的UI，纹理九宫格拉伸都是必不可少的，因为采用这种拉伸方式，可以最大化的节省纹理资源，任意缩放图片还能保持一个不错的效果，因此在手游和app中用的较多。我们先学习下九宫格拉伸的原理先，如下图所示！ 1.原理 把纹理用4条线分割成9部分（如上图），通过观察可以发现，5是最规则的形状（矩
Unity-ugui-扩展Image组件Filled模式支持九宫格
CrisFu的博客
08-26 5346
开发过程有个很常见的需求：进度条的进度变化是裁剪的方式显示。很好实现，Image的IamgeType选择Filled模式即可。但是呢，Filled模式不支持九宫格，即我们进度条显示要多长，就需要出多长的资源，这样子就会导致资源量很大。 本文主要是让Filled模式支持九宫格。......
UGUI sprite editor九宫切图用法
Peter的博客
04-26 4189
UGUI九宫格纹理拉伸的使用，不论是游戏中的UI，还是应用中的UI，纹理九宫格拉伸都是必不可少的，因为采用这种拉伸方式，可以最大化的节省纹理资源，任意缩放图片还能保持一个不错的效果，因此在手游和app中用的较多。一般有两种用法： 一、基本用法：四角保持不变，只拉伸中心区 （常用于一些纯色背景组件的拉伸填充） unity3d UGUI九宫格纹理拉伸的使用_Rains卍Soft的博客-CSDN博客_unity 九宫格 二、另类用法：中心区不变，只拉伸四边（常用大背景图保持中心图形不变形，而周...
UGUI - 制作九宫贴图
.
08-20 3489
UGUI - 制作九宫贴图 应用场景- 按钮，防止拉伸变形 1、单击资源图单击资源后，在 inspector 面板中点击 sprite editor 编辑资源 2、编辑资源拖动四条线编辑九宫图，然后 apply 应用 3、创建image创建image，修改图片类型为sliced，就可以随意拉伸了
unity UGUI 九宫格 拉伸
qq_37524903的博客
11-09 3450
1.sprite Mode :选择 Multiple ，点击 Apply，如下图： 2.点击 sprite Editor,调节合适的值即可。 3. 修改Image的 ImageType 选项： Simple
Unity 基于UGUI的逆向九宫格图片
yyf1990cs的博客
08-28 1272
拉伸的时候四周的切片被拉伸，中央的图片保持不变。 可以用于某些UI处理或者图片镂空处理。 基于Unity2018.4的Image源码。 新建一个类，假设叫ScaleImage，复制所有Image的源码，修改掉报错之后，将Image的“GenerateSlicedSprite”类做如下修改： private void GenerateSlicedSprite(VertexHelper toFill) { if (!this.hasBorder) { this.GenerateSim
unity 设置图片九宫格_Unity UGUI – Image组件
weixin_39624461的博客
12-21 3218
本文提供全图文流程，中文翻译助力快速掌握UnityUGUI中 Image组件的使用为初学者节省宝贵的时间，避免采坑！Chinar —— 心分享、心创新！我们的初衷是将一种简单的生活方式，带给世人使有限时间 具备无限可能!Chinar教程效果：@全文高清图片，点击即可放大观看(很多人竟然不知道)1Presentation —— 介绍Image 组件是 UGUI 中最常用的组件。作用：控制/显示图片1...
Unity的UGUI用TexturePacker全自动打图集，包括九宫格切图信息
水光涵月的博客
02-05 2942
Unity的UGUI用TexturePacker全自动打图集，包括九宫格切图信息前言二级目录三级目录环境准备实现过程注意结尾 前言 最近项目的ui图集在用 二级目录 三级目录 环境准备 实现过程 注意 结尾
Unity UGUI Image组件Filled模式与九宫格融合的优化实践
最新发布
weixin_27943395的博客
01-28 366
本文深入探讨了Unity UGUI中Image组件Filled模式与九宫格融合的优化实践。通过自定义顶点数据和重写OnPopulateMesh方法，实现了Filled模式支持九宫格功能，解决了进度条等UI元素在动态填充时的变形问题，显著减少了美术资源工作量并优化了包体大小。
unity 设置图片九宫格_unity学习5_UGUI_Image_Sprite(2D_and_UI)
weixin_39950552的博客
12-21 1698
unity学习5_UGUI_Image_Sprite(2D_and_UI)(1)Source Image:资源文件Unity的image组件需要的Source Image类型为Sprite类型,首先我们需要设置图片资源类型为Sprite.在rescouces目录里找到我们需要设置的图片,然后单机图片资源,修改TextureType类型为Sprite类型.然后Apply生效.这样我们就可以拖动到i...
UGUI 九宫格的使用
末零 的博客
08-15 2509
为了节省图片资源，以及不同大小的适用，可以使用九宫格进行编辑。 这里是一个按钮的UI，当然此处UI不应该做成这样，中间部分不需要： 接下来对sprite进行编辑，打开Sprite Editor： 然后修改Border，可以直接拖动绿点，修改完后Apply： 将Image Type改为Sliced，勾选FillCenter： 效果： ...
Unity中的UI九宫格
张不无的博客
03-21 6466
9宫格
UGUI Image 九宫格
cuijiahao的专栏
01-19 1011
双击图片找到图集 编辑图集 绿色区域为九宫格区域 设置图片的类型
Unity学习笔记——UI九宫格的原理
m0_52058484的博客
02-16 4281
UI九宫格的深入理解
Unity UGUI sprite editor九宫切图之另类用法，中间不变，拉升两边
u014565819的博客
06-13 1万+
首先，先思考一个问题，用图1如何去实现图2的效果（中间部分保持不变，两边拉伸）？这时候应该很多人会想到九宫切图，但是九宫切图很多时候的用法是保持四个顶角不变，拉升重复中间部分，是做不到这种效果的。接下来就是正文实现部分了：1.首先导入图片设置成sprite之后，将sprite mode 设置成multiple，如下图所示2.点击sprite editor 按钮，将sprite切成3部分3.对2，3...
Unity UGUI Image组件优化：Filled模式与九宫格的完美融合实践
weixin_28040125的博客
01-25 692
本文深入探讨了Unity UGUI Image组件中Filled模式与九宫格的融合优化实践，解决了传统方案在动态填充效果与资源管理间的矛盾。通过扩展Image组件实现技术方案，开发者可以在保持九宫格优势的同时实现精确裁剪，显著提升UI性能与表现力，适用于进度条、血条等常见游戏UI元素。
UGUI 切片(九宫格)的具体使用
海涛高软
06-25 8927
下面这张图是原始大小尺寸，没有做切片处理------------------------------------------------------如果把这幅图横向宽度值加大，就会发现这幅图的左右边缘部分进行了拉伸变形--------------------------------------------------------解决办法是，对这张图进行切片处理-------------------...
[Unity]-[UI]-[Prefab] 关于UGUI UI Prefab的制作技巧
sky_smile_Allen的博客
04-18 1422
这个意思就是说在使用ugui时制作prefab时，要遵循“从上到下，从外到里，多用空物体套壳”的原则，好处就是后面好修改，并且可以复用不同的prefab子模块。且在布局中不会出错，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值