Unity-ugui之扩展Image组件Filled模式支持九宫格

已于 2022-09-12 14:44:19 修改
阅读量3.6k 收藏 16
点赞数 10
文章标签： unity ui 游戏引擎
于 2022-08-26 16:48:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CrisFu/article/details/126544153
版权

目录

本文内容

开发过程有个很常见的需求：进度条的进度变化是裁剪的方式显示。很好实现，Image的IamgeType选择Filled模式即可。但是呢，Filled模式不支持九宫格，即我们进度条显示要多长，就需要出多长的资源，这样子就会导致资源量很大。
本文主要是让Filled模式支持九宫格。

内容及效果

原Sliced模式效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Sliced模式的原理为对九宫格进行缩放，可以从上几图看到，当进度为 0 -1之间时，右侧的三宫格会一致显示；但是当进度为0时，留下左右六宫格内的内容，无法做到完全消失。显然无法满足裁剪的方式。

原Filled模式效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Filled模式如上几图所示，满足裁剪的方式，但不支持九宫格图片。想要解决该问题，美术则需要根据进度的具体长度出对应匹配长度的资源。虽然这样能解决问题，但是又会带来资源量过大的问题，有多少种进度条就需要出多少个资源，并且稍微修改一点UI中的显示长度，就又需要重新修改资源。显然也无法满足我们的需求。

Filled模式支持九宫格效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如上几图，当我们扩展了Image组件后，让Filled模式支持九宫格图片后，既能支持裁剪，又能节省资源。

内容分析

在这里插入图片描述
ExtendImage脚本继承自Image，通过覆写OnPopulateMesh函数，如果是Filled模式、图片有九宫格信息并且使用九宫格裁剪模式就执行我们自定义的裁剪方式。
在这里插入图片描述
根据九宫格定义顶点数组和uv数组。（因为是九宫格，所以长度为4）
在这里插入图片描述
初始化uv数组。
在这里插入图片描述
根绝Rect计算出进度为1时所有顶点的位置。

在这里插入图片描述

在这里插入图片描述
计算出xy的总长，和九宫格各部分占据的比例。
在这里插入图片描述
通过上边获取到的各宫格占据的比例&

