feat:上传mcguide-开发指南部份

2024-12-23 10:57:59 +08:00
parent 7292166c88
commit 0dc59fa4f0
3297 changed files with 63375 additions and 0 deletions
--- a/mcguide/18-界面与交互/11-图片缩放适配与九宫切图.md
+++ b/mcguide/18-界面与交互/11-图片缩放适配与九宫切图.md
@@ -0,0 +1,89 @@
+
+
+# 图片缩放适配与九宫切图
+
+## 图片缩放和宽高比
+
+下图是我们需要的示例图片，你可以在浏览器中下载，或者点击这个[地址](https://g79.gdl.netease.com/goods_print02.png)下载，并导入编辑器中备用。
+
+这是一张很小的图片，我的世界中使用的图片通常来说也比较小。
+
+![goods_print02](./images/goods_print02.png)
+
+这张图片的尺寸为16*16，将鼠标悬停在资源管理器的图片文件上，你可以在弹出的悬浮提示中看到这一数据。
+
+![image-20220503165503742](./images/image-20220503165503742.png)
+
+我们放大这张图片，可以看到这张图片具体每个色块的像素信息，这张图片被分成3个部分，外环的直径为4个像素，中环的直径为2个像素，内部正方形的边长为4。
+
+![image-20220503165420877](./images/image-20220503165420877.png)
+
+我们在编辑器中放置一张图片，并将其使用贴图指定为这张图片，然后在预览窗中对这张图片进行拉伸，可以看到，默认状态下，这张图片只是有一个方向（水平或竖直）抵住了红色外框，显示的图片并没有变形。
+
+![image-20220503165820320](./images/image-20220503165820320.png)
+
+在图片适配中关闭“保持宽高比”后，这张图片就可以填满整个红色外框了。
+
+![image-20220503170036447](./images/image-20220503170036447.png)
+
+如果我们希望这张图片尽可能的放大，不惜裁剪掉一部分，可以选择填充，填充的示例效果如下，可以看到，图片的在水平方向填满了红框，竖直方向则被红框裁剪了。
+
+> “填充”的优先级高于“保持宽高比”，一旦勾选填充之后，就不会再保持宽高比。
+
+![image-20220503170223236](./images/image-20220503170223236.png)
+
+## 九宫切图
+
+可以看到，在不确定图片的长宽比的情况下，无论上面的哪一种适配方法，都不够美观。能不能有一种适配方法实现下面这种既填满红框，又能在视觉上保持宽高比的效果呢？这就需要用到九宫切图了。
+
+<img src="./images/image-20220503171249499.png" alt="image-20220503171249499" style="zoom:200%;" />
+
+### 原理
+
+游戏制作中经常会有上述这样的需求，我们拿到下面这张图片时，会发现我们可以将下面这张图按照下图青色线的方法切成9份（即九宫切图），其中
+
+- 1是不可以进行缩放的，会导致长宽比发生变化
+- 2可以进行任意的水平缩放
+- 3可以进行任意的竖直缩放
+- 4可以进行任意的缩放（反正是纯色了，怎么缩放都可以）
+
+九宫切图后
+
+- 如果我们想要水平拉伸这张图片，那么1,3两种图块是不会动的，只有2,4会水平拉伸
+- 如果我们想要竖直拉伸这张图片，那么1,2两种图块是不会动的，只有3,4会竖直拉伸
+
+![image-20220503171750076](./images/image-20220503171750076.png)
+
+九宫切图的数据就是这4条青色的线与图片4边的距离，可以看到
+
+- 左侧竖直的青色线距离左边的距离为7
+- 右侧竖直的青色线距离右边的距离为7
+- 上方竖直的青色线距离上边的距离为7
+- 下方竖直的青色线距离下边的距离为7
+
+![image-20220503171139862](./images/image-20220503171139862.png)
+
+### 原版九宫
+
+我们调整“原版九宫”的数值，即可在这个图片控件上完成九宫适配。
+
+![image-20220503173256500](./images/image-20220503173256500.png)
+
+### 新版九宫
+
+除了原版九宫外，还有另外一种九宫规则（新版九宫）。
+
+我们按照下图的方式，开启旧版九宫，并同样按照四边都是7的方式进行九宫切割，可以看到不同的结果。
+
+![image-20220503173544931](./images/image-20220503173544931.png)
+
+这是因为两种九宫对屏幕分辨率的适配方法不同。
+
+- 原版九宫适配的是缩放后的实际游戏分辨率，参考[界面适配预览和方法](./20-界面适配预览和方法.md)。
+- 新版九宫适配的是屏幕中的游戏分辨率
+
+你可以根据自己的使用场景使用不同的九宫方法。
+
+![image-20220503174114459](./images/image-20220503174114459.png)
+
+更多信息可以参考[MC九宫格使用与贴图规范](../16-美术/50-贴图规范及九宫格使用.md)。