ugui 九宫格和图片切割

很多时候美术给的背景图很小，需要程序进行放大（但要保持边角不模糊），这时候九宫格就有用了~~~

例如下图放大10倍，如果不用九宫格图会变得很模糊(你可以试下吧transform 的scale都设为10，效果太美。。。。。)

不扯淡了，开搞

一、九宫格
九宫格的主要目的是处理图片拉伸效果，我们知道图片一旦被拉伸，它就会出现形变、模糊等问题，但是，有的图片它的某一些部分又是允许被拉伸的。例如，一个UI背景框，它的中间部分几乎是一个纯色，允许被拉伸(纯色被拉伸不会发生质量问题)，但是，边缘的4个角可能有一些特殊花纹或者倒角不允许被任意拉伸，这个时候就可以使用九宫格，来使4个角不进行拉伸放大，只让中间部分进行拉伸放大，达到将一个小框拉大成一个大背景框，既节省了资源，又不会降低图片质量。
原理：

把纹理用4条线分割成9部分（如上图），通过观察可以发现，5是最规则的形状（矩形），其次是2,6,8,4（矩形，但是和四个角有公共边），最后是四个角1,3,9,7（圆角矩形）
规则的图形在拉伸之后的效果是比较好的，如果是不规则的图形，则会在拉伸之后变形！

根据上图做拉伸制定规则：
（1）保证四个角1,3,9,7不做任何拉伸
（2）与四个角有公共边的四个矩形2,6,8,4做单向拉伸，即保证与四个角的公共边不拉伸，例如2,8只进行横向拉伸，4,6只进行纵向拉伸
（3）中间部分5做双向拉伸，即横向，纵向同时拉伸
unity 中设置九宫格：
1.选中图片，在Inspector面板里将Texture Type改为Sprite，点击Sprite Editor按钮，通过拖动绿色的点来设置九宫格大小。
2.将Image组件的Image Type改为Sliced。

二：图片切割
图片切割使用场景有：1.美术将多张图打包到同一张图里，例如UI都放在一张图里。2.做类型地砖的时候，美术给的图是9x9的大图，程序的单元格却是1x1的，这时候就需要把图片切成九张大小一样图片并在程序中拼接成一张大图。3.UGUI要做帧动画时。
unity 中设置：
1.选中图片，在Inspector面板里将Texture Type改为Sprite或Advance。
2.图片模式sprite修改为multiple模式。
3.进入图片编辑器，点击左上角的Slice按钮，其中的Type有三种，第一种时自动的，就是不切割。
第二种是按单元格切割就是每个单元格大小一样，如图：

通过对单元格的name的命名规则，我们可以再程序中拼接出整张大图，例如切成三行三列的图，可以命名为行数_列数或者行数*总的列数+当前列数，
取值的时候通过便利行和列就可以取到并拼接成正张图。
第三种，按行或列的count切割，适用于美术的小的ui或者帧动画，如图

4.每个切割的小图可以单独设置九宫格进行拉伸。
5.使用的时候需要将image的imageType设置成Slice

转载于:https://www.cnblogs.com/wang-jin-fu/p/8277774.html

ugui 九宫格和图片切割相关推荐

python123九宫格输入法_【带你成为pyq最靓的仔】朋友圈九宫格（一）之图片切割篇...
前言这是一篇"蓄谋已久"的文章,为什么这么说呢? 记得那时我刚从健身房出来,当我在公交车站台等车的时候,无聊刷起了朋友圈,看到朋友圈里有好友在发九宫格的动态,就觉得好洋气呀,于是 ...
unity3d UGUI九宫格纹理拉伸的使用
本篇文章我们来学习下在unity new ui即UGUI九宫格纹理拉伸的使用,不论是游戏中的UI,还是应用中的UI,纹理九宫格拉伸都是必不可少的,因为采用这种拉伸方式,可以最大化的节省纹理资源,任意缩 ...
WPF纯手工两步打造图片切割工具（一）
一.功能说明 1.四种图片切割方式:缩放:指定宽高(可能变形).缩放:指定宽(高按比例).缩放:指定高(宽按比例).裁减:指定宽高. 2.批量图片切割. 3.目标存储区同名文件处理:直接覆盖.重新命名 ...
自定义相册、九宫格显示图片
一自定义相册结合Glide图片库,加载显示本地图片,并可以实现单选,多选,预览功能.特点加载最近新增图片,GridView显示分文件夹选择图片支持单选,多选(最大9张) 支持大图预览以库的 ...
Android中将一个图片切割成多个图片[转]
有种场景,我们想将一个图片切割成多个图片.比如我们在开发一个拼图的游戏,就首先要对图片进行切割. 以下是封装好的两个类,可以实现图片的切割.仅供参考和学习. 一个是ImagePiece类,此类保存了一 ...
WPF纯手工两步打造图片切割工具（二）
上一节已经完成了功能需求和界面布局,这一节就说明一下编码. 本文分两部分: (一)界面布局及数据初始化 (二)编码实现 1. 既然要求支持批量处理,那么一次就应该允许选择多个文件,在上一节的最后已经说 ...
JavaScript 图片切割效果（带拖放、缩放效果）
JavaScript 图片切割效果(带拖放.缩放效果) 转载于:https://www.cnblogs.com/xiaoluozi513/archive/2008/11/14/1333882.html
ShoeBox一个超级好用的图片切割工具
ShoeBox一个超级好用的图片切割工具两款图片切割工具 ShoeBox:http://renderhjs.net/shoebox/ BigShear:https://www.fancynode.c ...
用于图片切割，图片压缩，缩略图的生成(转到一个好东西）
用于图片切割,图片压缩,缩略图的生成 imageCut#region imageCut /**//// <summary> /// 图片切割函数 /// </ ...
一个非常好用的图片切割工具（c# winform开发）
本人业余时间开发了一个图片切割工具,非常好用,也很灵活! 特别对大型图片切割,更能体现出该软件的优势! 功能说明可以设定切割的高度和宽度.切割线可以上下拖动,可以增加一个切割区域,可设定某个区域不参 ...

ugui 九宫格和图片切割

ugui 九宫格和图片切割相关推荐

最新文章

热门文章