斜方向的九宫格图片拉伸
先上最终效果图:
阅读本文需要的基础知识:网格,顶点属性
一般九宫格拉伸的原理
在ui制作过程中,九宫格技术通常被用来拉伸一些某个维度上没有明显变化区域。比如按钮和一些界面的底图。它的原理是把一个大的矩形分为9个矩形,保留四个角的矩形不变,上下矩形在横向上无变化作横向拉伸,左右矩形在竖向上无变化作竖向拉伸,中间矩形在横向和竖向都无变化作两个方向拉伸。
在unity中,需要设置精灵图片的border来指定拉伸区域。这种做法的好处就是节省图片资源,用更小分辨率的图去完成更大分辨率的图该做的事。
斜方向九宫格拉伸
最近接到了个需求:slg中点击地块会有选中格子的示意,现在需要从点击一个地块变为点击25个地块。然而实际情况是地块示意图是不能被正常水平和垂直拉伸的。。只能被斜方向拉伸。。为了这么一个东西去扩大贴图是极其浪费资源的,于是我想是否能通过斜方向拉伸九宫格来实现。百度谷歌了一圈似乎也没有翻到有人造这个轮子,只好自己写了!
首先分析斜方向拉伸的网格分布: