# 图片缩放适配与九宫切图

# 图片缩放和宽高比

下图是我们需要的示例图片,你可以在浏览器中下载,或者点击这个地址 (opens new window)下载,并导入编辑器中备用。

这是一张很小的图片,我的世界中使用的图片通常来说也比较小。

goods_print02

这张图片的尺寸为16*16,将鼠标悬停在资源管理器的图片文件上,你可以在弹出的悬浮提示中看到这一数据。

image-20220503165503742

我们放大这张图片,可以看到这张图片具体每个色块的像素信息,这张图片被分成3个部分,外环的直径为4个像素,中环的直径为2个像素,内部正方形的边长为4。

image-20220503165420877

我们在编辑器中放置一张图片,并将其使用贴图指定为这张图片,然后在预览窗中对这张图片进行拉伸,可以看到,默认状态下,这张图片只是有一个方向(水平或竖直)抵住了红色外框,显示的图片并没有变形。

image-20220503165820320

在图片适配中关闭“保持宽高比”后,这张图片就可以填满整个红色外框了。

image-20220503170036447

如果我们希望这张图片尽可能的放大,不惜裁剪掉一部分,可以选择填充,填充的示例效果如下,可以看到,图片的在水平方向填满了红框,竖直方向则被红框裁剪了。

“填充”的优先级高于“保持宽高比”,一旦勾选填充之后,就不会再保持宽高比。

image-20220503170223236

# 九宫切图

可以看到,在不确定图片的长宽比的情况下,无论上面的哪一种适配方法,都不够美观。能不能有一种适配方法实现下面这种既填满红框,又能在视觉上保持宽高比的效果呢?这就需要用到九宫切图了。

image-20220503171249499

# 原理

游戏制作中经常会有上述这样的需求,我们拿到下面这张图片时,会发现我们可以将下面这张图按照下图青色线的方法切成9份(即九宫切图),其中

  • 1是不可以进行缩放的,会导致长宽比发生变化
  • 2可以进行任意的水平缩放
  • 3可以进行任意的竖直缩放
  • 4可以进行任意的缩放(反正是纯色了,怎么缩放都可以)

九宫切图后

  • 如果我们想要水平拉伸这张图片,那么1,3两种图块是不会动的,只有2,4会水平拉伸
  • 如果我们想要竖直拉伸这张图片,那么1,2两种图块是不会动的,只有3,4会竖直拉伸

image-20220503171750076

九宫切图的数据就是这4条青色的线与图片4边的距离,可以看到

  • 左侧竖直的青色线距离左边的距离为7
  • 右侧竖直的青色线距离右边的距离为7
  • 上方竖直的青色线距离上边的距离为7
  • 下方竖直的青色线距离下边的距离为7

image-20220503171139862

# 原版九宫

我们调整“原版九宫”的数值,即可在这个图片控件上完成九宫适配。

image-20220503173256500

# 新版九宫

除了原版九宫外,还有另外一种九宫规则(新版九宫)。

我们按照下图的方式,开启旧版九宫,并同样按照四边都是7的方式进行九宫切割,可以看到不同的结果。

image-20220503173544931

这是因为两种九宫对屏幕分辨率的适配方法不同。

  • 原版九宫适配的是缩放后的实际游戏分辨率,参考界面适配预览和方法
  • 新版九宫适配的是屏幕中的游戏分辨率

你可以根据自己的使用场景使用不同的九宫方法。

image-20220503174114459

更多信息可以参考MC九宫格使用与贴图规范