斜方向的九宫格图片拉伸

最新推荐文章于 2024-05-01 07:06:25 发布
原创 最新推荐文章于 2024-05-01 07:06:25 发布 · 置顶 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#unity3d

本文介绍了如何在Unity3D中实现斜向九宫格图片拉伸，通过分析网格和顶点属性，设置斜方向的拉伸border，以避免浪费资源。详细讲解了顶点三角形分布、UV坐标计算和顶点位置变化的过程，并提供了demo工程地址。

斜方向的九宫格图片拉伸

先上最终效果图：

阅读本文需要的基础知识：网格，顶点属性

一般九宫格拉伸的原理

在ui制作过程中，九宫格技术通常被用来拉伸一些某个维度上没有明显变化区域。比如按钮和一些界面的底图。它的原理是把一个大的矩形分为9个矩形，保留四个角的矩形不变，上下矩形在横向上无变化作横向拉伸，左右矩形在竖向上无变化作竖向拉伸，中间矩形在横向和竖向都无变化作两个方向拉伸。
在这里插入图片描述

在unity中，需要设置精灵图片的border来指定拉伸区域。这种做法的好处就是节省图片资源，用更小分辨率的图去完成更大分辨率的图该做的事。

斜方向九宫格拉伸

最近接到了个需求：slg中点击地块会有选中格子的示意，现在需要从点击一个地块变为点击25个地块。然而实际情况是地块示意图是不能被正常水平和垂直拉伸的。。只能被斜方向拉伸。。为了这么一个东西去扩大贴图是极其浪费资源的，于是我想是否能通过斜方向拉伸九宫格来实现。百度谷歌了一圈似乎也没有翻到有人造这个轮子，只好自己写了！

首先分析斜方向拉伸的网格分布：
在这里插入图片描述

推荐该作图软件

如图矩形ABCD为原始图片资源，中间的红色区域示意实际像素参考。正如九宫格设置