最低0.47元/天 解锁文章
CrisFu
关注
  • 10
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
引擎入门 | Unity UI简介–第1部分（8）
Richard_shen的博客
11-23 914
你将使用一种叫做9-Slice缩放的技术，它允许你提供一个小图像，缩放以适应所有尺寸。你以同样的方式为按钮和图像设置图像，毕竟，它们使用的是同一个组件。然而，图像很少缩放，尤其是非统一的。对btn_9slice_highlighted和btn_9slice_pressed图片重复同样的过程，你将在不同的按钮状态下使用。这种技术的工作原理是为九个区域中的每个区域创建不同的图像，所有这些图像的缩放方式都不同。在运行场景和享受你的酷炫按钮之前，你要改变嵌套的Text标签所使用的字体，这将使按钮变得超级棒。
Unity UGUI Image 中文详解-Chinar
ChinarCSDN的博客
08-06 7893
Unity UGUI Image 中文详解-Chinar 助力快速掌握 Unity UGUI中 Image 组件的使用 为初学者节省宝贵的时间，避免采坑！ Image 组件是 UGUI 中最常用的组件。作用：控制/显示图片 1.1 Attribute —— 属性 Source Image 需要显示图片来源（文件引用） Color 图片的颜色 Material 渲染图像的材质 Raycast Target 能否接收到射线检测 Image Type 图片的排列类型 Simple (普通模式)，Sliced (九
Unity3D的UI系统（UGUI）初级入门
03-21
本课程主要介绍Unity3d的UI系统（UGUI），先对UGUI做一个总体概述，之后对每个UI控件逐一进行详细讲述，内容包括控件的作用、设置方法、使用场景及属性细节，帮助大家熟练使用UGUI设计游戏的交互界面。
unity中创建中心不拉伸的sliced image
最新发布
weixin_38926960的博客
06-07 418
unity中创建中心不拉伸的sliced image
unity3d UGUI九宫格纹理拉伸的使用
热门推荐
RainsSoft
01-07 5万+
本篇文章我们来学习下在unity new ui即UGUI九宫格纹理拉伸的使用，不论是游戏中的UI，还是应用中的UI，纹理九宫格拉伸都是必不可少的，因为采用这种拉伸方式，可以最大化的节省纹理资源，任意缩放图片还能保持一个不错的效果，因此在手游和app中用的较多。我们先学习下九宫格拉伸的原理先，如下图所示！ 1.原理 把纹理用4条线分割成9部分（如上图），通过观察可以发现，5是最规则的形状（矩
unity设置图片的填充方式
shijinlinaaa的博客
09-23 3401
unity的image的填充展现方式，代码控制image的filled
unity UGUI 九宫格 拉伸
qq_37524903的博客
11-09 2833
1.sprite Mode :选择 Multiple ，点击 Apply，如下图： 2.点击 sprite Editor,调节合适的值即可。 3. 修改Image的 ImageType 选项： Simple
【Unity3D】制作进度条——让Image同时具有Filled和Sliced的功能
趁着头发多我想做游戏
09-25 2547
解决方案转载于：UGUI——重写Image类实现进度条 作者：糯米团子滚呀滚 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.Sprites; public class childImage : Image{ protected override void OnPopulateMesh(VertexHelp
unity-ugui-XCharts-master.zip
12-10
《Unity3D UGUI XCharts：打造高效直观的可视化数据展示》 Unity3D作为一款强大的游戏开发引擎，不仅在游戏领域广泛应用，还在虚拟现实、增强现实以及数据可视化等多个领域大展拳脚。UGUI（Unity Graphical User ...
Unity-UGUI制作的小地图-可放大缩小视角，大地图小地图切换
03-29
本项目“Unity-UGUI制作的小地图-可放大缩小视角，大地图小地图切换”旨在教大家如何利用UGUI组件来构建一个功能齐全的小地图系统，该系统能够支持相机视角的缩放以及在大地图和小地图之间进行切换，为玩家提供更...
unity-UGUI源码分享
08-23
这个“unity-UGUI源码分享”提供了最新版本的UGUI源码，让开发者有机会一窥其内部构造。 UGUI系统的核心组件包括：Canvas、RectTransform、UI Element、Event System和各种UI控件（如Text、Image、Button等）。...
UGUI 九宫格的使用
末零 的博客
08-15 2219
为了节省图片资源，以及不同大小的适用，可以使用九宫格进行编辑。 这里是一个按钮的UI，当然此处UI不应该做成这样，中间部分不需要： 接下来对sprite进行编辑，打开Sprite Editor： 然后修改Border，可以直接拖动绿点，修改完后Apply： 将Image Type改为Sliced，勾选FillCenter： 效果： ...
UGUI sprite editor九宫切图用法
Peter的博客
04-26 3259
UGUI九宫格纹理拉伸的使用，不论是游戏中的UI，还是应用中的UI，纹理九宫格拉伸都是必不可少的，因为采用这种拉伸方式，可以最大化的节省纹理资源，任意缩放图片还能保持一个不错的效果，因此在手游和app中用的较多。一般有两种用法： 一、基本用法：四角保持不变，只拉伸中心区 （常用于一些纯色背景组件的拉伸填充） unity3d UGUI九宫格纹理拉伸的使用_Rains卍Soft的博客-CSDN博客_unity 九宫格 二、另类用法：中心区不变，只拉伸四边（常用大背景图保持中心图形不变形，而周...
[Unity3D] 制作进度条-使图像同时具有Filled(进度条)和Sliced(九宫格)功能
qq_42980269的博客
10-13 463
【代码】[Unity3D] 制作进度条-使图像同时具有Filled(进度条)和Sliced(九宫格)功能。
unity 设置图片九宫格_unity学习5_UGUI_Image_Sprite(2D_and_UI)
weixin_39950552的博客
12-21 1260
unity学习5_UGUI_Image_Sprite(2D_and_UI)(1)Source Image:资源文件Unity的image组件需要的Source Image类型为Sprite类型,首先我们需要设置图片资源类型为Sprite.在rescouces目录里找到我们需要设置的图片,然后单机图片资源,修改TextureType类型为Sprite类型.然后Apply生效.这样我们就可以拖动到i...
unity 设置图片九宫格_Unity UGUI – Image组件
weixin_39624461的博客
12-21 2858
本文提供全图文流程，中文翻译助力快速掌握UnityUGUI中 Image组件的使用为初学者节省宝贵的时间，避免采坑！Chinar —— 心分享、心创新！我们的初衷是将一种简单的生活方式，带给世人使有限时间 具备无限可能!Chinar教程效果：@全文高清图片，点击即可放大观看(很多人竟然不知道)1Presentation —— 介绍Image 组件是 UGUI 中最常用的组件。作用：控制/显示图片1...
Unity UGUI基础之Image格式讲解
七夜听雪
01-08 6051
UGUI的Image等价于NGUI的Sprite组件，用于显示图片。 一、Image组件： Source Image（图像源）：纹理格式为Sprite（2D and UI）的图片资源（导入图片后选择Texture Type为Sprite（2D and UI））。 Color（颜色）：图片叠加的颜色。 Material（材质）：图片叠加的材质。 Raycast Ta...
【Unity】UI九宫格
张不无的博客
03-21 1694
9宫格
unity2018 Image使用Sliced九宫格进行调整
sun_surprise的博客
04-02 4123
1.选中你要调整的Image,将图片类型转换成sliced 2.找到image中的精灵，找到sprite editor，点击 3.在里面调整即可 .
unity-ugui制作表格
10-27
Unity-UGUI是Unity游戏引擎中的一个UI系统，可以用来创建和管理用户界面。它提供了丰富的功能和工具，使得开发者能够轻松地制作各种表格。 使用Unity-UGUI制作表格的步骤如下： 1. 创建Canvas对象：在Unity中，首先需要创建一个Canvas对象，作为UI渲染的容器。选择GameObject -> UI -> Canvas，即可创建一个Canvas对象。 2. 添加Table组件：选择Canvas对象，在Inspector面板中点击"Add Component"按钮，然后在搜索栏中输入"Table"，选择适合的Table组件，点击添加。 3. 设置表格的行列数：在Table组件的Inspector面板中，设置表格所需的行数和列数。 4. 设置表格样式：可以在Inspector面板中设置表格的颜色、大小等属性，以满足具体需求。 5. 添加表格内容：可以通过代码或者拖拽方式，向表格中添加所需的文本或图片。可以通过操作表格的行列索引，将内容放置在特定的位置。 6. 设置表格的交互性：可以为表格中的每个单元格添加点击事件或其他交互效果，提升用户体验。 7. 调整表格布局：可以通过调整Canvas的大小、位置，或者改变组件之间的层次关系，来调整表格的布局。 8. 完善表格功能：可以根据具体需求，添加更多表格的功能，比如排序、过滤、搜索等。 9. 测试和优化：在表格制作完成后，可以进行测试，查看表格的显示效果和交互效果，并进行优化。 总之，使用Unity-UGUI制作表格，只需简单的操作和设置，就能够创建出各种样式、功能丰富的表格，满足游戏或应用程序的需求。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值