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

mcguide/16-美术/50-贴图规范及九宫格使用.md

@@ -0,0 +1,79 @@
+---
+front: 
+hard: 入门
+time: 分钟
+---
+
+# MC九宫格使用与贴图规范
+
+## 九宫格使用
+
+#### 写在前面——我们的九宫格与微软的九宫格
+
+在微软支持九宫格拉伸之前我们自己实现了一套九宫格拉伸的工具，但是该工具无法适配微软原生的自动UI scale缩放。微软会根据当前屏幕尺寸对UI整体进行缩放，我们的九宫格是在ui缩放后再对图片进行九宫格处理，而微软原生的是先对图片进行九宫格处理后再进行UI缩放。这就会导致贴图资源四边如果只有1像素细节的话，用我们的九宫格拉伸后四边会特别细，而微软的就比较正常，如下图所示，左侧为我们的九宫格，右侧为微软原版九宫格：
+
+![image-20200717171754856](./picture/brief_intro/37.png)
+
+同时，由于计算精度问题，我们自己实现的九宫格会出现计算精度有问题导致四角显示异常，如下图所示：
+
+![image-20200717171940352](./picture/brief_intro/38.png)
+
+因此我建议使用微软原版九宫格来对图片进行拉伸，后文贴图规范均建立在使用微软原版九宫格基础上。
+
+#### 九宫格拉伸原理
+
+![九宫格示例](./picture/brief_intro/54.png)
+
+如上图所示，九宫格是将一张图分为9个部分，其中四边的间距对应微软原版九宫格的参数依次是[left, top, right, bottom]，具体json中的配置如下图所示：
+
+![Snipaste_2020-07-17_17-30-33](./picture/brief_intro/50.png)
+
+在拉伸过程中，1、3、7、9四个部分是不会被拉伸的，2、8部分被横向拉伸，4、6部分被纵向拉伸，中间5部分则是横纵向均被拉伸。因此美术同学在出图的时候应该避免将一些不能被拉伸的元素放在2468区域，比如对话框的尖角，如下图所示：
+
+![image-20200717174006784](./picture/brief_intro/39.png)
+
+美术在设计的时候尽量将这个尖角放偏移一下，避免放在正中间，这样程序可以通过代码设置将其置于1379这四个不被拉伸的区域，效果如下：
+
+![image-20200717174310839](./picture/brief_intro/40.png)
+
+
+
+#### 一些可以使用九宫格的示例
+
+原图：![image-20200717174616531](./picture/brief_intro/42.png)
+
+拉伸后效果：
+
+![image-20200717174555134](./picture/brief_intro/41.png)
+
+
+
+原图：![image-20200717174658841](./picture/brief_intro/43.png)
+
+拉伸后效果：![image-20200717174720608](./picture/brief_intro/44.png)
+
+注意：此处的“寻找原木”的背景是深灰，实际上是直接通过直接设置一张空白图片的颜色得到的，也就是说这种可以通过拼接实现的是可以不用出纯色资源的。
+
+
+
+原图：![image-20200717175114075](./picture/brief_intro/45.png)
+
+拉伸后效果：![image-20200717175137928](./picture/brief_intro/46.png)
+
+
+
+## 贴图规范及建议
+- 大部分贴图首次显示是需要进行异步加载的，程序可以通过指定预先加载贴图避免一些贴图闪烁问题，详见<a href="../20-玩法开发/18-性能优化/内存优化.html#贴图预加载" rel="noopenner"> 贴图预加载 </a>。
+
+- 纯色资源可以不出，程序可以通过在对应的位置参考下图配置json实现纯色资源，其中color色号和alpha透明度直接设置即可，如有需要还可以设置对应的size和offset：
+
+![image-20200717191545192](./picture/brief_intro/49.png)
+
+- 贴图的长宽建议选择2的幂次方，比如2、4、8、16、32、64、128、256、512。例：如果一张图完成之后大小为30x130，建议重新切成32x128，不然在实际中该贴图将会占用32x256的内存空间，造成额外的浪费。
+- **建议模型特效贴图最大不要超过128x128，超过该尺寸的贴图数量应作严格限制，一张256x256的图占用内存等于4张128x128，而一张1024x1024的图就等于64张128x128了**。
+- 可以通过九宫格拉伸的如果四边规整，切图建议16x16即可；如果四边细节不规则，如上述例子的第一个，那么保证四边比例的基础上中间拉伸区域5可以只留1像素。——理论上四边规整也可以只留中间1像素进行拉伸，不过因8x8和16x16差距不大不做更严格要求。
+- 除此之外，下图中的图片可作参考：张望、绕圈、高兴等动作图标出128x128、成长指引树中的图标出64x64、返回按钮下方的眼睛按钮出32x32，在手机上均能表现出非常好的效果，无需更大的图标。原版物品贴图大小均为16x16，看起来就是像素风的，美术同学可以参考这几个尺寸出图标。
+
+![image-20200717190805115](./picture/brief_intro/47.png)
+
+![image-20200717190817414](./picture/brief_intro/48.png)