最低0.47元/天 解锁文章
duilib图片属性中corner属性九宫格拉伸说明
dvlinker的技术专栏
06-01 1163
duilib图片属性中corner属性九宫格拉伸说明
UE4-（蓝图）第五十五课图片九宫格拉伸的使用
Stone的博客
11-29 7606
一、为什么使用九宫格拉伸 在UI布局的时候，有时候使用的图片与我们要制作的UI大小有差距，如果图片是普通方式直接拉伸很可能造成图片四个角上的效果与原图片差距太大甚至是变形，这时候使用九宫格模式拉伸，可以保持图片四个角上的样式不发生改变，只对中间区域拉伸。 原始 正常拉伸： 九宫格拉伸： 二、图片参数设置 1.新建一个UI 控件蓝图，在CanvasPanel下拖入一个Image，选择一张...
Unity3D开发（四）：NGUI纹理九宫格拉伸
445822357
10-10 436
不论是游戏中的UI，还是应用中的UI，纹理九宫格拉伸都是必不可少的，因为采用这种拉伸方式，可以最大化的节省纹理资源，还能保证良好的表现效果！ 1.原理 把纹理用4条线分割成9部分（如上图），通过观察可以发现，5是最规则的形状（矩形），其次是2,6,8,4（矩形，但是和四个角有公共边），最后是四个角1,3,9,7（圆角矩形） 规则的图形在拉伸之后的效果是比较好的，如果是不规则的图形...
九宫格拉伸
qq_18709863的专栏
09-07 915
之前给SuperTestMesh 增加了个背景渲染 https://blog.youkuaiyun.com/qq_18709863/article/details/108343780主要时为了性能优化减少DC 只是添加了4个顶点2个三角面渲染了一个图，今天背景需要九宫拉伸还需要再改下 本来想看下SpriteRenderer的源码 借鉴下，发现应该是都写再C++源码里了算了还是 暂时看不懂 自己研究下把， 思考 正常一个图4个顶点2个三角面组成一个矩形 4个UV信息 就能渲染，只要把顶点位置设置成贴图大小..
android 九宫格 拉伸,CAScale9ImageView（九宫格图片拉伸）
weixin_42310891的博客
05-31 1314
类说明CAScale9ImageView是CrossApp提供的一种九宫格拉伸图片的解决方案，我们先来了解一下什么是九宫格图片拉伸。在App的设计过程中，为了适配不同的手机分辨率，图片大小需要拉伸或者压缩，这样就出现了可以任意调整大小的拉伸样式。CAScale9ImageView 属性(点击方法名可查看方法介绍)CAScale9ImageView 方法(点击方法名可查看方法介绍)CAScale9I...
NGUI学习笔记 - 1 九宫格
weixin_30650039的博客
11-08 457
我对九宫格的理解：九宫格是将一张图分为9个部分，在拉伸的时候针对这9个部分进行不同的拉伸处理。 图1-1 九宫格 - 说明 如图1-1所示，顶点1、3、7、9所在的位置在拉伸时不会受到任何影响，2、8位置将进行水平拉伸，4、6位置会进行垂直 拉伸，5位置是正常拉伸。NGUI的Sprite自带了九宫格的处理,使用起来也很方便～～ ...
九宫格UV
最新发布
06-17
**斜方向九宫格拉伸** 除了传统的九宫格拉伸外，还可以实现斜方向的九宫格拉伸。在这种情况下，拉伸区域不再局限于矩形边界，而是沿着斜线进行划分[^2]。具体实现需要额外计算斜线交点，并调整顶点和UV坐标的映射...
UnityTransformSkew：有关如何在Unity中进行倾斜变换的有趣演示
03-03
但是，倾斜变换通常需要对某一条轴进行非正交的偏斜，这超出了Euler Angles的范畴。这时，我们可以利用Quaternion来构造更复杂的旋转。 Quaternion是一种数学概念，用于表示3D空间中的旋转。在Unity中，可以通过`...
Unity跨平台UI解决方案：可能是最全的FairyGUI系列教程(2)
2301_82242326的博客
05-01 623
给大家分享一份移动架构大纲，包含了移动架构师需要掌握的所有的技术体系，大家可以对比一下自己不足或者欠缺的地方有方向的去学习提升；网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
Unity3D中UGUI Image倾斜效果的实现与动画集成
然而，UGUI原生提供的Image组件功能相对基础，仅支持常规的拉伸、填充、九宫格等显示模式，难以满足复杂视觉特效的需求。本文所描述的“UGUI Image倾斜效果实现”正是针对这一局限性提出的一种高级定制方案，通过...
九宫拉伸插件为美术拉伸九宫提速
夏天的树人的专栏
06-09 4423
初步想法假设： 美术需要很大程度拉伸九宫图，ui多了，内容就重复和单调。这个插件基础上是使用了scalebitamp的特性，美术很多时候对Ui面板进行拉伸，拉伸的时候他们会采取裁剪局域个来使用，而ps没有提供这种不变形的 工具，不过air是可以使用交互的操作进行对位图进行九宫缩放，这样就可以借助这个特性为ps制作一个插件了。具体的思路是来自一个同事的ui工具，我们只是需要拖放九宫图，然后在插件
Cocos Creator3.8 项目实战（四）巧用九宫格图像拉伸
w风雨无阻w的专栏
10-04 4252
通常ui 资源都是图片，也是最占资源量的资源类型，游戏中的ui 资源还是人机交互的最重要的部分，因此质量要求都非常高，通常都是使用rgb32位真彩色，这就导致资源量比较大。通常ui资源在打包时，都会以图集的形式展现，在加载到内存的时候，是整块加载，如果ui 没优化好，则会增大内存的开销。将鼠标移动到分割线上，可以看到光标形状改变了，这时候就可以按下并拖拽鼠标来更改分割线的位置。我们可以看到，图像周围有一圈绿色的线条，表示当前九宫格分割线的位置。可以鼠标滚轮放大图片预览试图，便于精准调整边框位置。
安卓开发（2）-创建可拉伸的九宫格位图
梦否
02-18 926
预备知识 如果您在改变尺寸的视图中将位图用作背景，您会注意到，当视图根据屏幕尺寸或视图中的内容增大或缩小时，Android 会缩放您的图片。这通常会导致明显的模糊或其他缩放失真。解决方案是使用九宫格位图，这种特殊格式的 PNG 文件会指示哪些区域可以拉伸，哪些区域不可以拉伸。 九宫格位图基本上是一种标准的 PNG 文件，只不过带有额外的 1 像素边框，指示应拉伸哪些像素（并且带有 .9.png 扩...
Qt九宫格，只拉伸背景的指定位置单位像素，做到背景长度适配
有钱有钱超有钱
01-17 1241
实现背景图只拉伸固定位置（223px）其他不规则区域不进行拉伸。 在网上查了很多资料，根据网上的方法自己重写了一份 QPixmap AnnouncementItem::NinePatch(QString& picName, int lHorzSplit/*左边格子宽度*/, int rHorzSplit/*右边格子宽度*/, int iVertSplit/*边框格子高度*/, i...
unity3d UGUI九宫格纹理拉伸的使用
热门推荐
RainsSoft
01-07 5万+
本篇文章我们来学习下在unity new ui即UGUI九宫格纹理拉伸的使用，不论是游戏中的UI，还是应用中的UI，纹理九宫格拉伸都是必不可少的，因为采用这种拉伸方式，可以最大化的节省纹理资源，任意缩放图片还能保持一个不错的效果，因此在手游和app中用的较多。我们先学习下九宫格拉伸的原理先，如下图所示！ 1.原理 把纹理用4条线分割成9部分（如上图），通过观察可以发现，5是最规则的形状（矩
unity shader 实现九宫格拉伸效果
weixin_48578500的博客
01-16 1745
【代码】unity shader 实现九宫格拉伸效果。
Unity中的UI九宫格
张不无的博客
03-21 5660
9宫格
UIImageView如何以九宫格方式拉伸一个图片
tangaowen的专栏
03-04 9207
UIImageView如何以九宫格方式拉伸一个图片         首先要创建一个普通的UIImage,然后用UIImage的 stretchbleImageWithLeftCapWidth:  topCapHeight方法，指定左右两边保持不拉伸的范围，和上下两边保持不拉伸的范围，创建出一个新的UIImage.        然后将这个UIImage设置到需要的UIImageView
PS制作九宫格图片
腻害
06-09 2806
（撰写时间：2019年6月6号星期四 作者：邱锡纶） 九宫格图片在网上比较流行的一种图片模式，所以我在课余时间也去摸索了一下这种九宫格图片的制作步骤，下面来和你们分享一下九宫格图片的制造方法吧！下面先看看成品图吧！ 1、 第一步：首先把想要制作的图片素材导进PS中，然后点击裁剪工具，取1:1的数值，然后选取合适的位置双击...
unity 九宫格图片拉伸
03-10
### 解决 Unity 中九宫格图片拉伸问题 在 Unity 中处理 9-Slice Sprite 的时候，如果遇到图像拉伸失真问题，通常是因为 Slice 设置不正确或者是纹理导入设置不当。为了确保 NineSliceSprite 正常工作并防止变形，可以采取以下措施： #### 纹理导入设置 确认 Texture Type 被设为 `Sprite (2D and UI)` 并启用 `Read/Write Enabled` 属性[^1]。 ```csharp // C#脚本用于动态调整Texture Importer Settings using UnityEngine; using UnityEditor; public class FixNineSliceDistortion : AssetPostprocessor { void OnPreprocessTexture() { var importer = assetImporter as TextureImporter; if(importer != null){ importer.textureType = TextureImporterType.Sprite; importer.isReadable = true; // 启用读写权限 } } } ``` #### 切片配置 对于精灵图，在 Inspector 面板中的 Sprite Mode 应该被设定成 `Multiple` 或者 `Single` 取决于具体需求；接着通过编辑器手动定义四条切线来指定可缩放区域与不可变角部区域的位置。 - 使用内置工具或自定义 Editor Script 来精确控制这些边界。 #### 物件属性微调 有时即使设置了正确的 slice 值仍然会看到轻微扭曲现象，这可能是由于 RectTransform 组件上的锚点和轴心位置引起的。尝试修改 Pivot 和 Anchors 参数直到获得满意的效果为止。 #### 示例代码片段展示如何创建一个简单的Editor扩展帮助更方便地管理9-sliced sprites: ```csharp // 创建一个简易的Editor窗口辅助用户更好地操作9-slicing参数 using UnityEngine; using UnityEditor; public class NineSliceHelperWindow : EditorWindow { private Vector4 m_Slices; [MenuItem("Tools/Nine Slice Helper")] public static void ShowWindow(){ GetWindow<NineSliceHelperWindow>("9-Slice Helper"); } void OnGUI(){ GUILayout.Label("Set Slices", EditorStyles.boldLabel); m_Slices = EditorGUILayout.Vector4Field("Slices:",m_Slices); if(GUILayout.Button("Apply")){ foreach(var obj in Selection.objects){ if(obj is GameObject go && go.GetComponent<SpriteRenderer>()!=null){ var sr = go.GetComponent<SpriteRenderer>(); sr.sprite.border = new RectOffset( Mathf.RoundToInt(m_Slices.x), Mathf.RoundToInt(m_Slices.y), Mathf.RoundToInt(m_Slices.z), Mathf.RoundToInt(m_Slices.w)); } } } } } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值